Angular 2.0

First Looks

Jim Cook, Transcordia LLC

jcook@transcordia.com

AngularJS Timeline

AngularJS Timeline

  • Miško Hevery and Adam Abrons write AngularJS at BratTech

'09

  • Miško working at Google
  • BratTech dies, but open sources AngularJS

'10

AngularJS Timeline

'09

'10

'11

'12

1.0

  • Angular 1.0 released in June, 2012
  • Reusable components
  • HTML templating
  • Data binding
  • Testable

AngularJS Timeline

'09

'10

'11

'12

'13

  • Angular 1.2 released in November, 2013
  • Animation support
  • trackBy and controllerAs
  • Modular routing
  • Dropped IE 6 & 7

1.0

1.2

AngularJS Timeline

'09

'10

'11

'12

'13

'14

  • Angular 1.3 released October, 2014
  • Performance improvements
  • One-time bindings
  • Improved docs
  • Dropped IE 8
  • Angular 2.0 announced in March, 2014
  • Design documents

1.0

1.2

1.3

2.0

AngularJS Timeline

'09

'10

'11

'12

'13

'14

'15

'16

  • Angular 1.4 released May, 2015
  • Better animations
  • i18n
  • bindToController
  • Parser performance
  • Angular 2.0 alpha released in February, 2015
  • angular.io

1.0

1.2

1.3

1.4

2.0

2.0 A

AngularJS Timeline

'09

'10

'11

'12

'13

'14

'15

'16

  • Angular 2.0 developer preview released May, 2015

1.0

1.2

1.3

1.4

2.0

2.0 A

2.0 DP

Developer Roadmap 1 → 2

  • "Rename AngularJS to AngularES"
  • "they are damaging and killing their own framework with 2.0"
  • "Angular just lost a TON of professional interest"
  • "Angular 2.0 == Perl 6"

Reddit Anger

Developer Roadmap 1 → 2

  • "Rename AngularJS to AngularES"
  • "they are damaging and killing their own framework with 2.0"
  • "Angular just lost a TON of professional interest"
  • "Angular 2.0 == Perl 6"
  • "Angular is dead to me"

Reddit Anger

Developer Roadmap 1 → 2

  • Open source realities
    • Technology changes
    • ES6 is the biggest change to JavaScript ever
    • Web components are now here
  • Open source options
    • Keep everyone in the dark until 2.0 is done
    • Let everyone see the sausage being made

Developer Roadmap 1 → 2

  • Mixing Angular 1 & 2 is supported
    • Components (Controller + Template + Detector)
    • Services
    • Dependency Injection (Scope digest vs. Object.observe)
  • Not supported
    • Non-component directives
    • 2-way data binding

Developer Roadmap 1 → 2

  • Developer assistance?
  • ng-upgrade
    • Dependency injection and interoperability
      ​(single root vs. hierarchical)
    • Directives vs. Components
      (using wrappers)
    • Change detection
    • Currently only a Google Doc
      ​

Why Angular 2?

  • Stronger focus on mobile environments
  • ECMAScript 6
  • Evergreen browsers
  • Performance
  • Modularity
  • Simpler to learn and develop

State of JavaScript

ES5

100% of browsers

State of JavaScript

ES5

ES6

0% of browsers

State of JavaScript

ES5

ES6

ECMAScript 7

Specification in progress

State of JavaScript

TypeScript

ES5

ES6

ECMAScript 7

Superscript of ES5 and ES6

Which language will you use?

TypeScript

45%

ES5
9%

ES6
33%

Other < 2%

  • Dart
  • Closure
  • Coffeescript

?

11%

What is Transpiling?

Write this

Becomes this

Transpilation Drawbacks

  • Additional step in the build process
  • More complicated debugging (mapping files)
  • Lowest common denominator development
  • Managing type definition files (Typescript)

Can I skip transpilation?

  • Write enterprise software in ES5
  • Wait for the browsers to catch up

Transpilers

  • Traceur (Google)
    • ES7 + Types + Annotations
  • Babel (Formerly 6to5)
    • Popular, JSX support, readable, no runtime (kinda)
  • TypeScript (Microsoft - Anders Hejlsberg)
    • ES7 + Types + Annotations (v1.5)
    • Full ES6 support in upcoming 2.0 release
  • Closure Compiler (Google)
    • Some support for ES6 to ES3
    • Supports types using JSDoc

Which Transpiler?

?

Which Transpiler?

  • Angular team has committed to TypeScript
  • That doesn't mean you have to
  • But
    • Static type checking at compile (or in most IDEs)
    • IDE refactoring and code completion
    • Enterprise-class language support

New Build Tools

  • SystemJS
    • Universal module loader
    • Loads any module format (ES6, AMD, CommonJS, Globals)
    • Reads from NPM and GitHub repositories
    • Flat dependency management
    • Can create bundles with minification

New Build Tools

JSPM - JavaScript Package Manager

System.import('npm:lodash').then(function(_) {
    console.log(_.max([1, 2, 3, 4]));
});

System.import('jquery').then(function($) {
    $(window).scrollTop(0);
});

New Build Tools

Typescript transpiler

npm install -g typescript@^1.5.0
tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts

Questions?

Presentation http://bit.ly/ng2-sample

Code https://github.com/ng-columbus/ng-sample

Made with Slides.com