Develop Components with Angular

Slide 1

Slide 1 text

Develop Components with Angular @Quramy 2016.12.22 ng_sake#7

Slide 2

Slide 2 text

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  

Slide 3

Slide 3 text

Today’s theme: Component։ൃͷͨΊʹ΍ͬ ͍ͯΔ͜ͱ

Slide 4

Slide 4 text

• UI Component Guide • Karma Driven Development

Slide 5

Slide 5 text

UI and Application • ModuleΛ໌ࣔతʹ෼ׂ • UI Module: ݟͨ໨ʹಛԽ͢Δ. ΞϓϦͷ஌ࣝ͸࣋ͨͳ͍ • Application Module: UIΛར༻͢Δ͚ͩ. ෳࡶͳCSS͸ॻ͔ ͳ͍ UI Module Application Module

Slide 6

Slide 6 text

UI Component

Slide 7

Slide 7 text

UI Component • νʔϜͰ։ൃͯ͠Δͱɺ  ʮ̋̋ͳݟͨ໨ͷComponent͚ͬͯ͋ͬͨͬʁʯ  ͱ͔  ʮ××ͷComponentͬͯͲ͏΍ͬͯ࢖͏Μ͚ͩͬʁʯ  ͬͯͳΔ

Slide 8

Slide 8 text

Component Guide • Component GuideͷϝϦοτ • ݟͨ໨ͷύλʔϯ͕Ұ໨Ͱ෼͔Δ • exampleͱͦͷsource΋ఏڙ͢Δ͜ ͱͰɺίϐϖݩ΋؆୯ʹ୳ͤΔ UI Module Component Guide

Slide 9

Slide 9 text

͜Μͳ͔Μ͡

Slide 10

Slide 10 text

Ͳʔ΍ͬͯ࡞Δͷ͔ • 1 UI ComponentʹରԠͯ͠ 1UI Guide ComponentΛ࡞Δ • Guide ComponentͷΫϥεͷ഑ྻΛ࡞ͬͯGuide Moduleͷ entryComponents ʹಥͬࠐΉ • ComponentResolverFactory + ViewContainerRef Λ࢖ͬ ͯɺGuide ComponentΛಈతʹϚ΢ϯτ͢Δ • ιʔείʔυදࣔ͸srcσΟϨΫτϦΛͦͷ··Webαʔόʹ ಥͬࠐΜͰ͓͍ͯɺHttp ServiceͰऔಘ͢Δ͚ͩ

Slide 11

Slide 11 text

Application Component

Slide 12

Slide 12 text

Application Componentͷಛੑ େ࿮ɺԼهͷͲ͔ͬͪʹͳΔ:(΋ͪΖΜྫ֎΋͋Δ͚Ͳ….) • Smart Component:  State؅ཧ΍Ajaxͱ͔͢Δࢠɻ஫ೖ͞ΕΔService ଟΊɻ • Dumb Component:   ड͚ͱͬͨ஋ͷඳըͱΠϕϯτϋϯυϦϯάʹू த͢Δࢠ. @Input ͱ @Output த৺

Slide 13

Slide 13 text

ಛʹDumb Component͸ඳըύλʔϯ͕ଟ͘ͳ Γ͕ͪ. *ngIf ৚݅෼ذͱ͔͍ͬͺ͍ɻ ୯ମςετͩʂ

Slide 14

Slide 14 text

Karma Debug Ͳ͏ͤKarmaͰDOMͷݕূ͢ΔΜͩͬͨΒɺ͍ͭͰʹݟ ͨ໨΋֬ೝͪ͠Ό͑͹Α͘Ͷʁ • ϩʔΧϧ: Karmaͷdebug.htmlΛ໨ͰΈΔ • CI: spec׬ྃ࣌఺ͰͷScreenshotΛอଘ. • ͱ͸͍͑ɺPhantomJSͩͱϨϯμϦϯάγϣϘ͍ • ͦ͏ͩɺElectronͩ

Slide 15

Slide 15 text

karma-nightmare https://github.com/bokuweb/karma-nightmare • Nightmare(Electronϥούʔ)ΛKarmaͷ browserͱͯ͠ར༻͢ΔͨΊͷPlugin • screenshot ϝιου͕ఏڙ͞ΕΔ. ͜ΕΛspec ΍ɺafterEachͰୟ͚͹pngͷऔಘ͕Մೳ