frontend 'vs' backend getting the right mix
Post on 10-May-2015
5.013 Views
Preview:
DESCRIPTION
TRANSCRIPT
FRONTEND 'VS' BACKENDGETTING THE RIGHT MIX
Created by / / Bob Paulin @bobpaulin bob@bobpaulin.com
ABOUT MEIndependent ConsultantBusiness EnablementWeb Centric
A LONG TIME AGO I CREATED "FACEBOOK"College students love seeing pictures of their friends doingstupid things at partiesPhotoshop can be used to make funny pictures even morefunnyDo not host anything on your school's web property
WHAT THIS TALK IS NOTDeep Dive into web frameworksTHE answer on which architecture is better
WHAT THIS TALK ISUsing Frontend and Backend frameworks togetherHow developers work togetherAdvantages and disadvantages of architecturesSome empirical data on architecture performance
HOW DID WE GET HERE?ComplexityCorporate CultureDeveloper Aptitudes
BACKEND DEVELOPER
TYPICAL BACKEND DEVELOPERS
Focus on the server sideData Storage and RetrievalSystem ArchitectureAvailabilityDoes it work?
FRONTEND DEVELOPER
TYPICAL FRONTEND DEVELOPERS
Client/Browser focusedInformation ArchitectureCloser to creative/designDoes it look right?
DOES THIS MODEL ACTUALLY WORK?
CHALLENGES WITH FRONTEND/BACKENDTEAMS
COMPETING REQUIREMENTS
FREQUENT HANDOFFS
FRAMEWORKS OFTEN COUPLE FRONTEND ANDBACKEND TECHNOLOGIES
ANOTHER WAY TO THINK ABOUT THE PROBLEM...AN AMERICAN FOOTBALL ANALOGY
FRONTEND DEVELOPERS = OFFENSIVE BACKS
FRONTEND DEVELOPERS = OFFENSIVE BACKSScore Points with CustomersWork is highly visibleCan be limited by poor play at other positionsOften get the biggest share of blame when things go wrongand praise when things go right
BACKEND DEVELOPERS = OFFENSIVE LINE
BACKEND DEVELOPERS = OFFENSIVE LINEEnable other positions to do great workWork is not usually visibleMistakes often have a cascading effectGenerally only get blamed when things go wrong. Whenthings go right .... well things are just suppose to work all thetime right?
OK ENOUGH ABOUT YOUR PEOPLE PROBLEMSLETS LOOK AT SOME CODE ALREADY!
3 DIFFERENT APPROACHES TO THE SAME WEBSITE
REQUIREMENTS - A BOOK REVIEW SITE
Allow users to select keyword preferencesAllow users to view and post review comments about aspecific bookShould use responsive design. Because, well, that's the hotnew thing right?
A BACKEND RECIPESpring MVCSpring DataMongoDBApache TomcatApache Http ServerJSPTwitter BootstrapWRO4JAmazon Cloudfront (CDN)
DESIGNCache Google Api Response for Books and Book SearchConsolidate and minify CSS and JS using WRO4JPage turn between Homepage and ReviewsPage can't be cached but static resources can
CODESpring MVC ControllerSpring Data ServicesWRO4J Config
ARCHITECTURE
A FRONTEND RECIPEBrunchChaplinJSCoffeeScriptHandlebarsNode.jsApache CXFSpring DataMongoDBApache TomcatApache Http ServerTwitter BootstrapAmazon Cloudfront (CDN)
DESIGNAll Services are done through AJAXApache CXF Provides RestfulServices(Consumers/Producers) JAX-RSSingle Page Application Behavior via ChaplinNode.js but only for Brunch CompilationAll pages and frontend code cachedSome Data Services Cached: Volatile vs Static
CODEindex.html - Look Ma, only 16 lines of server side html!Chaplin ControllerChaplin ViewsChaplin ModelsHandlebars TemplatesApache CXF JAX-RS
INDEX.HTML<!doctype html><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!--[if gt IE 8]><!--> <!--<![endif]--><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Frontend Home Page</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="/frontend-web/stylesheets/app.css"> <script src="/frontend-web/javascripts/vendor.js"></script> <script src="/frontend-web/javascripts/app.js"></script> <script> </script></head><body></body></html>
require('initialize');
ARCHITECTURE
A MIXED RECIPEFRONTEND TECH
BackboneCoffeeScriptHandlebarsTwitter Bootstrap
BACKEND TECH
Spring MVCHandlebars.javaWRO4JApache CXFSpring DataMongoDBApache TomcatApache Http ServerAmazon Cloudfront (CDN)
DESIGNSome Services are done through AJAX others on ServersideApache CXF Provides RestfulServices(Consumers/Producers) JAX-RSPage turn between Homepage and ReviewsPage can't be cached but static and service resources canPage actions do not require page turnsTemplates are shared between frontend and backendBook Searches are cached with data URIs
CODECached ControllerWRO4JBackbone Views
ARCHITECTURE
TEST DESIGNWeb Page Test
Browser - Current Chrome
Location - Virgina
Click events tested locally using Chrome Developer Tools
TEST SCRIPT1. Homepage View2. Add a New Book Preference3. Open a Review4. Add A Comment
BACKEND HOMEPAGE WATERFALL
FRONTEND HOMEPAGE WATERFALL
MIXED HOMEPAGE WATERFALL
BACKEND REVIEW WATERFALL
FRONTEND REVIEW WATERFALL
MIXED REVIEW WATERFALL
DISCUSSIONWhat does this data tell us?What does it not tell us?Which is most scalable?Variations between Browsers
CONCLUSIONS
BACKEND SUMMARYMost consistant load timesBetter performance with static dataLess requestsFull page loads for incremental changes can prevent optimalperformanceData is embedded within the page so it can't be separatedinto different TTLDynamic content within the JSP prevents pages from beingcached. Increases traffic to the origin
FRONTEND SUMMARYRequests handled independently. Enables fine grain cachingEliminates page turns to refesh data modelSignificant caching opportunities at the edgeGenerates more requestsHigher memory and CPU consumption on the client end
MIXED SUMMARYAllows the most flexibility in how information is loadedCode reuse at the template levelEliminates some page turns related to data updatesPerformance suffers when both page and services arevolatile (non-cachable)
REFERENCESCODE AND PRESENTATION
Frontend "vs" BackendFRONTEND
BackboneJSBrunchChaplinJSCoffeeScriptHandlebarsTwitter Bootstrap
BACKEND
Apache CXFHandlebars.javaMongoDBSpring DataSpring MVCWRO4J
BOB PAULIN / / BOB PAULIN @BOBPAULIN BOB@BOBPAULIN.COM
top related