Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
俺の望むライブラリがない!
Search
Koutarou Chikuba
May 29, 2014
Technology
1
2.1k
俺の望むライブラリがない!
JS ojisan #2
Koutarou Chikuba
May 29, 2014
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
4.9k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.6k
V8 as a container on CDN Edge worker
mizchi
6
2k
Edge Side Frontend という新領域
mizchi
34
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.2k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.4k
「フロントエンド領域」を再定義する
mizchi
50
36k
光を超えるためのフロントエンドアーキテクチャ
mizchi
91
23k
Other Decks in Technology
See All in Technology
継続的にアウトカムを生み出し ビジネスにつなげる、 戦略と運営に対するタイミーのQUEST(探求)
zigorou
0
520
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
1
230
kargoの魅力について伝える
magisystem0408
0
200
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
470
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
220
OpenShift Virtualizationのネットワーク構成を真剣に考えてみた/OpenShift Virtualization's Network Configuration
tnk4on
0
130
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
260
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
390
プロダクト開発を加速させるためのQA文化の築き方 / How to build QA culture to accelerate product development
mii3king
1
260
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
430
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
160
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Unsuck your backbone
ammeep
669
57k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
Docker and Python
trallard
42
3.1k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Designing for Performance
lara
604
68k
A designer walks into a library…
pauljervisheath
204
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Transcript
ԶͷΉϥΠϒϥϦ͕ͳ ͍ʂʂʂ ---------------------------- @mizchi
ࣗݾհ 4 νϟϦͰ͖ͨ 4 Angular͕ݏ͍ 4 AltjsϚχΞ 4 ͙͙Ε
͋ΔήʔϜΛ࡞͍ͬͯΔͱ ߏ 4 CoffeeScript 4 brunch 4 cordova 4 snap.svg
4 vue.js ͦͷΜ
΄͍͠ͷ͕શવΓͳ͍…
࠷ۙͷϑϩϯτΤϯυ։ൃελοΫ 4 Ϗϧυཧπʔϧ(grunt/gulp/brunch) 4 npm/bower 4 ϞδϡʔϧγεςϜ(require.js/browserify) 4 CSSύΠϓϥΠϯ(sass/compass/less)
ϥΠϒϥϦબఆͲ͏͢Δ?
ϥΠϒϥϦબఆͲ͏͢Δ? 4 ͱʹ͔͘αϯυϘοΫε࡞ͬͯࢼ͢
αϯυϘοΫε࡞Γ·͘Δ mizchi-sandbox
Θ͔Δ͜ͱ
ੈͷதʹ
Զ͕΄͍͠ϥΠϒϥϦ͕
ͥΜͥΜͳ͍ʂʂʂ
Ͳ͏͢Δͷʁ શ෦࡞Δ͔͠ͳ͍ʂ(ࡨཚ)
࡞ͬͨ 4 momic 4 libretto 4 warden 4 TypedCoffeeScript
΄͍͠ͷ 4 ϒϥβετϨʔδͷActiveRecordΈ͍ͨͳͭ
Momic
Momic 4 IndexedDb/localStorageϥούʔ 4 rubyͷActiveModel෩API
Momic user = new User user.name = 'mizchi' user.age =
26 user.save().then => console.log 'save done!' User.find().then (users) => console.log users
ݱঢ় ศརͳͷʹԶ͔ͬͯ͠ͳ͍
΄͍͠ͷ1 4 Vue.jsͷϧʔλʔ
Warden
Warden 4 grapnel.jsΛchaplin.js෩ʹ֦ு 4 vue.jsͱҰॹʹ͏ͷΛఆ(vue-router͕·ͩͳ͍) 4 vue.jsͷ࡞ऀʹհͯ͠Β͑ͨͷͰˑ42
# app/controllers/home-controller.coffee module.exports = class HomeController extends Warden.Controller beforeAction: (params)
-> @reuse Layout index: (params) -> home = @reuse HomeView $ -> router = new Warden router.match '', 'home#index' ͜Μͳײ͡
ݱঢ় 4 ศརry 4 ެࣜʹհ͞ΕΔͱͦΕͳΓʹΘΕΔͬΆ͍ʁʁ
ଞʹ 4 ඇಉظίϯτϩʔϧϑϩʔ
libretto
libretto 4 ඇಉظίϯτϩʔϧ 4 ϢʔβʔͱͷΠϯλϥΫγϣϯ੍ޚ 4 εςʔτϚγϯ੍ޚ
libretto Purchase = Libretto.extend steps: start: 'waitUserSelection' waitUserSelection: ['purchase', 'cancel']
purchase: 'end' waitUserSelection: (context) => context.itemName = 'apple' 'purchase' purchase: (context) -> new Promise (done) => done()
libretto ݱঢ়ɿநߴͯ͘Զ͔ͬͯ͠ͳ͍
΄͍͠ͷ 4 coffeescirptॻ͍ͯΔͱܕ͕΄͘͠ͳͬͯ͘Δ
TypedCoffeeScript 4 ͬͺܕ΄͍͠͡ΌΜʁͱ։ൃ։࢝ 4 coffeescriptͷΏΔ;Θจ๏ + TypeScriptతܕνΣοΫ 4 AST֦ுͯ͠੩తʹTypeCheck(ϥϯλΠϜνΣοΫ͡Ό ͳ͍ʂ)
4 CoffeeScriptReduxͷ֦ு(jashkenasͷͰͳ͍)
TypedCoffeeScriptͰͰ͖Δ͜ͱ1 double :: Int -> Int double = (n) ->
n * 2 num1 :: Int = double 5 num2 :: String = double 5 # => TypeError
TypedCoffeeScriptͰͰ͖Δ͜ͱ2 struct Point x :: Number y :: Number p
:: Point = {x: 3, y: 3}
TypedCoffeeScriptͰͰ͖Δ͜ͱ3 class X text :: String f :: Number ->
Number f: (n) -> @text = n.toString()
TypedCoffeeScriptͰͰ͖Δ͜ͱΓ 4 ςετίʔυಡΊ 4 https://github.com/mizchi/TypedCoffeeScript/blob/ master/test/type_checker.coffee
ࠓޙͷల 4 TypeScript Importer 4 ͦͷͨΊʹASTվળத 4 moduleγεςϜ 4 ܕͷΧόϨοδܭଌ
ͦͷաఔ 4 CoffeeScriptReduxʹsuper͕ͳ͍ʂ 4 ࣮ͯ͠ຊՈʹPRத 4 TypedCoffeeScriptͰಋೖࡁΈ
ݱঢ় 4 ͗ͯ͢͠৮Εͯͳ͔ͬͨ 4 ֎ਓ͔Β͋Ε͜ΕΕͬͯݴΘΕΔ 4 ։ൃʹؾ߹ͱ͕࣌ؒඞཁͰਏ͍
͞Βʹͭ͘Γͨ͘ͳͬͨͷ 4 TypeScriptͷlib.d.ts͍͍ͨͳʁ
dts-parser 4 TypeScriptͷASTΛಡΈ͍͢ײ͡ͰJSONͰग़ྗ
dts-parser declare module Foo { export function fun(str?: number[]):void; export
var a:number; export class Bar { x: any; } }
dts-parser modules: - nodeType: Module moduleName: Foo modules: (empty array)
classes: - nodeType: ClassNode className: Bar properties: ... ུ
৭ʑ࡞ͬͨײ
ͭͬͯ͘Θ͔ͬͨ͜ͱ 4 υοάϑʔσΟϯάେࣄ 4 ࣗͰ͏ͱΓͳ͍ϙΠϯτ͕Θ͔Δ 4 ΄ͬͱ͍ͯࣗҎ֎ͬͯ͘Εͳ͍
ϥΠϒϥϦΛఏڙ͢Δʹ 4 ૬खͷڥΛ੍ݶ͠ͳ͍(require.js/common.js) 4 ࣮࣭όχϥJS/CoffeeScript/TypeScript ― ศརͳϥΠϒϥϦ͕ͳ͍͜ͱΛఆ 4 jQuery/underscore͕͋Δͱࢥ͏ͳ 4
ඞཁͳͷ͚ͩҠ২ 4 bower/npmύοέʔδԽ
ͬͯΒ͏ʹ 4 ʮӳޠͰʯdescriptionॻ͘ 4 Githubઓಆྗ/࣏ྗΛ্͛Δ 4 ࠾༻࣮࡞Δ(ݫ͍͠) 4 ςετΛॻ͘(ͩΔ͍) 4
ςετΛͨ͘͞Μॻ͘(ΊͬͪΌͩΔ͍)
Ұ൪େࣄͳ͜ͱ 4 ࣏ 4 ॳಈ͕ͳ͍ͱ୭ݟͯ͘Εͳ͍ 4 ͯͿߥΒ͠ͱҰॹͰ࠷ॳʹWatcher͔ͭͳ͍ͱ୭Έͯ ͘Εͳ͍ʂʂʂ
ͳΜͰ͜Μͳ͜ͱͯ͠Δͷʁ
͜͜·ͰΔϞνϕʔγϣϯ 4 ٕज़ͷ୳ٻ(झຯ) 4 ωΠςΟϒฒͷΞϓϦ࡞ΕΔ͜ͱΛূ໌(ҙ) 4 ࣄΛָʹ͢Δ(࣮ӹ)
ऴΘΒͳ͍ϠΫङΓΛܦͯ…
Զୡͷઓ͍·ͩ͡·ͬͯͳ͍ʂ 4 ήʔϜ࡞ͬͯҰൃͯΔͧʁ
ݴ͍͔ͨͬͨ͜ͱ 4 TypedCoffeeScriptͷίϛολืूͯ͠·͢