SPA Development
- Friday, October 3rd, 2014
Starting a new web app development project could be challenging without a solid initial blueprint, moreover a large selection of frameworks and tooling available does not make the job easier.
Based on one of my recent project experience here is a nice collection of tools and technologies that fit well together and make an agile development team quite productive in a short period of time. Note, this straw-man blueprint focuses on pure front-end development aspects and does not include data and business service layers
Lay down foundation
- Consolidate on a single dynamic functional language. JavaScript is a very sound choice in this case. Reducing number of languages in the application stack makes it significantly easier to manage complexity and eases learning curve.
- Setup application scaffolding. Yeoman – this framework is essential for jumpstarting new web app projects, and it comes with some of the tools and frameworks out-of-the-box (grunt, angular, bower, etc.)
- Use dependency management tools
- Bower – allows to manage various component packages (downloads from repo based on configured bower.json file, somewhat redundant to npm, but could be used in conjunction, since it structures dependency version tree differently )
- Npm – node package manager, more powerful than bower, repository contains some overlapping packages, but it uses different approach to version management and version conflict resolution
Don’t re-invent the wheel – use a build system
- Grunt – JS based task runner (name and configure your tasks in JSON format and run it from command line similar to ANT). Use it to automate day-to-day development tasks and project build steps
Choose proven web framework
- AngularJS MVC – powerful and sufficiently mature JS based MVC web framework with rich functionality and separation of concerns via MVC pattern. Makes front end JS code cleanly partitioned into directives, services and controllers, leaving views uncluttered. Big plus on improved JS testability and scope management
Make your CSS manageable and maintainable –
Use CSS preprocessors and frameworks
- SASS – leverage CSS3 mix-ins, CSS re-usability, etc.
- Compass ( uses SASS) – all of the above plus vast style and re-usable pattern library
- Start with Twitter Bootstrap for responsive design, provides tremendous productivity boost and could be widely customized
Establish Test Coverage Expectations (unit and integration/functional level)
- Jasmine – JS API enabling BDD style test specification format.
- Karma – JS unit test framework comes with number of nice test coverage report plugins that could be easily integrated with CI tools, such as Jenkins.
- Protractor – end-to-end test framework designed with AngularJS in mind and it is built on top of WebDriverJS, what more can you ask?
- Selenium WebDriver (JS based) – very powerful browser testing automation API on a budget and it has JavaScript based.
Apply Code Consistency Tools: Code Linters
- Jshint – when configured and plugged into build lifecycle will ensure consistency of your JS code style and could potentially help avoid bugs
- CSSLint – linting tool for CSS files to ensure consistency and brevity
