Ingredients of a great front end application with AngularJs
In the past 12 months the popularity of AngularJs has exploded, which clearly hints that applications are being built following the multi-tire architecture. A good back-end API with a front end consumer application surely makes a capable duo that can handle any requirements of the application. If you have a multi-tire architecture then you don't need to rebuild the back-end for serving data for other applications like a mobile application or any data requirement.
 |
| Popularity of Angular JS, source Google Trends |
Why Front-end applications?
Front end applications with java-script run on the user's browser, when the data interaction is moved to models and services supported by a framework it makes the front end application very powerful. This also enables the concept of Single Page Application (SPA). Below are the 7 ingredients of a great front end application with Angularjs being the main ingredient.AngularJs
AngularJs is a "Superheroic JavaScript MVW Framework" by Google which lets the developers abstract out the model view controller on front end (user browser) level. Its amazing features include two way data binding, routing and directives to name some. Angular with its features and flexibility might be your safest bet if you want to develop a front end application consuming data from a back-end API service.YeoMan
Yeoman is a scaffolding which provides generators that can speed up the application development process. It supports Angular, when combined with other great applications it helps you build your front end application with ease. It does the heavy lifting for you so that you can focus on the code better. As mentioned:Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.
Bower
Bower is a package manager for javascript projects. Composer is the main dependency and package manger for PHP, similarly bower is the dependency manager for Javascript. It has a lot of packages which can be used for your project and managing the dependencies is matter of just one bower.json file on your project. You just do a bower install and all the dependencies are downloaded for you.
GruntJs
Grunt is a javascript task runner, it can automate tasks so that you can focus more on the development. In relation with AngularJs it can be used to start the server, check file changes to compile with the new changes and perform auto reload, check for JSLint, run your tests etc. You can configure the tasks in a grunt file and utilize its powerful API to create your own tasks.
Jade
Now you have a good separation of your front and and you are coding some javascript model, services and controller. How would you manage the view/template part of the application. There are many options like Handelbars, Swig (similar to Twig in php) but using Jade might be easier. Jade is like a compressed version of HTML which makes writing templates much easier and faster. Jade files can be compiled to output as HTML with a grunt task.
Compass CSS
Compass is a open source CSS authoring framework that use Sass to make writing CSS logical, easy and painless. It is like making CSS programmable with variables, nesting styles and other features which helps on making CSS code reusable and maintainable. Easy to install and easier to get started with Compass will change the way you write CSS.
JasmineJs
Now you have great java-script code a well managed front end with Jade and Compass, how about some testing. JasmineJs is a behavior driven development framework for testing javascirpt code. Test suites describe the tests and match the output. You can even use a custom solution with other libraries like PhantomJs. Still Jasmine can be a very good option for testing AngularJs application.
Conclusion
Using the right tools and technology to do your job will always benefit you, it will save time and effort maximizing productivity. A good mix and match of all the ingredients would yield desired results, I hope these you will use these tools when you think of developing a new front end application.