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