Mikowski The Fog of SPA

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
78 Architect for workflow C testing
02 April 2013
Michael S. Mikowski
02 April 2013
Michael S. Mikowski
10
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

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

-ractal *ED
02 April 2013
Michael S. Mikowski
14

-ractal *ED
02 April 2013
Michael S. Mikowski
15

-ractal *ED
02 April 2013
Michael S. Mikowski
16

-ractal *ED
02 April 2013
Michael S. Mikowski
17
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
02 April 2013

-ractal *ED
02 April 2013
Michael S. Mikowski
19

-ractal *ED
02 April 2013
Michael S. Mikowski
20
+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

! # S. ! # S.
02 April 2013
Michael S. Mikowski
23

+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

! # S. ! # S.
02 April 2013
Michael S. Mikowski
25

+ow design "o#r feature odule
02 April 2013
Michael S. Mikowski
26
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
02 April 2013

AP3 <oc -ormat $verview *ethods

S"nchrono#s calls *inimi2e callbacks
AP$
?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

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
02 April 2013
+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!
02 April 2013

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
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.
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".

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
The fog of SPA

Seven hard-won lessons for developing SPAs at scale
Single Page Web Applications http://manning.com/mikowski


Mikowski The Fog of SPA

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mikowski The Fog of SPA

Uploaded by

Copyright:

Available Formats

The fog of SPA

Seven hard-won lessons for developing SPAs at scale

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

The fog of war

The fog of SPA

My goal today break through the fog

*inimi2e comple it" *a imi2e effectiveness

A bit abo#t SPAs

A bit more abo#t SPAs

5#siness logic: Server

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

Seven lessons of SPA dev

78 Architect for workflow C testing

78 Architect for workflow C testing

78 Architect for workflow C testing

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

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

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

/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

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

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

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

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

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

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

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

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

4avaScript DSS -iles

18 Start at the front

18 Start at the front

18 Start at the front

18 Start at the front

18 Start at the front

18 Start at the front

Write the AP3 first

18 Start at the front

AP3 <oc -ormat $verview *ethods

B8 Plan for man" SPAs

B8 Plan for man" SPAs

;8 @se a common lang#age

Multiple languages drain creativity and productivity

;8 @se a common lang#age

SnapLogic Cloud Enterprise Project Pipeline Segment Snap

SnaPak Wizard Custom Snaps

;8 @se a common lan#g#age

;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

;8 @se a common lang#age

;8 @se a common lang#ange

Dompare meaning in conventions ...

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

;8 @se a common lang#ange

Updates are a nightmare!

;8 @se a common lang#age

=8 Test the client backend

A8 Avoid shin" ob%ects

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

Seven lessons of SPA dev

The fog of SPA

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

inimi2e comple it" a imi2e effectiveness