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

It may be 2017, but it hasn't become any easier to choose the right JavaScript framework for your project or organization. Although there are a few nascent contenders like Vue.js and Cycle.js, the "framework wars" of 2017 mainly pit Facebook's juggernaut React against Google's powerhouse Angular, which faced controversy after a decision to completely rewrite the framework after version 1. But at NPR, we decided to take a chance on Angular. On March 31st, 2016, we launched a production webapp built with Angular version 2, which was still in beta at the time; the final, stable release of v2.0 went live on September 14th. As early adopters, we faced challenges that ranged from convincing internal stakeholders to put our fates in the hands of a pre-release framework, to collaborating with a different team at NPR that was using React, to making forward-thinking technical design decisions while navigating API changes and incomplete documentation. One year after launch, 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 virtual DOM to render HTML • The usage of a virtual DOM also impacts how Angular 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
38. Our team proposed using Angular for the rebuild of the webapp.
39. 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 resource, achieving a high level of test coverage was critical
40. 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
41. January 31, 2016 I push the first (private) commit for the rebuild of NPR One for the Web (http://one.npr.org)
42. March 31, 2016 NPR Digital Media launches its newly-rebuilt NPR One for the Web (http://one.npr.org), built with Angular
44. 100% unit test coverage
45. end-to-end tests using Protractor (protractortest.org)
46. but how did we do it??
47. Analysis of an Angular app • Components • Injectables • ngModules
48. 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' }; } }
49. 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 { }
50. 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); } }
51. • 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!
52. 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
53. 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
54. 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?
55. 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 • Didn't realize that in order to use ES6, we had to bring in many additional Babel plugins
56. AoT compilation is TypeScript-only
57. 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 other teams using ES6, and collaboration and/or code-sharing are key
58. 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
59. try the angular-cli first
60. RxJS
61. 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.
62. 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>; }
63. 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
64. Our project structure /explore/ explore.actions.js explore.component.js explore.module.js explore.reducer.js explore.service.js explore.scss
65. 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, }); ... } };
66. 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 }, }; }, ... };
67. 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 {}
68. 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'); } }
69. Remember our hypothesis?
70. • React and Angular share many of the same core ideas • There is a place in every team's stack for both
71. 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
72. Miscellaneous tips & tricks
73. 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-angular2
74. 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)
75. 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)
76. 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
77. 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
78. In Conclusion
79. 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:
80. Thank you! nara@nara.codes @xiehan https://npr.codes Any questions?