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

Editor's Notes

• #2: 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
• #3: 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?
• #4: 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?
• #5: 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.
• #6: 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
• #7: 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.
• #8: 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?
• #9: 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.
• #10: 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.
• #11: 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.
• #12: 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.
• #13: 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.
• #14: 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.
• #15: 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.
• #16: 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
• #18: 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.
• #19: 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?
• #20: INCREASED SALES AND/OR ADVERTISING REVENUE DECREASED ENGINEERING COSTS INCEASE SHAREHOLDER WEALTH
• #21: AS PROMISED LETS DIVE INTO SOME CODE EXAMPLES HOW MANY OF YOU ARE FAMILIAR WITH TODOMVC?
• #22: THIS IS NEW. THERE IS ROOM FOR IMPROVEMENT. THESE ARE JUST SOME THE THINGS WE ARE LOOKING AT. WE NEED HELP.
• #23: HOW ARE WE DOING ON TIME?
• #25: I AM GOING TO WALK THROUGH THE FIRST PAGE REQUEST AT A HIGH LEVEL
• #26: 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.
• #27: NO CORS. EVERYTHING GOES THROUGH A TUNNEL.
• #28: HERE IS AN EXAMPLE USE CASE OF A PROXY
• #29: TODO: move diagrams to appendix; reusage
• #30: TODO: move diagrams to appendix; reusage