Slide 1
Slide 1 text
SwiftͰ
ElmΛ࡞Δ
2017/03/07 try! Swift AfterShow #tryswift_as
Yasuhiro Inami / @inamiy
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Elm?
Slide 4
Slide 4 text
ElmͬͯԿ?
• WebΞϓϦ༻ͷؔܕϓϩάϥϛϯάݴޠ
• Haskell෩ͷߏจ͔ΒɺHTML/CSS/JavaScriptΛੜ
• ७ਮؔܕɺ੩తܕ͚ɺਖ਼֨ධՁ
• ܕΫϥεFRP͕ͳ͍ → ॳ৺ऀͰཧղ͍͢͠
• Virtual DOM ͱ Effect Manager Λѻ͏
• React.js + Redux.jsΑΓγϯϓϧ
Slide 5
Slide 5 text
main = Html.beginnerProgram { model = 0, view = view, update = update }
type Msg = Increment | Decrement
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
]
Slide 6
Slide 6 text
let program = BeginnerProgram(model: 0, view: view, update: update)
...
enum Msg { case increment, decrement }
func update(msg: Msg, model: Model) -> Model {
switch msg {
case .increment: return model + 1
case .decrement: return model - 1
}
}
func view(model: Model) -> Html {
return div(children: [
button(attributes: [onClick(.decrement)], children: [text("-")]),
div(children: [text("\(model)")]),
button(attributes: [onClick(.increment)], children: [text("+")])
])
}
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Swift࣮Ͱඞཁͳͷ
• Virtual DOM
• State Machine (+ Effect Manager)
• In Depth
• Template Metaprogramming
• Equatable Function
• Flexbox layout
Slide 9
Slide 9 text
Virtual DOM
Slide 10
Slide 10 text
Virtual DOM
• Viewͷdiff-patchΞϧΰϦζϜ
• ΞϓϦͷঢ়ଶ͕มΘΔʹ"ޮతͳ"࠶ඳըΛߦ͏
• ྫɿElm, React.js, Vue.jsͳͲ
• https://github.com/inamiy/VTree
• func diff(old: VTree, new: VTree) -> Patch
• func apply(patch: Patch, to: UIView) -> UIView?
Slide 11
Slide 11 text
VTree (ٙࣅίʔυ)
protocol VTree {
...
var children: [VTree] { get }
func createView() -> UIView
}
struct VView: VTree { ... }
func render(model: Model) -> VTree {
return VView(children: [VLabel(text: "\(model)")])
}
Slide 12
Slide 12 text
VTree (ٙࣅίʔυ)
var model = 0
var tree = render(model)
var view = tree.createView()
timer(1) {
model += 1
let newTree = render(model)
let patch = diff(old: tree, new: newTree)
view = apply(patch: patch, to: view)
}
Slide 13
Slide 13 text
State Machine
(+ Effect Manager)
Slide 14
Slide 14 text
State Machine (+ Effect Manager)
• ʮΞϓϦͷঢ়ଶ (Model)ʯΛཧ͠ɺʮೖྗ (Msg)ʯ͕ߦΘΕ
Δʹʮঢ়ଶભҠؔ (update)ʯ Λ௨ͯ͠ʮঢ়ଶมߋʯͱ
ʮ෭࡞༻ (Cmd)ʯΛಉ࣌ʹѻ͏
• initial: Model (+ Cmd)
• update: (Msg) -> (Model) -> Model (+ Cmd)
• update७ਮؔ
Slide 15
Slide 15 text
State Machine (+ Effect Manager)
• ͭ·ΓɺϛʔϦɾϚγϯ (Mealy Machine)
• Redux.jsͷݪܕ
• https://github.com/inamiy/ReactiveAutomaton
• iOSDC Japan 2016
• iOSConf SG 2016
Slide 16
Slide 16 text
VTree
+
Automaton
Slide 17
Slide 17 text
SwiftElm
https://github.com/inamiy/SwiftElm
Slide 18
Slide 18 text
In Depth
Slide 19
Slide 19 text
Template Metaprogramming
• krzysztofzablocki/Sourcery
• SourceKitten (AST parser) ͱ Stencil (template) Λ༻
• ίʔυΛݮ
• AutoEquatable, AutoHashable, AutoCases,
AutoLenses, Auto-LinuxMain.swift, ͳͲ
• ʮSwiftElm → ར༻ଆʯͷ(Ҿ͖)ϝοηʔδϯάʹ༻
Slide 20
Slide 20 text
Equatable Function
• dankogai/peekFunc ✨"✨
func peekFunc(_ f: (A) -> R) -> (fp: Int, ctx: Int) {
let (_, low) = unsafeBitCast(f, to: (Int, Int).self)
let offset = MemoryLayout.size == 8 ? 16 : 12
let ptr = UnsafePointer(bitPattern: low + offset)
return (ptr!.pointee, ptr!.successor().pointee)
}
• Msg ίϯετϥΫλΛൺֱ͢Δࡍʹศར
• ͞ΒʹؔΛFuncBoxܕͰϥοϓͯ͠ɺಉҰੑΛอূ
Slide 21
Slide 21 text
Flexbox
• inamiy/Flexbox
• facebook/yoga ͷSwiftϥούʔ
• ΫϩεϓϥοτϑΥʔϜͷ CSS
Flexbox ϨΠΞτΤϯδϯ
• ReactNativeͰΘΕ͍ͯΔ
• ඇಉظܭࢉ͕Մೳ
• UIStackViewҎ্ͷ͜ͱ͕Ͱ͖Δ
• AutoLayoutΑΓ؆୯ʢ͔ʣ
Slide 22
Slide 22 text
·ͱΊ
• VTree (Virtual DOM)
• ReactiveAutomaton (State Machine)
• Sourcery (Template Metaprogramming)
• dankogai/peekFunc (Function Equality)
• facebook/yoga (Layout Engine)
• SwiftElm !
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Thanks!