MVC Revival on the Web Janko Mivšek [email protected] @mivsek @aidaweb ESUG 2013 Motivation 30 years of Smalltalk, 30 years of MVC 34 years exa!tly, sin!e "#$# %ot in JavaScri&t MVC frameworks 'or Sin(le)*age and +ealtime web a&&s ,e Smalltalkers s-ould respe!t and revive our &earls better Contents MVC e &lained %istory /sa(e in !.rrent JavaScri&t frameworks /sa(e in Smalltalk C.rrent and f.t.re MVC in 0ida/Web MVC Explained events Ar!hite!tural desi(n &attern - Model for domain s&e!ifi! data and logi! View updates Controller ) View for &resentation to t-e .ser ) Controller for intera!tions wit- t-e .ser UI and .&datin( domain model Domain changes Main benefit: actions observing ) se&aration of !on!erns Model MVC based on Observer pattern subscribe ) 3bserver looks at observee Observer changed - 3bservee is not aware of t-at s u 4e&enden!y me!-anism2 B t n - 3bserver is de&endent on 3bservee state e observing v - 3bservee m.st re&ort state !-an(es to 3bserver E b - *.b/S.b Event 6.s de!ou&les 3bservee from u S / 3bserver to &reserve its .nawarnes of observation b u changed P Observee Main benefit: (Observable) ) se&aration of !on!erns Multiple observers subscribe - M.lti&le observers of t-e same 3bservee Observer changed - 7n MVC an 3bservee is View and 3bservee is domain Model, t-erefore2 s u B t - many views of t-e same model n e observing v - many a&&s E b - many .sers u S / - mix of all t-ree !ases b u Observee changed P (Observable) Example: Counter demo in Aida/Web M.lti.ser realtime web !ounter exam&le -ttp://demo.aidaweb.si – !li!k Realtime on t-e left – !li!k De!rease or In!rease to c-an(e counter – !ounter is c-an(ed on all ot-er8s browsers History of MVC (1) 7nvented by 9rygve +eenska.g w-en -e worked in "#$:1$# wit- Alan ;ay's group on <ero *arc on Smalltalk and Dynabook – 'inal term Model)View)Controller !oined 10. 4e!ember 1979. +eenskau(8s dia(ram of MVC basi! idea from =00> History of MVC (2) MVC State and Messa(e Sendin( 0 4es!ri&tion of t-e Mode)View-Controller /ser 7nterfa!e *aradi(m in t-e Smalltalk):0 System ?len E. ;rasner and Ste&-en 9. Pope Par!&lace, "#:: History of MVC (3) :08s – "#$#2 invented by 9ry(ve Reenska.( – Smalltalk)80, Visual,orks by Par!&lace #08s – @e<9S95*, 3&enSte&, Co!oa – "##>2 0ida1,eb – SAueak MVC 008s – JSP, 0&a!-e Struts, Sprin(, – 0SP.@59 – +.by on Rails "08s – JavaScript MVC frameworks: 6a!kbone, 5mber, 0n(ular, ... MVC in JavaScript KnockoutJS Backbone.js Ember.js - 'irst JS MVC framework AngularJS - S.&&orted by ?oogle - 7nfluen!es new %9MD5 standarts - 4art - Many ex-Smalltalkers t-ere - JS MVC B&layground« - W3C Web Components - sim&le web a&& to test and !om&are frameworks - -tt&://todomv!.com MVC in Smalltalk @owadays in .se2 ?/I 'rameworks – VisualWorks – 4ol&-in (MV*G ,eb 'rameworks – 0ida1Web change View change Future MVC in Aida/Web Future MVCin update Domainobject ValueHolder View change update changed changed subscribe Pub/Sub Event Bus update View Domain Model Aida/Web (View Controller) Client ) no need for e tra code e tra need for no ) de!o.pled ) realtime ) !hanges obje!t domain when update a.to ) to the u& me!hanism dependency 5 tend ) web clients Change detection ) 0.tomati! change dete!tion is needed counter: anInteger counter := anInteger. ) *ossible sol.tion: self changed: #counter. ) 7mm.tability fla( as in Vis.al,orks ) last remainin( bit in obje!t header used ) fla(s an obje!t as imm.table (read)onlyG ) any write attem&t raise and e !eption self beImutable. ... counter: anInteger exception counter := anInteger. Exception handler self beMutable counter:= anInteger self beImmutable continue self changed: #counter Conclusion MVC is well alive Very .sef.ll for nowadays Sin(le Pa(e Realtime web apps Smalltalk comm.nity enco.raged to find new ways of .sin( MVC in o.r apps 9-anks for yo.r attentionH www.aidaweb.si @aidaweb.