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
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
0
100
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
660
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
Building Products in the LLM Era
ymatsuwitter
10
4.4k
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
Featured
See All Featured
Designing for Performance
lara
604
68k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Scaling GitHub
holman
459
140k
Building Adaptive Systems
keathley
40
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Faster Mobile Websites
deanohume
306
31k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
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