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.
Satisfying Business and Engineering Requirements: Client-server JavaScript, SEO, and Optimized Page Load
1. Satisfying Business and Engineering
Requirements
Client-server JavaScript, SEO, and Optimized Page Load
Jason Strimpel, Pseudo Classically Trained
Software Engineer @WalmartLabs
2. The Evolution of the Web
and you may find yourself living in a shotgun shack
Applications Desktop MobileInformation
3. What are we trying to solve?
SEO
Easily find items
Page Load
Fast first page
load
Page
Transition
Speedy
navigation
between pages
321
4. These statements are 100% accurate and true
Engineer 1: Java is the cat’s pajamas; Your toy language amuses me
Engineer 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
5. The Rise of the Web
the 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
Awesomeness
Time
Graph is to scale in real life
JavaScript and
the Web
are a BIG DEAL!
6. Solution 1: Classic Web Application
a 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
ClientServer
7. Solution 2: Single Page Application
new 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
ClientServer
8. 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
15. SEO
Which 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.
16.
17. Optimized First Page Load
Better...stronger...faster
Solution: First page response is rendered on the server.
Engineering: Reduced network calls.
Business: Decreased
bounce rates.
18. Page Transitions
coast to coast
Solution: Cache
and render on
the client.
Engineering:
Distributed
rendering.
Business:
Increased
conversions.
21. The Future
I 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?
22. 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: @StrimpelJason
Github: https://github.com/jstrimpel
LinkedIn: https://www.linkedin.com/in/strimpeljason
25. Subsequent Page Requests
www.meow.com => www.foowww.meow/blog
Model DataPage Request Route Table
Component
Action
Rendering
Context
I fancy
meow.com/
blog ServerClient
Attach ViewsRender
Only
fetches
data not
on the
client
26. 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
27. Optimizing a Page Transition
model 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
28. Components
self-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
29. Components
self-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
Hinweis der Redaktion
MESSAGE: INTRODUCTION
Software engineer on the platform team in a branch of Walmartlabs in San Diego
How many people are engineers, managers, product people? This is not extremely technical, but we will take a look at some code later and if we have time we can run through slide in the appendix that explain how things work.
TRANSITION: BUT BEFORE WE GET INTO THIS I WANTED TO SET SOME CONTEXT
MESSAGE: EVERYTHING IS MOVING TO THE WEB
Web driven phones
JavaScript on the server is now a real solution
Pokki App store that delivers 100% HTML and JS apps
Permeated many other devices and markets
TRANSITION: AS AN ENGINEER IT IS MY JOB TO PROVIDE AN OPTIMAL USER EXPERIENCE. SO WHAT DOES THAT MEAN?
MESSAGE: IT DEPENDS ON THE PROBLEM YOU ARE SOLVING. IN OUR CASE IT TO CREATE A WEB FRAMEWORK THAT WOULD SOLVE THE SEO PROBLEM.
SEO
PAGE LOAD
PAGE TRANSITION
TRANSITION: NOW THAT WE KNOW THE PROBLEM WE ARE SOLVING FOR LET’S TAKE A LOOK AT WHO WE ARE WORKING WITH?
MESSAGE: PEOPLE ARE IMPORTANT. NOT JUST MAKING THEM HAPPY, BUT EMPOWERING THEM TO DO THERE JOB.
PRODUCT: these are the people settings the requirements
ENGINEERS: the implementers; push back on requests; realists; they can never agree with each other
MANAGERS: these people are concerned with deliver quality as fast as possible and metrics
TRANSITION: BEFORE WE GET INTO THE POSSIBLE SOLVES TO MAKE THESE PEOPLE’S LIVES EASIER I WANTED TOUCH ON HOW THINGS HAVE BEEN TRENDING.
MESSAGE: WE TALKED ABOUT THE TREND ALL THINGS WEB. WITHIN THIS LETS TAKE A LOOK AT ANOTHER TREND.
JavaScript usage has increased – more complex app, but if you take a look at this highly scientific graph you will see MV* libs
TRANSITION: NOW THAT WE HAVE SOME CONTEXT ABOUT TRENDS, THE ISSUE WE ARE TRYING TO SOLVE, AND THE MAJOR PLAYERS LET’S TAKE A LOOK AT SOME POSSIBLE SOLUTIONS
MESSAGE: THIS IS THE STRUCTURE THAT HAS BEEN USED SINCE THE DAWN OF ECOMMERCE. IT WORKED WELL UNTIL AJAX CAME ALONG AND THINGS GOT COMPLICATED.
Solves the problem, but it high inefficient – confusing life cycles, duplicate efforts, etc.
TRANSITION: BECAUSE OF THE INCREASING COMPLEXITY AND DUPLICATION ANOTHER APPROACH WAS TAKEN.
MESSAGE: THIS WAS THE SOLUTION TO FIX THE INEFFICIENCIES AND TO REDUCE DUPLICATION.
As you can see this eliminates the duplication by shifting everything to the client
This comes at a cost though and the cost is SEO and a decreased time to render
TRANSITION: SO THIS REALLY DOESN’T SOLVE OUR BUSINESS PROBLEM. IT IS GREAT FOR ENGINEERING. SO IS THERE ANOTHER WAY?
MESSAGE: THIS IS WHAT IS SOMETIMES REFERRED TO AS THE HOLY GRAIL. THE BEST OF BOTH WORLDS.
Reduced the UI to a single layer
TRANSITION: GIVEN OUR USE CASE LET’S TAKE A LOOK AT THE SOLUTIONS THAT EXIST TODAY.
MESSAGE: HERE ARE A FEW OF THE SOLUTIONS THAT EXIST TODAY. GREAT SOLUTIONS. SMART PEOPLE. BUT LETS EXAMINE THEM WITHIN THE CONTEXT OF THE PROBLEM WE ARE TRYING TO SOLVE.
LIBS – no structure or wiring
REAL TIME – doesn’t really fit our use case
CLIENT ONLY – client only; poor seo and first page load
IN ADDTION TO SEO AND OPTIMIZED PAGE LOAD; SPECIFIC BENEFITS
DESIGNED FOR THE FRONT-END ENGINEER
IMPROVES DEVELOPER EFFICIENCY – SINGLE CODE BASE, NO CONTEXT SWITCHING, NO FRONT AND BACK ENGINEERS FOR THE UI LAYER
NO MORE DRAWING THE LINE IN THE SAND – NO MORE DUPLICATE IMPLEMENTATIONS OR FIGURING OUT WHEN THE CLIENT TAKES OVER
WIRING – ASSETS, DEPS, COMBO HANDLING, LIFE CYCLES
PRODUCTION READINESS: LOGGING, SERVER MONITORING, UNIT TESTING FRAMEWORK (GRUNT-CASTLE)
TRANSITION: SO LET’S TAKE A CLOSER LOOK AT THE STACK.
MESSAGE: AT A VERY HIGH LEVEL THIS IS LAZO.
Primary libs
Vertical stack are the major parts of a Lazo application
Horizontal stack is a division of duties; most of it is shared
TRANSITION: LETS TAKE A DEEPER DIVE INTO THE APPLICATION PIECES.
MESSAGE: THE POINT OF THE APPLICATION IS TIE THINGS TOGETHER.
STRUCTURE – makes it easy to understand and find things
WIRING – allows you to focus on developing your application vs. gluing it together
ASSETS – makes internationalization and including resources such as strings and images easy; CSS and JS as well
CONFIGURATION – allows you to easily configure your application for different environments
INITIALIZATION – a hook point for doing any work that needs to be done on application start up
TRANSITION: IN A NUTSHELL THAT THE POINT OF THE APPLICATION OBJECT. LET’S TAKE A LOOK AT ANOTHER MAJOR PLAYER IN THE STACK, THE COMPONENT.
MESSAGE: THESE ARE NOT WEB COMPONENTS. THESE ARE LAZO COMPONENTS WHICH HOOK INTO THE RENDER LIFE CYCLE TO REALLY JUST RETURN MARKUP TO A PLACE IN THE REQUEST RESPONSE.
LIFE CYCLE - this is key to ensuring that rendering and request response happen in a consistent manner allowing you to focus on your application
BUSINESS LOGIC – this goes in the component controller as opposed to stuffing things in a view object; all views get access to the controller that instantiated them
EVENTS – this allows for communication between components on the client
TRANSITION: WE COVERED THE OVERALL STRUCTURE VIA THE APPLICATION AND THE ECAPSULATION AND REUSAGE FROM THE COMPONENTS LETS TAKE A LOOK AT HOW LAZO MODELS DATA.
MESSAGE: CARRYING THE SAME EXAMPLE FORWARD LETS TAKE A LOOK AT HOW MODELS AND COLLECTIONS FIT INTO A COMPONENT.
TUNNEL - no more CORS
SHORT CIRCUIT – dedup and load from client cache
OPTIONAL SYNCHER – data aggregation and manipulation on the server
TRANSITION: THESE ARE THE BASIC BUILDING BLOCKS OF A LAZO APPLICATION.
MESSAGE: BUT WHY LAZO? WHAT IS THIS GIVING ME?
TRANSITION: LETS TAKE A LOOK AT SOME OF THE REQUIREMENTS FOR OUR USE CASE IN THE CONTEXT OF LAZO.
MESSAGE: REMEMBER SEO?
SOLUTION - indexable
ENGINEERING – no more classic app and SPA didn’t work; no duplication; less engineering cost
BUSINESS – if a user can’t find your content then there is 0% chance for revenue
TRANSITION: ON TO OUR NEXT USE CASE
MESSAGE: HOW MANY PEOPLE DIDN’T LIKE THAT DELAY? HOW MANY PEOPLE THINK THAT THEIR USERS DON’T LIKE THAT DELAY?
SOLUTION - killing two birds with one stone
ENGINEERING – no fetching data from the client; it is already there
BUSINESS –more revenue opportunities
TRANSITION: LETS TAKE A LOOK AT ONE MORE USE CASE.
MESSAGE: IMAGINE THAT THE USER FOUND YOUR PRODUCT BECAUSE OF GREAT SEO. ADDED IT TO THEIR CART BECAUSE THE PAGE LOADED QUICKLY. NOW THE FINAL STEP IS CONVERSION.
SOLUTION - FASTER. since our code runs on both the server and client we can execute it on the client for subsequent page requests; using models if they exist on the client
ENGINEERING – less server processing
BUSINESS – an increase in revenue
TRANSITION: WHAT DOES SOLVING THE USE CASE REALLY PROVIDE YOU?
AS PROMISED LETS DIVE INTO SOME CODE EXAMPLES
HOW MANY OF YOU ARE FAMILIAR WITH TODOMVC?
THIS IS NEW. THERE IS ROOM FOR IMPROVEMENT. THESE ARE JUST SOME THE THINGS WE ARE LOOKING AT.
WE NEED HELP.
HOW ARE WE DOING ON TIME?
I AM GOING TO WALK THROUGH THE FIRST PAGE REQUEST AT A HIGH LEVEL
IF A BROWSER SUPPORTS THE HISTORY API THEN IT WILL EXECUTE ON THE CLIENT. IF NOT IT AUTOMATICALLY FALLS BACK TO SERVER RENDERING. FORWARD THINKING APPROACH.