No content

About me Ilia Idakiev https://github.com/iliaidakiev/ [email protected]

I like playing vinyl ...

Course Schedule 1. Introduction: Concepts of Angular 2. Introduction to TypeScript, Component Basics and Build-in Directives. Inputs and Outputs. 2. Functional Programming & Reactive Programming: Reactive Extensions for JS. 3. Angular CLI. Custom Directives. Renderer: Templates, TemplateRef, ViewContainerRef (Dynamic Component Loader - entryComponents) 4. Dependency Injection. Providers and Injectors: Services. 5. Change Detection and Component / Directive Lifecycle. Advanced Components: OnPush, Observable.fromEvent, Content Projection, ViewChildren, ContentChildren 6. Predictable Reactive State Management - NGRX 7. Forms and validations Pt. 1 8. Forms and validations Pt. 2 - Multi-Providers, Custom Controls, Template driven custom validators 9. Routing and Navigation. Lazy Loading. 10.Protecting Routes. Pipes. Angular 4 and beyond.

Course Organization • Presentation: Lecture / Code Overview / Live Coding ~ 1h • Exercise: Solving tasks / Answering Questions ~ 2h • Tasks & Lectures: Uploaded on • Solutions: Fork course repo and commit them to gain points

Today's Schedule 1. JavaScript - Quick Overview 2. The Evolution of JavaScript and the Web. 3. Concepts of Angular 2. 4. Things we should know before we start. 5. Creating components and using build-in directives.

JavaScript 1. High-level language 2. Weakly-typed (dynamic) 3. Interpreted

Interpreter vs Compiler

Interpreter • Doesn't do any processing on the program before execution • Translates (interprets) program code line by line and executes it • The only result is the output data

Compiler • Translates the program written in a high-level language to the machine language of a computer • Data is passed to the executable

V8 JavaScript Engine Is an open source JavaScript engine developed by The Chromium Project for the Google Chrome web browser. V8 compiles JavaScript to native machine code before executing it. The compiled code is additionally optimized (and re-optimized) dynamically at runtime.

Transpiler

Transpiler (compiler) An example of a transpiler is tsc (typescript compiler). It transpiles (compiles) TypeScript code into JavaScript A famous traspiler is

Why do we want our JavaScript code to be asynchronous?

JavaScript runs in a single thread

JavaScript Event Loop

The Evolution of JS and the Web.

The Evolution of JS and the Web. 1. ECMAScript 6 (ES2015) 2. Web Components 3. Web Workers 4. TypeScript

ECMAScript ECMAScript (ES) is a trademarked scripting-language specification standardized by Ecma International. The ECMAScript specification is a standardized specification of a scripting language developed by Brendan Eich of Netscape. Initially it was named Mocha, later LiveScript, and finally JavaScript.

ECMAScript 2015 (ES 6) ECMAScript 2015, was finalized in June 2015. It adds significant new syntax for writing complex applications.

Web Components Bring component-based software engineering to the World Wide Web • Allow us to write reusable widgets • The Component model allows encapsulation

Web Components • Custom Elements - APIs to define new HTML elements • Shadow DOM - Encapsulated DOM and styling, with composition • HTML Imports - Declarative methods of importing HTML documents into other documents • HTML Templates - The tag, which allows documents to contain inert chunks of DOM

Web Workers A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page

TypeScript Developed by Microsoft, TypeScript is a strict superset of JavaScript, and adds optional static typing and class-based object- oriented programming to the language TypeScript is designed for development of large applications and (trans | com)piles to JavaScript. As TypeScript is a superset of JavaScript, any existing JavaScript programs are also valid TypeScript programs.

About Angular • It's Fast (5 times faster than Angular 1) • Uses Typescript • Supports server side pre-rendering (Angular Universal) • Most of our code and Angular can be configured to run in a Web Worker • Supports Lazy Loading • It has Native App Support (NativeScript)

Normal page request

Server side pre-rendering preboot.js - library to to help manage the transition of state (i.e. events, focus, data) from a server- generated web view to a client- generated web view

Angular Universal NodeJS Server ASP.NET Core Server
 Angular CLI support coming soon Current State: Merging Universal into Angular core

Angular CLI Command Line Interface for scaffolding Angular apps Beta

Concepts of Angular

Concepts • Directives (structural / attribute) - custom html tags / attributes that contain / add some logic. • Components (smart / dumb) - Directives with a View (template) • Component Tree - root component containing other components • Input and Output Properties - Sending data from parent to child component via Inputs and from child to parent via output. • Lifecycle - Special events that we can tap into. • Services - Communication and data manipulation channels

