UI Technology Stack

Table of Contents

Tech stack (major components)

• - Typed superset of JS that compiles to JS
• - Javascript MVC framework from Google
• - Responsive UI Framework
• - Web server and build tool support (you probably don't need to know much about node itself for this project)
• - Scaffolding tool to quickly generate stubs of new Angular components
• - Javascript Task Runner (you probably don't need to know much about grunt itself for this project)
• - Testing framework

  TypeScript

About typescript:

• TypeScript originates from the need to develop large-scale JavaScript applications.
• TypeScript is a strict superset of JavaScript, and add features such as type checking at compile time, classes, interfaces, and modules.
• TypeScript supports the current ES6 proposal for class-based object-oriented programming

Training resources:

• - A very good primer
• - Quick crash course on structural typing
• and - Requiring other modules in TS
• - If you can't find the answer from Google, this is the last resort

Javascript

Training resources:

AngularJS

About Angular:

• Has localization baked-in:   (JeffB: built-in localization is really lacking unfortunately)
• Created & maintained by Google
• RAD environment
• Mature offering with lots of docs, examples, and training
• Has known performance issues with large lists, however, there are tuning and work arounds:  
• Plays nice with TypeScript:    AND  
• customizable to the DOM level: 

Training Resources:

• - The official site.
• - Free CodeSchool course, complete with slightly weird song. A good starting point if you're an absolute beginner.
• - Angular Best Practices (1hr). For some reason the video starts at 5min in. Just back up to the beginning.
• egghead provides several short and sweet AngularJS lessons.  For example, Testing Underscores
• - "The Ultimate" tutorial
• http://www.airpair.com/angularjs/posts/top-10-mistakes-angularjs-developers-make
• http://sravi-kiran.blogspot.com/2014/09/UnitTestingConfigAndRunBlocksInAngularJs.html - How to unit tests config / run blocks
• http://ionicframework.com/blog/angularjs-console/ - Debugging AngularJS Apps from the Console
• http://www.bennadel.com/blog/2729-don-t-blindly-isolate-all-the-scopes-in-angularjs-directives.htm
• - XSS prevention techniques in angular
• http://blog-it.hypoport.de/2013/11/06/passing-functions-to-angularjs-directives/
• - angular cheat sheet
   
  Useful Links:

• - A community driven style guide for AngularJS applications. This covers project layout and naming conventions (which may be less useful since we are defining our own) but also covers a number of best practices in order to increase testability and maintainability.
• - A discussion of performance concerns in AngularJS and some rules for dealing with those concerns. As with nearly all discussions related to a specific technology and performance it needs to be taken with a grain of salt (the half life of performance recommendations always seems to be incredibly small) but there is still some useful stuff in there.
   

  Yeoman

   
• How to use our custom Yeoman generator - It is strongly recommended to use Yeoman to create new components (controllers, directives, services, etc.). Our generator will also generate corresponding unit test files.