Model-View-Update-Communicate Session Types meet the Elm Architecture Simon Fowler University of Edinburgh ABCD Final Meeting 19th December 2019
Functional Session Types EqualityClient : ! Int . ! Int . ? Bool . End → Session types: Types for protocols equalityClient : EqualityClient ⊸ Bool → Here, interested in linear functional equalityClient ( s ) ≜ languages let s = send (5 , s ) in → Huge advances over the course of let s = send (5 , s ) in ABCD! let ( res , s ) = receive s in close s ; res 2
Interactivity? Majority of implementations: Command line applications Really, communication actions triggered by UI events, sending user-specified data Difficult to embed linear resources into a GUI Some early work on session types + GUIs, but ad-hoc, not formal → (Client code in Exceptional Asynchronous Session Types was a mess ) 3
TwoFactorClient Username Password & Authenticated ClientBody Challenge ChallengeKey Response & Authenticated ClientBody AccessDenied End AccessDenied End
TwoFactorClient ≜ !( Username , Password ) . & { Authenticated : ClientBody , Challenge : ? ChallengeKey . ! Response . & { Authenticated : ClientBody , AccessDenied : End } , AccessDenied : End }
Approach Step 1: Formalise a GUI framework → I chose Model-View-Update, as pioneered by Elm π Step 2: Extend formalism with session types → Some intricacies... Step 3: Implement in Links → Result: Idiomatic server and client code for session- typed web applications 5
Contributions λ MVU : A Formal Model of the MVU Architecture → First formal characterisation of MVU → Soundness proofs Extending λ MVU with Session Types → Formal characterisations of subscriptions and commands from Elm → Linearity and model transitions allow safe integration of session types Implementation and Examples → MVU + extensions implemented in Links language → Example applications including two-factor authentication and chat server 6
Demo: A box and a label
Model-View-Update https://www.slideshare.net/RogerioChaves1/introduction-to-elm Model : State of application View : Renders model as HTML Update : Updates model based on UI messages 7
Model-View-Update (in Links) typename Model = (contents: String ); typename Message = [| UpdateBox: String |]; sig view : (Model) ~> HTML(Message) fun view(model) { vdom <input type="text" value="{model.contents}" e:onInput="{fun(str) { UpdateBox(str) }}"/> <div >{ textNode(reverse(model.contents )) }</div > } sig updt : (Message , Model) ~> Model fun updt(UpdateBox(newStr), model) { (contents = newStr) } mvuPage (( contents=""), view , updt) 8
Model-View-Update (in Links) typename Model = (contents: String ); typename Message = [| UpdateBox: String |]; sig view : (Model) ~> HTML(Message) fun view(model) { vdom <input type="text" value="{model.contents}" e:onInput="{fun(str) { UpdateBox(str) }}"/> <div >{ textNode(reverse(model.contents )) }</div > } sig updt : (Message , Model) ~> Model fun updt(UpdateBox(newStr), model) { (contents = newStr) } mvuPage (( contents=""), view , updt) 8
Model-View-Update (in Links) typename Model = (contents: String ); typename Message = [| UpdateBox: String |]; sig view : (Model) ~> HTML(Message) fun view(model) { vdom <input type="text" value="{model.contents}" e:onInput="{fun(str) { UpdateBox(str) }}"/> <div >{ textNode(reverse(model.contents )) }</div > } sig updt : (Message , Model) ~> Model fun updt(UpdateBox(newStr), model) { (contents = newStr) } mvuPage (( contents=""), view , updt) 8
Model-View-Update (in Links) typename Model = (contents: String ); typename Message = [| UpdateBox: String |]; sig view : (Model) ~> HTML(Message) fun view(model) { vdom <input type="text" value="{model.contents}" e:onInput="{fun(str) { UpdateBox(str) }}"/> <div >{ textNode(reverse(model.contents )) }</div > } sig updt : (Message , Model) ~> Model fun updt(UpdateBox(newStr), model) { (contents = newStr) } mvuPage (( contents=""), view , updt) 8
λ MVU : Model-View-Update, Formally
Syntax A , B , C ::= 1 | A → B | A × B | A + B | String | Int Types Html ( A ) | Attr ( A ) | String literals s Integers n Terms L , M , N ::= x | λ x . M | M N | () | s | n ( M , N ) | let ( x , y ) = M in N | inl x | inr x | case L { inl x �→ M ; inr y �→ N } | htmlTag t M N | htmlText M | htmlEmpty | attr ak M | attrEmpty | M ⋆ N | ak at | h Tag names t Attribute keys ::= at h Attribute names Event handler names 9
Syntactic Sugar � � html � < input type = "text" value = { model . contents } � � � � onInput = { λ str . UpdateBox ( str ) } >< / input > � � � < div > { htmlText ( reverseString ( model . contents )) } < / div > = ( htmlTag input (( attr type "text" ) ⋆ ( attr value model . contents ) ⋆ ( attr onInput ( λ str . UpdateBox ( str )))) htmlEmpty ) ⋆ htmlTag div attrEmpty ( htmlText reverseString ( model . contents )) 10
Semantics by example: Box and a label model ≜ ( contents = "" ) view ≜ λ model . html < input type = "text" value = { model . contents } onInput = { λ str . UpdateBox ( str ) } >< / input > < div > { htmlText ( reverseString ( model . contents )) } < / div > update ≜ λ UpdateBox ( str ) . ( contents = str ) 11
Semantics by example: Box and a label run model view update 12
Semantics by example: Box and a label � ( model , view model ) | ( view , update ) | ϵ � � htmlEmpty 12
Semantics by example: Box and a label < input type = "text" value = "" onInput = { λ str . UpdateBox ( str ) } > � ( model , ) | ( view , update ) | ϵ � � < / input > < div >< / div > htmlEmpty 12
Semantics by example: Box and a label � idle model | ( view , update ) | ϵ � � < input type = "text" value = "" onInput = { λ str . UpdateBox ( str ) } @ ϵ >< / input > < div @ ϵ >< / div > 12
Semantics by example: Box and a label � idle model | ( view , update ) | ϵ � � < input type = "text" value = "" onInput = { λ str . UpdateBox ( str ) } @ click (()) · keyDown (75) · keyUp (75) · input ( "k" ) >< / input > < div @ ϵ >< / div > 12
Semantics by example: Box and a label � idle model | ( view , update ) | ϵ � � < input type = "text" value = "" onInput = { λ str . UpdateBox ( str ) } @ input ( "k" ) > < / input > < div @ ϵ >< / div > 12
Semantics by example: Box and a label � idle model | ( view , update ) | ϵ � � ( ( UpdateBox ( "k" )) ) � < input type = "text" value = "" onInput = { λ str . UpdateBox ( str ) } @ ϵ >< / input > < div @ ϵ >< / div > 12
Semantics by example: Box and a label � idle model | ( view , update ) | UpdateBox ( "k" ) � � < input type = "text" value = "" onInput = { λ str . UpdateBox ( str ) } @ ϵ >< / input > < div @ ϵ >< / div > 12
Semantics by example: Box and a label � handle ( model , ( view , update ) , UpdateBox ( "k" )) | ( view , update ) | ϵ � � < input type = "text" value = "" onInput = { λ str . UpdateBox ( str ) } @ ϵ >< / input > < div @ ϵ >< / div > ( where handle ( m , ( v , u ) , msg ) ≜ let m ′ = u ( msg , m ) in ( m ′ , v m ′ )) 12
Semantics by example: Box and a label ( contents = ”k” ) , < input type = "text" value = "k" onInput = { λ str . UpdateBox ( str ) } > ) | ( view , update ) | ϵ � � � ( < / input > < div > k < / div > < input type = "text" value = "" onInput = { λ str . UpdateBox ( str ) } @ ϵ >< / input > < div @ ϵ >< / div > 12
Semantics by example: Box and a label � idle ( contents = "k" ) | ( view , update ) | ϵ � � < input type = "text" value = "k" onInput = { λ str . UpdateBox ( str ) } @ ϵ >< / input > < div @ ϵ > k < / div > 12
Metatheory Theorem (Preservation) If Γ ⊢ C and C − → C ′ , then Γ ⊢ C ′ . Theorem (Event Progress) If · ⊢ C , either: → there exists some C ′ such that C − → E C ′ ; or → C = � idle V m | ( V v , V u ) | ϵ � � D where D cannot be written D [ htmlTag − e t V W ] → for some non-empty − → e . 13
Extending λ MVU
Model Maybe Int Message StartComputation Result Int view Model Html Message view model html case model Just result htmlText intToString x Nothing htmlText "Waiting …" < button onClick StartComputation > Start! < button > update Message Model Model Cmd Message update msg model case msg StartComputation Nothing cmdSpawn Result naïveFib Result x Just x cmdEmpty Commands Commands : Allow side effects to be performed by event loop Example: Asynchronous naïve Fibonacci 14
Recommend
More recommend
