Satisfying Business and Engineering Requirements
Client-server JavaScript, SEO, and Optimized Page Load
Jason Strimpel, Pseudo Classically Trained Software Engineer @WalmartLabs
The Evolution of the Weband you may find yourself living in a shotgun shack
Applications Desktop MobileInformation
What are we trying to solve?
SEOEasily find items
Page LoadFast first page load
Page TransitionSpeedy navigation between pages
321
These statements are 100% accurate and true
Engineer 1: Java is the cat’s pajamas; Your toy language amuses meEngineer 2: JavaScript is free like the wind; Java is the language of fascists
Engineers
Every Back and Front End Engineer, Every Company
Competing Interests in Web Application Development
Engineering Managers
Code coverage! Technical debt! I haven’t coded in 10 years and I sucked at it anyway!
Every Engineering Manager, Every Company
SEO EVERYTHING!!!This should be a simple change.I need a flying donkey RIGHT HERE!
Product Managers
Every Product Manager, Every Company
The Rise of the Webthe only thing a gambler needs
• Deployed JavaScript increased 45% in 2011 (HTTP Archive)
• 161 new node modules per day (http://modulecounts.com)
• JavaScript #1 language (RedMonk 2014)
HTML 5
Web Components
MV* Libs
Aw
eso
meness
Time
Graph is to scale in real life
JavaScript and the Web
are a BIG DEAL!
Solution 1: Classic Web Applicationa tale as old as time
• Pros– Excellent SEO support– Optimized first page load
• Cons– Duplicate logic – No clear lines of
separation
Rendering
Services
Templates Assets Models Routing
Rendering Templates Assets Models Routing
Clien
tS
erv
er
Solution 2: Single Page Applicationnew and improved
• Pros– Distributed processing &
minimal payload– Separation of data &
presentation
• Cons– Poor SEO support– First page load is not
optimized
Rendering
Services
Templates Assets Models Routing
Static Resources
Proxy to Service
Assets Models Routing
Clien
tS
erv
er
Solution 3: Hybrid Web Application
• Pros– Excellent SEO support– Optimized first page load– Distributed processing– Single UI layer– One code base– One rendering life cycle
• Cons– Conditional blocks for
server and client only code
Services
Rendering Templates Assets Models Routing
Client-Server Hybrid
The Stack
HapiBackbone.jsjQueryRequireJS
Application
Components
Models
Rendering TemplatesAssets
(i18n/I10n)Models Routing
Applic
ati
on S
tru
ctu
re
DOM Events
Monitoring Synchers
Clie
nt
Com
mon
Serv
er
Application
• Structure• Wiring• Assets• Configuration• Initialization
ComponentsComponent are self-contained, parameterized, reusable, composable MVC “mini-applications”.
• Life cycle• Business logic• Events
Models & Collections• Tunnel• Short Circuit• Optional Syncher
Who cares?
SEOWhich way did he go George?
Solution: First page response is rendered on the server
Engineering: Single code base and common rendering life cycle.
Business: Users can easily find your content.
Optimized First Page LoadBetter...stronger...faster
Solution: First page response is rendered on the server.
Engineering: Reduced network calls.
Business: Decreased bounce rates.
Page Transitionscoast to coast
Solution: Cache and render on the client.
Engineering: Distributed rendering.
Business: Increased conversions.
Mo’ Money
Mo’ Money
Mo’ Money
Demo
The FutureI gotta wear shades
• Hapi first class citizen• Child views• Asynchronous Rendering• Generator • Lazo mock objects• Increase code coverage• Decrease page weight• And many more github.com/walmartlabs/
lazojs
Hungry for more?
Questions?You have question? You do, you don't, yes, no... I should buy a boat!
Are they making pants tighter? I don't know, I don't wear jeans.
Twitter: @StrimpelJasonGithub: https://github.com/jstrimpel
LinkedIn: https://www.linkedin.com/in/strimpeljason
Appendix
First Page Requestwww.meow.com
Parse Response
Rehydrate & Attach Views
Route TableComponent
Action
Rendering ContextRender
Take me to meow.com Internets! Client Server
Page Request
Subsequent Page Requestswww.meow.com => www.foowww.meow/blog
Model DataPage
RequestRoute Table
Component Action
Rendering Context
I fancy meow.com/blog ServerClient
Attach ViewsRender
Only fetches
data not on
the client
Models & Collections
• Extended Backbone models and collections
• Parameters and model name define model uniqueness
• Service URL or syncher
Services
Client Server
Model
Proxy
Syncher ?Yes
No
Optimizing a Page Transitionmodel syncher
Model X
Model C
Model B
Model A
Model C
Model B
Page Y
Model A
ClientServer
Model C
Syncher X
Model A Model B
Model X
Page Y
Server Client
Componentsself-contained, parameterized, composable MVC “mini-applications”
Method Invocations
Events
• Controller– Business logic, life cycle,
and view selection
• Model– Encapsulates data and
notifies view of changes
• View– Renders model and
responds to user gestures
Parent => Child
Model
Controller
View Model
Controller
View
Componentsself-contained, parameterized, composable MVC “mini-applications”
Method Invocations
Events
• Controller– Business logic, life cycle,
and view selection
• Model– Encapsulates data and
notifies view of changes
• View– Renders model and
responds to user gestures
Parent => Child
Model
Controller
View Model
Controller
View
