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
14
4.2k
Server Side JavaScript のためのバンドル最適化
mizchi
5
5.8k
V8 as a container on CDN Edge worker
mizchi
5
1.7k
Edge Side Frontend という新領域
mizchi
33
13k
バンドル最適化マニアクス at tfconf
mizchi
7
3.9k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.2k
「フロントエンド領域」を再定義する
mizchi
50
35k
光を超えるためのフロントエンドアーキテクチャ
mizchi
84
21k
Other Decks in Technology
See All in Technology
クラウドサインにおけるプロダクトマネージャーの役割と開発プロセス / 20240410_cloudsign-PdM
bengo4com
1
680
Tebiki株式会社 エンジニア採用資料
tebiki
0
4.1k
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
340
4年前、あるじゃん老害エンジニアLT合戦に登壇、米国西海岸コンピュータ歴史博物館体験記の続編
toshi_atsumi
0
200
なぜ NOT A HOTEL が Web3 に取り組むのか - NOT A HOTEL TECH TALK
ynunokawa
0
160
Databricks におけるデータエンジニアリング
databricksjapan
0
380
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
100
小さな開発会社がWebサービスを作る理由
polidog
PRO
1
160
自動生成を活用した、運用保守コストを抑える Error/Alert/Runbook の一元集約管理 / Centralized management of Error/Alert/Runbook to minimize operational costs using automated code generation
biwashi
9
2.1k
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
120
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
1
4.2k
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
150
Featured
See All Featured
A better future with KSS
kneath
231
16k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Faster Mobile Websites
deanohume
297
30k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
How STYLIGHT went responsive
nonsquared
92
4.8k
Music & Morning Musume
bryan
41
5.6k
The Invisible Side of Design
smashingmag
294
49k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
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ͷίϛολืूͯ͠·͢