modern front-end development with angular js 2 js 2 presentation.pdf · angular js 2.0 open source,...
TRANSCRIPT
![Page 1: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/1.jpg)
MODERN FRONT-END DEVELOPMENT WITH
ANGULAR JS 2.0History of the front-end, Typescript, Component
Architecture, Observables.
![Page 2: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/2.jpg)
JAVASCRIPT FRAMEWORKS
AnuglarJS, React, Backbone, TodoMVC, Ember, Polymer, Knockout, Aurelia, Spine,
Brick, NuclearJS, Dojo, Matreshka
![Page 3: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/3.jpg)
JAVASCRIPT-TARGETING LANGUAGES
Typescript, Dart, Coffeescript, asm.js, Coco, Uberscript, Caffeine, EmberScript,
LiteScript, Flow, Latte JS
![Page 4: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/4.jpg)
WHY?
![Page 5: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/5.jpg)
TIMES HAVE CHANGED (THE WEB IS MATURING)
![Page 6: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/6.jpg)
1. HYPER-TEXT (1963) 2. HTML ON WWW (1987) 3. AJAX (1999) 4. HTML5 “APP SANDBOX APIS” (2004) 5. WEB ASSEMBLY, COMPONENTS (NOW) 6. ???
![Page 7: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/7.jpg)
THE BROWSER IS JUST A CLIENT
![Page 8: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/8.jpg)
➤ Desktop application
➤ Smartphone app
➤ Web app
➤ Embedded device (IoT)
It’s just another client.
![Page 9: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/9.jpg)
WEB APP OR NATIVE APP?
➤ Communicates over HTTPS
➤ Runs in fullscreen
➤ Store data locally between runs
➤ Works offline
➤ Renders OpenGL graphics
➤ Uses background threads
➤ Can geo-locate using GPS
➤ Supports gamepads/joysticks
➤ Uses system speech recognition
![Page 10: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/10.jpg)
THE BROWSER ISN’T A PERFECT PLATFORM, BUT ANGULAR JS CAN HELP
![Page 11: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/11.jpg)
BUT FIRST …
![Page 12: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/12.jpg)
TYPESCRIPT
➤ Superset of Javascript (ES6) with optional typing
➤ Open source (Windows, Linux, OS X nee macOS)
➤ Passes code through — very little mangling
➤ Weakly-typed vs. strongly-typed (use both!)
➤ Recommended but not required for AngularJS 2.0
![Page 13: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/13.jpg)
TYPESCRIPT COMPILER (TSC) OUTPUT
Typescript Outputted Javascript
tsc --sourcemap --target ES5 parallax-simple.ts
![Page 14: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/14.jpg)
TYPESCRIPT COMPILER (TSC) OUTPUT
parallax-simple.ts(6,13): error TS2322: Type 'number' is not assignable to type 'string'.
➤ Type-checking done at compile time but errors allowed (Javascript allows it)
➤ Reduces errors while developing
➤ Helps editors provide assistance (VS Code, WebStorm, others)
![Page 15: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/15.jpg)
ANGULAR JS 2.0
![Page 16: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/16.jpg)
ANGULAR JS 2.0
➤ Open source, developed by Google + community
➤ Application framework for web and native applications
➤ Encourages code reuse through modules
➤ Not backwards-compatible with AngularJS 1.x but there is a migration path
➤ Typescript preferred
➤ Much faster than Angular JS 1.x
➤ Cleaner architecture than Angular JS 1.x
![Page 17: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/17.jpg)
ANGULAR JS 2.0 ARCHITECTURE
➤ Component-based design.
➤ Everything is a “directive” in one of three types: component (class with a view template), structural (alters DOM e.g. ngIf, ngSwitch, ngFor), or attributive (affects style or behavior, e.g. ngClass).
➤ Uses dependency injection.
➤ Services are any Javascript class you register for injection. Preferably contain discrete, unique groupings of application logic.
➤ Miscellany: pipes, lifecycle hooks, routers, animation, and more.
![Page 18: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/18.jpg)
ANGULAR JS 2.0 ARCHITECTURE
Credit: https://angular.io/resources/images/devguide/architecture/overview2.png
![Page 19: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/19.jpg)
ANGULAR JS 2.0 HELLO WORLD
From https://angular.io/docs/ts/latest/quickstart.html
![Page 20: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/20.jpg)
ANGULAR JS 2.0 HELLO WORLD
From https://angular.io/docs/ts/latest/quickstart.html
![Page 21: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/21.jpg)
ANGULAR JS 2.0 HELLO WORLD
![Page 22: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/22.jpg)
WOW!
![Page 23: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/23.jpg)
DATA BINDING VIA INTERPOLATION
![Page 24: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/24.jpg)
ANGULAR JS 2.0 HELLO WORLD
![Page 25: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/25.jpg)
ANGULAR JS 2.0 HELLO WORLD
![Page 26: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/26.jpg)
BASIC EVENT HANDLING
![Page 27: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/27.jpg)
ANGULAR JS 2.0 HELLO WORLD
![Page 28: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/28.jpg)
COMPONENTS IN COMPONENTS
![Page 29: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/29.jpg)
ANGULAR JS 2.0 HELLO WORLD
![Page 30: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/30.jpg)
ANGULAR JS 2.0 HELLO WORLD
![Page 31: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/31.jpg)
JAVASCRIPT PATTERNS
➤ Javascript at Netscape (1995)
➤ Callback culture with jQuery (2006)
➤ Promises (2010)
➤ Observables (2012)
![Page 32: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/32.jpg)
OBSERVABLES ARE COOL
![Page 33: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/33.jpg)
OBSERVABLES ARE LAZY PROMISES WHICH CAN BE CANCELLED AND RE-TRIED
![Page 34: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/34.jpg)
PROMISE VS OBSERVABLE
Promise Observable
From https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises
![Page 35: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/35.jpg)
PROMISE VS OBSERVABLE
From https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises
![Page 36: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/36.jpg)
PROMISE VS OBSERVABLE
From https://www.quora.com/What-is-the-most-useful-thing-you-can-do-with-RxJS-observables
Officially included in ES7
![Page 37: MODERN FRONT-END DEVELOPMENT WITH ANGULAR JS 2 JS 2 Presentation.pdf · ANGULAR JS 2.0 Open source, developed by Google + community Application framework for web and native applications](https://reader030.vdocuments.net/reader030/viewer/2022041021/5ed158644008b975c855742c/html5/thumbnails/37.jpg)
RESOURCES
➤ https://angular.io
➤ http://typescriptlang.org
➤ https://code.visualstudio.com
➤ https://egghead.io