You are on page 1of 42

The fog of SPA

Seven hard-won lessons for developing SPAs at scale

Single Page Web Applications http://manning.com/mikowski


02 April 2013 Michael S. Mikowski 1

The fog of war


What "the fog of war" means is: war is so comple it!s be"ond the abilit" of the h#man mind to comprehend all the variables. $#r %#dgment& o#r #nderstanding& are not ade'#ate. And we kill people unnecessarily. ( )obert Strange *c+amara ,The -og of War&. /001

02 April 2013

Michael S. Mikowski

The fog of SPA


What "the fog of SPA" means is: we can #nwittlingl" make SPA development so comple it!s be"ond the abilit" of the h#man mind to comprehend all the variables. $#r %#dgment& o#r #nderstanding& are not ade'#ate. And we kill projects unnecessarily. ( me

02 April 2013

Michael S. Mikowski

My goal today break through the fog


*inimi2e comple it" *a imi2e effectiveness

02 April 2013

Michael S. Mikowski

A bit abo#t SPAs

SPAs are web applications that don!t reload d#ring a #ser session 3ncreasingl" pop#lar& as #sers are now e pecting desktop-like behavior -lash games& 4ava office s#ites& 4avascript calc#lators have been aro#nd for a long time We are considering Native 4avaScript SPAs here
Michael S. Mikowski 5

02 April 2013

A bit more abo#t SPAs

5#siness logic: Server

!rowser

4S coding at a scale an order of magnit#de greater than a traditional websites 6700k lines8 $ne SPA ma" re'#ire man" developers Conventions and discipline previously reserved for server-side develop ent beco es a ust for working at this scale

02 April 2013

Michael S. Mikowski

A bit abo#t me

Single Page "eb Applications 9 4avaScript end-to-end #$ Architect at Snap:ogic& team of ; <eveloper on % production SPAs since /00=& Architect on all b#t one Previo#s back-end development manager on &P'&A od(perl clusters 6>/5 web transactions per week8 -irst SPA: ?#ropean and @S A*< ,wheretobuy.a d.co &. rel. /00A
Michael S. Mikowski

http://manning.com/ mikowski Also see :inked3n

02 April 2013

Seven lessons of SPA dev


78 Architect for workflow and testing /8 <esign third-part" st"le mod#les 18 Start at the front B8 Plan for man" SPAs ;8 @se a common lang#age =8 Test the client back-end A8 Avoid shin" ob%ects
02 April 2013 Michael S. Mikowski 8

78 Architect for workflow C testing

02 April 2013

Michael S. Mikowski

78 Architect for workflow C testing

02 April 2013

Michael S. Mikowski

10

78 Architect for workflow C testing

02 April 2013

Michael S. Mikowski

11

/8 <esign third-part" st"le mod#les


Add high-)uality features at low cost ? amples:


co

ents 6<is'#ss or :ivef"re8

advertising 6<o#bleDlick or Eal#eDlick8 analytics 6Foogle or $vert#re8 sharing 6AddThis or ShareThis8 social services 6-acebook ,:ike. or Foogle ,C7.8

02 April 2013

Michael S. Mikowski

12

/8 <esign third-part" st"le mod#les


Gow pop#lar are third-part" mod#lesH Techcr#nch 9 a snapshot


At least *+ web services % anal"tic services alone A whopping %, script tags

02 April 2013

Michael S. Mikowski

13

/8 <esign third-part" st"le mod#les


-ractal *ED

02 April 2013

Michael S. Mikowski

14

/8 <esign third-part" st"le mod#les


-ractal *ED

02 April 2013

Michael S. Mikowski

15

/8 <esign third-part" st"le mod#les


-ractal *ED

02 April 2013

Michael S. Mikowski

16

/8 <esign third-part" st"le mod#les


-ractal *ED

02 April 2013

Michael S. Mikowski

17

/8 <esign third-part" st"le mod#les

