Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Universal JavaScript
Koutarou Chikuba
May 31, 2017
Technology
21
20k
Universal JavaScript
Roppongi.rb #3 Rails x Frontend-Tech
Koutarou Chikuba
May 31, 2017
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
V8 as a container on CDN Edge worker
mizchi
5
1.2k
Edge Side Frontend という新領域
mizchi
28
12k
バンドル最適化マニアクス at tfconf
mizchi
6
3k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
46
19k
Deno Node 両刀
mizchi
5
1.8k
「フロントエンド領域」を再定義する
mizchi
50
33k
光を超えるためのフロントエンドアーキテクチャ
mizchi
82
20k
ServiceWorkerSideReactServerSideRendering
mizchi
5
740
Development Tools for Next Generation
mizchi
16
1.4k
Other Decks in Technology
See All in Technology
GraphQLスキーマ設計の勘所
yukukotani
26
6k
マネーフォワードクラウドを支える事業者基盤
machisuke
0
510
目指せCoverage100%! AutoScale環境におけるSavings Plans購入戦略 / JAWS-UG_SRE_Coverage
taishin
0
440
OVN-Kubernetes-Introduction-ja-2023-01-27.pdf
orimanabu
1
260
日本ディープラーニング協会主催 NeurIPS 2022 技術報告会講演資料
tdailab
0
1k
GitHub Codespaces が拡げる開発環境、いつでもどこでも Visual Studio Code で!
dzeyelid
0
160
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
230
マイクロサービス宣言から8年 振り返りとこれから / Eight Years After the Microservices Declaration A Look Back and A Look Ahead
eisuke
2
130
230120 ガンダムの事例にみる自動化の対象 Haruka Oh!さん
comucal
PRO
0
130
ステート管理を超えるRecoil運用の考え方
uhyo
7
5.6k
Astroで始める爆速個人サイト開発
takanorip
12
8.5k
plotlyで動くグラフを作る
kosshi
0
740
Featured
See All Featured
Producing Creativity
orderedlist
PRO
335
37k
KATA
mclloyd
12
9.7k
What's in a price? How to price your products and services
michaelherold
233
9.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Agile that works and the tools we love
rasmusluckow
320
20k
Visualization
eitanlees
128
12k
BBQ
matthewcrist
75
8.1k
Raft: Consensus for Rubyists
vanstee
130
5.7k
Designing for humans not robots
tammielis
245
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
12k
Transcript
Universal JavaScript - ࠓޙ10 Λੜ͖ൈͨ͘Ίʹ @mizchi Roppongi.rb #3 Rails x
Frontend-Tech
About Me • ϑϩϯτΤϯυ/SPA/Node.js ΤϯδχΞ • ήʔϜܥ => ڭҭܥ =>
Increments(Qiita) • 4݄͔ΒϑϦʔϥϯεͰ Redux Express middleware • ࠷ۙͷڵຯ: ReactNative / AMP / ےτϨ
Podcast ͡Ί·ͨ͠ https://genba.fm/ • #1 Awesome Vue • #0 React
vs Angular - ͋Δ͍ Functional JavaScript
͓ॻ͖ • Sprockets ͷࡴ͠ํ • ͓લͷ Webpack ࢮ͵ • ͜ͷઌ10ੜ͖ΔͨΊʹ
!!!!CAUTION!!!! !!!!!!!!!!!! ຊࢿྉͷະདྷ༧ଌࣗͷצͰ͋Γ ΛऔΕΔͷͰ͋Γ·ͤΜ !!!!!!!!!!!!
ୈҰ෦: Sprockets ͷ ࡴ͠ํ
ࠓͷจ຺ toshimaru_e ʮQiitaͷSprockesΛࡴͨ࣌͠ͷΛ͓ئ͍Ͱ͖·͔͢ʯ mizchi ʮ͍ʯ
SprocketsΛࡴͨ͠هࣄ • Qiita - app/assets/javascriptsҎԼͷJSΛશͯ commonjsͷrequireʹॻ͖͑Δ • Qiita - decafͰcoffeeͷίʔυΛES.next
ʹॻ͖͑Δ ҙ: 2͙Β͍લ
લఏ: ͳͥ Sprockets ࢮ͵͖͔ • Ϟδϡʔϧղܾʹ ES Modules ͱ͍͏ඪ४ ͕͋Δ
• JSͰϑΝΠϧείʔϓΛ࣋ͯͣ ࢀর͕άϩʔόϧ͠ ʹͳΔ • ධՁॱͷ੍ޚ͕͍͠ • RailsଆʹӅṭ͞Εͯͯ node πʔϧνΣΠϯΛ͍ʹ͍͘ • ͍ (ExecJS)
(2015࣌ͷ) Sprockets ͷࡴ͠ํ • browserify-rails ͷಋೖ, ޙʹ webpack • εΫϦϓτॻ͍ͯ
sprockets/require Λ commonjs ʹ • άϩʔόϧมͷࢀরΛ module.exports = ... ʹೖ • ࢀরղܾΛάϩʔόϧม͔Β require('...') ʹ
before // define window.App.View.render = function () {/* render */}
// use App.View.render()
after: commonjs // define on render.js module.exports = () =>
{/* render */} // use const render = require('./render') render()
࣌ͷ੍ • ES Modules Ͱͳ͘ commonjs ͳͷɺ coffee ͕΄ͱ ΜͲͩͬͨͨΊ
• ࠓͳΒ ES Modules
େࣄͳ͜ͱ: ߟ͑ํͷస • ׂ୯ҐΛ ࣮ߦίʔυ ͔Β ؔϞδϡʔϧ • Ϟδϡʔϧఆٛͱͦͷ࣮ߦΛڧ۠͘ผ͢Δ
• େࣄͳͷɺ ࣮ߦ࣌ͷ෭࡞༻ͷநग़ ͱɺ༧ଌ͢͠͞
ʮ࣮ߦίʔυʯ͔ΒʮؔϞδϡʔϧʯ // Bad document.title = 'foo' // Good // setTitle.js
export default function setTitle(title) { document.title = title } // runner.js setTitle('foo')
͍͍͍ͨ͜ͱ • ଞͷݴޠ/ڥͰʮධՁɺଈɺ࣮ߦɺ෭࡞༻์Γ͛ʯΈ͍ͨ ͳίʔυ͋·Γॻ͔ͳ͍ͣ • ͨΓલͷ͜ͱΛͨΓલʹ Γ·͠ΐ͏
ୈೋ෦: ͓લͷ Webpack ࢮ͵
Webpack ͷׂ • ES Modules ͷόϯυϧ • ֦ுࢠ͝ͱͷ transform •
։ൃ࣌ͷ Hot Reload • ࢀরղܾͷ Alias • etc...
ҙࣝ: ػೳ͕͋Γׂ͗ͯ͢Ε૭ • JSόϯυϥͷൣᙝΛӽ͍͑ͯͯ node.js Ͱ࠶ݱͰ͖ͳ͍ • ઃఆϑΝΠϧ͕Ͱ͔͍ & Α͘Θ͔ΒΜ
• css-modules ಋೖ͕ࠇຐज़Ͱਏ͍ • ίϐϖͰಈ͍ͨޙɺಈ͔ͳ͘ͳͬͨͱ͖ͷௐ͕ࠪେม
Universal JavaScript • Universal: ECMAScript ͷ Spec ΛຬͨͤɺͲΜͳ ڥͰಈ͘JS •
Isomorphic : ڱٛͷUniversalɻBrowser/Node͕ରɻ => Webpack Universal ੑΛഁյ͢Δ(͍͢͠)͔ΒϞδ ϡϥϦςΟ͕Լ͢ΔΑͱ͍͏
Babel Universal ͔ʁ • DOM Λ৮Βͣɺbabel-preset-es201* ΛͬͯΔ͏ͪ Yes •
ͨͩ͠ ES Modules ͷύεղܾ commonjs + α • lib/index ͱ͔ node_modules ͱ͔ • stage0~3, jsx, flow ඪ४֎
Native ES Modules ͷԻ
Native ES Modules • Safari 10.1 • Chrome M60(Canary) ϑϥάͰ
• Edge ϑϥάͰ
ES Moduls in Browser <script type="module"> import {addTextToBody} from './utils.js';
addTextToBody('Modules are pretty cool.'); </script> https://jakearchibald.com/2017/es-modules-in- browsers/
ES Modules ͕͋ͬͨΒ͑Δ͔ʁ • ༷తʹYES • ͨͩ͠HTTP/2Ͱͳ͍ͱύϑΥʔϚϯε͕େ෯ʹྼԽ͢ΔՄೳੑ • ES ModulesHTTP/2Ͱ෦ߋ৽ͷເΛݟΔ͔ʁ
• Cache aware server push - kazuho
ES Modules: ࠓޙͷ༧ • དྷʹ࣮͕ग़ἧ͏ • ࠷ॳ Fastly ͷΑ͏ͳ CDN
Ͱղܾ͞ΕΔͷͰ • কདྷతʹ nginx/h2o ͷϞδϡʔϧԽ͞Εͯ͑ΔΑ͏ʹͳ ͬͯΔͣ • ES Modules ͷ੩తղੳεςοϓඞཁ ϓϩμΫγϣϯͰ͑Δͷɺ͓ͦΒ͘ 2~3ޙ
Webpack ͷͱࢮ͵ཧ༝: ·ͱΊ • ศརͳׂΕ૭ • Universal ੑΛഁյ͠ίʔυͷϞδϡϥϦςΟ͕Լ • ωΠςΟϒͷ
ES Modules Ͱ૬ରతʹॏཁੑ͕Լ δϯΫεతʹɺDHH͕બΜͩϑϩϯτͷπʔϧࢮ͵
ଈࢮ͠ͳ͍ Webpack ͷ͍ํ • ES Modules ͷܨ͗ͱׂΓͬͯ͏ • ಠࣗͳtransformΛՄೳͳݶΓ babelଆಀ͕͢
• css-modules => styled-jsx • resolve.alias => babel-plugin-module-resolver
ୈࡾ෦: ͜ͷઌ10ੜ ͖ΔͨΊ
JavaScriptք Ϣʔβʔ: ΊͬͪΌଟ͍ ϢʔβʔͷόοΫΤϯυ: ଟ༷ JSͷฏۉ࿅: ͍ (ยखؒ)
ίϯηϯαεͱΔͷϚδͰແཧ
Easy > Simple Ͱ࠷ѱ
ϥΠϒϥϦઃܭऀͷؾ࣋ͪ • Easy ͰϢʔβʔΛὃͯ͠ɺSimple • npmքͰɺྲྀߦͬͨػೳ୯ػೳʹϒϨʔΫμϯ͞ΕΔ
Webpacker ͷ scaffold ͕Ϡόͦ͏ • ίϯηϯαεऔΕͳ͍ڥͰ, ୭͕ೲಘͰ͖ΔϘΠϥʔϓϨ ʔτΛߏங͢Δͷແཧ • ԼճΓΛࢧ͑ΔͷʹΑͦ͞͏͕ͩɺׂΕ૭…
ຊ࣭͚ͩݟ͍͍ͯͨ… • Agnostic ʹ Universal ͰϏδωεϩδοΫΛॻ͘ • Domain => UI
State => View => Event Handler ...
ϑϨʔϜϫʔΫͷׂ • ͳΜ͔Ͱ͔͍JSONΛ࡞Δ • ͳΜ͔Ͱ͔͍JSONΛViewʹΔ • ͳΜ͔Ͱ͔͍JSONΛ࡞ΔͭʹΠϕϯτΛૹΔ
ͦͦແݶͷύϑΥʔϚϯε͕͋Ε… const mainloop = () => { requestAnimationFrame(mainloop) document.body.innerHTML =
render(getState()) } mainloop()
UIϥΠϒϥϦࢮ͵ͷ͔ • Ϩϯμϥͷ WebComponents • ঢ়ଶͷཧΔ
ϑϩϯτͷྑ͍ઃܭͱ • x ίʔυ͕Βͳ͍ • ◦ ϞδϡʔϧΛँͰ͖Δ GUIͷਏ͞ɺઃܭ༷͕ίʔυʹΓʹ͍͘ͱ͜Ζ ࢦ͖͢ɺݎ࿚ͳઃܭΑΓɺࣜભٶͰʁͱ͍͏ఏҊ
͓ΘΓ