THE WORLD BEYOND MVC ⚓

HI, I'M GARANN ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ engineer at Etsy engineer at Etsy engineer at Etsy engineer at Etsy engineer at Etsy engineer at Etsy engineer at Etsy engineer at Etsy ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ Austin, Texas, USA Austin, Texas, USA Austin, Texas, USA Austin, Texas, USA Austin, Texas, USA Austin, Texas, USA Austin, Texas, USA Austin, Texas, USA ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ Node for Front-End Developers Node for Front-End Developers Node for Front-End Developers Node for Front-End Developers Node for Front-End Developers Node for Front-End Developers Node for Front-End Developers Node for Front-End Developers ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ Austin All-Girl Hack Night and Girl Develop It Austin Austin All-Girl Hack Night and Girl Develop It Austin Austin All-Girl Hack Night and Girl Develop It Austin Austin All-Girl Hack Night and Girl Develop It Austin Austin All-Girl Hack Night and Girl Develop It Austin Austin All-Girl Hack Night and Girl Develop It Austin Austin All-Girl Hack Night and Girl Develop It Austin Austin All-Girl Hack Night and Girl Develop It Austin ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ @garannm / garann.com @garannm / garann.com @garannm / garann.com @garannm / garann.com @garannm / garann.com @garannm / garann.com @garannm / garann.com @garannm / garann.com

KNOW ANY GOOD MVC ARCHITECTURES?

MVC OPTIONS ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ Backbone Backbone Backbone Backbone Backbone Backbone Backbone Backbone ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ Spine Spine Spine Spine Spine Spine Spine Spine ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ Agility Agility Agility Agility Agility Agility Agility Agility ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ Knockback Knockback Knockback Knockback Knockback Knockback Knockback Knockback ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ and more.. and more.. and more.. and more.. and more.. and more.. and more.. and more..

WHY SO POPULAR, MVC?

MVC APPEAL ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ popular server-side frameworks popular server-side frameworks popular server-side frameworks popular server-side frameworks popular server-side frameworks popular server-side frameworks popular server-side frameworks popular server-side frameworks ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ build around clear components (models) build around clear components (models) build around clear components (models) build around clear components (models) build around clear components (models) build around clear components (models) build around clear components (models) build around clear components (models) ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ feels natural to developers feels natural to developers feels natural to developers feels natural to developers feels natural to developers feels natural to developers feels natural to developers feels natural to developers ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ especially OOP developers especially OOP developers especially OOP developers especially OOP developers especially OOP developers especially OOP developers especially OOP developers especially OOP developers

MVC HISTORY ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ invented by Trygve Reenskaug in the late 70s invented by Trygve Reenskaug in the late 70s invented by Trygve Reenskaug in the late 70s invented by Trygve Reenskaug in the late 70s invented by Trygve Reenskaug in the late 70s invented by Trygve Reenskaug in the late 70s invented by Trygve Reenskaug in the late 70s invented by Trygve Reenskaug in the late 70s ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ quickly implemented in Smalltalk quickly implemented in Smalltalk quickly implemented in Smalltalk quickly implemented in Smalltalk quickly implemented in Smalltalk quickly implemented in Smalltalk quickly implemented in Smalltalk quickly implemented in Smalltalk ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ original components were Model, View, Controller, original components were Model, View, Controller, original components were Model, View, Controller, original components were Model, View, Controller, original components were Model, View, Controller, original components were Model, View, Controller, original components were Model, View, Controller, original components were Model, View, Controller, Editor Editor Editor Editor Editor Editor Editor Editor ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ the lost Editor concept dealt with user interaction the lost Editor concept dealt with user interaction the lost Editor concept dealt with user interaction the lost Editor concept dealt with user interaction the lost Editor concept dealt with user interaction the lost Editor concept dealt with user interaction the lost Editor concept dealt with user interaction the lost Editor concept dealt with user interaction ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ (that's foreshadowing) (that's foreshadowing) (that's foreshadowing) (that's foreshadowing) (that's foreshadowing) (that's foreshadowing) (that's foreshadowing) (that's foreshadowing)

"REAL" MVC ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ increasingly difficult to pinpoint increasingly difficult to pinpoint increasingly difficult to pinpoint increasingly difficult to pinpoint increasingly difficult to pinpoint increasingly difficult to pinpoint increasingly difficult to pinpoint increasingly difficult to pinpoint ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ AND SO IT BEGINS AND SO IT BEGINS AND SO IT BEGINS AND SO IT BEGINS AND SO IT BEGINS AND SO IT BEGINS AND SO IT BEGINS AND SO IT BEGINS “ “ “ “ “ “ “ “Jim Althoff and others implemented a version Jim Althoff and others implemented a version Jim Althoff and others implemented a version Jim Althoff and others implemented a version Jim Althoff and others implemented a version Jim Althoff and others implemented a version Jim Althoff and others implemented a version Jim Althoff and others implemented a version of MVC for the Smalltalk-80 class library after I of MVC for the Smalltalk-80 class library after I of MVC for the Smalltalk-80 class library after I of MVC for the Smalltalk-80 class library after I of MVC for the Smalltalk-80 class library after I of MVC for the Smalltalk-80 class library after I of MVC for the Smalltalk-80 class library after I of MVC for the Smalltalk-80 class library after I had left Xerox PARC; I was in not involved in had left Xerox PARC; I was in not involved in had left Xerox PARC; I was in not involved in had left Xerox PARC; I was in not involved in had left Xerox PARC; I was in not involved in had left Xerox PARC; I was in not involved in had left Xerox PARC; I was in not involved in had left Xerox PARC; I was in not involved in this work. this work. this work. this work. this work. this work. this work. this work. Jim Althoff uses the term Jim Althoff uses the term Jim Althoff uses the term Jim Althoff uses the term Jim Althoff uses the term Jim Althoff uses the term Jim Althoff uses the term Jim Althoff uses the term Controller somewhat differently from me. Controller somewhat differently from me. Controller somewhat differently from me. Controller somewhat differently from me. Controller somewhat differently from me. Controller somewhat differently from me. Controller somewhat differently from me. Controller somewhat differently from me.” ” ” ” ” ” ” ”

IS MVC THE ANSWER?

MVC IS GREAT SOMETIMES ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ server-side server-side server-side server-side server-side server-side server-side server-side ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ CMSes CMSes CMSes CMSes CMSes CMSes CMSes CMSes ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ data entry data entry data entry data entry data entry data entry data entry data entry ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ multiple, clearly-defined object types multiple, clearly-defined object types multiple, clearly-defined object types multiple, clearly-defined object types multiple, clearly-defined object types multiple, clearly-defined object types multiple, clearly-defined object types multiple, clearly-defined object types ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ anything that fits easily with OOP anything that fits easily with OOP anything that fits easily with OOP anything that fits easily with OOP anything that fits easily with OOP anything that fits easily with OOP anything that fits easily with OOP anything that fits easily with OOP

MVC IS AWKWARD SOMETIMES ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ state shared/created by multiple objects state shared/created by multiple objects state shared/created by multiple objects state shared/created by multiple objects state shared/created by multiple objects state shared/created by multiple objects state shared/created by multiple objects state shared/created by multiple objects ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ lots of complex user interactions lots of complex user interactions lots of complex user interactions lots of complex user interactions lots of complex user interactions lots of complex user interactions lots of complex user interactions lots of complex user interactions ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ distinct, abstract controls/widgets distinct, abstract controls/widgets distinct, abstract controls/widgets distinct, abstract controls/widgets distinct, abstract controls/widgets distinct, abstract controls/widgets distinct, abstract controls/widgets distinct, abstract controls/widgets ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ lots of client-side apps lots of client-side apps lots of client-side apps lots of client-side apps lots of client-side apps lots of client-side apps lots of client-side apps lots of client-side apps

