ten interesting features of google’s angular projectnativescript does not use webview more...
TRANSCRIPT
![Page 1: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/1.jpg)
Ten interesting features of Google’s Angular Project - 1
Copyright © Clipcode Ltd – 2018All rights reserved
Ten interesting features of Google’s Angular Project
![Page 2: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/2.jpg)
Ten interesting features of Google’s Angular Project - 2
Foundations of Web Apps Need To Evolve
Need a web programming language that is …● Suitable for large-scale apps● Object-oriented and strongly typed
Need a framework that is …● Comprehensive, well-designed, flexible, modern● From well-funded, large teams of experienced devs
TypeScript and Angular deliver
![Page 3: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/3.jpg)
Ten interesting features of Google’s Angular Project - 3
SPA (Single Page Application)
One top-level HTML, whose element tree is altered as app runs
● Via routing, URL that appears in browser's address bar varies too
Multiple apps mayrun on same page
Platform instance manages singletons, location & rendering
Platform (url, renderer)
App2App1
index.html
![Page 4: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/4.jpg)
Ten interesting features of Google’s Angular Project - 4
Why We Choose Angular
Angular is a complete framework● Excellent choice for large applications● Large team behind it● In addition to views, also support dependency
injection, routing, rich data binding, zones, web workers, …
![Page 5: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/5.jpg)
Ten interesting features of Google’s Angular Project - 5
An Excellent Web Framework
Suitable for large, multi-year projects● Comprehensive enterprise production systems
Comes “with batteries included”● Has everything (well, most things) you need within
the one framework, rather than in many bits
Support for multiple renderers● Separation of rendering from core
![Page 6: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/6.jpg)
Ten interesting features of Google’s Angular Project - 6
Alternatives
React (Facebook)● React is a library (for views)
jQuery
Coding to DOM directly
Homegrown framework● Lots and lots of other choices
![Page 7: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/7.jpg)
Ten interesting features of Google’s Angular Project - 7
Angular And Backends
Angular (usually) runs in the web browser
Need to communicate with web server● Usually via REST APIs (JSON)● Angular has an HTTP (client) package to handle this
Any web server / framework will do – e.g. ● Nginx / Node.js 9.x / Express● IIS 10 (Windows Server 2016) / ASP.NET Core
![Page 8: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/8.jpg)
Ten interesting features of Google’s Angular Project - 8
Family Of Projects
Angular is actually a family of projects ● Angular Main Project● Angular CLI● Angular Universal, Angular Material● Angular Fire
External● NativeScript, Ionic
![Page 9: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/9.jpg)
Ten interesting features of Google’s Angular Project - 9
Angular Main Project = Family Of Packages
Main project is a family of packages ● Core● Common● Common/HTTP● Platforms● Router● Forms● Compiler and Compiler-cli
![Page 10: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/10.jpg)
Ten interesting features of Google’s Angular Project - 10
Angular Material
Material Design spec - a Modern Style Guide● Design for beautiful and functionally rich controls
Many control families can work with Angular● Angular Material 2 is an implementation of the
Material Design spec● Components for .. button, cards, checkbox, radio,
input, sidenav, toolbar, list, grid-list, icon, progress-circle, progress-bar, tabs, slide-toggle ...
![Page 11: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/11.jpg)
Ten interesting features of Google’s Angular Project - 11
1. Language Selection For Front-end
Really important decision● Codebase and dev skills are valuable assets● Very time-consuming/expensive to change a year later
Many language choices for web client● JavaScript itself, TypeScript, Dart (transpiled to JS),
Coffeescript, … most languages have an avenue
We select TypeScript – why?
![Page 12: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/12.jpg)
Ten interesting features of Google’s Angular Project - 12
2. Building Web Components
(Domain) model● Business logic + data
View ● .html templates - template compiler converts these
to sets of calls to renderer
Controller● These are web components
![Page 13: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/13.jpg)
Ten interesting features of Google’s Angular Project - 13
3. Dependency Injection
A hierarchy of injectors
If what is sought is not in current injector, look at its parent
Platform is root of injector tree
![Page 14: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/14.jpg)
Ten interesting features of Google’s Angular Project - 14
4. Angular Rendering Architecture
Your Application
Angular Application Layer
Angular Rendering Layer
BrowserRenderer
Web WorkerRenderer
Server-sideRenderer
Native AppRenderer
Angular Rendering API
![Page 15: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/15.jpg)
Ten interesting features of Google’s Angular Project - 15
Ionic and NativeScript
From Ionic and Telerik (Progress)
Different approaches to building native apps● Installed from Apple App Store Or Google Play
Ionic uses Cordova and WebView
NativeScript does not use WebView● More device-like app (more work)
![Page 16: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/16.jpg)
Ten interesting features of Google’s Angular Project - 16
5. Template Compiler
JIT vs. AOT compilation● Anywhere you see “Compiler” in Angular docs, it
refers to html template compilation● Anywhere you see “dynamic” it refers to JIT
Output of AOT is code (not html) that calls the Renderer API
![Page 17: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/17.jpg)
Ten interesting features of Google’s Angular Project - 17
6. RxJS and Angular EventEmitters
Observable
Observer
Subject
Operators
Use of EventEmitters
![Page 18: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/18.jpg)
Ten interesting features of Google’s Angular Project - 18
7. Async Thinking The JS VM Event loop
Promises
Async/await(TS 2.x)
![Page 19: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/19.jpg)
Ten interesting features of Google’s Angular Project - 19
8. Zone.js & NgZone
SubdividingA JS Thread
● Importance for Angularchange detection
![Page 20: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/20.jpg)
Ten interesting features of Google’s Angular Project - 20
9. Angular Inside Web Workers
Message Bus
Message Broker
How UI events work with web workers
![Page 21: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/21.jpg)
Ten interesting features of Google’s Angular Project - 21
10. Angular App Architecture
Angula
r D
evO
ps
(Angula
r CLI
,Web
Pack
,ts
-nod
e, g
ulp
file
.ts)
Data Model(RxJS)
Domain Model(Domain Services/Entities)
Angular System Programming
Interaction Model (templates,data binding, styling, ng-xi18n)
Messaging Model(HTTP client/REST)
![Page 22: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/22.jpg)
Ten interesting features of Google’s Angular Project - 22
Angular CLI
Setting up and configuring an Angular project involves a number of tasks
Angular CLI is a command-line interface that automates common these tasks
● Creates projects● Generates a variety of elements● Deploys
![Page 23: Ten interesting features of Google’s Angular ProjectNativeScript does not use WebView More device-like app (more work) Ten interesting features of Google’s Angular Project - 16](https://reader036.vdocuments.net/reader036/viewer/2022062602/5f020f207e708231d4025f4e/html5/thumbnails/23.jpg)
Ten interesting features of Google’s Angular Project - 23
11 (BONUS): Eamon’s Ideas for Future
Protocols: HTTP/2, WebRTC, WebSockets
Rich graphics (Canvas, SVG, WebGL2)
Editor & Reporting Tools
Additional Renderers● Shared workspace, Server-to-client (X Window like)
To document (.odt, .docx, PDF)
Platform (system, native, etc.)