Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Reactive, component 그리고 angular2

1,151 views

Published on

JSCON:16 컨퍼런스 발표자료
http://www.jscon.io/

Published in: Technology
  • Be the first to comment

Reactive, component 그리고 angular2

  1. 1. Reactive, Component 그리고 Angular 2 Jeado Ko haibane84@gmail.com
  2. 2. +jeado.ko haibane84@gmail.com - “Google Developer Expert” - Web Technology - “Bitfinder.co” Software Engineer - “http://webframeworks.kr” AngularJS Tutorial Contributor - “Google Developer Group Korea WebTech” Organizer - “시작하세요 AngularJS wikibooks” Author
  3. 3. Awair 어웨어는 공기에서 가장 중요한 5가지 요소인 온도, 습도, 이산화탄소, VOC(휘발성유기화합물 ), 미세먼지를 측정합니다. 그리고 측정치를 바탕으로 전체 공기 상태를 분석해냅니다. 분석된 공기 상태는 0-100점 사이의 점수인 어웨어 스코어로 계산되며, 각 점수대는 특정한 색상으로 표현됩니다. 0점은 최악의 공기 상태를 의미하며, 100점은 최상의 공기 상태를 의미합니다.
  4. 4. Angular 2 Component Reactive
  5. 5. 목차 Angular 2 101 컴포넌트component 리엑티브reactive
  6. 6. Angular 2 101
  7. 7. Angular 2 RC 5
  8. 8. Framework to Platform Dependency Injection Decorators Zones Compile Change Render Material (UI Tool) Angular Mobile (Progressive Web App Support) Universal (Isomorphic Support) Angular CLI (Build tool) Language Services Augury (debugging) ngUpgrade Router Animation i18n
  9. 9. ????????????
  10. 10. We have problems - Bad for mobile - Bad for huge application - Bad for $scope - Bad for Directive - Bad for speed
  11. 11. cli.angular.io
  12. 12. Previously... Create a project directory Write a tsconfig.json file Write a typings.json file Write a package.json file Install packages Create folder structure Write app.component.ts Write main.ts Write index.html Write style.css npm start
  13. 13. With Angular CLI... ng new AwesomeApp cd AwesomeApp ng serve
  14. 14. Workflow Automation: Angular CLI Create Project Generate Components Dev Server Deploy! Scaffold Tests Lint & Format Generate Routes Run Tests Preprocess CSS Deployment Build ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
  15. 15. Let`s create new project
  16. 16. Typescript • 마이크로 소프트의 Open Source 프로젝트 • 자바스크립트의 부족한 부분은 고치기 위한 시도 • 자바스크립트의 슈퍼셋 => 자바스크립트 + 정적 타입 (그리고 클래스, 인터페이스, 모듈 등…). • 타입 어노테이션과 함께 ES6 문법을 사용하여 일반 자바스크립트로 컴파일 (컴파일 대상 : ES3, ES5, ES6). • 어떠한 자바스크립트 에플리케이션은 타입스크립트 어플리케이션임
  17. 17. 타입스크립트 정의 파일 • .d.ts 확장자. • 타입의 정의를 가능케함 • 외부 자바스크립트 라이브러리들의 타입 정의를 제공 Typescript tsc app.tsapp.ts app.js TSC - 타입스크립트 컴파일러 npm install -g typescript typings - 타입스크립트 정의 파일들의 패키지 매니져 npm install typings --global DefinitelyTyped (http://definitelytyped.org/): 타입스크립트 정의 파일들의 레파지토리 (github을 통해 호스팅)
  18. 18. Typescript class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } var greeter = new Greeter("world"); var button = document.createElement('button'); button.textContent = "Say Hello"; button.onclick = function() { alert(greeter.greet()); } document.body.appendChild(button); Type Annotation
  19. 19. Typescript import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } Meta Annotation
  20. 20. Language Support ES5 ES6 TypeScript Dart
  21. 21. Language Support CompileNo Compile ES5 ES6 TypeScript Dart
  22. 22. Language Support TypesNo Types ES5 ES6 TypeScript Dart
  23. 23. Language Support TypeScriptES6 Dart No JS TypeScriptES6 JavaScript-Based Syntax ES5
  24. 24. 컴포넌트
  25. 25. 웹 프레임워크의 발전 Library Feature-Complete Framework MVC Framework Component AngularJS 2.0
  26. 26. Component = Building block (LEGO) = a group of HTML elements
  27. 27. Application 출처: my-filter talks talk talk <my-filter> <my-talk> <my-talks>
  28. 28. Component is made of two main parts - View - Logic
  29. 29. My First Component import {Component} from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) class AppComponent { } View Logic
  30. 30. Component Template Directive Controller Component ng1 ng2
  31. 31. 만들 데모 보여주기
  32. 32. Talks to components var HEROES = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' } ]; @Component({ selector: 'my-app', template: ` <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <my-hero-detail [hero]="selectedHero"></my-hero-detail>`, directives: [HeroDetailComponent] }) export class AppComponent { heroes = HEROES; selectedHero; onSelect(hero: Hero) { this.selectedHero = hero; } } AppComponent HeroDetailComponent SelectedHero
  33. 33. Talks to components @Component({ selector: 'my-hero-detail', template: ` <div *ngIf="hero"> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"/> </div> </div>` }) export class HeroDetailComponent { @Input() hero: Hero; } AppComponent HeroDetailComponent SelectedHero
  34. 34. Data Binding in template
  35. 35. Compiling in Angular 1 xhr (browser) Parser (browser) DOM (browser) Angular 1 (JS) build Compiling in Angular 2 template (file) Parser (node) AST (node) Source (JS) Source (browser) Angular 2 (JS)
  36. 36. Rendering
  37. 37. universal.angular.io
  38. 38. Initial Rendering: Universal
  39. 39. Initial Rendering: Universal Request
  40. 40. Initial Rendering: Universal HTML + CSS
  41. 41. Initial Rendering: Universal JS
  42. 42. Initial Rendering: Universal Node.js ASP.NET Others...
  43. 43. 리엑티브
  44. 44. Reactive Programming programming paradigm oriented around data flows and the propagation of change ‒ wikipedia.org/wiki/Reactive_programming
  45. 45. ● Reactive programming은 프로그램 패러다임 ● Reactive programming은 비동기 데이터 스트림을 가지고 하는 프로그래밍 ● 프론트엔드에선 주로 Observables과 함께하는 프로그래밍 Reactive Programming
  46. 46. We have problems Async is hard Stream is hard
  47. 47. & async
  48. 48. ● DOM Events ● Animations ● AJAX ● WebSockets ● SSE ● etc... Async 예시 Stream 예시 ● Mouse movement ● User Input ● WebSockets ● Animations ● Ajax Polling ● etc...
  49. 49. RxJS
  50. 50. Observer pattern Iterator pattern + Function Programming ReactiveX
  51. 51. What is Observables? - Like promise - async - Like arrays - many values - Lazy - Reusable - Disposable - Composable
  52. 52. Observables let o = new Observable((sink:Subscriber) => { //do stuff here }); let sub = o.subscribe( (val) => console.log(val), (err) => console.error(err), () => console.log(‘done’) )
  53. 53. let o = new Observable((sink:Subscriber) => { sink.next(1); sink.next(2); sink.next(3); }); let sub = o.subscribe((val) => console.log(val)); //1 //2 //3 Observables - propagating values
  54. 54. let o = new Observable((sink:Subscriber) => { sink.next(1); sink.next(2); sink.next(3); sink.complete(); }); Observables - completion
  55. 55. let o = new Observable((sink:Subscriber) => { sink.next(1); sink.next(2); sink.next(3); sink.error(‘OHNOES’); }); Observables - errors
  56. 56. let o = new Observable((sink:Subscriber) => { let id = setInterval(() => { sink.next(‘tick’); }, 1000); return () => //cleanup clearInterval(id); }); Observables - disposal
  57. 57. let o = Observable.interval(1000); let sub = o.subscribe(v => console.log(v)); //later sub.unsubscribe(); Observables - disposal
  58. 58. let iterable = [1, "3", "xyz", 6]; iterable .forEach(x => console.log(x)); Iterator
  59. 59. let iterable = [1, "3", "xyz", 6]; Rx.Observable.from(iterable) .subscribe(x => console.log(x)); Iterator
  60. 60. let iterable = [1, "3", "xyz", 6]; let result = iterable .map(x => parseInt(x)) .filter(x => !!x) .reduce((akk, x) => akk+x, 0); console.log(result); Iterator
  61. 61. let iterable = [1, "3", "xyz", 6]; let obs = Rx.Observable.from(iterable) .map(x => parseInt(x)) .filter(x => !!x) .reduce((akk, x) => akk+x, 0); obs.subscribe(x => console.log(x)); Iterator
  62. 62. let iterable = [1, "3", "xyz", 6]; let obs = Rx.Observable.from(iterable) .map(x => parseInt(x)) .filter(x => !!x) .reduce((akk, x) => akk+x, 0); obs.subscribe(x => console.log(x)); Iterator
  63. 63. let obs = Rx.Observable .fromEvent(document, "mousemove"); obs.subscribe(x=>console.log(x)); Iterator
  64. 64. Let`s use Observable in Angular 2
  65. 65. References - https://angular.io/ - AngularConnect Keynote 2015 - ngConf 2016 day 1 Keynote - ngConf 2016 day 2 Keynote - ngVegas The Angular 2 Glossary - reactive javascript - Fluent 2016 - Reactive Angular2
  66. 66. Thanks you QnA

×