Take a Deep Breath: AngularJS 2.0

Transcript

1. SunnyCloud Take a Deep Breath:
 AngularJS 2.0 Sunny Gleason Boston AngularJS Meetup October 7, 2015 https://goo.gl/aQm8YM
2. SunnyCloud var self = this; • Sunny Gleason, All-Stack Engineer • Previous: Amazon (web services), Ning, Startup(1..N) • Current: SunnyCloud • Short Story: A-Team you can call on to build (and rescue) cloud services, web & mobile applications • Longer Story: Network of developers aiming to change the way businesses build applications
3. SunnyCloud what’s this all about? • much hand-wringing out there re: AngularJS 2.0 • for good reason, it looks scary • actually, it is scary • *but* the changes are well-thought-out • so, let’s recap what we know in AngularJS 1.x, take a deep breath and get ready for AngularJS 2.0
4. SunnyCloud AngularJS 1.x • AngularJS started out in 2009, entered 1.x in 2012 • The world looks like “Directives” • The “Application” is like a mammoth directive • Application has Routes, Controllers, Templates • Everything lives in a complex hierarchy of Scopes • Controllers manage the scope that gets sent to
 the view (template)
5. SunnyCloud AngularJS 1.x Directives • A directive attaches state & behavior to a DOM element/attribute • Extremely powerful & concise way to create an application within HTML DOM • Bridge older-style JS (jQuery and other UI components) to newer component style • Directives are *really really* hard to understand: syntax, transclusion, parent scopes, event model http://www.pseudobry.com/building-large-apps-with-angular-js/
6. SunnyCloud AngularJS 1.x Application/Module • The module collects config, dependencies, services, controllers, directives, routes, and more • The $rootScope of all evil : all scopes chain from $rootScope • Depends on all declarations being in-scope (loaded into JS) http://weblogs.asp.net/dwahlin/using-an-angularjs-factory-to-interact-with-a-restful-service
7. SunnyCloud AngularJS 1.x Routing & History • Provides mapping of URL fragments to Controllers • Provides event hooks for
 URL changes • Provides consistent functionality across browsers as pushState() gains traction • Nested routes & views are *really* hard! https://egghead.io/lessons/angularjs-directive-for-route-handling
