フレームワークを求めるな。ECMAScriptを使へ。

有難うReact有難うRedux。

Transcript

1. .｡oO(さっちゃんですよヾ(〃l _ l)ﾉﾞ☆)
   

   View Slide

2. はじめに
   お前が斧を投げる時
   斧もまたお前を投げ
   返してゐるのだ。
   

   View Slide

3. View Slide

4. ？
   ？
   ？
   ？
   

   View Slide

5. 新しいフレームワークを紹介します。
   

   View Slide

6. View Slide

7. 新しいフレームワークの使い方
   • JSXを書きます。
   

   View Slide

8. View Slide

9. 新しいフレームワークの使い方
   • JSXを書きます。
   • Matt-Esch/virtual-domを入れます。
   

   View Slide

10. npm install virtual-dom --save
    

    View Slide

11. 新しいフレームワークの使い方
    • JSXを書きます。
    • Matt-Esch/virtual-domを入れます。
    • alexmingoia/jsx-transformでJSXをECMAScriptの函數に變換します。
    

    View Slide

12. View Slide

13. View Slide

14. 新しいフレームワークの使い方
    • JSXを書きます。
    • Matt-Esch/virtual-domを入れます。
    • alexmingoia/jsx-transformでJSXをECMAScriptの函數に變換します。
    • やりましたね！
    

    View Slide

15. やりましたね！
    

    View Slide

16. 新しいフレームワークを紹介します。
    最初に戻って、
    

    View Slide

17. 新しいフレームワークを紹介します。
    ʊਓਓਓਓਓਓਓʊ
    ʼ &$."4DSJQU ʻ
    ʉ:?:?:?:?:?:ʉ
    

    View Slide

18. ECMAScriptを使ふんだ！
    

    View Slide

19. ECMAScriptはいいぞ。
    

    View Slide

20. モジュール構成
    
    ᵓᴷᴷBQQKT
    ᵓᴷᴷMJCKT
    ᵓᴷᴷDPNQPOFOUT
    ᴹ ᵓᴷᴷ"EE5BTL'PSNKTY
    ᴹ ᵓᴷᴷ5BTL-JTUKTY
    ᴹ ᵋᴷᴷ5PEPKTY
    ᵓᴷᴷNPEFMT
    ᴹ ᵋᴷᴷ5BTLKT
    ᵋᴷᴷSFEVDFST
    ᵓᴷᴷ"EE5BTL'PSN3FEVDFSKT
    ᵋᴷᴷ5BTL-JTU3FEVDFSKT
    

    View Slide

21. メインの部分
    

    View Slide

22. React相当の部分
    

    View Slide

23. Redux相当の部分
    

    View Slide

24. コア部分 => 7.4KB (minify + gzip)
    

    View Slide

25. https://github.com/ne-sachirou/jsx_todo_sample
    

    View Slide

26. 私のFAQ
    • webpackに? => webpackは素晴らしい。webpack歴30分で變換モ
    ジュールが完成した。8行である。
    • ESLintは? => ESLintはデフォルトでJSXに対応してゐる。
    • JSXとは? => クラス (函數) をcomposeするDSLです。
    • FAQ此れ丈? => 後はTODO。
    

    View Slide

27. フレームワークを求めるな。
    ECMAScriptを使へ。
    

    View Slide