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
Angular 2 @ JS Ojisan #6-3
Search
Shuhei Kagawa
December 17, 2015
Programming
1
2.9k
Angular 2 @ JS Ojisan #6-3
JS オジサン #6-3 での Angular 2 のざっくりした紹介です。
https://atnd.org/events/71991
Shuhei Kagawa
December 17, 2015
Tweet
Share
More Decks by Shuhei Kagawa
See All by Shuhei Kagawa
Profiling Node.js apps on production
shuhei
0
690
Building a Pixel Art Editor with Elm
shuhei
1
680
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
150
Draw Animated Chart on React Native
shuhei
0
8.5k
Angular 2 Offline Compiler
shuhei
0
5.3k
Weird Attractors
shuhei
0
770
Introduction to Angular 2
shuhei
2
130
Git の内部データ構造
shuhei
2
2k
Other Decks in Programming
See All in Programming
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.7k
OpenTelemetry のサービスという概念について
azukiazusa1
1
390
品質が高いコードって何?Rev2.1
ickx
1
490
上手な探索的テストとその上達方法について
matsu802
4
650
htmx is fun!
codehex
2
190
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
520
設計の知識と技能で駆動するソフトウェア開発
masuda220
PRO
18
10k
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
Parallel Socket Communication in Swift
s_shimotori
0
220
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
マイ隙間家具OSSたちのご紹介
karupanerura
2
150
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
120
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Practical Orchestrator
shlominoach
180
9.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Writing Fast Ruby
sferik
619
59k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
Designing for humans not robots
tammielis
247
25k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
950
Transcript
ANGULAR 2 JS OJISAN #6 SHUHEI KAGAWA
߳ पฏ > Rails, Angular, Node ͳͲͷΦδαϯ @M3, Inc. 10k
LOC Angular App > GitHub, npm, Qiita @shuhei > Twitter @shuheikagawa > Ϗʔϧݕఆ 2 ڃ !
GITHUB @SHUHEI > shuhei/babel-angular2-app > shuhei/babel-plugin-angular2-annotations > babel/karma-babel-preprocessor
None
!
ANGULAR BLOG
ANGULAR Φδαϯ 2
ANGULAR 2 ɾɾɾ
ίϯϙʔωϯτ ࢤʂ
None
<hello-world greeting="͜Μʹͪ" name="Angular 2"></hello-world>
TYPESCRIPT @Component({ selector: 'hello-world', template: '<p>{{ greeting }}, {{ name
}}!</p>', inputs: ['greeting', 'name'] }) export class HelloWorld {}
<hello-world [greeting]="greeting" [name]="name"></hello-world>
SCOPED CSS // my-app.ts @Component({ // ... templateUrl: 'my-app.html', styleUrls:
['my-app.css'] }) export class MyApp {} /* my-app.css */ h3 { margin: 2rem 0; }
SCOPED CSS
ANGULAR 2 ɾɾɾ
͍ʂ
None
None
͍ʂ > ແବͷͳ͍มߋݕ > View Ωϟογϯά > ॳظԽ࣌ʹҰճ͚ͩίϯύΠϧ ʢΏ͘Ώ͘ΦϑϥΠϯͰʣ
V8 ։ൃऀ͕ڭ͑Δ ຊʹ͍ίʔυੜ 2 2 angular2/src/core/change_detection/change_detection_jit_generator.ts
ANGULAR 2 ɾɾɾ
RXJS!
Stream = Promise + Array
ඇಉظͳෳͷ > DOM Πϕϯτ > WebSocket ͳͲ > ΞϓϦͷঢ়ଶมԽ
DEMO
ίʔυ @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)); } }
<h3>GitHub repositoy search</h3> <p> <input [ngFormControl]="searchText" placeholder="keyword" class="form-control"> </p> <ul
class="repositories"> <li *ngFor="#repo of repos | async"> <a [href]="repo.html_url">{{repo.full_name}}</a> {{repo.stargazers_count}} stars </li> </ul>
͞Βʹ ANGULAR 2 ʹ ɾɾɾ
ඈͼಓ۩ ͕͋Δʂ
ඈͼಓ۩ʂ > DOM ૢ࡞Ҏ֎͕ Web Worker Ͱಈ͘ʂ > αʔόαΠυϨϯμϦϯάʂ Angular
Universal > ωΠςΟϒΞϓϦʂ React Native, NativeScript
ͰηοτΞοϓ͕ ͍͠ΜͰ͠ΐ͏ʁ
$ npm install -g angular-cli
$ 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
Ͳ͏Ͱ͢ʁ
ANGULAR 2 ͍ͨ͘ͳΓ·͔ͨ͠ʁ
࢝ͨͭ͜Ͱ ANGULAR 2!
> Angular 2: One framework > AngularClass/awesome-angular2 - GitHub >
AngularConnect 2015 Videos - Youtube > Angular 2 Advent Calendar 2015 - Qiita
None
NGUPGRADE
CREDITS > Angular: One framework > Comparing Performance of Blaze,
React, Angular-Meteor and Angular 2 with Meteor by Shawn McKay > snack by liz west