MVC IS OVERKILL SOMETIMES ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ static sites static sites static sites static sites static sites static sites static sites static sites ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ server-driven site (e.g. RMI) server-driven site (e.g. RMI) server-driven site (e.g. RMI) server-driven site (e.g. RMI) server-driven site (e.g. RMI) server-driven site (e.g. RMI) server-driven site (e.g. RMI) server-driven site (e.g. RMI)

THERE ARE ARCHITECTURES BEYOND MVC

ARCHITECTURE PATTERNS ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ canon doesn't include web uses canon doesn't include web uses canon doesn't include web uses canon doesn't include web uses canon doesn't include web uses canon doesn't include web uses canon doesn't include web uses canon doesn't include web uses ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ Design Patterns Design Patterns Design Patterns Design Patterns Design Patterns Design Patterns Design Patterns Design Patterns (GoF) © 1994 (GoF) © 1994 (GoF) © 1994 (GoF) © 1994 (GoF) © 1994 (GoF) © 1994 (GoF) © 1994 (GoF) © 1994 ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ architectures proposed when user and developer were the architectures proposed when user and developer were the architectures proposed when user and developer were the architectures proposed when user and developer were the architectures proposed when user and developer were the architectures proposed when user and developer were the architectures proposed when user and developer were the architectures proposed when user and developer were the same person same person same person same person same person same person same person same person ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ client and server were the same command line client and server were the same command line client and server were the same command line client and server were the same command line client and server were the same command line client and server were the same command line client and server were the same command line client and server were the same command line ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ terminals did not interpret views terminals did not interpret views terminals did not interpret views terminals did not interpret views terminals did not interpret views terminals did not interpret views terminals did not interpret views terminals did not interpret views

A VOID MVC NEATLY FILLS ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ clear concept of the UI clear concept of the UI clear concept of the UI clear concept of the UI clear concept of the UI clear concept of the UI clear concept of the UI clear concept of the UI ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ maps neatly to original webapps maps neatly to original webapps maps neatly to original webapps maps neatly to original webapps maps neatly to original webapps maps neatly to original webapps maps neatly to original webapps maps neatly to original webapps ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ doesn't always map neatly to individual pieces doesn't always map neatly to individual pieces doesn't always map neatly to individual pieces doesn't always map neatly to individual pieces doesn't always map neatly to individual pieces doesn't always map neatly to individual pieces doesn't always map neatly to individual pieces doesn't always map neatly to individual pieces

THESE ARE NOT THE WHITEPAPERS WE'RE LOOKING FOR ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ we must repurpose we must repurpose we must repurpose we must repurpose we must repurpose we must repurpose we must repurpose we must repurpose ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ MVC is a great starting point MVC is a great starting point MVC is a great starting point MVC is a great starting point MVC is a great starting point MVC is a great starting point MVC is a great starting point MVC is a great starting point ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ MVC will do in a pinch MVC will do in a pinch MVC will do in a pinch MVC will do in a pinch MVC will do in a pinch MVC will do in a pinch MVC will do in a pinch MVC will do in a pinch ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ more sophisticated webapps give us reason to revisit other more sophisticated webapps give us reason to revisit other more sophisticated webapps give us reason to revisit other more sophisticated webapps give us reason to revisit other more sophisticated webapps give us reason to revisit other more sophisticated webapps give us reason to revisit other more sophisticated webapps give us reason to revisit other more sophisticated webapps give us reason to revisit other patterns patterns patterns patterns patterns patterns patterns patterns

BEYOND THE BORDERS OF MVC

EVENT-DRIVEN ARCHITECTURES ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ primary application unit is the event, not the object primary application unit is the event, not the object primary application unit is the event, not the object primary application unit is the event, not the object primary application unit is the event, not the object primary application unit is the event, not the object primary application unit is the event, not the object primary application unit is the event, not the object ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ state, utility functions, and resources corralled together state, utility functions, and resources corralled together state, utility functions, and resources corralled together state, utility functions, and resources corralled together state, utility functions, and resources corralled together state, utility functions, and resources corralled together state, utility functions, and resources corralled together state, utility functions, and resources corralled together ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ functions, getters, and setters are subscribers functions, getters, and setters are subscribers functions, getters, and setters are subscribers functions, getters, and setters are subscribers functions, getters, and setters are subscribers functions, getters, and setters are subscribers functions, getters, and setters are subscribers functions, getters, and setters are subscribers ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ should feel natural to JS devs should feel natural to JS devs should feel natural to JS devs should feel natural to JS devs should feel natural to JS devs should feel natural to JS devs should feel natural to JS devs should feel natural to JS devs ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ similarities to service-oriented architectures similarities to service-oriented architectures similarities to service-oriented architectures similarities to service-oriented architectures similarities to service-oriented architectures similarities to service-oriented architectures similarities to service-oriented architectures similarities to service-oriented architectures

EVENT-DRIVEN ARCHITECTURE $ ( " # l o g i n " ) . c l i c k ( f u n c t i o n ( e ) { p u b l i s h ( " l o g i n _ a t t e m p t " , { u s e r n a m e : $ ( " # u s e r n a m e " ) . v a l ( ) , p a s s w o r d : $ ( " # p a s s w o r d " ) . v a l ( ) } ) ; } ) ; s u b s c r i b e ( " l o g i n _ a t t e m p t " , f u n c t i o n ( c r e d e n t i a l s ) { $ . p o s t ( " / l o g i n " , c r e d e n t i a l s , f u n c t i o n ( d a t a ) { p u b l i s h ( " u s e r _ l o g i n " , d a t a . u s e r i d ) ; } ) . e r r o r ( f u n c t i o n ( d a t a ) { p u b l i s h ( " l o g i n _ f a i l " , d a t a . m e s s a g e ) ; } ) ; } ) ;

EVENT-DRIVEN ARCHITECTURE v a r c a r t _ s t a t e = { u s e r i d : n u l l , c a r t _ i t e m s : [ ] , c a n _ c h e c k o u t : f a l s e } ; c a r t _ s t a t e . s u b s c r i b e ( " u s e r _ l o g i n " , f u n c t i o n ( i d ) { t h i s . u s e r i d = i d ; i f ( t h i s . c a r t _ i t e m s . l e n g t h ) { t h i s . c a n _ c h e c k o u t = t r u e ; p u b l i s h ( " c a r t _ r e a d y " ) ; } } ) ;

EVENT-DRIVEN ARCHITECTURE v a r r e n d e r e r = { t e m p l a t e s : { } , r e n d e r : f u n c t i o n ( t m p l , d a t a , c o n t a i n e r ) { v a r h = u t i l . t e m p l a t e ( t h i s . t e m p l a t e s [ t m p l ] , d a t a ) ; $ ( c o n t a i n e r ) . h t m l ( h ) ; } } ; r e n d e r e r . s u b s c r i b e ( " c a r t _ r e a d y " , f u n c t i o n ( ) { t h i s . r e n d e r ( " c a r t _ c h e c k o u t " , n u l l , " # c a r t " ) ; } ) ;

NAKED OBJECTS ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ primary units are widgets/controls primary units are widgets/controls primary units are widgets/controls primary units are widgets/controls primary units are widgets/controls primary units are widgets/controls primary units are widgets/controls primary units are widgets/controls ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ similarities to desktop development similarities to desktop development similarities to desktop development similarities to desktop development similarities to desktop development similarities to desktop development similarities to desktop development similarities to desktop development ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ more like PAC than MVC more like PAC than MVC more like PAC than MVC more like PAC than MVC more like PAC than MVC more like PAC than MVC more like PAC than MVC more like PAC than MVC ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ models aren't just data, but components models aren't just data, but components models aren't just data, but components models aren't just data, but components models aren't just data, but components models aren't just data, but components models aren't just data, but components models aren't just data, but components ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ properties have rendering, state, etc. properties have rendering, state, etc. properties have rendering, state, etc. properties have rendering, state, etc. properties have rendering, state, etc. properties have rendering, state, etc. properties have rendering, state, etc. properties have rendering, state, etc. ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ business logic abstracted out business logic abstracted out business logic abstracted out business logic abstracted out business logic abstracted out business logic abstracted out business logic abstracted out business logic abstracted out ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ nice for compositional uses like CMSes nice for compositional uses like CMSes nice for compositional uses like CMSes nice for compositional uses like CMSes nice for compositional uses like CMSes nice for compositional uses like CMSes nice for compositional uses like CMSes nice for compositional uses like CMSes

