Web技術の現状と感情

原稿付き記事: https://rxon.now.sh/webKanjyo.md

Transcript

1. Webٕज़ͷ ݱঢ়ͱײ৘ by rxon
2. rxon ݝཱ͓͸͖ͩΕ͍͖Ε͍େֶηΫγʔϓϩάϥϛϯάֶՊҰճੜ ϑϩϯτΤϯυμΠλΠϫΧϧ όοΫΤϯυϋφϯτφΫ
3. Webٕज़ Web ϞόΠϧ σεΫτοϓ etc… React Native, Ionic Electron(Chromium and Node.js) ↘︎ addon→C++
4. Web WebαΠτ ී௨ͷwebϖʔδ WebΞϓϦέʔγϣϯ WebϓϥοτϑΥʔϜ্ͷΫϥΠΞϯταΠυ ΞϓϦέʔγϣϯ
5. WebΞϓϦέʔγϣϯ ϑϩϯτΤϯυ ΫϥΠΞϯταΠυ
   όοΫΤϯυ αʔόʔαΠυ
   Node.js(V8+͍Ζ͍Ζ) WAF: express, koa
6. ݱঢ়
7. Single Page Application 1ϖʔδ্ʹؾ߹ͰΫϥΠΞϯταΠυΞϓϦ έʔγϣϯΛߏங͢Δ ঢ়ଶભҠͷ؅ཧ JSONͷऔಘ ͦͷଞϒϥ΢βͷॾػೳΛ࠶࣮૷
8. SPAͷ࡞Γํ React.jsͰcomponentsΛͱΓ͍͋͑ͣͬͺ͍࡞Γɺ ReduxͰঢ়ଶΛ؅ཧɺΠϕϯτʹdispatchΛ෇༩͢ ΔɻσʔλऔಘʹaxiosΛ࢖͍ɺϧʔςΟϯάʹ react-routerɻॾʑͰ͖ͨΒbabelͰJSͷτϥϯεύ Πϧ΍PostCSSΛ͠ͳ͕ΒWebpackͰґଘղܾͯ͠ bundle.jsΛग़ྗɻόοΫΤϯυʹ͸REST JSON API Λ༻ҙ͠ɺServer-Side Rendering΋ߦ͏ɻ
9. ײ৘
13. minimalist
14. ௒ϛχϚϜͳߏ੒Ͱ ͳΜ͔࡞Γ͍ͨ
15. ͦ͏͍΍ٕज़ϒϩά WordPressɹϑΝΠϧଟ͗͌͢ TumblrɹCLI͔Β࢖͑ͳ͍ ੩తαΠτδΣωϨʔλʔɹຖճbuild͕ඞཁ
16. ཁ݅ ฤू͸local md(textlint࢖͏ͨΊ deployͷone commendͰߋ৽ ͱʹ͔͘ϛχϚϜʹ
17. files = await fs.readdir(dir) github.com/zeit/serve
18. rxon/note-2017 ಡΉਓͱॻ͘ਓʹ࠷ߴͷUXΛ༩͑ΔͨΊͷ front-end͚ͩͰͳ͘back-endɺ։ൃ؀ڥͱ΋ʹ ௒ઈϛχϚϜͳٕज़ϒϩά ϑϩϯτΤϯυɹmustache:163ߦ(಺CSS:68ߦ) όοΫΤϯυɹNode.js:133ߦ typo͸browserʹґଘ
19. ࢓૊Έ [ 'crossPlatformYu.md', 'minCMS.md', 'semicolon.md', 'webpackSmallArt.md' ] fs.readdir(); [{ title: 'ੈք࠷খͷCMS', description: 'ϛχϚϜ date: '2017-03-09', url: 'minCMS.md', html: null }, { title: 'ᕟΰγοΫΛҰॠ description: '͜Ε͸ε md͔Βਖ਼نදݱͰ ϝλσʔλΛऔΓग़͢ هࣄϖʔδ͸͜ΕʹhtmlΛ͚ͭΔ
22. ৽نੑ ଟ෼
23. ੈք࠷খͷ CMS(ଟ෼)(޿ٛ) ଟ෼
25. ͦ͏͸ݴͬͯ΋
26. “ΞϓϦέʔγϣϯ”Λ ࡞Δͱ͖͸SPAʹ͍ͨ͠
27. ଥڠɺબఆɺ੒௕ɻ mithrilɹAPI13ݸ(< 8kb gzip) ɺҰ௨ΓೖͬͯΔ koaɹsubstack wayɺࣗ༝ͳදݱɺtjͷਪ͠ + JWT auth without password
28. JSON Web Token auth without password 1. email form 2. /auth?email=${email}&token=${token} Λฦ৴ 3. tokenΛcookieʹೖΕɺ͜ΕΛجʹೝূͯ͠ϦΫ Τετ ख਺͕ΊͬͪΌগͳ͍
29. ࠷ޙʹ
30. ϑϩϯτΤϯυͷָ͠Έํ
31. Web։ൃͷָ͠Έํ ंྠ͸͍͍ײ͡ͷlibraryͰαΫοͱย෇͚ɺ ѹ౗తൃ૝ྗͰ৽نੑΛੜΈग़͠ɺͦ͜ʹूத͢Δɻ
32. ऴ