Skip to main content

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

Jason Strimpel (WalmartLabs)
Average rating: ****.
(4.00, 4 ratings)

Business and engineering requirements often do not align when creating and maintaining public facing web applications, sites. The business is primarily concerned with converting visits to sales in some fashion. As such two primary requirements are:

  • SEO because the business would like potential customers to easily find their product or service
  • Optimized first page load as the business does not want a potential customer bouncing to a competitor’s site due to a slow loading page

Engineering requirements sometimes overlap business requirements – performance concerns and first page load optimization cross over – but more often than not the solution that best fits engineering requirements does not coincide well with the business needs. Engineering wants loosely coupled objects and clear lines of separation. Standard web applications – a mix of server and client languages each with their own life cycles – contain a lot of redundancy and no clear lines for separation of responsibilities – in one case the content maybe server rendered using one language and in another case the same content may be rendered on the client using JavaScript. The simplest way to eliminate redundancy and draw clear lines of separation is to utilize the single page application model, SPA. An SPA separates application logic from data retrieval, consolidates UI code to a single language and run time, and delegates UI rendering to the browser. However, the SPA model fails to adequately address SEO concerns and time to first page render making it a major concern for any public facing web application, site. As such developers rely on work arounds such as the hashbang or running the DOM on the server so they can realize the benefits of the SPA model while addressing SEO concerns. These work arounds have significant performance and maintenance drawbacks. Additionally, users still have to wait for multiple networks calls to complete while the data required to fully render the page is retrieved thus increasing bounce rates.

This talk will describe an alternative that meets both business and engineering needs for creating and maintaining public facing web applications, sites. The proposed model uses hybrid approach that shares common rendering and data retrieval life cycles between the server and client by abstracting environment differences using APIs familiar to front-end developers. These abstractions allow front-end developers to easily create robust web applications without being overly concerned about the environment in which their models, collections, views, and controllers run. The presentation will highlight some of these abstractions including how pushstate is used to create fully qualified, SEO compliant URIs that are rendered on the client using a simple context object. These URIs automatically fall back to server rendered pages for browsers that do not support pushstate. This approach allows developers to reap the SEO benefits of the traditional web application model, while still working in a context with which they are familiar, and realizing all SPA model benefits.

Photo of Jason Strimpel

Jason Strimpel

WalmartLabs

I engineer software.

Leave a Comment or Question

Help us make this conference the best it can be for you. Have questions you'd like this speaker to address? Suggestions for issues that deserve extra attention? Feedback that you'd like to share with the speaker and other attendees?

Join the conversation here (requires login)