Clientsideframeworkselectioncriteriaforprogressivedecoupling

ThisdocumentsgoalistoaidtheDrupalcommunityinchoosingaJavaScriptframeworkbestsuitedfor
progressivedecoupling
,where
onlypartsofthepagearerenderedthroughtheframeworkwhilekeyintegrationcapabilitieswithDrupalconfiguration,modules,and
themesaremaintained.Inshort,Drupalrenderedcomponentsoughttocoexistgracefullywithframeworkrenderedcomponents.

Furtherreading:

SelectingaclientsideframeworkforDrupal

ShouldwedecoupleDrupal?

ThefutureofdecoupledDrupal

Importancelegend

M
(musthave)
(shouldhave)
S
N
(nicetohave)

Criteria

Mostpromising

Promising

Leastpromising

Criterion
(importance)

Whyitmatters

Angular2
(MVC,
2.0.0beta.0
)

Ember
(MVC,2.2.0)

React
(V,
0.14.3)

Elm
(lang,
compiletoJS
)

Backbone
(MV,1.2.3in
core)

Angular1
(MVC,1.4.8)

Knockout
(MVVM,
3.4.0)

Serverside
renderingof
templates(M)

Serversiderenderingofframework
templatesisimportantforSEOand
performance.Overtime,itallowsusto
migratetounifiedtemplatesacross
clientandserverandaserverside
JavaScriptbasedrender,whethervia
inPHPJSexecutionorviaathinlayer
ofNode.js.

Builtin

Add
fastboot

Builtin

DIYwith
Nashorn
,
Rhino
,or
Node.js

Add
rendr

Add
server

Add
prerendered

Rehydration/
seamlessstate
transfer(M)

Doestheclientsidecodediscoverand
reuseHTMLrenderedduring
serversideframeworkexecution
withoutincurringanadditional
rerender?

Planned

Inprogress

Yes(add
fluxible
)

No(DIY)

No(DIY)

Inprogress

Yes(add
prerendered
)

Serverside
renderingofapp
itself(M)

Cananappwrittentorunintheclient
berenderedintheserverwithoutcode
changes?Doingthisrequires
ecosystemwidecoordinationaround
e.g.datafetchingandbuildtools.

Yes(builtin)

Yes(add
fastboot
)

No(add
Flux
implandDI
tool)

DIYwith
Nashorn
,
Rhino
,or
Node.js

Yes(add
rendr
)

Yes(add
server
)

Yes(add
prerendered
)

Smallpayload
size:TodoMVC
JSasof12/29
(M)

Largeframeworksincuraninitialization
costanddepletemobilebatteries
faster.SmallerfilesizesmeanlessJS
todownload,interpretandexecute,
whetherontheclientortheserver.All
frameworksaredeeplyconcernedwith
this(esp.globallyfocusedGoogleand
Facebook),sothismaybeanonissue
inthemediumterm.

168KB
(min+gzip@le
vel=9)code
sizeisp1
beforeendof
beta

217KB
(min+gzip@le
vel=9)

Nodata
(Reactneeds
addons)

37KB
(min+gzip@le
vel=9)

45KB
(min+gzip@le
vel9)

49KB
(min+gzip@le
vel=9)

25KB
(min+gzip@l
evel=9)

Execution
performance:
TodoMVC(M)

Anidealframeworkshouldexecute
Nodata
commonapplicationtasks(suchas
thosefoundinTodoMVC)quickly.Leo
Horie(Mithril)
benchmarked
someof
theseagainstasingleTodoMVCapp,
butthisreliesonoutdatedreleases.
Readmoreaboutbenchmarkreliability
.

780ms
(1.4.0with
Handlebars
1.3.0)

308ms
(0.10.0)

266ms
(0.16.0)

204ms
(1.1.2)

344ms
(1.2.14)

131ms
(3.1.0)

Interoperability
(M)

Frameworksthatencompasstheentire
pageratherthanonlyencompassing
portionsofthepageareless
wellsuitedtoaprogressively
decoupledapproach,asDrupalwould
needtocedeallcontroloverrenders
andwouldbeunabletorenderpartsof
thepageinPHP/Twig.

Entirepage
orpartsof
page

Entirepage
or
partsof
page

Entirepage
orpartsof
page

Entirepage
orpartsof
page

Entirepageor
partsofpage

Entirepage
orpartsof
page

Entirepage
orpartsof
page

Template
engine
friendlinessfor
Drupalthemers
(M)

