Now that we know a bit more about JavaScript modules, we're ready to dive into the client-side architecture of the Sagan application.

Note: If you haven't read previous blog posts on the Sagan project, you should know that this is the Spring reference application that powers this blog and everything else at spring.io. Previous posts showed out to run this application, how we do zero downtime deployments and also how we upgraded Sagan to use the latest JDK8 features.

In this post, I want to walk through the basics of the client-side architecture in the Sagan application:

1. Why is the client application in a separate sagan-client project module?
2. How is it linked with the sagan-site module?
3. What are npm, bower and gulp?
4. How do those tools work together to make the client application?

To illustrate all that, the following screencast will show you not only how to add a new bower dependency and code a small new feature (keyboard shortcuts on the website!), but also how to enhance the gulp build (optimize images!).

!{iframe src="//player.vimeo.com/video/92961329" width="640"  height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen}{/iframe}

Note: See the show notes for links to sites mentioned in the screencast. You can also watch this screencast in HD on vimeo.

Interested in npm, bower and others? Spring.io has a nice article for that: "understanding JavaScript package managers".

SpringOne 2GX 2014 is around the corner

This year's SpringOne will be in Dallas, TX on September 8-11 and super early bird registration is now open. We hope to see you there!