WebApp Scaffolding: Yeoman, AngularJS and more

Continuing from what we had yesterday, I was still exploring other options on what framework we could use. After exploring CakePHP a little more, I finally decided that it might not be that suitable for our project after all.

Jon and I also wanted to start out with some UI design first, so I thought I should quickly create a workflow for doing the layouts. We chose to use Bootstrap as our front-end UI framework. Having tried GruntJS and Bower before, I was thinking of how to best scaffold the application. That was when I found Yeoman.

Yeoman is a scaffolding tool that helps you get started on webapps. It has a community-maintained list of generators that scaffolds a new application by pulling in relevant Grunt tasks and Bower dependencies that you might need for your build.

Out of the 720 community-maintained generators for Yeoman, I decided to give the angular-fullstack generator a try. Besides being the most popular generator, it also seemed to fit our needs. This generator generates a webapp built on AngularJS and comes with an Express server. It also comes with useful build tools that simplify development.

Most of the day was spent figuring out how that app is scaffolded. The hardest part was figuring how everything worked together. After spending some time learning the basics of AngularJS, I tried to modify the app to authenticate with NUS OpenID. For that, I gave Passport another try.

Spent the next few hours trying to get that working. Passport uses what they call ‘strategies’ to log users in to different sites. I ended up writing one to connect to NUS OpenID based on code from another OpenID strategy. Although it was just a few lines of modification, it took me quite awhile to get it working. I also published this ‘strategy’ as an npm package (passport-nus-openid) so that the webbapp can use it as a dependency.

The last few hours of the day also helped me better understand the model-view-controller architecture that AngularJS is based on.

Although Jon and I stay at different ends of the island, Google Hangouts was really useful in helping us to work together. Using screen sharing and voice chat, it was almost as good as meeting up physically to work on the project.