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
Develop Components with Angular
Search
Yosuke Kurami
December 23, 2016
Programming
1
560
Develop Components with Angular
Yosuke Kurami
December 23, 2016
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
App Router 悲喜交々
quramy
7
530
上手に付き合うコンポーネントテスト
quramy
4
1.9k
Patched fetch did not work
quramy
6
600
GraphQL あるいは React における自律的なデータ取得について
quramy
18
4.9k
Next.js App Router
quramy
15
3.4k
Fragment Composition of GraphQL
quramy
16
3.6k
reg-viz VRT tools
quramy
4
1.3k
NoInfer
quramy
0
240
Precondition with schema directives
quramy
0
1.5k
Other Decks in Programming
See All in Programming
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
Open source software: how to live long and go far
gaelvaroquaux
0
620
時計仕掛けのCompose
mkeeda
1
280
DROBEの生成AI活用事例 with AWS
ippey
0
130
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
テストをしないQAエンジニアは何をしているか?
nealle
0
130
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
For a Future-Friendly Web
brad_frost
176
9.5k
Making Projects Easy
brettharned
116
6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
How GitHub (no longer) Works
holman
313
140k
Thoughts on Productivity
jonyablonski
69
4.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
Develop Components with Angular @Quramy 2016.12.22 ng_sake#7
About me • @Quramy (Yosuke Kurami) • Frontend Web Developer
at WACUL INC. • develop SPA with Angular(1 and 2) • झຯͰTypeScript༻ͷVimϓϥΪϯ։ൃ͠·͢ • http://vimawesome.com/plugin/tsuquyomi
Today’s theme: Component։ൃͷͨΊʹͬ ͍ͯΔ͜ͱ
• UI Component Guide • Karma Driven Development
UI and Application • ModuleΛ໌ࣔతʹׂ • UI Module: ݟͨʹಛԽ͢Δ. ΞϓϦͷࣝ࣋ͨͳ͍
• Application Module: UIΛར༻͢Δ͚ͩ. ෳࡶͳCSSॻ͔ ͳ͍ UI Module Application Module
UI Component
UI Component • νʔϜͰ։ൃͯ͠Δͱɺ ʮ̋̋ͳݟͨͷComponent͚ͬͯ͋ͬͨͬʁʯ ͱ͔ ʮ××ͷComponentͬͯͲ͏ͬͯ͏Μ͚ͩͬʁʯ ͬͯͳΔ
Component Guide • Component GuideͷϝϦοτ • ݟͨͷύλʔϯ͕ҰͰ͔Δ • exampleͱͦͷsourceఏڙ͢Δ͜ ͱͰɺίϐϖݩ؆୯ʹ୳ͤΔ
UI Module Component Guide
͜Μͳ͔Μ͡
Ͳʔͬͯ࡞Δͷ͔ • 1 UI ComponentʹରԠͯ͠ 1UI Guide ComponentΛ࡞Δ • Guide
ComponentͷΫϥεͷྻΛ࡞ͬͯGuide Moduleͷ entryComponents ʹಥͬࠐΉ • ComponentResolverFactory + ViewContainerRef Λͬ ͯɺGuide ComponentΛಈతʹϚϯτ͢Δ • ιʔείʔυදࣔsrcσΟϨΫτϦΛͦͷ··Webαʔόʹ ಥͬࠐΜͰ͓͍ͯɺHttp ServiceͰऔಘ͢Δ͚ͩ
Application Component
Application Componentͷಛੑ େɺԼهͷͲ͔ͬͪʹͳΔ:(ͪΖΜྫ֎͋Δ͚Ͳ….) • Smart Component: StateཧAjaxͱ͔͢Δࢠɻೖ͞ΕΔService ଟΊɻ • Dumb
Component: ड͚ͱͬͨͷඳըͱΠϕϯτϋϯυϦϯάʹू த͢Δࢠ. @Input ͱ @Output த৺
ಛʹDumb Componentඳըύλʔϯ͕ଟ͘ͳ Γ͕ͪ. *ngIf ݅ذͱ͔͍ͬͺ͍ɻ ୯ମςετͩʂ
Karma Debug Ͳ͏ͤKarmaͰDOMͷݕূ͢ΔΜͩͬͨΒɺ͍ͭͰʹݟ ͨ֬ೝͪ͠Ό͑Α͘Ͷʁ • ϩʔΧϧ: Karmaͷdebug.htmlΛͰΈΔ • CI: specྃ࣌ͰͷScreenshotΛอଘ.
• ͱ͍͑ɺPhantomJSͩͱϨϯμϦϯάγϣϘ͍ • ͦ͏ͩɺElectronͩ
karma-nightmare https://github.com/bokuweb/karma-nightmare • Nightmare(Electronϥούʔ)ΛKarmaͷ browserͱͯ͠ར༻͢ΔͨΊͷPlugin • screenshot ϝιου͕ఏڙ͞ΕΔ. ͜ΕΛspec ɺafterEachͰୟ͚pngͷऔಘ͕Մೳ
Demonstration https://github.com/Quramy/karma- nightmare-angular-demo
Thank you!