Skip to content

Instantly share code, notes, and snippets.

@timkindberg

timkindberg/angular2.md

Last active February 10, 2016 01:56
Show Gist options
  • Save timkindberg/3fd98509e9146be44fae to your computer and use it in GitHub Desktop.
Save timkindberg/3fd98509e9146be44fae to your computer and use it in GitHub Desktop.
Download ZIP
Angular 2
Raw
angular2.md

Angular 2

A balance of power and simplicity.

Developed by True Stewards:

  • Angular 2 is a careful, methodical reinvention of a mature, comprehensive framework.
  • Transparent and take community feedback and contributions.
  • Google
  • Performance driven development.
  • Embraces web standards and web-component-friendly.
  • Think of Angular as an accelerator for everything an open source framework should be
  • Dogfood:
    • Google AdWords (Google's largest revenue app, 100s devs, millions LOC), Google Fiber, Google Analytics, Google Double Click, Google Search Trend / History, Google Cloud Platform, Youtube Video Manager, Chromecast User Interface, GreenTea (70 devs, 300k LOC, 500 components)
  • Other large app usage:
    • Microsoft Office Online
    • Open Table

Community:

  • Stack Overflow 5.5k questions (ng1 130k, react 40k, flux 4.1k)
  • Same community as Angular 1 (Huge)

Performance and Size:

  • Speeds will be incredible (speed is NOT a problem). 
  • Improvements at Load:
    • Angular Universal for server-side rendering
    • Instant rendering
  • Improvements at Compile: 
    • Compiles once (ng1 compiled a lot during run time). 
    • Will compile during build step offline
    • 3x faster app startup
    • Eliminates needing the largest portion of ng2 to be bundled
  • Improvements at Render:
    • Ultrafast change detection (2.5x faster than ng1)
    • VM inlining
    • RX & Immutable
    • Memory Efficient
  • Improvements at Re-renders:
    • View caching: Virtual Scroll, Repeaters & Routes (4.2x faster than ng1)

Web Worker:

  • Took a really hard thing (web workers) and made it easier to use.
  • Faster, doesn't block render thread, more responsive, more battery efficient
  • Testing without browser (if desired)
  • Saves actual money (more processing on client saves money on server, costs more to transmit a byte than to compute it)

Size:

  • Modular (even DI is its own library, di.js)
  • Tree shaking
  • Currently down to 163k, goal of a 10k "Hello World".
  • Good for large and small projects
  • Intelligent minification during pre-compilation

Templates

  • HTML based, completely declarative

  • Can be externalized (templateUrl) if needed

  • Templates are pre-compiled because they are easier to statically analyze than virtual dom. They are then converted to something very similar to a virtual DOM that is blazing fast.

  • Quote from Angular Dev:

    The problem with having a complete programming language within your template language (i.e. React) is that you lose the ability to statically analyse exactly how it can change. The only way to know for certain the structure of the HTML that a component’s render function will generate is to execute the code. In contrast, by being more restrictive, Angular 2’s template syntax makes it clear to tools exactly how the resultant HTML can change. This lets the Angular template compiler generate extremely fast DOM update code, ahead of time, without the need for runtime performance hacks like the virtual DOM.

  • Template transforms: Use AST to create 3rd-party transform optimizations

    • e.g. Falcor could auto-infer the data needed in a template without using the falcor syntax of model.get()

  • Renderer replacement for custom optimizations, e.g. Renderer.toJSON() used in Angular Universal

Developer Consistency:

  • More opinionated framework = low decision fatigue = more coincidental consistency
  • Framework changes/additions will be backwards compatible (except v2.0 ;)
  • DI: It's how you configure everything
  • Built to be extended

Easier More Enforced Architecture:

  • Components, easy to make components that work together, e.g. tabs & tab
  • Directives (unique to angular)
  • Clear component APIs, @Input and @Output
  • Enforced uni-directional data-flow on components
  • 'Frameworky' stuff happens in metadata, business logic happens in es6 class.
  • Isolated CSS styles 
  • Bind Observables and Promises directly to the view, no need to .then or .subscribe

Out of the Box (but optional):

  • Rxjs
  • Http (built on rx)
  • Routing
    • Built in async routes for JIT loading of full sections
    • lazy load components
    • Flexible
    • Nested, Parallel, Modals, etc
  • Form Builder / Validator

Static Typing:

  • Built to take full advantage of TypeScript
  • Resonate with Java developers (e.g. classes and strict typing)
  • Fun Fact: Visual Studio Code is written in TypeScript
  • Simple to jump in, but powerful enough to do anything that a modern app will need.

Transition:

  • Angular 1 knowledge does transfer to an extent. Digital knows Angular 1. Use v1 metaphors to learn v2.
  • Use ngUpgrade to upgrade existing ng1 apps (best upgrade path compared to Elm or React)
  • Use ngForward to prepare for upgrade

Methaphors for Transitioning:

  • Components are 'E' directives
  • Directives are 'A' directives
  • The component class is the 'controller' with 'controllerAs'
  • Raw es6 class for a 'service'
  • No more $scope.$apply(), No more 'infinite digest' errors.
  • No more $timeout or $interval
  • ngIf is like ng-if
  • ngFor is like ng-repeat
  • Same old {{bindings}}
  • Dependency Injection
  • Bind to any [property] and react to any (event)

Testing:

  • Jasmine
  • Karma (for browser-based)
  • Jasmine utilities provided
  • DI for easy mocking on the fly
  • Protractor: full end-2-end testing solution
  • Benchpress & Web Tracing Framework: performance testing

Tooling:

  • Batarangle: Chrome dev tool plugin
  • IDE support: built with it in mind
  • Angular CLI tool
    • Easy scaffold, develop, test, build, deploy
    • live reload development with full page error (like Elm)
  • Any tooling available in React can be available to Angular 2, even hot loading

Mobile and Native:

  • Ionic 2: the successor to the most popular mobile JS framework
  • NativeScript
  • Material Design, Angular Universal, Web Workers

Kroger Preparedness:

  • Approved for the Enterprise, No politics
  • Training efforts
  • ClickList is written in Angular 2 syntax for faster migration
  • ngForward for a better polyfill experience

Completeness:

  • Smaller Libraries:
    • 1 thing done well
    • But, less insight into how their thing might be able to be improved while trying to work with other things
    • Even linux has to end up being built by all those things and curated to you, the user
  • Angular
    • 20 things done well
    • Dedicated team member(s) per thing
    • Overall framework is a curated solution (like linux OS)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment