Satisfying Business and Engineering Requirements: Client-server JavaScript, SEO, and Optimized Page Load
•Transferir como PPTX, PDF•
1 gostou•593 visualizações
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.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a Satisfying Business and Engineering Requirements: Client-server JavaScript, SEO, and Optimized Page Load
Semelhante a Satisfying Business and Engineering Requirements: Client-server JavaScript, SEO, and Optimized Page Load (20)
Último
Último (20)
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
- 10. The Stack Hapi Backbone.js jQuery RequireJS Application Components Models Rendering Templates Assets (i18n/I10n) Models Routing ApplicationStructure DOM Events Monitoring Synchers ClientCommonServer
- 11. Application • Structure • Wiring • Assets • Configuration • Initialization
- 12. Components Component are self-contained, parameterized, reusable, composable MVC “mini- applications”. • Life cycle • Business logic • Events
- 13. Models & Collections • Tunnel • Short Circuit • Optional Syncher
- 14. Who cares?
- 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.
- 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.
- 19. Mo’ Money Mo’ Money Mo’ Money
- 20. Demo
- 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
- 23. Appendix
- 24. 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
- 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
Notas do Editor
- 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