[enterjs] From Bleeding Edge to World Class: One Year with Angular

On March 31, 2016, NPR launched a production web app built with Angular 2, which was still in beta at the time; the final, stable release of v2.0 went live on September 14.
As early adopters, we faced challenges ranging from convincing internal stakeholders to put our fates in the hands of a pre-release framework, to collaborating with a different team that was using React, to making technical design decisions while navigating API changes and incomplete documentation.
Come learn what we love the most about Angular, the best resources for getting started, what we would do differently if we were to start all over again, and why we think you might want to consider using it for your next project.

Transcript

1. From Bleeding Edge to World Class: One Year with Angular Nara Kasbergen (@xiehan) | Full-stack Developer | NPR + =
2. One year with Angular = One year with Angular v2.0
3. "It's just Angular." - Igor Minar
4. A brief timeline
5. 2009 Miško Hevery and Adam Abrons start GetAngular at Brat Tech LLC, then release it as an open-source library
6. October 20, 2010 The first public release (by the new AngularJS team at Google) of AngularJS, at v0.9.0
7. June 14, 2012 AngularJS v1.0.0 is released
8. July 26, 2012 The AngularJS team announces that they are making significant changes for v1.2.0, "targeting release in early to mid September 2012"
9. November 8, 2013 AngularJS v1.2.0 is finally released
10. March 18, 2014 The AngularJS team announces on their blog that work has begun on Angular 2.0, which is a complete, from-the-ground-up redesign
11. *cue Internet freak-out*
12. July 2013 November 2013 March 2014
13. October 2014 At the ngEurope conference, the Angular team announces that the Angular 2.0 API will not be backwards-compatible with AngularJS 1.x
14. *the Internet explodes*
15. February 10, 2015 The first alpha release of Angular 2 is quietly published on npm
16. March 5, 2015 At ngConf (in Vegas), the Angular team announces that the upcoming AngularJS v1.5.x releases will focus on helping apps migrate to Angular 2
17. October 6, 2015 The Angular team walks back previous comments that Angular 2 would not support older browsers like IE 9, Android 4.1 and iOS 7
18. *the Internet calms down a little bit*
19. December 15, 2015 Angular 2 reaches beta
20. May 6, 2016 Angular 2 reaches RC (Release Candidate)
21. June 9, 2016 The Angular team announces the alpha release of v3.0 of the independently-packaged router in response to feedback on v2.0 of the router
22. September 14, 2016 Angular v2.0.0 final is released
23. September 27, 2016 At AngularConnect in London, the Angular team announces that all future Angular releases will follow semantic versioning
24. 2 0 0 . . Major . Minor . Patch Incompatible Changes Backwards Compatible Bug Fixes semver.org
25. December 9, 2016 At the NG-BE conference in Belgium, Igor Minar announces that the next Angular version will be 4 (not 3) because of the router being at v3 already
26. Source: blog.angularjs.org
27. March 23, 2017 Angular v4.0.0 final is released
28. "It's just Angular." - Igor Minar
29. The framework you already love, powered by the latest technology.
30. Remember that AngularJS started in 2009 • jQuery was still considered to be the gold standard of frontend development • Smart phone adoption in the US was still at 25%; mobile browser technology was in its infancy • ES5 was released in December 2009 • Web components were not even on the radar yet
31. The core changes in v2.0+ at a high level • Angular now uses a strategy similar to a virtual DOM to render HTML, drastically improving how it does change detection under the hood • Controllers and Directives have been replaced by Components, intended to be compatible with the web components of the not-so-distant future
32. Why people used, and loved, AngularJS • It made frontend testing much easier and more accessible than any framework ever had before • It was touted as an all-in-one framework that gave you all the fundamental features that you need • It scaled well to large, enterprise-grade projects • Google "seal of confidence"
33. Those reasons are still valid reasons to use and love a framework.
34. Angular v2.0+ still reflects those same values. All that changed is the underlying tech.
35. One Year with Angular at NPR
36. http://npr.one
39. Our team proposed using Angular for the rebuild of the webapp.
40. Why we picked Angular • We had the rare opportunity to start a project from scratch, which opened up our options • The "all-in-one" nature fit well with our project as a self-contained unit, separate from NPR.org • As a team with no embedded QA engineer, achieving a high level of test coverage was critical
41. Why we picked Angular, continued • We don't believe in "one framework to rule them all" • All our research led us to conclude that React and Angular share many of the same core ideas • We had a hypothesis that there is a place in every team's stack for both React and Angular, and this was one of our only opportunities to test it
42. January 31, 2016 I push the first (private) commit for the rebuild of NPR One for the Web (http://one.npr.org)
43. March 31, 2016 NPR Digital Media launches its newly-rebuilt NPR One for the Web (http://one.npr.org), built with Angular
45. 100% unit test coverage
46. end-to-end tests using Protractor (protractortest.org)
47. but how did we do it??
48. Analysis of an Angular app • Components • Injectables • ngModules
49. An example of a basic Angular component import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> `, }) class AppComponent { constructor() { this.title = 'Tour of Heroes'; this.hero = { name: 'Windstorm' }; } }
50. An example of an ngModule import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) class AppModule { }
51. An example of an Injectable import { Injectable } from '@angular/core'; const HEROES = [ {id: 11, name: 'Mr. Nice'}, {id: 12, name: 'Narco'}, {id: 13, name: 'Bombasto'}, {id: 14, name: 'Celeritas'}, {id: 15, name: 'Magneta'}, ]; @Injectable() class HeroService { getHeroes() { return Promise.resolve(HEROES); } }
52. • Injectables basically are the replacement for the concept of "services" in AngularJS • Services were so widely used in the AngularJS community that you'll likely see the community continue to use that nomenclature for Injectables • Use them to improve your app's unit-testability Services are dead, long live services!
53. Structuring your project • Continue to follow AngularJS community standard of grouping code in folders by feature, not by function ◦ DON'T: put all your components in one folder, services in another, etc. ◦ DO: put your ProfileComponent and ProfileService in a profile folder, for example
54. Structuring your project, cont. • Introduction of ngModule helps enforce this pattern • A common Angular convention is to include the type of class in the filename, eg. profile.component.js profile.service.js profile.module.js
55. You have a few decisions to make 1. Which flavor of JavaScript will you use? (ES5, ES6, or TypeScript) 2. Which build system will you use? (System.js, jspm, Webpack, or Browserify) 3. Will you attempt to use RxJS or not? 4. How will you manage application state?
56. We picked ES6 over TypeScript • Nobody else in our department uses TypeScript • We wanted to make sure developers outside of our team can read and understand our code, and feel empowered to participate in code reviews • At the time, there were no features that were only available to TypeScript users
57. AoT compilation is TypeScript-only
58. Should you use ES5, ES6 or TS with Angular? • Use ES5 only if you've got legacy code to migrate or there are other clear infrastructure barriers • Use TypeScript if you want to take advantage of the newest features like AoT or want the best docs • Use ES6 if you're working with other teams using ES6, and collaboration and/or code-sharing are key
59. We chose Webpack as our build system • Tried System.js, but at the time, documentation was quite poor (it has improved since then) • Struggled particularly with how to bring in 3rd party modules with System.js • No prior experience with jspm or Browserify • The team using React had experience using Webpack
60. try the angular-cli first
61. RxJS
62. We said yes to RxJS • Figured this was our best opportunity to try it out and see why the Angular team recommends it. • If you've never seen it, it will hurt your brain. A lot. • It's so powerful, it's worth it to try to use it. Google and Stack Overflow are your friends if you're stuck. • ...but you can live without it if you're just starting out.
63. Benefit of RxJS: The async pipe import { Component } from '@angular/core'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'hero-message', template: ` <p>Message: {{ message$ | async }}</p> `, }) class HeroAsyncMessageComponent { message$: Observable<string>; }
64. We picked ngrx/store for state management • We wanted to try out RxJS • In many ways, Redux duplicates functionality that is already provided by RxJS • Therefore, we wanted Redux-like functionality that harnesses RxJS, and @ngrx/store fit the bill: github.com/ngrx/store
65. Our project structure /explore/ explore.actions.js explore.component.js explore.module.js explore.reducer.js explore.service.js explore.scss
66. Example reducer import { Reducer, Action } from '@ngrx/store'; import ActionTypes from '../app/action-types.constants'; const explore: Reducer = (state = initialState, action: Action) => { switch (action.type) { case ActionTypes.RECOMMENDATIONS_UPDATING: return Object.assign({}, state, { isLoading: true, }); ... } };
67. Example actions import { Action } from '@ngrx/store'; import ActionTypes from '../app/action-types.constants'; const ExploreActions = { load(channel = 'recommended'): Action { return { type: ActionTypes.RECOMMENDATIONS_UPDATING, payload: { channel }, }; }, ... };
68. Putting it all together with the Store import { NgModule } from '@angular/core' import { StoreModule } from '@ngrx/store'; import explore from './explore/explore.reducer'; import nav from './nav/nav.reducer'; import player from './player/player.reducer'; @NgModule({ imports: [..., StoreModule.forRoot({ explore, nav, player }) ] }) class AppModule {}
69. The Store in action in a component import { Store } from '@ngrx/store'; @Component({ selector: 'my-app', template: ` <div>Current Count: {{ counter$ | async }}</div> `, }) class MyAppComponent { constructor(store: Store) { this.counter$ = store.select('counter'); } }
70. Remember our hypothesis?
71. • React and Angular share many of the same core ideas • There is a place in every team's stack for both
72. Our hypothesis was correct • Thanks in large part to our decisions to use ES6 and a Redux-like state management plugin, the React developers have been able to participate in all of our code reviews • Angular worked well for us because it is all-in-one and the superior testing infrastructure was critical
73. Miscellaneous tips & tricks
74. Resources that helped us get off the ground • Victor Savkin's blog: vsavkin.com • "The introduction to Reactive Programming you've been missing" by André Staltz (GitHub gist) • github.com/AngularClass/angular2-webpack-starter • angularclass.github.io/awesome-angular
75. Plugins • AngularJS plugins are generally incompatible with Angular versions 2 and up • Many popular UI plugins like Material, Bootstrap, etc. are still in alpha/beta release stage • Most available plugins only have documentation in TypeScript (another reason to make the switch)
76. Testing • Default stack: Jasmine + Karma for unit tests, Jasmine + Protractor for end-to-end tests ◦ … but you can also use Mocha, Cucumber, etc. • ng convention: put unit tests next to source code • Protractor also now is focusing development on TypeScript (yet another reason to make the switch)
77. NativeScript & React Native • You can use Angular to write apps that compile down into native iOS and Android (and soon Universal Windows) projects. So cool! • You can't just use a regular Angular webapp; among other things, you must rewrite all your templates • React Native for Angular is not well-maintained
78. Not ready to upgrade from AngularJS yet? • At least start using AngularJS v1.5+ and start writing your code in components • Switch from Gulp or Grunt to Webpack or Browserify • When you're ready, the Upgrade Guide is great: angular.io/docs/ts/latest/guide/upgrade.html
79. In Conclusion
80. One year with Angular at NPR Angular: ng2 + ES6: TypeScript: System.js: Webpack: angular-cli: Dependency Injection: Unit Testing: Protractor: RxJS: @ngrx/store: The Angular team:
81. Thank you! nara@nara.codes @xiehan https://npr.codes n.pr/tech-jobs Any questions?