NAKED OBJECTS v a r C o l o r S l i d e r = f u n c t i o n ( c o n t a i n e r , u r l , c h a n ) { t h i s = { _ c o n t a i n e r : c o n t a i n e r , _ v a l u e : " " , _ u r l : u r l , _ c h a n n e l : c h a n } ; r e t u r n t h i s ; } ; C o l o r S l i d e r . p r o t o t y p e = { g e t v a l u e ( ) { r e t u r n t h i s . _ v a l u e ; } , s e t v a l u e ( v a l ) { t h i s . _ v a l u e = v a l ; t h i s . _ u p d a t e ( ) ; } } ;

NAKED OBJECTS C o l o r S l i d e r . p r o t o t y p e . _ u p d a t e = f u n c t i o n ( ) { v a r t h a t = t h i s , d a t a = { } ; d a t a [ t h a t . _ c h a n n e l ] = t h a t . _ v a l u e ; $ . p o s t ( t h a t . _ u r l , d a t a , f u n c t i o n ( d ) { t h a t . _ r e n d e r ; i f ( T o o l b o x ) T o o l b o x . s e t C o l o r ( d ) ; } ) ; } ;

NAKED OBJECTS C o l o r S l i d e r . p r o t o t y p e . _ r e n d e r = f u n c t i o n ( ) { v a r h t m l = ' < i n p u t t y p e = " r a n g e " i d = " c o l o r " ' + ' m i n = " 0 " m a x = " 2 5 5 " v a l u e = " ' + t h a t . _ v a l u e + ' " s t y l e = " c o l o r : r g b ( ' + t h a t . _ c h a n n e l = = " r e d " ? t h a t . _ v a l u e + ' , 0 , 0 ) ; " / > ' : t h a t . _ c h a n n e l = = " g r e e n " ? ' 0 , ' + t h a t . _ v a l u e + ' , 0 ) ; " / > ' : ' 0 , 0 , ' + t h a t . _ v a l u e + ' ) ; " / > ' ; t h i s . _ c o n t a i n e r . i n n e r H T M L = h t m l ; } ;

PIPELINES ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ primary units are states (application and object) primary units are states (application and object) primary units are states (application and object) primary units are states (application and object) primary units are states (application and object) primary units are states (application and object) primary units are states (application and object) primary units are states (application and object) ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ like successive decorators like successive decorators like successive decorators like successive decorators like successive decorators like successive decorators like successive decorators like successive decorators ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ familiar concept for jQuery devs familiar concept for jQuery devs familiar concept for jQuery devs familiar concept for jQuery devs familiar concept for jQuery devs familiar concept for jQuery devs familiar concept for jQuery devs familiar concept for jQuery devs ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ can operate on two axes (e.g. next()) can operate on two axes (e.g. next()) can operate on two axes (e.g. next()) can operate on two axes (e.g. next()) can operate on two axes (e.g. next()) can operate on two axes (e.g. next()) can operate on two axes (e.g. next()) can operate on two axes (e.g. next())

PIPELINES P a g e U t i l s . i n i t = f u n c t i o n ( ) { t h i s . r e n d e r ( ) . w i r e u p ( ) ; } ; P a g e U t i l s . _ r u n = f u n c t i o n ( f n s ) { v a r t h a t = t h i s ; f n s . f o r E a c h ( f u n c t i o n ( f n ) { t h a t = P a g e U t i l s [ f n ] . c a l l ( t h a t ) ; } ) ; } ;

