Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.

.net is dead in a long run. That is a tendency which we can see for a long time now.

Even the new items of .net team are directed for using the js as a base.

For instance in a TechSummit at a lecture reviewing new SharePoint the Microsoft representatives were only talking about how to build web-parts with Angular and React. You can read more at my post about that event here – SharePoint with all the new toys. It’s beyond the theme of this post , but it vividly shows the direction of the high-tech industry overall.

Better Perceived Performance

First time users of your application will instantly see a server rendered view which greatly improves perceived performance and the overall user experience. According to research at Google, the difference of just 200 milliseconds in page load performance has an impact on user behavior.

RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. This project is a rewrite of Reactive-Extensions/RxJS with better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.Zone

A Zone is an execution context that persists across async tasks. You can think of it as thread-local storage for JavaScript VMs.
System
______________________________________________
Framework – you just write a part of code and someone else activates it
______________________________________________
Router Http Compiler Platform
Core&Common
______________________________________________
Application
Custom tag –

at the aot
(template +parser+ abstract syntax tree) is created on the server from before the runtime at the client
so it’s very quick and the outcome is that the comipler itself is smaller 100kb instead of JIT compiler of 1.1MB

________________________________________________

webpack.js – for production
system.src.js – for debug , quicker

shim is a pollifill for older browsers

point of entry System.ipmort async after rendering the dom – setting of the first main.js

platformBrowserDynamic – can be changed for nativescript for android ios , and more options of platforms.
______________________________________________

Why components are also in @NgModule declarations
needed for compiler

the compiler takes the templates and translates it
inside the appmodule in sources in the chrome browser the rendered code is not working on dom but goes through th e self.renderer

Typescript compiles the code from ts to js.Can define tsconfig.js comiplerOptions:”es5″
For now compiles to es5 for browsers to be compatible. After will just change the es5 to es6. Can see the compatibility of the browsers in a www
The compiler compiles the templates of html to js.
______________________________________________

Each component has it’s own injector.
Will go up in hierarchy untill gets the needed injected object, if null throws error if not @Optional.

READ MORE!
______________________________________________

First off all write business logic
WOrk with getter
get tasks(){
return this.todoService.tasks;
}
and
not this.tasks = this.todoService.tasks;
______________________________________________
in component code behind

remove(){
this.todos.removeTask(this.task);
}

for deleteing the item

{{task.desc}}

______________________________________________

Don’t use Event Emmitter
Always through a service.
If it’s connected to the parent just inject parents services.
______________________________________________

Lazy initialization
useclass when you give a provide of the type of the class in the constructor
you can add useclass to direct constructor to init lazy load only when needed.

NgModule
bootstrap defining the most upper module
imports is like using in .net — inner use aloud inside the module
exports is what i am aloud to use in outside the module
index.html is not compiled that s why we set only the css , scripts and entry point – its like the manifest for the app.
providers defined in NgModule is recognized by Application Injector, so no need to add it to imports because it’s already available.

if it’s lazy bounding then it’ll be injected to the Module Injector and not Application.

Shared Module – is a module for UI , connected to different features.(Unifying controls of Grids,Controlls – almost always third party + some extentions on your part)

Feature Module –

Protection for COre Module

constructor(@Optional() @SkipSelf() parentModule:CoreModule){
if(parentModule) — meaning there are two of them
{ throw new Error(“CoreModule is already loaded’);
}
}

static forRoot(config:UserServiceConfig):ModuleWithProviders{

}

______________________________________________

Model Challenges

NgZone
Data changes if there are
Timer , Communication or UI Events
Wrapps the events and calls tick at the end to refresh
Angular build a tree of expressions per component
Caclulates the previous expressions to the current each async event and the tick slows

Freq*Qexp = Speed

High Frequency Problem
Disconnect from the tick specific component

ngcourse.org/ng-course/demos/change_detection/index.html#/counter

find code
______________________________________________

On Push Strategy

ngcourse.org/ng-course/demos/change_detection/index.html#/ondirty

cd:ChangeDetectorRef

cd.detach in ctor

this.cd.detectChanges in method

rx auditTime(500) – each half second – reduces the events
auditTime.threshold(15) – if the prev and curr the same don’t updated

scan – saves state

creates observable

feed.service.ts start works with worker adding callback for update

enables chaining

______________________________________________

Ways to reduce ticks

Detach one loaded components
On push – only when getting new data will update
On dirty – adding threshold when to refresh