Clientsideframeworkselectioncriteriaforprogressivedecoupling

ThisdocumentsgoalistoaidtheDrupalcommunityinchoosingaJavaScriptframeworkbestsuitedfor progressivedecoupling ,where

Importancelegend
onlypartsofthepagearerenderedthroughtheframeworkwhilekeyintegrationcapabilitieswithDrupalconfiguration,modules,and
themesaremaintained.Inshort,Drupalrenderedcomponentsoughttocoexistgracefullywithframeworkrenderedcomponents. M(musthave)
S
(shouldhave)
Furtherreading:

SelectingaclientsideframeworkforDrupal

ShouldwedecoupleDrupal?

ThefutureofdecoupledDrupal N
(nicetohave)

Criteria Mostpromising Promising Leastpromising

Criterion Whyitmatters Angular2 Ember React(V, Elm

(lang, Backbone Angular1 Knockout
(importance) (MVC, (MVC,2.2.0) 0.14.3) compiletoJS (MV,1.2.3in (MVC,1.4.8) (MVVM,
2.0.0beta.0
) ) core) 3.4.0)

Serverside Serversiderenderingofframework Builtin Add

fastboot Builtin DIYwith Add
rendr Add
server Add
renderingof templatesisimportantforSEOand Nashorn , prerendered
templates(M) performance.Overtime,itallowsusto Rhino
,or
migratetounifiedtemplatesacross Node.js
clientandserverandaserverside
JavaScriptbasedrender,whethervia
inPHPJSexecutionorviaathinlayer
ofNode.js.

Rehydration/ Doestheclientsidecodediscoverand Planned Inprogress Yes(add No(DIY) No(DIY) Inprogress Yes(add

seamlessstate reuseHTMLrenderedduring fluxible
) prerendered
)
transfer(M) serversideframeworkexecution
withoutincurringanadditional
rerender?

Serverside Cananappwrittentorunintheclient Yes(builtin) Yes(add No(add

Flux DIYwith Yes(add Yes(add Yes(add
renderingofapp berenderedintheserverwithoutcode fastboot
) implandDI Nashorn , rendr
) server
) prerendered
)
itself(M) changes?Doingthisrequires tool) Rhino
,or
ecosystemwidecoordinationaround Node.js
e.g.datafetchingandbuildtools.

Smallpayload Largeframeworksincuraninitialization 168KB 217KB Nodata 37KB 45KB 49KB 25KB

size:TodoMVC costanddepletemobilebatteries (min+gzip@le (min+gzip@le (Reactneeds (min+gzip@le (min+gzip@le (min+gzip@le (min+gzip@l
JSasof12/29 faster.SmallerfilesizesmeanlessJS vel=9)code vel=9) addons) vel=9) vel9) vel=9) evel=9)
(M) todownload,interpretandexecute, sizeisp1
whetherontheclientortheserver.All beforeendof
frameworksaredeeplyconcernedwith beta
this(esp.globallyfocusedGoogleand
Facebook),sothismaybeanonissue
inthemediumterm.
Execution Anidealframeworkshouldexecute Nodata 780ms 308ms 266ms 204ms 344ms 131ms
performance: commonapplicationtasks(suchas (1.4.0with (0.10.0) (0.16.0) (1.1.2) (1.2.14) (3.1.0)
TodoMVC(M) thosefoundinTodoMVC)quickly.Leo Handlebars
Horie(Mithril)
benchmarked someof 1.3.0)
theseagainstasingleTodoMVCapp,
butthisreliesonoutdatedreleases.
Readmoreaboutbenchmarkreliability .

Interoperability Frameworksthatencompasstheentire Entirepage Entirepage Entirepage Entirepage Entirepageor Entirepage Entirepage

(M) pageratherthanonlyencompassing orpartsof or
partsof orpartsof orpartsof partsofpage orpartsof orpartsof
portionsofthepageareless page page page page page page
wellsuitedtoaprogressively
decoupledapproach,asDrupalwould
needtocedeallcontroloverrenders
andwouldbeunabletorenderpartsof
thepageinPHP/Twig.

Template Adeclarativeapproachcouldbe Declarative Declarative JSX(string Declarative Chooseyour Declarative Declarative

engine beneficialtoprogressivelydecouple withinDOM withinDOM templates) syntax own
(string withinDOM withinDOM
friendlinessfor UIsthatarestillmigrating,while (ng)
and (data JSXis through templates) (nginflat orstring
Drupalthemers stringbasedtemplatesareidealfor string ember) and optionalbut elmhtml HTML) templates
(M) largerpagecomponents.Howfriendly templates Handlebars stronglyrecd
isthetemplatingsystemforDrupal (string
themers?Doesitworkwellfor templates)
interpolationintoexistingTwigfiles?

