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
3k
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
790
Building a Pixel Art Editor with Elm
shuhei
1
720
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
150
Draw Animated Chart on React Native
shuhei
0
8.7k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
810
Introduction to Angular 2
shuhei
2
140
Git の内部データ構造
shuhei
2
2k
Other Decks in Programming
See All in Programming
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
Rubyのobject_id
qnighy
6
1.3k
実践!難読化ガイド
mitchan
0
160
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
160
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
私のEbitengineの第一歩
qt_luigi
0
450
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
580
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
550
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
540
REXML改善のその後
naitoh
0
190
A New Era of Testing
mannodermaus
2
490
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Git: the NoSQL Database
bkeepers
PRO
425
64k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Code Review Best Practice
trishagee
62
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
How STYLIGHT went responsive
nonsquared
93
5.1k
Automating Front-end Workflow
addyosmani
1365
200k
Embracing the Ebb and Flow
colly
83
4.4k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Debugging Ruby Performance
tmm1
72
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
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