Slide 1

Slide 1 text

From Bleeding Edge to World Class: One Year with Angular Nara Kasbergen (@xiehan) | Full-stack Developer | NPR + =

Slide 2

Slide 2 text

One year with Angular = One year with Angular v2.0

Slide 3

Slide 3 text

"It's just Angular." - Igor Minar

Slide 4

Slide 4 text

A brief timeline

Slide 5

Slide 5 text

2009 Miško Hevery and Adam Abrons start GetAngular at Brat Tech LLC, then release it as an open-source library

Slide 6

Slide 6 text

October 20, 2010 The first public release (by the new AngularJS team at Google) of AngularJS, at v0.9.0

Slide 7

Slide 7 text

June 14, 2012 AngularJS v1.0.0 is released

Slide 8

Slide 8 text

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"

Slide 9

Slide 9 text

November 8, 2013 AngularJS v1.2.0 is finally released

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

*cue Internet freak-out*

Slide 12

Slide 12 text

July 2013 November 2013 March 2014

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

*the Internet explodes*

Slide 15

Slide 15 text

February 10, 2015 The first alpha release of Angular 2 is quietly published on npm

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

*the Internet calms down a little bit*

Slide 19

Slide 19 text

December 15, 2015 Angular 2 reaches beta

Slide 20

Slide 20 text

May 6, 2016 Angular 2 reaches RC (Release Candidate)

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

September 14, 2016 Angular v2.0.0 final is released

Slide 23

Slide 23 text

September 27, 2016 At AngularConnect in London, the Angular team announces that all future Angular releases will follow semantic versioning

Slide 24

Slide 24 text

2 0 0 . . Major . Minor . Patch Incompatible Changes Backwards Compatible Bug Fixes semver.org

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Source: blog.angularjs.org

Slide 27

Slide 27 text

March 23, 2017 Angular v4.0.0 final is released

Slide 28

Slide 28 text

"It's just Angular." - Igor Minar

Slide 29

Slide 29 text

The framework you already love, powered by the latest technology.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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"

Slide 33

Slide 33 text

Those reasons are still valid reasons to use and love a framework.

Slide 34

Slide 34 text

Angular v2.0+ still reflects those same values. All that changed is the underlying tech.

Slide 35

Slide 35 text

One Year with Angular at NPR

Slide 36

Slide 36 text

http://npr.one

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Our team proposed using Angular for the rebuild of the webapp.

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

January 31, 2016 I push the first (private) commit for the rebuild of NPR One for the Web (http://one.npr.org)

Slide 43

Slide 43 text

March 31, 2016 NPR Digital Media launches its newly-rebuilt NPR One for the Web (http://one.npr.org), built with Angular

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

100% unit test coverage

Slide 46

Slide 46 text

end-to-end tests using Protractor (protractortest.org)

Slide 47

Slide 47 text

but how did we do it??

Slide 48

Slide 48 text

Analysis of an Angular app ● Components ● Injectables ● ngModules

Slide 49

Slide 49 text

An example of a basic Angular component import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `

{{hero.name}} details!

`, }) class AppComponent { constructor() { this.title = 'Tour of Heroes'; this.hero = { name: 'Windstorm' }; } }

Slide 50

Slide 50 text

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 { }

Slide 51

Slide 51 text

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); } }

Slide 52

Slide 52 text

● 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!

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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?

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

AoT compilation is TypeScript-only

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

try the angular-cli first

Slide 61

Slide 61 text

RxJS

Slide 62

Slide 62 text

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.

Slide 63

Slide 63 text

Benefit of RxJS: The async pipe import { Component } from '@angular/core'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'hero-message', template: `

Message: {{ message$ | async }}

`, }) class HeroAsyncMessageComponent { message$: Observable; }

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Our project structure /explore/ explore.actions.js explore.component.js explore.module.js explore.reducer.js explore.service.js explore.scss

Slide 66

Slide 66 text

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, }); ... } };

Slide 67

Slide 67 text

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 }, }; }, ... };

Slide 68

Slide 68 text

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 {}

Slide 69

Slide 69 text

The Store in action in a component import { Store } from '@ngrx/store'; @Component({ selector: 'my-app', template: `

Current Count: {{ counter$ | async }}

`, }) class MyAppComponent { constructor(store: Store) { this.counter$ = store.select('counter'); } }

Slide 70

Slide 70 text

Remember our hypothesis?

Slide 71

Slide 71 text

● React and Angular share many of the same core ideas ● There is a place in every team's stack for both

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Miscellaneous tips & tricks

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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)

Slide 76

Slide 76 text

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)

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

In Conclusion

Slide 80

Slide 80 text

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:

Slide 81

Slide 81 text

Thank you! [email protected] @xiehan https://npr.codes n.pr/tech-jobs Any questions?