Ganztages-Block Montag, 27.06.2016 - Angular 2

• Google Engineering Disciplines

1. Dependency Injection
2. Testing
3. Compiler Knowledge
4. V8 Engine

• Microsoft Technologies

1. Typescript - Angular 2 is written in Typescript
2. Typescript compiler was the model for Angular 2 Template Compiler
3. Typescript compiler is built with the same model as the Roslyn Compiler (.Net Compiler)
4. Anders Hejlsberg, top Fellow at Microsoft was the Chief Architect of Typescript and Roslyn Compiler
5. Observables everywhere in Angular 2 in : Reactive Forms, Http Module, Router Module, Async Pipe, Change Detection ...

1. flatMap
2. switchMap
3. map
4. filter

• flatMap 

  transform the items emitted by an Observable into Observables, then flatten the emissions from those into a single Observable

• switchMap
  convert an Observable that emits Observables into a single Observable that emits the items emitted by the most-recently-emitted of those Observables

• map
  transform the items emitted by an Observable by applying a function to each item

• filter
   emit only those items from an Observable that pass a predicate test

1. in Http Module
2. in Router Module
3. in Async Pipe
4. in Reactive Forms
5. in Template driven Forms

right answer: all but 5.

• An Observable is an Iterable (Collection) which is constructed with 2 parts:
• With Observables Events become first class citizens in the language. 
  You can capture Events (data points in time) and compose stream of events
• Events can be mouse clicks, stock ticks, sensor messages....
• This structure allows for combining stock ticks with sensor messages because these 2 data streams
  are capture in the same format of an observables which can be composed in many ways.
• Part1: The Observable is the data producer which pushes values to the consumer
• Part2: The Observer is the data consumer. The observer subscribes to the observable
• The Observable is a lazy data structure . Lazy means you declare first the Observable with the operators
  and only when you subscribe to the Observable the data is pushed at you over time.
• Without subscription no data is pushed to the consumer.
• The Observable is a declarative structure. You describe with Operators like map, filter, flatmap... how
  the structure should look like and what result it should provide. It can be compare to Sql Statement
  creation where you declarative specify what you want: "Select title, Id from Document Where title = 'Observables

• Angular 2 makes havy use of Observables:

The following Modules are based on Observables:

• The Router
• The Http Module
• Change Detection is based on Observables
• The Reactive Forms Module

• Treeshaking is possible because Angular 2 is written in Es6 Module Format.
• In Es6 Module Import and Export are statically bound. Webpack 2 can now follow these 
  statically bound Import's and Export's and determine which code is not used and can be shaked out.

• Dead Code Elimination is happening when a minifyer tool detects what code is not run at runtime and can
  eliminate it

• AOT is just a build step: The Offline Compiler (outside the browser) compiles the appliation.
• The compiler is now not needed when the application is deployed (Size reduction of about 100 KB)

• The Angular 2 Compiler is written in Typescript
• The Compiler produces an Abstract Syntax Tree (AST)
• The AST allows for the possibility to render the Application on different Platform: Server, Desktop, Browser, Mobile
• The Compiler can run in the browser  (Just in Time Compilation) or outside the browser (Ahead of Time Compilation)