7/22/2019 Mikowski the Fog of SPA

1/42

2 April 2 13 Michael S. Mikowski 1

he fog of SPASeven hard-won lessons for developingSPAs at scale

Single Page Web Applicationshttp://manning.com/mikowski

7/22/2019 Mikowski the Fog of SPA

2/42

2 April 2 13 Michael S. Mikowski 2

he fog of warWhat "he fog of war" means is: war is socomple it!s beond the abilit of the h#man mindto comprehend all the variables. $#r %#dgment&o#r #nderstanding& are not ade'#ate. And we killpeople unnecessarily.( )obert Strange *c+amara, he og of War& 001

7/22/2019 Mikowski the Fog of SPA

3/42

2 April 2 13 Michael S. Mikowski 3

he fog of SPAWhat "he fog of SPA" means is: we can#nwittlingl make SPA development so compleit!s beond the abilit of the h#man mind tocomprehend all the variables. $#r %#dgment& o#r#nderstanding& are not ade'#ate. And we killprojec s unnecessarily.

( me

7/22/2019 Mikowski the Fog of SPA

4/42

2 April 2 13 Michael S. Mikowski 4

My goal odaybreak hrough he fog

*inimi2e compleit *aimi2e effectiveness

7/22/2019 Mikowski the Fog of SPA

5/42

2 April 2 13 Michael S. Mikowski 5

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 epecting

desktop-like behavior lash games& 4ava offices#ites& 4avascriptcalc#lators have been

aro#nd for a long time We are considering Na ive4avaScript SPAs here

7/22/2019 Mikowski the Fog of SPA

6/42

2 April 2 13 Michael S. Mikowski 6

A bit more abo#t SPAs 5#siness logic: 4S coding at a scale an order of magnit#degreater than a traditional websites 6700k lines8 $ne SPA ma re'#ire man developers Conven ions and discipline previouslyreserved for server-side developenbecoes a us for working a his scale

Server !rowser

7/22/2019 Mikowski the Fog of SPA

7/42

2 April 2 13 Michael S. Mikowski 7

A bit abo#t me Single Page "eb Applica ions94avaScript end-to-end #$ Archi ec at Snapogic& team of ;

7/22/2019 Mikowski the Fog of SPA

8/42

2 April 2 13 Michael S. Mikowski 8

Seven lessons of SPA dev78 Architect for workflow and testing8

7/22/2019 Mikowski the Fog of SPA

9/42

2 April 2 13 Michael S. Mikowski 9

78 Architect for workflow C testing

7/22/2019 Mikowski the Fog of SPA

10/42

2 April 2 13 Michael S. Mikowski 1

78 Architect for workflow C testing

7/22/2019 Mikowski the Fog of SPA

11/42

2 April 2 13 Michael S. Mikowski 11

78 Architect for workflow C testing

7/22/2019 Mikowski the Fog of SPA

12/42

2 April 2 13 Michael S. Mikowski 12

8

7/22/2019 Mikowski the Fog of SPA

13/42

2 April 2 13 Michael S. Mikowski 13

8

7/22/2019 Mikowski the Fog of SPA

14/42

2 April 2 13 Michael S. Mikowski 14

8

7/22/2019 Mikowski the Fog of SPA

15/42

2 April 2 13 Michael S. Mikowski 15

8

7/22/2019 Mikowski the Fog of SPA

16/42

2 April 2 13 Michael S. Mikowski 16

8

7/22/2019 Mikowski the Fog of SPA

17/42

2 April 2 13 Michael S. Mikowski 17

8

7/22/2019 Mikowski the Fog of SPA

18/42

2 April 2 13 Michael S. Mikowski 18

8

7/22/2019 Mikowski the Fog of SPA

19/42

2 April 2 13 Michael S. Mikowski 19

8

7/22/2019 Mikowski the Fog of SPA

20/42

2 April 2 13 Michael S. Mikowski 2

8

7/22/2019 Mikowski the Fog of SPA

21/42

2 April 2 13 Michael S. Mikowski 21

8

7/22/2019 Mikowski the Fog of SPA

22/42

2 April 2 13 Michael S. Mikowski 22

18 Start at the front

7/22/2019 Mikowski the Fog of SPA

23/42

2 April 2 13 Michael S. Mikowski 23

18 Start at the frontS.#!

S.#

!

7/22/2019 Mikowski the Fog of SPA

24/42

2 April 2 13 Michael S. Mikowski 24

18 Start at the front +ow start the Shell: ,*aster controller Doordinates feat#re mod#les Gandles browse-wide interfaces like...

@) anchor 6,hash fragment8 eat#re containers Dookies

7/22/2019 Mikowski the Fog of SPA

25/42

2 April 2 13 Michael S. Mikowski 25

18 Start at the frontS.#!

S.#

!

7/22/2019 Mikowski the Fog of SPA

26/42

2 April 2 13 Michael S. Mikowski 26

18 Start at the front+ow design o#r fea ure odule

7/22/2019 Mikowski the Fog of SPA

27/42

2 April 2 13 Michael S. Mikowski 27

18 Start at the front Write the AP3 first +o cross-talkbetween mod#les @se events to

