Developing

non-trivial

AngularJS

Application


TunJS - March 2015

By Nader Toukabri

Program


  • Non-trivial JavaScript Application
    • Package Manager
    • Module System
    • Style Preprocessor
    • Build Tools
    • Testing
      • Unit Test
      • End-to-end

Program


  • Simple AngularJS Application

Program


  • Non-trivial AngularJS Application
    • inherits Non-trivial JavaScript Application
    • Routing
    • Eventing
    • Integrating non-Angular World
    • ...

Non-trivial JavaScript Application


an app with multiple view containers and dealing with a bit more than CRUD API

Non-trivial JavaScript Application

Package Manager


Motivation

  • a better way for fetching dependencies in an organized and automated way

Non-trivial JavaScript Application

Package Manager


Solution

  • Bower
  • NPM
  • ...

Non-trivial JavaScript Application

Module System


Motivation

  • manage internal modules dependencies and loading

Non-trivial JavaScript Application

Module System


Solution

  • AMD / RequireJS
  • CommonJS / Browserify

Non-trivial JavaScript Application

Style Preprocessor


Motivation

  • CSS doesn't scale

Non-trivial JavaScript Application

Style Preprocessor


Solution

  • Less
  • Sass

Non-trivial JavaScript Application

Build Tools


Motivation

  • automation is the key for productivity

Non-trivial JavaScript Application

Build Tools


Solution

  • Grunt
  • Gulp

Non-trivial JavaScript Application

Testing


Motivation

  • to validate your code
  • to secure your codebase from regression
  • ...

Non-trivial JavaScript Application

Testing


Solution

  • Jasmine / Mocha
  • Karma
  • Webdrive

Non-trivial AngularJS Application


Forget everything you ever learned and just make it work!

Non-trivial AngularJS Application

Routing


Motivation

  • you need to have a reliable routing system

Non-trivial AngularJS Application

Routing


Solution

  • ui-router

Non-trivial AngularJS Application

Eventing


Motivation

  • you need an event system

Non-trivial AngularJS Application

Eventing


Solution

  • use only $rootScope.$emit and $rootScope.$on

Non-trivial AngularJS Application

Integrating non-Angular World


Motivation

  • Integration. Period.

Non-trivial AngularJS Application

Integrating non-Angular World


Solution

  • scope.$apply

Libraries


References

THE END