AboutMe• TechnicalLeaderandAgileCoach• Front-endDeveloper(testfirst!)• MobileDeveloper(HybridwithCordova,iOS,Android)• TechnologyEnthusiast• Mentor@Airpair.com

What'sNext?

ScotchStreamingandScaling11Feb2015www.meetup.com/mobiletea

Agenda• Monolithicapplications• Identifymodulesand/orcomponents• Distributingmodulesinyourorganization• RESTfulandHypermediamodels• Demo

EnterpriseApplications

• Existingcodebaseandlegacycode• Shorttimetomarket• Prototypebased• Lackofplanningandstrategy• Adaptingtomarketingneeds

M/SSizeApplications

• Unexpectedsuccess• Budgetconstraints• Missingexpertise• Lackofplanningandstrategy• Adaptingtocustomerneeds

What'sinCommon?Lackofdesigniterationsandseparationofconcerns

monkeyanimatedGIF

monkeyanimatedGIF

monkeyanimatedGIF

MajorProblems• Maintainability• Scalability• Learningcurve• Difficultsetups• Complexreleaseprocedures• Difficulttotest• Integrationnightmares• Longbuildcycles

PossibleSolutions• Refactoring• Documenting• Decoupling• Movethemodeontheserver• Addcomputationcapabilities(e.g.clouds)• Etc.

NoEscape

NoEscapeeatinganimatedGIF

eatinganimatedGIF

ModulesAnapplicationmoduleisaclassthatrepresentsabusiness

applicationtask.(Oracle)

ComponentsAcomponentisareusableprogrambuildingblockthatcanbe

combinedwithothercomponents.

That'sGood!

That'sGood!robertdeniroanimatedGIF

robertdeniroanimatedGIF

IdentifyThemStartingfromYourRequirements

SmallandDecoupled

• Identifysmallanddecoupledpartsofyourapplication• Trytounderstandwhicharereusableacrossseveralapps• Iterateacrossyourmodulesand/orcomponentslistbeforeimplementinganewfeature• Pick-uptherighttoolsettoimplementaspecificsetoffeatures• Neverreinventthewheel!

DistributionRequirements

• Amodule/componentshouldbeeasytoinstall• Dependenciesshouldbeeasytomanage• Thefeaturesofeverymodule/componentshouldbeveryclear• Allthereleasesofamodule/componentshouldbealwaysavailable(eventuallydismissthesupport)

PossibleSolutions

What'sAboutmy

What'sAboutmyPrivacy?

wtfanimatedGIF

wtfanimatedGIF

BowerUseaprivategitrepositoryongithub.comorcreateyourowngitserver

{"name":"my-amazing-component","version":"1.0.0","ignore":["**/.*","node_modules","bower_components","test","tests"

NPMTrythenpmjs.comenterpriseserviceorcreateyourprivatenpm

serverusingSinopiatocreateprivatepackages

UsingNPMYoucanthenusenpmasusualbuteverythingwillliveintoyourprivaterepo,theonlydifferenceisthatyousetadifferentregistry(actuallyyoucanswitchbetweenthem)

$npmsetregistryhttp://your_external_ip:4873$npmadduser$npmpublish

Results• Youcaninstallanduninstallcomponentseasily• Thedependenciesmanagementprocessisautomated(kinda!)• Everycomponent/modulecanbeunpluggedfromyourapplicationandchanged• Thesourcecodeisbetterorganized(componentsshouldworkalsostandalone)• Etc.

What'sMissing?Themodel...

techanimatedGIF

AbstracttheModel• Keepalwaysthemodelindependentfromyourclientsidearchitecture• JSONorXMLarevalidformatstodistributethedata• Usedataadapters(Backbone,EmberData,etc.)todealwiththemodelinyourclientsidecode

EnrichtheModel• Don'tdeliverjustdatabutalsobusinesslogicinformationlikerelatedlinks• UsetheflexibilityofJSONorXMLtoprovideastructuretoyourmodels

{"href":"http://example.com/api/v1/users/john","type":"user","head":{"allow":["GET","PUT","PATCH","DELETE"],"related":{

DeliverYourRules• Usethemodeltoexplicitlysettherulestofollowtopost/put/delete/informationtoyoursystem• Deliverformvalidationrules(e.gregexp)toavoidtore-buildtheclientifsomethingchange• Provideliveupdateinformation(e.g.websockets)toupdateyourapplication• Etc.

AlwaysAvoidTodefineamodelthatfitstheneedsofaspecificclientsidelibrary,

it'sapaththatisveryhardtoundo

Recommendations• Trytodon'tdependonlyonasingleclientsidelibrary• Don'tbetoolazy,JavaScriptcanhandlenativelythetasksperformedbyexternallibriaries• Keepthecommunicationassimpleaspossible• Writecleanandtestablecode• Etc.

ComponentsScope• UsewebcomponentsCSSscopingifyourconcernisthelookand

feelofcomponents/module• UseaniFrametoencloseyourcomponentinasandbox

Demohttps://github.com/GiorgioNatili/undoable-architectures

Resources• http://almostobsolete.net/talks/hypermedia• http://liquidmedia.org/blog/2011/01/backbone-js-part-1• http://madhatted.com/2013/3/19/suggested-rest-api-practices• http://emberjs.com/guides/models/the-rest-adapter• http://cwbuecheler.com/web/tutorials/2014/restful-web-app-node-express-mongodb• https://oncletom.io/2013/live-development-bower-component• http://tech.pro/tutorial/1308/emberjs-views-and-live-templates-with-handlebarsjs-part-1

@giorgionatili#mobiletea#javascript#swift#wearable#agile#android#tdd

Thanks!

Thanks!Grazie!Graçias!Danke!Merci!��!

thanksanimatedGIF

thanksanimatedGIF