Adeclarativeapproachcouldbe
beneficialtoprogressivelydecouple
UIsthatarestillmigrating,while
stringbasedtemplatesareidealfor
largerpagecomponents.Howfriendly
isthetemplatingsystemforDrupal
themers?Doesitworkwellfor
interpolationintoexistingTwigfiles?

Declarative
withinDOM
(ng)
and
string
templates

Declarative
withinDOM
(data
ember)
and
Handlebars
(string
templates)

JSX(string
templates)
JSXis
optionalbut
stronglyrecd

Declarative
syntax
through
elmhtml

Chooseyour
own
(string
templates)

Declarative
withinDOM
(nginflat
HTML)

Declarative
withinDOM
orstring
templates

Codestructure
unopinionated
ness(M)

Aframeworksopinionatednessabout
applicationstructuremeanseasy
optimization,butitmaybeoverly
restrictiveforanapproachthatfavors
pickandchoose(library)overthe
wholenineyards(framework).

More
opinionated
(framework
approach)

Most
opinionated
(framework
approach)

Less
opinionated
(library
approach)

Not
opinionated
(language).
Suggested
project
structure
.

Less
opinionated
(library
approach)

More
opinionated
(framework
approach)

Less
opinionated
(library
approach)

Software
licensing(M)

DrupalisfreesoftwareusingaGPLv2+
license.Anidealframeworkwouldbe
compatiblewiththislicensing,insofar
asitcanbedistributedsinglywith
Drupal.

Apache2.0
(compatible
w/GPLv3+)

MIT

BSD
(free
forksnot
required)

BSD3
(free
forksnot
required)

MIT

MIT

MIT

Patentrights
(M)

Anidealframeworkshouldlacka
restrictivepatentclausethatprevents
itsuseunderunrelatedconditions.

None

None

Restrictive

None

None

None

None

Clientside
routing(M)

ClientsideroutingprovidesfullURL
supportforSEO,backbutton
functionality,andbookmarking.The
lackofthismakesnavigationless
easilyintrospectedandbreaksa
fundamentalaspectoftheweb.

Builtin

Builtin

reactrouter
(3rdparty
library)

elmrouterha
sh

elmroutepar
ser

Builtin

Builtin

DIY
(various
3rdparty
libraries)

Nestable
components(M)

Nestablecomponentsareimportantfor
elegantdecompositionofcomplexUIs
intomanageablehierarchiesofsmaller
portable,encapsulatedpieces.Also
seeFuturereadinessbelowfor
discussionofWebComponents
support.

Yes

Yes

Yes

Yes

No
(
marionette
)

Yes
(
.component
method)

Yes

Robuststate
management
(M)

Theframeworksstatesystemshould
nottriggerafullDOMrerender,which
isbadforperformance.Instead,it
shouldperformpartialrerenders(only
thosecomponentsthathavechanged).
UsingDOMdiffsoffthepageinsteadof
modeldiffsmaybeaperformance
bottleneck.

Modeldiffing
(withJIT
compilation)

Valuediffing
(Handle
bars)

DOMdiffing
(VirtualDOM)

DOMdiffing
(
virtualdom
)

Manual
rerendering

Modeldiffing

Viewmodel
diffing(with
observables
)

RobustREST
support(M)

Frameworkseitherhavebuiltinsyntax
forRESTcallsorenforcetheuseof
jQuery(dependency)tofetchdatafrom
aservice.Someeschewoptimistic
feedbackbysavingclientsidedata
onlyoncetheserverrequestissent,
notidealforappsindisconnected
environments(mobileorofflinefirst).

Builtin(in
progress,
betterafter
beta)

Builtin

Add
fetch
or
isomorphic
fetch

Through
elmhttp
(maintained
byauthorof
Elm).

Builtinbut
syncswith
server(no
optimistic
feedbackno
offline
overridable)

Builtin($http
forbroad
AJAX,
$resourcefor
RESTful
APIs)

ManualAJAX
(knockout.
mappingor
$.ajax)

Testability(M)

Canwetestourcodeusingsmall,fast
unittests,usingstandardofftheshelf
tools,withoutexcessivemocking?How
welldoesitworkwithDrupaltesting?

Good

Good

Good
(also
unexpectedr
eact
)

Good

Poor(DIY)

Good

Poor(
DIY
)

Databinding
(M)

Twowaydatabindingallowsfordata
updatedfromeitherthevieworthe
modeltobereflectedintheview,butit
oftenhasadetrimentalimpacton
performance.Onewaydatabinding
allowsforasolelyunidirectionalflow
andisusuallyadequateformostapps.

Onewaydata Twoway
binding
databinding
(oneway
databinding
willbedefault
in2.6)

Oneway
databinding
(
ReactLink
fortwoway)

