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
900
Building a Pixel Art Editor with Elm
shuhei
1
790
Redux Middleware Wars (Japanese)
shuhei
8
1.9k
Redux Middleware Wars (English)
shuhei
0
180
Draw Animated Chart on React Native
shuhei
0
8.8k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
880
Introduction to Angular 2
shuhei
2
160
Git の内部データ構造
shuhei
2
2k
Other Decks in Programming
See All in Programming
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
100
新しいモバイルアプリ勉強会(仮)について
uetyo
1
260
画像コンペでのベースラインモデルの育て方
tattaka
3
1.7k
Infer入門
riru
4
1.5k
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
860
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
2
180
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
110
AIエージェント開発、DevOps and LLMOps
ymd65536
1
200
ゲームの物理
fadis
5
1.2k
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
21
8.2k
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.6k
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.3k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
338
57k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Ace a Technical Interview
jacobian
279
23k
Designing Experiences People Love
moore
142
24k
Writing Fast Ruby
sferik
628
62k
The Cult of Friendly URLs
andyhume
79
6.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
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