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.2k
俺の望むライブラリがない!
JS ojisan #2
Koutarou Chikuba
May 29, 2014
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
30
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.1k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.8k
V8 as a container on CDN Edge worker
mizchi
6
2.1k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.3k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.4k
「フロントエンド領域」を再定義する
mizchi
50
36k
Other Decks in Technology
See All in Technology
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
380
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
6.3k
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
260
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
データの品質が低いと何が困るのか
kzykmyzw
6
1.1k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
280
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
820
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
130
Larkご案内資料
customercloud
PRO
0
650
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
110
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Done Done
chrislema
182
16k
Building Your Own Lightsaber
phodgson
104
6.2k
BBQ
matthewcrist
86
9.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Embracing the Ebb and Flow
colly
84
4.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Music & Morning Musume
bryan
46
6.3k
Side Projects
sachag
452
42k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Rails Girls Zürich Keynote
gr2m
94
13k
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ͷίϛολืूͯ͠·͢