SPA, Scalable Application & AngularJS

SPA, Scalable Application & AngularJS

• 1.
  SPA, SCALABLE APPLICATION &ANGULARJS Mitch Chen
• 2.
  WHAT IS SPA?
• 3.
  SINGLE PAGE APPLICATION
• 4.
  SPA ECOSYSTEM CATEGORIES
• 5.
  SCALABLE APPLICATION
• 6.
  SA ARCHITECTURE • BaseLibrary (jQuery, Zepto.js etc.)
• 7.
  SA ARCHITECTURE • ApplicationCore (aka Application Controller) ✴ Manage Modules ✴ Handle Errors ✴ Enable Inter-Module Communication ✴ Extensible ✴ Can use Base Library
• 8.
  SA ARCHITECTURE • Sandbox ✴Facade for modules above the core (Security Guard) ✴ Interaction between modules via messages (events) ✴ Ensures a consistent interface
• 9.
  SA ARCHITECTURE • Modules ✴Don’t know about each other, only about sandbox ✴ Call only own methods or sandbox methods ✴ DOM access only inside own box (But don’t use Base Library) ✴ No access to non-native global objects, don't create global objects ✴ Ask sandbox for anything you need, don't reference other modules ✴ Preferably no access to base library, use pure JS
• 11.
  ANGULARJS ARCHITECTURE • BaseLibrary ✴ jQuery or AngularJS’s own jqLite implementation • Application Core ✴ AngularJS itself • Sandbox ✴ Scope passed to the controller • Module ✴ AngularJS’s controller
• 12.
  KEY FEATURES OFANGULARJS • Declarative HTML approach • Easy Data-Binding • Reusable Components • MVC/MVVM Design Pattern • UnitTesting • Routing • Templating
• 13.
  KEY FEATURES OFANGULARJS • Modules • Services • Expressions • Filters • Directives • FormValidation • $scope, $http, $routeProvider
• 14.
  LET’S ANGULARJS !!
• 15.
  Q & A