Components • Container (Smart) - Concerned with how things work.
 • Presentational (Dumb) - Concerned with how things look.

Angular Compilation Before rendering the app the HTML templates are converted to executable JavaScript by the Angular compiler.
 2. Instantiation 1. Parsing

Parser The parser starts reading each character from our templates. It instantiates the objects using special data structures. In their constructor the DOM element that they represent is created. They are all put into a Abstract Syntax Tree (AST).

Creating the DOM elements const el = document.createElement('...'); otherEl.appendChild(el)

Compilation • Just In Time (JIT) - Compiled at runtime in the browser when loading the application.
 
 *slower performance 
 *bigger application
 • Ahead Of Time (AOT) - Compiling at build time.
 
 *render the application immediately, without waiting to compile

JIT Compilation • Can't run minifier because of template bindings and interpolation
 • Eval is Evil

AOT Compilation • Can run minifier
 • Using script tag instead of eval

Things we should know before we start

NG Style Guide https://angular.io/styleguide

ES2015: arrow functions https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

ES2015: let keyword https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let

ES2015: for...of loop https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

Module Loaders SystemJS - https://github.com/systemjs/systemjs Webpack - https://webpack.js.org

TypeScript Decorators Using Decorators we can annotate and modify classes and properties at design time.
 We can add both annotations and a meta-programming syntax for class declarations and members.

What is a decorator 1. A decorator is an expression 2. that evaluates to a function 3. that takes the target, name, and decorator descriptor as arguments 4. and optionally returns a decorator descriptor to install on the target object

TypeScript Decorators Decorators provide a way to Decorators are a stage 1 proposal for JavaScript and are available as an experimental feature of TypeScript (+ reflect-metadata library).

TypeScript Decorators Decorator can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.

TypeScript Decorators

TypeScript Documentation https://www.typescriptlang.org/docs/tutorial.html

TypeScript Playground https://www.typescriptlang.org/play/index.html

Angular Dependencies • core-js / es6-shim (https://unpkg.com/[email protected]/client/shim.min.js) • reflect-metadata (https://unpkg.com/refl[email protected]/Reflect.js) • zone.js (https://unpkg.com/zone.js/dist/zone.js) • RxJS (https://unpkg.com/rxjs) • systemjs / webpack (https://unpkg.com/[email protected]/dist/system.js)

Angular App Main Structure • main.js - Bootstraps the app for the current platform • app.module.ts - Bootstraps the main component and its dependencies • app.component.ts - Main component. • app.component.html - Main component template.

Let's review the quick start app:
 
 https://github.com/angular/quickstart

NgModuleDecorator Overview https://github.com/angular/angular/blob/ 1cf5f5fa38ea672a972313049c9de2db6024441d/modules/%40angular/core/src/ metadata/ng_module.ts

Structuring Our App When components, directives, pipes, services belong together we should extract them to a separate module - Feature Module

Feature Modules

Core Feature Module Consider collecting numerous, auxiliary, single-use classes inside a core module to simplify the apparent structure of a feature module. 
 Only the root AppModule should import the CoreModule.

Core Feature Module

Shared Feature Module Declare components, directives, and pipes in a shared module when those items will be re-used and referenced by the components declared in other feature modules.

Shared Feature Module

ComponentDecorator Overview https://github.com/angular/angular/blob/ 745e10e6d2ea9097b7ec650ae54cea91e3d193f2/modules/%40angular/core/src/ metadata/directives.ts#L488

InputDecorator Overview https://github.com/angular/angular/blob/ 745e10e6d2ea9097b7ec650ae54cea91e3d193f2/modules/%40angular/core/src/ metadata/directives.ts#L766

OutputDecorator Overview https://github.com/angular/angular/blob/ 745e10e6d2ea9097b7ec650ae54cea91e3d193f2/modules/%40angular/core/src/ metadata/directives.ts#L837

Build-in Directives Overview https://github.com/angular/angular/tree/ 8578682dcfccc2ccccb68df37c3ebc738f98bf0e/modules/%40angular/common/src/ directives

Bindings Overview https://github.com/angular/angular/blob/ fcb4e664933f0b44c897e61be734581dfb10f088/modules/%40angular/compiler/src/ template_parser/template_ast.ts

Template reference variables • Using a hash (#) prefix we can defining a template variable. • We can use a template reference variable on the same element, on a sibling element, or on any child elements.

Questions ?