Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
[Gerard Sans] New Data Architecture in Angular 2
Search
Google Developers Group Lviv
September 10, 2016
Technology
0
150
[Gerard Sans] New Data Architecture in Angular 2
Presentation from GDG DevFest Ukraine 2016.
Learn more at:
https://devfest.gdg.org.ua
Google Developers Group Lviv
September 10, 2016
Tweet
Share
More Decks by Google Developers Group Lviv
See All by Google Developers Group Lviv
[Elad Bezalel] Angular Material CDK
gdglviv
0
150
[Zac Sweers] Breaking the Android ClassLoader
gdglviv
0
220
[Daniel Galpin] Adventures in Navigation
gdglviv
1
400
[Rebecca Franks] Practical Image Processing in Android
gdglviv
0
330
[Mateusz Herych] Architecture for App Bundles
gdglviv
1
120
[Andrea Falcone] Iterative Mobile Development
gdglviv
1
84
[Yonatan Levin] Keynote: The world of change and your significance in it
gdglviv
0
130
[Denys Tkalich] Using BigQuery as a data warehouse in B2B startup
gdglviv
0
89
[Mete Atamel] Google Assistant powered by Containers, Machine Learning and .NET on Google Cloud
gdglviv
0
140
Other Decks in Technology
See All in Technology
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
110
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
SCSAから学ぶセキュリティ管理
masakamayama
0
140
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Speed Design
sergeychernyshev
25
780
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Adopting Sorbet at Scale
ufuk
74
9.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
4 Signs Your Business is Dying
shpigford
182
22k
Why Our Code Smells
bkeepers
PRO
335
57k
Transcript
New Data Architecture in Angular 2 by Gerard Sans |
@gerardsans
A little about me
a bit more...
- 27-28th Sept AngularConnect @AngularConnect
Angular 2
None
Features Latest Web Standards Simple Lightning fast Works everywhere
builtwithangular2.com
ES5, ES6 and TypeScript
ES5 / ES6 / TypeScript ES6 (ES2015) Classes, modules, arrow
functions TypeScript Types, annotations, generics, interfaces Great editor support
Angular 2 Tooling
Angular 2 Tooling
Bootstrapping
Bootstrapping Angular Application instantiation Root Module (AppModule) Global Dependencies Router,
Http, Services Global Values Vendor dependencies
index.html <!DOCTYPE html> <html> <head> <!-- Polyfill(s) for older browsers
--> <script src="https://unpkg.com/core-js/client/shim.min.js"></script> <script src="https://unpkg.com/
[email protected]
?main=browser"></script> <script src="https://unpkg.com/
[email protected]
"></script> <script src="https://unpkg.com/
[email protected]
/dist/system.src.js">< <script src="systemjs.config.js"></script> <script>System.import('app');</script> </head> <body> <my-app> Loading... </my-app> </body> </html>
main.ts import {platformBrowserDynamic} from '@angular/platform-browser-dyn import {AppModule} from './app'; platformBrowserDynamic().bootstrapModule(AppModule)
app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule
} from '@angular/platform-browser'; import { App } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule {}
app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app',
// <my-app>Loading...</my-app> template: `...` }) export class App { constructor() { } }
Components
Components Tree source: blog
Component @Component annotation Communications Inputs, @Input Outputs, @Output Component Lifecycle
Hooks Host element interaction
Component import { Component } from '@angular/core'; @Component({ selector: 'home',
// <home></home> styles: [`h1 { color: red }`], template: `<h1>Home</h1>` }) export class Home { ... }
Lifecycle Hooks import { Component, OnChanges, OnInit, OnDestroy } from
'@angular/c @Component() export class myComponent implements OnChanges, OnInit, OnDestroy { /* 1 */ constructor() { } // called when an input or output binding changes /* 2 */ ngOnChanges(changes) { } // after child initialisation /* 3 */ ngOnInit() { } // just before is destroyed /* 4 */ ngOnDestroy() { } }
None
Templating
Template Syntax Syntax Binding type <h1>{{title}}</h1> <input [value]="firstName"> <li [class.active]="isActive"></li>
<div [style.width.px]="mySize"> Interpolation Property Class Style <button (click)="onClick($event)"> Event [(ngModel)]="data.value" Two-way
Reactive Extensions
RxJS 5
3 2 1 Stream
//Observable constructor let simple$ = Rx.Observable.create(observer => { try {
//pushing values observer.next(1); observer.next(2); observer.next(3); //complete stream observer.complete(); } catch(e) { //error handling observer.error(e); } }); Observable
Subscribe /* a$ ---1---2---3| */ let a$ = Rx.Observable.of(1,2,3); let
subscription = a$.subscribe({ next: x => console.log(x), error: x => console.log('#'), complete: () => console.log('|') });
Unsubscribe let subscription = twits$.subscribe( twit => feed.push(twit), error =>
console.log(error), () => console.log('done') ); setTimeout(() => subscription.unsubscribe(), 5000);
Example Rx.Observable.of(1) .subscribe({ next: x => console.log(x), complete: () =>
console.log('3') }); console.log('2'); // a) 1 2 3 // b) 2 1 3 // c) 1 3 2 // d) 3 2 1
None
Schedulers Observable.of(1) .subscribeOn(Rx.Scheduler.async) .subscribe({ next: (x) => console.log(x), complete: ()
=> console.log('3') }); console.log('2'); // a) 1 2 3 // b) 2 1 3 // c) 1 3 2 // d) 3 2 1
Why Observables? Flexible: sync or async Powerful operators Less code
RxJS 5 in Angular2 Asynchronous processing Http Forms: controls, validation
Component events EventEmitter
Http Module
Main Features Primary protocol for client/server communications Implements XMLHttpRequest (XHR)
and JSONP Http methods: GET, POST, PUT, DELETE, PATCH and HEAD
Creating a Http Service // app.module.ts import { HttpModule }
from '@angular/http'; @NgModule({ imports: [HttpModule], ... }) export class AppModule {}
Creating a Http Service // usersService.ts import { Injectable }
from '@angular/core'; import { Http } from '@angular/http'; @Injectable() export class UsersService { constructor(private http: Http) { } get() { return this.http.get('/assets/users.json') .map(response => response.json().users) .retryWhen(errors => errors.delay(2000)); } }
Consuming a Http Service import { Component } from '@angular/core';
import { UsersService } from '../services/usersService'; @Component({ selector: 'users', template: `<h1>Users</h1> <tr *ngFor="let user of userslist | async"> <td>{{user.username}}</td> </tr>` }) export class Users { private userslist; constructor(users: UsersService) { this.userslist = users.get(); } }
Data Architecture
Unidirectional Data Flow source: blog
Overview Data Services Components State Management (Redux) (RxJS 5) ng2-redux
ngrx/store GraphQL/Apollo Client
Дякую Thanks