$30 off During Our Annual Pro Sale. View Details »

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

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

有難うReact有難うRedux。

さっちゃん

August 04, 2016
Tweet

More Decks by さっちゃん

Other Decks in Programming

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