Slide 1

Slide 1 text

ANGULAR 2 JS OJISAN #6 SHUHEI KAGAWA

Slide 2

Slide 2 text

߳઒ पฏ > Rails, Angular, Node ͳͲͷΦδαϯ @M3, Inc. 10k LOC Angular App > GitHub, npm, Qiita @shuhei > Twitter @shuheikagawa > Ϗʔϧݕఆ 2 ڃ !

Slide 3

Slide 3 text

GITHUB @SHUHEI > shuhei/babel-angular2-app > shuhei/babel-plugin-angular2-annotations > babel/karma-babel-preprocessor

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

!

Slide 6

Slide 6 text

ANGULAR BLOG

Slide 7

Slide 7 text

ANGULAR Φδαϯ 2

Slide 8

Slide 8 text

ANGULAR 2 ͸ɾɾɾ

Slide 9

Slide 9 text

ίϯϙʔωϯτ ࢤ޲ʂ

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Slide 12

Slide 12 text

TYPESCRIPT @Component({ selector: 'hello-world', template: '

{{ greeting }}, {{ name }}!

', inputs: ['greeting', 'name'] }) export class HelloWorld {}

Slide 13

Slide 13 text

Slide 14

Slide 14 text

SCOPED CSS // my-app.ts @Component({ // ... templateUrl: 'my-app.html', styleUrls: ['my-app.css'] }) export class MyApp {} /* my-app.css */ h3 { margin: 2rem 0; }

Slide 15

Slide 15 text

SCOPED CSS

Slide 16

Slide 16 text

ANGULAR 2 ͸ɾɾɾ

Slide 17

Slide 17 text

଎͍ʂ

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

଎͍ʂ > ແବͷͳ͍มߋݕ஌ > View Ωϟογϯά > ॳظԽ࣌ʹҰճ͚ͩίϯύΠϧ ʢΏ͘Ώ͘͸ΦϑϥΠϯͰ΋ʣ

Slide 21

Slide 21 text

V8 ։ൃऀ͕ڭ͑Δ ຊ౰ʹ଎͍ίʔυੜ੒ 2 2 angular2/src/core/change_detection/change_detection_jit_generator.ts

Slide 22

Slide 22 text

ANGULAR 2 ͸ɾɾɾ

Slide 23

Slide 23 text

RXJS!

Slide 24

Slide 24 text

Stream = Promise + Array

Slide 25

Slide 25 text

ඇಉظͳෳ਺ͷ஋ > DOM Πϕϯτ > WebSocket ͳͲ > ΞϓϦͷঢ়ଶมԽ

Slide 26

Slide 26 text

DEMO

Slide 27

Slide 27 text

ίʔυ @Component({ selector: 'my-app', templateUrl: 'app/my-app.html', styleUrls: ['app/my-app.css'] }) export class MyApp { searchText = new Control(); repos: any; constructor(private github: GitHubService) { this.repos = this.searchText.valueChanges .debounceTime(300) .flatMap(text => this.github.search(text)); } }

Slide 28

Slide 28 text

GitHub repositoy search

Slide 29

Slide 29 text

͞Βʹ ANGULAR 2 ʹ ͸ɾɾɾ

Slide 30

Slide 30 text

ඈͼಓ۩ ͕͋Δʂ

Slide 31

Slide 31 text

ඈͼಓ۩ʂ > DOM ૢ࡞Ҏ֎͕ Web Worker Ͱಈ͘ʂ > αʔόαΠυϨϯμϦϯάʂ Angular Universal > ωΠςΟϒΞϓϦʂ React Native, NativeScript

Slide 32

Slide 32 text

Ͱ΋ηοτΞοϓ͕ ೉͍͠ΜͰ͠ΐ͏ʁ

Slide 33

Slide 33 text

$ npm install -g angular-cli

Slide 34

Slide 34 text

$ ng new js-ojisan $ cd js-ojisan $ ls -l total 32 drwxr-xr-x 10 shuhei staff 340 Dec 16 11:44 dist -rw-r--r-- 1 shuhei staff 200 Dec 16 09:44 ember-cli-build.js -rw-r--r-- 1 shuhei staff 1282 Dec 16 09:44 karma-test-shim.js -rw-r--r-- 1 shuhei staff 1365 Dec 16 09:44 karma.conf.js drwxr-xr-x 17 shuhei staff 578 Dec 16 09:44 node_modules -rw-r--r-- 1 shuhei staff 571 Dec 16 09:44 package.json drwxr-xr-x 7 shuhei staff 238 Dec 16 09:44 src drwxr-xr-x 26 shuhei staff 884 Dec 16 21:16 tmp $ ng serve $ open http://localhost:4200

Slide 35

Slide 35 text

Ͳ͏Ͱ͢ʁ

Slide 36

Slide 36 text

ANGULAR 2 ࢖͍ͨ͘ͳΓ·͔ͨ͠ʁ

Slide 37

Slide 37 text

೥຤೥࢝͸ͨͭ͜Ͱ ANGULAR 2!

Slide 38

Slide 38 text

> Angular 2: One framework > AngularClass/awesome-angular2 - GitHub > AngularConnect 2015 Videos - Youtube > Angular 2 Advent Calendar 2015 - Qiita

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

NGUPGRADE

Slide 41

Slide 41 text

CREDITS > Angular: One framework > Comparing Performance of Blaze, React, Angular-Meteor and Angular 2 with Meteor by Shawn McKay > snack by liz west