Oneway

None(getters
andsetters
DIY)

Declarative
twowaydata
binding

Twoway
databinding

Large
community,
ecosystem(S)

Corporatesponsorshiporalarge
backingcommunityhelpmaintaina
robustframework.Alargeecosystem
entailsextensions,plugins,andother
incidentalprojectsthataiddevelopers.

Large
(Google)

Large

Large
(Facebook)

Small

Medium

Large
(Google)

Medium

Maturity(S)

Hastheframeworkseensubstantial
adoptionfrommanylargeenterprises?
Also,doesithavealonghistoryof
effectiveuseinproduction?

Leastmature

Mature

Mostmature

Leastmature

Mostmature

Mostmature

Mature

APIdocsand
learnability(S)

Notonlydoestheframeworkneedto
haveanaccessiblelearningcurvefor
Drupaldevelopersfrontend
developersneedtobeabletousethe
frameworkefficientlyandtointegrate
easilyintotheDrupalcommunity.

Average
(betterbyend
ofQ12016)

Good

Good

Good

Good

Good

Good

Debugging
experience(S)

Developersdesireapleasant
debuggingexperiencesuchasatool
thataidsnotonlyinisolatingerrorsand
warningsbutalsoacomprehensive
inspectorforthestructureand
executionoftheapplication.

batarangle

Ember
Inspector

devtools

Timetravel
debugger

Debugger

batarang

chromeexten
sionsknocko
utjs
(low
usage)

Errorhandling
andreporting
(S)

Developersrequirerobusterror
reporting(e.g.compilererrors,runtime
errors)toaidtheirdebuggingprocess.
Anidealframeworkwouldprovide
exhaustiveandhelpfulerrorreporting
thatminimizesblockedtasks.

TypeScript
(statically
typed):both
compiletime
andruntime
errors

Builtin
.onerror
method(also
clihoneybad
ger
)

DIY
(3rdparty
libraries)

Stronglyand
statically
typed,
excellent
compiletime
errors
,
practicallyno
runtime
errors

DIY(noerror
handling
OOTB)

Builtinerror
handling

Builtin
.onError
method

Nativeapp
support(N)

Frameworksincreasinglyhaveaspart
oftheirecosystemthecapabilityof
compilingsinglepageJavaScript
applicationsintonativemobile
applicationswritteninJavaand
ObjectiveC.Whilethisdoesnotaffect
progressivedecoupling(unlessthereis
serversideJS),itisusefulforfull
decoupling.

NativeScript
Ionic2
ReactNative

clicordova
(HTML5to
native)

ReactNative

Inprogress

None(DIY)

Ionic

None(DIY)

Future
readiness(N)

Anidealframeworkshouldhaveaplan
inplacetoeitherprovideapolyfillforor
directlysupportWebComponents,
ShadowDOM,andupcomingversions
ofJavaScript(ES6,ES7).

Excellent
(ES6support,
WClike
syntax)

Excellent
(ES6support,
WClike
syntax)

Average
(
Maple.js
for
WC)

Excellent

Poor

Poor

Good
(WClike
syntax)

Backwards
compatibility(N)

Ideally,aframeworkshouldbe
backwardscompatiblewithallprevious
versionsinordertoavoidincurring
significantdevelopmentcostslater.In
addition,anidealframeworkshouldbe
usingsemanticversioning(semver).

Firstversion
iscurrentfull
semver

Fully
backwards
compatible

fullsemver

No
backwards
compatibility
(0.x.x)full
semver

No
backwards
compatibility
(0.x.x)full
semver

Full
backwards
compatible

fullsemver

No
backwards
compatibility

semveronly
recently

Full
backwards
compatibility

fullsemver

Release
cadence(N)

Lessfrequentreleaseswillalleviatethe
needformoduleslikejQueryUpgrader,

Firstversion
inbeta2

Minorevery
~6w

Minorevery
~6m

Minorevery
~6m

Minorevery
~612m

Minorevery
~2w

Minorevery
~6m

whichaddressedtheinabilitytoretain
easydependencymanagementincore.
However,fasterreleasesthatare
backwardscompatiblearegoodforthe
frameworkitsimplycreatesfrictionin
Drupalsmanagementof
dependencies.
Totals

(longterm
supportevery
~6m)

16
green
4
yellow
2
red
3
n/a

16
green
7
yellow
2
red
0
n/a

14
green
5
yellow
5
red
1
n/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)

15
green
6
yellow
4
red
0
n/a

11

green

yellow

red

n/a

16

green
6

yellow
3

red
0

n/a

13

green
9

yellow
3

red
0

n/a