satisfying business and engineering requirements: client-server javascript, seo, and optimized page...
DESCRIPTION
Often business needs and developer needs are at odds when developing public facing web applications, sites that need to be indexed by search engines. Business is primarily concerned with factors such as search engine optimization, SEO, improving visitor retention and reducing bounce rates, while engineering is more concerned with improving developer ergonomics, code re-usage, separation of concerns, and code maintenance. This talk aims to describe a solution that satisfies both business and engineering requirements.TRANSCRIPT
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