Codestructure Aframeworksopinionatednessabout More Most Less Not Less More Less

unopinionated applicationstructuremeanseasy opinionated opinionated opinionated opinionated opinionated opinionated opinionated
ness(M) optimization,butitmaybeoverly (framework (framework (library (language). (library (framework (library
restrictiveforanapproachthatfavors approach) approach) approach) Suggested approach) approach) approach)
pickandchoose(library)overthe project
wholenineyards(framework). structure
.

Software DrupalisfreesoftwareusingaGPLv2+ Apache2.0 MIT BSD (free BSD3 (free MIT MIT MIT
licensing(M) license.Anidealframeworkwouldbe (compatible forksnot forksnot
compatiblewiththislicensing,insofar w/GPLv3+) required) required)
asitcanbedistributedsinglywith
Drupal.

Patentrights Anidealframeworkshouldlacka None None Restrictive None None None None

(M) restrictivepatentclausethatprevents
itsuseunderunrelatedconditions.

Clientside ClientsideroutingprovidesfullURL Builtin Builtin reactrouter elmrouterha Builtin Builtin DIY

routing(M) supportforSEO,backbutton (3rdparty sh (various
functionality,andbookmarking.The library) 3rdparty
lackofthismakesnavigationless elmroutepar libraries)
easilyintrospectedandbreaksa ser
fundamentalaspectoftheweb.
Nestable Nestablecomponentsareimportantfor Yes Yes Yes Yes No Yes Yes
components(M) elegantdecompositionofcomplexUIs (
marionette
) (
.component
intomanageablehierarchiesofsmaller method)
portable,encapsulatedpieces.Also
seeFuturereadinessbelowfor
discussionofWebComponents
support.

Robuststate Theframeworksstatesystemshould Modeldiffing Valuediffing DOMdiffing DOMdiffing Manual Modeldiffing Viewmodel

management nottriggerafullDOMrerender,which (withJIT (Handle (VirtualDOM) (
virtualdom
) rerendering diffing(with
(M) isbadforperformance.Instead,it compilation) bars) observables )
shouldperformpartialrerenders(only
thosecomponentsthathavechanged).
UsingDOMdiffsoffthepageinsteadof
modeldiffsmaybeaperformance
bottleneck.

RobustREST Frameworkseitherhavebuiltinsyntax Builtin(in Builtin Addfetch

or Through Builtinbut Builtin($http ManualAJAX
support(M) forRESTcallsorenforcetheuseof progress, isomorphic elmhttp syncswith forbroad (knockout.
jQuery(dependency)tofetchdatafrom betterafter fetch (maintained server(no AJAX, mappingor
aservice.Someeschewoptimistic beta) byauthorof optimistic $resourcefor $.ajax)
feedbackbysavingclientsidedata Elm). feedbackno RESTful
onlyoncetheserverrequestissent, offline APIs)
notidealforappsindisconnected overridable)
environments(mobileorofflinefirst).

Testability(M) Canwetestourcodeusingsmall,fast Good Good Good (also Good Poor(DIY) Good Poor(
DIY
)
unittests,usingstandardofftheshelf unexpectedr
tools,withoutexcessivemocking?How eact
)
welldoesitworkwithDrupaltesting?

Databinding Twowaydatabindingallowsfordata Onewaydata Twoway Oneway Oneway None(getters Declarative Twoway

(M) updatedfromeitherthevieworthe binding databinding databinding andsetters twowaydata databinding
modeltobereflectedintheview,butit (oneway (
ReactLink DIY) binding
oftenhasadetrimentalimpacton databinding fortwoway)
performance.Onewaydatabinding willbedefault
allowsforasolelyunidirectionalflow in2.6)
andisusuallyadequateformostapps.

Large Corporatesponsorshiporalarge Large Large Large Small Medium Large Medium

community, backingcommunityhelpmaintaina (Google) (Facebook) (Google)
ecosystem(S) robustframework.Alargeecosystem
entailsextensions,plugins,andother
incidentalprojectsthataiddevelopers.

Maturity(S) Hastheframeworkseensubstantial Leastmature Mature Mostmature Leastmature Mostmature Mostmature Mature