A feat#re mod#le provides a well-defined and scoped capabilit" to the applications +o cross talk between mod#les !enefit: Third-part" and "o#r mod#les are interchangable !enefit- )e#sable across pro%ects !enefit- -oc#s on core and #se third-part" mod#les& replace as reso#rces allow !enefit- A great wa" to divide work
Michael S. Mikowski 18

02 April 2013

/8 <esign third-part" st"le mod#les


-ractal *ED

02 April 2013

Michael S. Mikowski

19

/8 <esign third-part" st"le mod#les


-ractal *ED

02 April 2013

Michael S. Mikowski

20

/8 <esign third-part" st"le mod#les

+amespace

spa css

Chat Module spa.chat.css spa-chat-head { left : 25px, } spa.chat.js spa.chat = ( function () { }() );

4avaScript DSS -iles

$#r spa sho#ld !#se! onl" two global variables 78 o#r root namespace& and /8 o#r common namespace

%s

02 April 2013

Michael S. Mikowski

21

18 Start at the front


<esign la"o#t first

02 April 2013

Michael S. Mikowski

22

18 Start at the front


! # S. ! # S.

02 April 2013

Michael S. Mikowski

23

18 Start at the front


+ow start the Shell: ,*aster controller. Doordinates feat#re mod#les Gandles browse-wide interfaces like...
@): anchor 6,hash fragment.8 -eat#re containers Dookies

02 April 2013

Michael S. Mikowski

24

18 Start at the front


! # S. ! # S.

02 April 2013

Michael S. Mikowski

25

18 Start at the front


+ow design "o#r feature odule

02 April 2013

Michael S. Mikowski

26

18 Start at the front

Write the AP3 first


+o cross-talk between mod#les @se events to minimi2e callbacks @se promises to minimi2e callbacks& dependencies @se arg#ment checks on all ma%or AP3s& prefer named arg#ments
Michael S. Mikowski 27

02 April 2013

18 Start at the front


AP3 <oc -ormat $verview *ethods


S"nchrono#s calls *inimi2e callbacks

AP$
Michael S. Mikowski 28

?vents
As"nchrono#s data $ften res#lts from e ternal inp#t 3ncl#de data with events

02 April 2013

B8 Plan for man" SPAs

*ost ,web application. sites are act#all" a collection of a / or more SPAs ? ample: A*<& one SPA per comp#ter t"pe <ecide where to split the capabilities Plan on common capabilities and look and feel per site

02 April 2013

Michael S. Mikowski

29

B8 Plan for man" SPAs


spa css
common admin designer commerce

We have selected !sp! as o#r ,common. namespace 3ncl#de common libraries before the SPA specific libraries
Standard #tilities 6sp.#til8 5rowser #tilities 6sp.#tilIb8 Arg#ment checking 6sp.arg8 Templating 6sp.d#st8

%s
common admin designer commerce img common...
02 April 2013

Michael S. Mikowski

30

;8 @se a common lang#age

J. Wh" is Foogle developing <artH A. The overhead of 4ava/4avaScript development is a serio#s drag on iterations

Multiple languages drain creativity and productivity

02 April 2013

Michael S. Mikowski

31

;8 @se a common lang#age


Start with prod#ct design <efine terms as earl" as possible 3t is best if marketing #ses the same terms as prod#ct planners& developers& and s"sops Write definitions for each Avoids miscomm#nication thro#gho#t the prod#ct As important as code standards

SnapLogic Cloud Enterprise Project Pipeline Segment Snap

SnaPak Wizard Custom Snaps

Snaps

Dependencies

02 April 2013

Michael S. Mikowski

32

;8 @se a common lan#g#age


Keep the lang#ages si ple and few @se native 4avaScript and DSS

@se of a 4S complier and DSS compiler are two additional steps that can go wrong When "o# deb#g "o#r application& "o# see DSS and 4avaScript 9 so "o# need to know these reall" well The best wa" to know DSS and 4avaScript reall" well is to #se them ever"da" "e have found the tradeoffs aren/t worth it

