SPA, Scalable Application & AngularJS

Transcript

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 • Base Library (jQuery, Zepto.js etc.)
7. SA ARCHITECTURE • Application Core (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 • Base Library ✴ jQuery or AngularJS’s own jqLite implementation • Application Core ✴ AngularJS itself • Sandbox ✴ Scope passed to the controller • Module ✴ AngularJS’s controller
12. KEY FEATURES OF ANGULARJS • Declarative HTML approach • Easy Data-Binding • Reusable Components • MVC/MVVM Design Pattern • Unit Testing • Routing • Templating
13. KEY FEATURES OF ANGULARJS • Modules • Services • Expressions • Filters • Directives • Form Validation • $scope, $http, $routeProvider
14. LET’S ANGULARJS !!
15. Q & A