Satisfying Business and Engineering
Requirements
Client-server JavaScript, SEO, and Optimized Page Load
Jason Strimpel, Ps...
The Evolution of the Web
and you may find yourself living in a shotgun shack
Applications Desktop MobileInformation
What are we trying to solve?
SEO
Easily find items
Page Load
Fast first page
load
Page
Transition
Speedy
navigation
betwee...
These statements are 100% accurate and true
Engineer 1: Java is the cat’s pajamas; Your toy language amuses me
Engineer 2:...
The Rise of the Web
the only thing a gambler needs
• Deployed JavaScript increased
45% in 2011 (HTTP Archive)
• 161 new no...
Solution 1: Classic Web Application
a tale as old as time
• Pros
– Excellent SEO support
– Optimized first page load
• Con...
Solution 2: Single Page Application
new and improved
• Pros
– Distributed processing &
minimal payload
– Separation of dat...
Solution 3: Hybrid Web Application
• Pros
– Excellent SEO support
– Optimized first page load
– Distributed processing
– S...
The Stack
Hapi
Backbone.js
jQuery
RequireJS
Application
Components
Models
Rendering Templates
Assets
(i18n/I10n)
Models Ro...
Application
• Structure
• Wiring
• Assets
• Configuration
• Initialization
Components
Component are self-contained,
parameterized, reusable,
composable MVC “mini-
applications”.
• Life cycle
• Busi...
Models &
Collections
• Tunnel
• Short Circuit
• Optional Syncher
Who cares?
SEO
Which way did he go George?
Solution: First page response is
rendered on the server
Engineering: Single code base
and ...
Optimized First Page Load
Better...stronger...faster
Solution: First page response is rendered on the server.
Engineering:...
Page Transitions
coast to coast
Solution: Cache
and render on
the client.
Engineering:
Distributed
rendering.
Business:
In...
Mo’ Money
Mo’ Money
Mo’ Money
Demo
The Future
I gotta wear shades
• Hapi first class citizen
• Child views
• Asynchronous Rendering
• Generator
• Lazo mock o...
Questions?
You have question? You do, you don't, yes, no... I should buy a boat! Are
they making pants tighter? I don't kn...
Appendix
First Page Request
www.meow.com
Parse
Response
Rehydrate &
Attach Views
Route Table
Component
Action
Rendering
Context
Ren...
Subsequent Page Requests
www.meow.com => www.foowww.meow/blog
Model DataPage Request Route Table
Component
Action
Renderin...
Models & Collections
• Extended Backbone models and
collections
• Parameters and model name
define model uniqueness
• Serv...
Optimizing a Page Transition
model syncher
Model X
Model C
Model B
Model A
Model C
Model B
Page Y
Model A
ClientServer
Mod...
Components
self-contained, parameterized, composable MVC “mini-applications”
Method Invocations
Events
• Controller
– Busi...
Components
self-contained, parameterized, composable MVC “mini-applications”
Method Invocations
Events
• Controller
– Busi...
Satisfying Business and Engineering Requirements: Client-server JavaScript, SEO, and Optimized Page Load
Satisfying Business and Engineering Requirements: Client-server JavaScript, SEO, and Optimized Page Load
Upcoming SlideShare
Loading in …5
×

Satisfying Business and Engineering Requirements: Client-server JavaScript, SEO, and Optimized Page Load

470 views
384 views

Published on

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.

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
470
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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?
  • INCREASED SALES AND/OR ADVERTISING REVENUE
    DECREASED ENGINEERING COSTS
    INCEASE SHAREHOLDER WEALTH
  • 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.
  • NO CORS. EVERYTHING GOES THROUGH A TUNNEL.
  • HERE IS AN EXAMPLE USE CASE OF A PROXY
  • TODO: move diagrams to appendix; reusage
  • TODO: move diagrams to appendix; reusage
  • Satisfying Business and Engineering Requirements: Client-server JavaScript, SEO, and Optimized Page Load

    1. 1. Satisfying Business and Engineering Requirements Client-server JavaScript, SEO, and Optimized Page Load Jason Strimpel, Pseudo Classically Trained Software Engineer @WalmartLabs
    2. 2. The Evolution of the Web and you may find yourself living in a shotgun shack Applications Desktop MobileInformation
    3. 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. 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. 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. 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. 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. 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
    9. 9. The Stack Hapi Backbone.js jQuery RequireJS Application Components Models Rendering Templates Assets (i18n/I10n) Models Routing ApplicationStructure DOM Events Monitoring Synchers ClientCommonServer
    10. 10. Application • Structure • Wiring • Assets • Configuration • Initialization
    11. 11. Components Component are self-contained, parameterized, reusable, composable MVC “mini- applications”. • Life cycle • Business logic • Events
    12. 12. Models & Collections • Tunnel • Short Circuit • Optional Syncher
    13. 13. Who cares?
    14. 14. 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.
    15. 15. Optimized First Page Load Better...stronger...faster Solution: First page response is rendered on the server. Engineering: Reduced network calls. Business: Decreased bounce rates.
    16. 16. Page Transitions coast to coast Solution: Cache and render on the client. Engineering: Distributed rendering. Business: Increased conversions.
    17. 17. Mo’ Money Mo’ Money Mo’ Money
    18. 18. Demo
    19. 19. 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?
    20. 20. 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
    21. 21. Appendix
    22. 22. First Page Request www.meow.com Parse Response Rehydrate & Attach Views Route Table Component Action Rendering Context Render Take me to meow.com Internets! Client Server Page Request
    23. 23. 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
    24. 24. 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
    25. 25. 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
    26. 26. 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
    27. 27. 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

    ×