<o we want to test the application immediatel" or work thro#gh a /-step compile each timeH
Michael S. Mikowski 33

02 April 2013

;8 @se a common lang#age

+ame "o#r variables to indicate type& or L


@se T"peScriptH @se Dlos#re DompilerH @se FWTH @se <artH

All of these tr" to solve t"pe discover" problems Most variables never change typeM most are mistakes Pol"morphic interfaces are almost alwa"s a bad idea 3f "o#r f#nction ret#rns a string& alwa"s ret#rn a string. Throw an exception on error don't return false!
Michael S. Mikowski 34

02 April 2013

;8 @se a common lang#age


0ata.ype 5oolean String 3nteger +#mber )ege Arra" Gash 6*apt8 $b%ect 4J#er" $b% -#nction unknown $ndicator sw& is& has& do name& te t& title& t"pe& ke"& string int& co#nt& i&%&k& inde & length n#m&n&ratio rege list map 6no indicator8 N OverbPno#n data 12a ples isI#sed #serIname listIlength scaleIratio rege Imatch #serIlist #serImap ho#seIboat Ntabs makeIdog httpIdata Notes true or false T"pe and ke" indicate en#m 3ndicates intentM onl" -irefo #ses t"pe-inference Alwa"s signed do#ble fp Technicall" an ob%ect $rdered list Technicall" an ob%ect Traditional ob%ect with methods Technicall" an ob%ect -irst class artifact @nknown or pol"morphic

02 April 2013

Michael S. Mikowski

35

;8 @se a common lang#ange

Dompare meaning in conventions ...

var make_house = curry_build_item({ item_type : 'house' });

02 April 2013

Michael S. Mikowski

36

;8 @se a common lang#ange


Versus no convention:
// !creator! is an ob%ect constr#ctor we get b" // calling !maker!. The first positional argm#ent // of !maker! m#st be a string& and it directs // the t"pe of ob%ect constr#ctor to be ret#rned. // !maker! #ses a clos#re to remember the t"pe // of ob%ect the ret#rned f#nction is to // meant to create. // var creator Q maker6 !ho#se! 8M

Updates are a nightmare!

02 April 2013

Michael S. Mikowski

37

;8 @se a common lang#age

Share a co on $01 We have fo#nd an 3<? that is great as a res#lt of a B-da" st#d" Sharing it red#ces lang#age barriers Allows #s to share settings in o#r F3T repositor" Gosts a nice test framwork Spend time eval#ating the best 3<? for "o#r #se #se a code review tool A great wa" to keep team members in s"nc Prevent ever"one from getting too far ,o#t there.
Michael S. Mikowski 38

02 April 2013

=8 Test the client backend

)emember an SPA is a client not %#st the @3 3S4int is inval#able in spotting common& st#pid errors. *ake it part of "o#r commit hook All public AP$s sho#ld #se common arg#ment checking and named arg#ments The *odel and -ake data provide an e cellent fo#ndation for .00 #sing known data 5egression tests6

02 April 2013

Michael S. Mikowski

39

A8 Avoid shin" ob%ects

0angling beads and accidents Candidate e2a ple 6avoiding re'#irements8 The moral: *inimi2e tool kits and lang#ages

Add toolkits onl" after careful consideration. Dan we do this with o#r e isting toolsH Dan we test witho#t n#mero#s b#ild steps or m#ltiple la"ers of abstractionH avoid #nmanagable comple it"

5ackbone event e ample Simplif"& simplif"& simplif".


Michael S. Mikowski 40

02 April 2013

Seven lessons of SPA dev


78 Architect for workflow and testing /8 <esign third-part" st"le mod#les 18 Start at the front B8 Plan man" SPAs ;8 @se a common lang#age =8 Test the client back-end A8 Avoid shin" ob%ects
02 April 2013 Michael S. Mikowski 41

The fog of SPA


Seven hard-won lessons for developing SPAs at scale

Single Page Web Applications http://manning.com/mikowski


02 April 2013 Michael S. Mikowski 42