Angular 2.0

First Looks

Jim Cook, Transcordia LLC

jcook@transcordia.com

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

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