8. SunnyCloud AngularJS Templates • AngularJS provides {{property}} syntax for substitution • Makes it so that most of the view stays in the HTML DOM • Allows for nice, dynamically-loaded template fragments (as well as template strings if desired) • Managing templates is tricky because the controller scope creeps into the view (data, functions)
9. SunnyCloud AngularJS 1.x Controllers • Controllers are set up the scope for the view • Contain data + operations + logic • AngularJS 1.x style guides advocate slim controllers, reusable logic and long-lived data in Services • ControllerAs syntax makes scope much more explicit • Managing state & communication between controllers is *really* tricky
10. SunnyCloud AngularJS 1.x Services • Services are injectable objects that have data and operations • In AngularJS 1.x, Services are singletons • IMO, AngularJS messed up with Factories vs. Providers vs. Services
11. SunnyCloud AngularJS 1.x List of Woes • Minification woes: declaring names of params and params • Events and event model • Learning curve for directives (and everything else) • Digest cycle: $scope.$apply(), $timeout, $watch • Modularity • Expressions vs. objects vs. values in core directives (ng-disabled, ng-if, ng-src, ng-class) • Server-side generation / SEO optimization
12. SunnyCloud What happened since 2009? • Huge explosion of JavaScript frameworks • Evolution of Backbone.js, Ember.js, Knockout, React/Flux, Polymer • HTML5 & evergreen browsers became the norm • IE market share went from 60% to 19%, Chrome from 3% to 48%, Firefox from 31% to 16%, Mobile from 1% to 32% • “JS Framework Trainer/Consultant” became a lucrative career choice
13. SunnyCloud Good stuff from Backbone.js • Models & Collections • Simple & easy templating from underscore.js - focus on just data, no logic • Routing & history • Event model
14. SunnyCloud Good Stuff from Knockout.js • Models & computed properties • Data binding to DOM elements • Event model • Components & Custom Elements
15. SunnyCloud Good stuff from Ember.js • Web Components! Emerging W3C standard • Stronger templating - ability to have logic in templates • Routing/History • Events - publish/subscribe • Models, Data Binding, & computed properties • Pre-populating deep views within single-page apps • Addons & Project model w/ Ember CLI
16. SunnyCloud Good stuff from Polymer • Ground-up implementation of Web Components from first principles • Strong encapsulation using Services • Growing library of Material Design elements (immediately useful on mobile) • Extensive supply of Polyfills • Shadow DOM
17. SunnyCloud Good stuff from React/Flux • React: strong focus on view-only • Popularizing immutable data - performance advantages (for example, with d3) • Rejection of external templates, templates-in- DOM • Isomorphic (seamless server-side) JavaScript • Virtual DOM & render() • Components, Models & Mixins • Flux: unidirectional information flow, dispatcher/ stores/views
18. SunnyCloud Good stuff from AngularJS 1.x users’ style guides* • Use ControllerAs syntax for cleaner view bindings • “Declarations up top” in controllers, directives • “Thin” controllers • Move controller logic into services • Return promises from services when appropriate (allows chaining) • Manually identify dependencies (don’t use the AngularJS minification syntax) 1: https://github.com/toddmotto/angularjs-styleguide 2: https://github.com/johnpapa/angular-styleguide
19. SunnyCloud Take that deep breath…
20. SunnyCloud What is AngularJS 2.0? • Components components components • Modified binding syntax • TypeScript/ES6 • New Router • Tooling: Gulp, WebStorm • Dependency Injection • Change detection/Zones • Shadow DOM/Templating • Directives (more explicit inclusion)
21. SunnyCloud TypeScript • Strongly-typed superset of JS • Support for Decorators
 (Annotations) • Support for type metadata https://angular.io/docs/js/latest/quickstart.html
22. SunnyCloud New Binding Syntax • Parentheses for events • Star-notation for ng directives • Square brackets for properties • Work in progress… http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in https://angular.io/docs/js/latest/guide/user-input.html
23. SunnyCloud Gulp • Command-line build automation • Live reload • Minification, ES5/ES6/ TypeScript compilation • Similar to grunt, except code vs. configuration
24. SunnyCloud What’s gone in AngularJS 2.0 • Controllers • Directive Definition Objects • $scope & inheritance • angular.module • jqLite http://teropa.info/blog/2014/11/01/why-i-think-angular-2-will-still-be-angular.html
25. SunnyCloud Angular 1.x - Not Dead Yet! • Version 1.4.x series is stable • Version 1.5.0 in beta • Still a large installed & developer base • Still a major target for frameworks like Ionic, plus other PaaS services like PubNub and Firebase
26. SunnyCloud TODO: Survive & thrive w/ AngularJS 2.0 • Start thinking in a more component-oriented way • Learn TypeScript, adopt the new tooling for command-line & IDE’s • Accept the new syntax around bindings & events that allow IDE support • Be patient as new components arrive (similar to how directives proliferated in 1.x) • Adjust to life without controllers, scope inheritance, $apply • Embrace functional programming & immutable data
27. SunnyCloud Recap: Looking at AngularJS 2.0 • AngularJS 2.0 is shaping up to be a much cleaner version of AngularJS 1.x - the concepts are much crisper • For AngularJS 1.x developers, there will be many, many annoyances in the migration from 1.x to 2.x • The end result will be cleaner code, more well-encapsulated and more performant • AngularJS 2.0 is more similar to framework peers (Ember, Polymer) than 1.x was to its peers • It’s possible to embrace style guidelines now to help make the migration easier • A draft 2.0 migration upgrade guide is available as well
28. SunnyCloud THANK YOU!