PIPELINES P a g e U t i l s . r e n d e r = f u n c t i o n ( ) { v a r t h a t = t h i s ; $ ( " b o d y " ) . a p p e n d ( u t i l . t e m p l a t e ( t h a t . t m p l , t h a t . d a t a ) ; ) ; r e t u r n t h a t ; } ; P a g e U t i l s . w i r e u p = f u n c t i o n ( ) { v a r t h a t = t h i s ; t h a t . h a n d l e r s . f o r E a c h ( f u n c t i o n ( e l ) { $ ( e l . s e l e c t o r ) . o n ( e l . e v , f u n c t i o n ( e ) { e . p r e v e n t D e f a u l t ( ) ; t h a t . _ r u n ( e l . f u n c t i o n s ) } ) ; } ) ; r e t u r n t h a t ; } ;

PIPELINES v a r P a g e = { n a m e : " r e g i s t e r " , t m p l : " / t e m p l a t e s / r e g i s t e r . t m p l " , d a t a : { } , h a n d l e r s : [ { s e l e c t o r : " # b t n R g i s t e r " , e v : " c l i c k " , f u n c t i o n s : [ w a i t , v a l i d a t e , u p d a t e , r e n d e r ] } , { s e l e c t o r : " # b t n C a n c e l " , e v : " c l i c k " , f u n c t i o n s : [ r e n d e r ] } ] } ; $ . e x t e n d ( t r u e , P a g e , P a g e U t i l s ) ; P a g e . i n i t ( ) ;

PIPELINES (ASYNC) $ . w h e n ( S e a r c h . i n i t ( ) ) . . t h e n ( S e a r c h . s e t D a t e s ( ) ) . t h e n ( S e a r c h . s e t C i t y ( ) ) . t h e n ( S e a r c h . s h o w R e s u l t s ( ) ) ;

CONSIDERATIONS FOR ALTERNATIVES TO MVC ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ degree and emphasis of decoupling degree and emphasis of decoupling degree and emphasis of decoupling degree and emphasis of decoupling degree and emphasis of decoupling degree and emphasis of decoupling degree and emphasis of decoupling degree and emphasis of decoupling ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ whether picture of application is decentralized whether picture of application is decentralized whether picture of application is decentralized whether picture of application is decentralized whether picture of application is decentralized whether picture of application is decentralized whether picture of application is decentralized whether picture of application is decentralized ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ level of abstraction in controls level of abstraction in controls level of abstraction in controls level of abstraction in controls level of abstraction in controls level of abstraction in controls level of abstraction in controls level of abstraction in controls ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ setup/initialization needed setup/initialization needed setup/initialization needed setup/initialization needed setup/initialization needed setup/initialization needed setup/initialization needed setup/initialization needed

MVC AND THE STATIC SITE

STATIC SITE ARCHITECTURE ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ what, you thought static sites didn't need one?? what, you thought static sites didn't need one?? what, you thought static sites didn't need one?? what, you thought static sites didn't need one?? what, you thought static sites didn't need one?? what, you thought static sites didn't need one?? what, you thought static sites didn't need one?? what, you thought static sites didn't need one?? ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ still need things like library functionality still need things like library functionality still need things like library functionality still need things like library functionality still need things like library functionality still need things like library functionality still need things like library functionality still need things like library functionality ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ where does a library end and a pattern begin? where does a library end and a pattern begin? where does a library end and a pattern begin? where does a library end and a pattern begin? where does a library end and a pattern begin? where does a library end and a pattern begin? where does a library end and a pattern begin? where does a library end and a pattern begin? ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ real options for large static sites: real options for large static sites: real options for large static sites: real options for large static sites: real options for large static sites: real options for large static sites: real options for large static sites: real options for large static sites: ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ EDA EDA EDA EDA EDA EDA EDA EDA ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ pipelines pipelines pipelines pipelines pipelines pipelines pipelines pipelines ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ RMI RMI RMI RMI RMI RMI RMI RMI