minimi2e callbacks @se promises tominimi2e callbacks&dependencies @se arg#ment checks onall ma%or AP3s& prefernamed arg#ments

7/22/2019 Mikowski the Fog of SPA

28/42

2 April 2 13 Michael S. Mikowski 28

18 Start at the front AP3

7/22/2019 Mikowski the Fog of SPA

29/42

2 April 2 13 Michael S. Mikowski 29

B8 Plan for man SPAs *ost ,web application sites are act#all acollection of a or more SPAs ?ample: A*

7/22/2019 Mikowski the Fog of SPA

30/42

2 April 2 13 Michael S. Mikowski 3

B8 Plan for man SPAscommon

cssspa

%s

admindesignercommerce

commonadmindesignercommercecommonadmindesignercommerce

commonadmindesignercommerce 5rowser #tilities 6sp.#tilIb8common

Standard #tilities 6sp.#til8Arg#ment checking 6sp.arg8emplating 6sp.d#st8img

common...

We have selected!sp! as o#r ,commonnamespace3ncl#de common librariesbefore the SPA specificlibraries

7/22/2019 Mikowski the Fog of SPA

31/42

2 April 2 13 Michael S. Mikowski 31

;8 @se a common lang#age J. Wh is Foogledeveloping

7/22/2019 Mikowski the Fog of SPA

32/42

2 April 2 13 Michael S. Mikowski 32

;8 @se a common lang#age Start with prod#ct design

7/22/2019 Mikowski the Fog of SPA

33/42

2 April 2 13 Michael S. Mikowski 33

;8 @se a common lan#g#age Keep the lang#ages siple and few @se na ive4avaScript and DSS

@se of a 4S complier and DSS compiler are two additionalsteps that can go wrong When o# deb#g o#r application& o# see DSS and4avaScript 9 so o# need to know these reall well he best wa to know DSS and 4avaScript reall well is to#se them everda "e have found he radeoffs aren/ wor h i

7/22/2019 Mikowski the Fog of SPA

34/42

2 April 2 13 Michael S. Mikowski 34

;8 @se a common lang#age +ame o#r variables o indica e ype& or L

@se peScriptH @se Dlos#re DompilerH @se FW H @se

7/22/2019 Mikowski the Fog of SPA

35/42

2 April 2 13 Michael S. Mikowski 35

;8 @se a common lang#age0ata.ype $ndicator 12aples Notes

5oolean sw& is& has& do isI#sed trueorfalse

String name& tet& title&t"pe& ke"& string

#serIname T"pe and ke" indicate en#m

3nteger int& co#nt& i&%&k&inde& length

listIlength 3ndicates intentM onl" irefo#ses t"pe-inference

+#mber n#m&n&ratio scaleIratio Alwa"s signed do#ble fp

)ege rege regeImatch Technicall" an ob%ect

Arra" list #serIlist $rdered list

Gash 6*apt8 map #serImap Technicall" an ob%ect

$b%ect 6no indicator8 ho#seIboat Traditional ob%ect with methods

4J#er" $b% N Ntabs Technicall" an ob%ect

#nction OverbPno#n makeIdog irst class artifact

unknown data httpIdata @nknown or pol"morphic

7/22/2019 Mikowski the Fog of SPA

36/42

2 April 2 13 Michael S. Mikowski 36

;8 @se a common lang#ange Dompare meaning inconventions ... var make_house= curry_build_item({

item_type : 'house'});

7/22/2019 Mikowski the Fog of SPA

37/42

2 April 2 13 Michael S. Mikowski 37

;8 @se a common lang#angeVersus noconvention:

Updatesare anightmare

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

7/22/2019 Mikowski the Fog of SPA

38/42

2 April 2 13 Michael S. Mikowski 38

;8 @se a common lang#age Share a coon $01

We have fo#nd an 3

7/22/2019 Mikowski the Fog of SPA

39/42

02 April 2013 Michael S. Mikowski 39

=8 est the client backend )emember an SPA is a clien not %#st the @3 3S4in is inval#able in spotting common& st#piderrors. *ake it part of o#r commit hook All public AP$ssho#ld #se common arg#ment

checking and named arg#ments he *odel and ake data provide an ecellentfo#ndation for 00#sing known data 5egression es s6

7/22/2019 Mikowski the Fog of SPA

40/42

02 April 2013 Michael S. Mikowski 40

8 Avoid shin ob%ects 0angling beadsand accidents Candida e e2aple6avoiding re'#irements8 he moral: *inimi2e tool kits and lang#ages

Add toolkits onl after careful considera ion. Danwe do this with o#r eisting toolsH

Dan we test witho#t n#mero#s b#ild steps orm#ltiple laers of abstractionH avoid#nmanagable compleit

5ackbone event eample Simplif& simplif& simplif.

7/22/2019 Mikowski the Fog of SPA

41/42

2 April 2 13 Michael S. Mikowski 41

Seven lessons of SPA dev78 Architect for workflow and testing8

7/22/2019 Mikowski the Fog of SPA

42/42

2 April 2 13 Michael S. Mikowski 42

he fog of SPASeven hard-won lessons for developing SPAs at scale

Single Page Web Applicationshttp://manning.com/mikowski