Angular2 + Electronでプレゼンテーションツールを作っている / Angular2-Electron-PresentationTool

ng-sake#2 LT資料

Transcript

1. Angular2+Electron で プレゼンツー ルを 作っている @joe­re
2. Who am I? twitter: @joe_re github: @joe­re working in freee.K.K
3. 今日話すこと 作ったものの紹介 Angular のComponent にReact 脳で触ってみた感触 Angular2 におけるComponent の作り方を紹介
4. 注意 React おじさんです 石は死なない程度なら 投げてくれていいです
5. 雑なmarkdown から いい感じのslide が 生まれてほしいという 欲望
6. 作ったもの
7. できること Live preview Presentation mode Export PDF
8. DEMO このスライドはCafe Pitch を利用して作られています
9. アプリケー ションの構成
10. なんでapplication3 つもあるの？？ presentation 機能は別window で開きたかった router で判断するのと迷ったけど、 このアプリケー ション 1 つのwindow 上でのペー ジ遷移ないんだよなー だったらアプリケー ションごとに1 つのペー ジをrender する 構成にしちゃった方が状態管理楽じゃないかなー FluxUtils のContainer、Redux のContainer Components の イメー ジ
11. でもこれ ウィンドウ開くたびに 1 からrender するので遅い
12. お？
13. お？？？
14. こんな感じにできそう
15. 少し試してみたけど うまくいかなかったので 試行錯誤中です！！ 今後にご期待ください
16. Angular の Component にReact 脳で触ってみた感触
17. コンポー ネント指向 やはり良い( こなみ)
18. そもそもコンポー ネント とはなんであったか
19. DOM 及びその振る舞いが定義されたもの
20. コンポー ネント指向における コンポー ネントは再利用可能で なければならない
21. Remember Angular1 Angular1 はコンポー ネント指向の魂を持っていた 実際にAngular1 はコンポー ネント指向の流れを加速させた だがtwo­way binding が状態管理を複雑にしてしまっていた
22. 状態管理が複雑であると再利用可能な コンポー ネントは作りづらい
23. React's Answear Component は与えられた値に従ってDOM 構造を生成する 描画の元になる値の生成ロジックには決してコンポー ネン トに持ってはいけない ( 徹底的にstate をcomponent から排除する) React におけるConponent とは与えられた値をそのまま DOM に変換する変換器である
24. Angular2's Component e x p o r t c l a s s E d i t o r { @ O u t p u t ( ' c h a n g e T e x t ' ) c h a n g e T e x t = n e w E v e n t E m i t t e r ( ) ; @ O u t p u t ( ' c h a n g e S e l e c t e d L i n e N o ' ) c h a n g e S e l e c t e d L i n e N o = n e w E v e n t E m i t t e r ( ) ; e d i t o r : A c e A j a x . E d i t o r ; n g O n C h a n g e s ( c h a n g e s : { t e x t : S i m p l e C h a n g e } ) { i f ( t h i s . e d i t o r & & t h i s . e d i t o r . g e t S e s s i o n ( ) . g e t V a l u e ( ) ! = = c h a n g e s . t e x t . c u r r e n t V a l u e ) { t h i s . e d i t o r . g e t S e s s i o n ( ) . s e t V a l u e ( c h a n g e s . t e x t . c u r r e n t V a l u e ) ; } } h a n d l e C h a n g e T e x t ( ) { t h i s . c h a n g e T e x t . e m i t ( t h i s . e d i t o r . g e t S e s s i o n ( ) . g e t V a l u e ( ) ) ; } h a n d l e C h a n g e L i n e N o ( ) { t h i s . c h a n g e S e l e c t e d L i n e N o . e m i t ( t h i s . e d i t o r . g e t S e l e c t i o n ( ) . g e t C u r s o r ( ) . r o w + 1 ) ; } } ※ 説明のために簡略化しています
25. With React 脳 ※ 説明のために簡略化しています
26. 親と共有する必要のない値は 自分のproperty に持つ 親と共有する必要がある値は 親から受け取る
27. But Angular2's component has more approach... https://angular.io/docs/ts/latest/cookbook/component­ communication.html
28. ※ これから紹介するコー ドは説明のために 適当に省略してるので動きません ご了承ください
29. ngOnChanges を使わずに@input でsetter を使う e x p o r t c l a s s E d i t o r { @ O u t p u t ( ' c h a n g e T e x t ' ) c h a n g e T e x t = n e w E v e n t E m i t t e r ( ) ; @ O u t p u t ( ' c h a n g e S e l e c t e d L i n e N o ' ) c h a n g e S e l e c t e d L i n e N o = n e w E v e n t E m i t t e r ( ) ; @ i n p u t ( ) s e t t e x t ( t e x t : s t r i n g ) { i f ( t h i s . e d i t o r & & t h i s . e d i t o r . g e t S e s s i o n ( ) . g e t V a l u e ( ) ! = = t e x t ) { t h i s . e d i t o r . g e t S e s s i o n ( ) . s e t V a l u e ( t e x t ) ; } } / / . . . 以下略 }
30. 親のロー カル変数にコンポー ネントを持って操る / / * * c h i l d * * / / @ C o m p o n e n t ( { s e l e c t o r : ' c o u n t d o w n - t i m e r ' , t e m p l a t e : ' < p > { { m e s s a g e } } < / p > ' } ) e x p o r t c l a s s C o u n t d o w n T i m e r C o m p o n e n t i m p l e m e n t s O n I n i t , O n D e s t r o y { / / . . . 省略 c l e a r T i m e r ( ) { c l e a r I n t e r v a l ( t h i s . i n t e r v a l I d ) ; } n g O n I n i t ( ) { t h i s . s t a r t ( ) ; } n g O n D e s t r o y ( ) { t h i s . c l e a r T i m e r ( ) ; } s t a r t ( ) { t h i s . _ c o u n t D o w n ( ) ; } s t o p ( ) { t h i s . c l e a r T i m e r ( ) ; } p r i v a t e _ c o u n t D o w n ( ) { / / . . . 省略 } } / / * * p a r e n t * * / / @ C o m p o n e n t ( { s e l e c t o r : ' c o u n t d o w n - p a r e n t - l v ' , t e m p l a t e : ` < h 3 > C o u n t d o w n t o L i f t o f f ( v i a l o c a l v a r i a b l e ) < / h 3 > < b u t t o n ( c l i c k ) = " t i m e r . s t a r t ( ) " > S t a r t < / b u t t o n > < b u t t o n ( c l i c k ) = " t i m e r . s t o p ( ) " > S t o p < / b u t t o n > < d i v c l a s s = " s e c o n d s " > { { t i m e r . s e c o n d s } } < / d i v > < c o u n t d o w n - t i m e r # t i m e r > < / c o u n t d o w n - t i m e r > ` , d i r e c t i v e s : [ C o u n t d o w n T i m e r C o m p o n e n t ] } ) e x p o r t c l a s s C o u n t d o w n L o c a l V a r P a r e n t C o m p o n e n t { }
31. 子を @ViewChild 経由で呼び出す @ C o m p o n e n t ( { s e l e c t o r : ' c o u n t d o w n - p a r e n t - v c ' , t e m p l a t e : ` < h 3 > C o u n t d o w n t o L i f t o f f ( v i a V i e w C h i l d ) < / h 3 > < b u t t o n ( c l i c k ) = " s t a r t ( ) " > S t a r t < / b u t t o n > < b u t t o n ( c l i c k ) = " s t o p ( ) " > S t o p < / b u t t o n > < d i v c l a s s = " s e c o n d s " > { { s e c o n d s ( ) } } < / d i v > < c o u n t d o w n - t i m e r > < / c o u n t d o w n - t i m e r > ` , d i r e c t i v e s : [ C o u n t d o w n T i m e r C o m p o n e n t ] } ) e x p o r t c l a s s C o u n t d o w n V i e w C h i l d P a r e n t C o m p o n e n t i m p l e m e n t s A f t e r V i e w I n i t { @ V i e w C h i l d ( C o u n t d o w n T i m e r C o m p o n e n t ) p r i v a t e _ t i m e r C o m p o n e n t : C o u n t d o w n T i m e r C o m p o n e n t ; s e c o n d s ( ) { r e t u r n 0 ; } n g A f t e r V i e w I n i t ( ) { s e t T i m e o u t ( ( ) = > t h i s . s e c o n d s = ( ) = > t h i s . _ t i m e r C o m p o n e n t . s e c o n d s , 0 ) } s t a r t ( ) { t h i s . _ t i m e r C o m p o n e n t . s t a r t ( ) ; } s t o p ( ) { t h i s . _ t i m e r C o m p o n e n t . s t o p ( ) ; } }
32. Service 経由でダイレクトに相互通信する c l a s s M i s s i o n S e r v i c e { p r i v a t e _ m i s s i o n A n n o u n c e d S o u r c e = n e w S u b j e c t < s t r i n g > ( ) ; p r i v a t e _ m i s s i o n C o n f i r m e d S o u r c e = n e w S u b j e c t < s t r i n g > ( ) ; m i s s i o n A n n o u n c e d $ = t h i s . _ m i s s i o n A n n o u n c e d S o u r c e . a s O b s e r v a b l e ( ) ; m i s s i o n C o n f i r m e d $ = t h i s . _ m i s s i o n C o n f i r m e d S o u r c e . a s O b s e r v a b l e ( ) ; a n n o u n c e M i s s i o n ( m i s s i o n : s t r i n g ) { t h i s . _ m i s s i o n A n n o u n c e d S o u r c e . n e x t ( m i s s i o n ) ; } c o n f i r m M i s s i o n ( a s t r o n a u t : s t r i n g ) { t h i s . _ m i s s i o n C o n f i r m e d S o u r c e . n e x t ( a s t r o n a u t ) ; } } c l a s s M i s s i o n C o n t r o l C o m p o n e n t { c o n s t r u c t o r ( p r i v a t e m i s s i o n S e r v i c e : M i s s i o n S e r v i c e ) { m i s s i o n S e r v i c e . m i s s i o n C o n f i r m e d $ . s u b s c r i b e ( / / s o m e p r o c e s s . . . ) } a n n o u n c e ( ) { t h i s . m i s s i o n S e r v i c e . a n n o u n c e M i s s i o n ( ' n e x t m i s s i o n ' ) ; } } c l a s s A s t r o n a u t C o m p o n e n t i m p l e m e n t s O n D e s t r o y { s u b s c r i p t i o n : S u b s c r i p t i o n ; c o n s t r u c t o r ( p r i v a t e m i s s i o n S e r v i c e : M i s s i o n S e r v i c e ) { m i s s i o n S e r v i c e . m i s s i o n A n n o u n c e d $ . s u b s c r i b e ( / / s o m e p r o c e s s . . . ) } c o n f i r m ( ) { t h i s . m i s s i o n S e r v i c e . c o n f i r m M i s s i o n ( t h i s . a s t r o n a u t ) ; } }
33. それぞれに適する場面は議論の 余地がありそう 是非この後話し合いたいです！
34. ありがとうございました！