CONSIDERATIONS FOR STATIC SITES ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ need strong conventions even more than SPAs need strong conventions even more than SPAs need strong conventions even more than SPAs need strong conventions even more than SPAs need strong conventions even more than SPAs need strong conventions even more than SPAs need strong conventions even more than SPAs need strong conventions even more than SPAs ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ naturally decoupled already at "application" level naturally decoupled already at "application" level naturally decoupled already at "application" level naturally decoupled already at "application" level naturally decoupled already at "application" level naturally decoupled already at "application" level naturally decoupled already at "application" level naturally decoupled already at "application" level ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ may exchange more tightly coupled application for more may exchange more tightly coupled application for more may exchange more tightly coupled application for more may exchange more tightly coupled application for more may exchange more tightly coupled application for more may exchange more tightly coupled application for more may exchange more tightly coupled application for more may exchange more tightly coupled application for more loosely coupled DOM loosely coupled DOM loosely coupled DOM loosely coupled DOM loosely coupled DOM loosely coupled DOM loosely coupled DOM loosely coupled DOM ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ architecture is a tool to enforce style architecture is a tool to enforce style architecture is a tool to enforce style architecture is a tool to enforce style architecture is a tool to enforce style architecture is a tool to enforce style architecture is a tool to enforce style architecture is a tool to enforce style ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ performance changes felt more acutely, need careful balance performance changes felt more acutely, need careful balance performance changes felt more acutely, need careful balance performance changes felt more acutely, need careful balance performance changes felt more acutely, need careful balance performance changes felt more acutely, need careful balance performance changes felt more acutely, need careful balance performance changes felt more acutely, need careful balance with any inversion of control with any inversion of control with any inversion of control with any inversion of control with any inversion of control with any inversion of control with any inversion of control with any inversion of control

SO, LIKE, SHOULD YOU USE BACKBONE OR NOT?

BOTTOM LINE ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ use MVC instead of nothing use MVC instead of nothing use MVC instead of nothing use MVC instead of nothing use MVC instead of nothing use MVC instead of nothing use MVC instead of nothing use MVC instead of nothing ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ where possible, fit patterns to apps, not vice-versa where possible, fit patterns to apps, not vice-versa where possible, fit patterns to apps, not vice-versa where possible, fit patterns to apps, not vice-versa where possible, fit patterns to apps, not vice-versa where possible, fit patterns to apps, not vice-versa where possible, fit patterns to apps, not vice-versa where possible, fit patterns to apps, not vice-versa ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ if you write a framework, try to solve a new problem if you write a framework, try to solve a new problem if you write a framework, try to solve a new problem if you write a framework, try to solve a new problem if you write a framework, try to solve a new problem if you write a framework, try to solve a new problem if you write a framework, try to solve a new problem if you write a framework, try to solve a new problem ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ when refactoring, favor loosest coupling when refactoring, favor loosest coupling when refactoring, favor loosest coupling when refactoring, favor loosest coupling when refactoring, favor loosest coupling when refactoring, favor loosest coupling when refactoring, favor loosest coupling when refactoring, favor loosest coupling ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ every implementation decays every implementation decays every implementation decays every implementation decays every implementation decays every implementation decays every implementation decays every implementation decays ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ use the best tool you can find use the best tool you can find use the best tool you can find use the best tool you can find use the best tool you can find use the best tool you can find use the best tool you can find use the best tool you can find ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ architect opportunities to improve not just code quality, architect opportunities to improve not just code quality, architect opportunities to improve not just code quality, architect opportunities to improve not just code quality, architect opportunities to improve not just code quality, architect opportunities to improve not just code quality, architect opportunities to improve not just code quality, architect opportunities to improve not just code quality, but pattern but pattern but pattern but pattern but pattern but pattern but pattern but pattern

THANKS! ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ image credit: image credit: image credit: image credit: image credit: image credit: image credit: image credit: http://www.flickr.com/photos/60584010@N00/3213608406/ http://www.flickr.com/photos/60584010@N00/3213608406/ http://www.flickr.com/photos/60584010@N00/3213608406/ http://www.flickr.com/photos/60584010@N00/3213608406/ http://www.flickr.com/photos/60584010@N00/3213608406/ http://www.flickr.com/photos/60584010@N00/3213608406/ http://www.flickr.com/photos/60584010@N00/3213608406/ http://www.flickr.com/photos/60584010@N00/3213608406/

No content