adoptionfrommanylargeenterprises?
Also,doesithavealonghistoryof
effectiveuseinproduction?
APIdocsand Notonlydoestheframeworkneedto Average Good Good Good Good Good Good
learnability(S) haveanaccessiblelearningcurvefor (betterbyend
Drupaldevelopersfrontend ofQ12016)
developersneedtobeabletousethe
frameworkefficientlyandtointegrate
easilyintotheDrupalcommunity.

Debugging Developersdesireapleasant batarangle Ember devtools Timetravel Debugger batarang chromeexten

experience(S) debuggingexperiencesuchasatool Inspector debugger sionsknocko
thataidsnotonlyinisolatingerrorsand utjs
(low
warningsbutalsoacomprehensive usage)
inspectorforthestructureand
executionoftheapplication.

Errorhandling Developersrequirerobusterror TypeScript Builtin DIY Stronglyand DIY(noerror Builtinerror Builtin

andreporting reporting(e.g.compilererrors,runtime (statically .onerror (3rdparty statically handling handling .onError
(S) errors)toaidtheirdebuggingprocess. typed):both method(also libraries) typed, OOTB) method
Anidealframeworkwouldprovide compiletime clihoneybad excellent
exhaustiveandhelpfulerrorreporting andruntime ger ) compiletime
thatminimizesblockedtasks. errors errors
,
practicallyno
runtime
errors

Nativeapp Frameworksincreasinglyhaveaspart NativeScript clicordova ReactNative Inprogress None(DIY) Ionic None(DIY)

support(N) oftheirecosystemthecapabilityof Ionic2 (HTML5to
compilingsinglepageJavaScript ReactNative native)
applicationsintonativemobile
applicationswritteninJavaand
ObjectiveC.Whilethisdoesnotaffect
progressivedecoupling(unlessthereis
serversideJS),itisusefulforfull
decoupling.

Future Anidealframeworkshouldhaveaplan Excellent Excellent Average Excellent Poor Poor Good

readiness(N) inplacetoeitherprovideapolyfillforor (ES6support, (ES6support, (
Maple.js
for (WClike
directlysupportWebComponents, WClike WClike WC) syntax)
ShadowDOM,andupcomingversions syntax) syntax)
ofJavaScript(ES6,ES7).

Backwards Ideally,aframeworkshouldbe Firstversion Fully No No Full No Full

compatibility(N) backwardscompatiblewithallprevious iscurrentfull backwards backwards backwards backwards backwards backwards
versionsinordertoavoidincurring semver compatible compatibility compatibility compatible compatibility
compatibility

significantdevelopmentcostslater.In fullsemver (0.x.x)full (0.x.x)full fullsemver semveronly fullsemver
addition,anidealframeworkshouldbe semver semver recently
usingsemanticversioning(semver).

Release Lessfrequentreleaseswillalleviatethe Firstversion Minorevery Minorevery Minorevery Minorevery Minorevery Minorevery

cadence(N) needformoduleslikejQueryUpgrader, inbeta2 ~6w ~6m ~6m ~612m ~2w ~6m
 whichaddressedtheinabilitytoretain (longterm
easydependencymanagementincore. supportevery
However,fasterreleasesthatare ~6m)
backwardscompatiblearegoodforthe
frameworkitsimplycreatesfrictionin
Drupalsmanagementof
dependencies.

Totals 16green 16green 14green 15green

11
green 16
green 13
green
4
yellow 7
yellow 5
yellow 6
yellow 6

yellow
6yellow
9yellow
2
red 2
red 5
red 4
red 8

red
3red
3red
3
n/a 0
n/a 1
n/a 0
n/a
0n/a
0n/a
0n/a

Otherconsiderationsforstandardization:
Buildanddeploytools( Gulp
,
Grunt,
EmberCLI )
Dependencyinjection( Webpack ,
RequireJS ,
Browserify
)
Developmentdependencymanagement( NPM )
Healthofmodule/addon/pluginecosystem( EmberObserver)

Specialthankstothefollowingexpertswhoprovidedreviewandinput:
MikoHevery (creatorofAngularGoogle)
IgorMinar (technicalleadforAngularGoogle)
EdFaulkner (coremaintainerforEmber)
AmitaiBurstein (DrupalandElmcontributorGizra)
SebastianSiemssen (Drupalcontributor,ElmandReactdeveloperZensations)
JohnAlbinWilkins (Drupal8mobileinitiativelead)
AlexBronstein (DrupalcoremaintainerAcquia)
WimLeers (DrupalcorecontributorAcquia)
DriesBuytaert (DrupalprojectleadAcquia)
PrestonSo (DrupalcontributorAcquia)