Overview

Lazojs is a client-server web framework built on Node.js that allows front-end developers to easily create a 100% SEO compliant, component MVC structured web application with an optimized first page load using a familiar tool stack comprised of Backbone.js, RequireJS, and jQuery.

Problem

The single page application (SPA) model is an excellent approach for separating application logic from data retrieval; consolidating UI code to a single language and run time; and delegating rendering to browsers. 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 website. As such, developers rely on work-arounds such as the hashbang hack or running the DOM on the server so they can realize the benefits of the SPA model and address SEO concerns. These work-arounds, however, have significant performance and maintenance drawbacks.

Solution

Lazo was created by WalmartLabs to address these issues and provide front-end engineers with a familiar environment for creating web applications. Pages are constructed via reusable, nestable components that have their own life cycles allowing developers to easily create complex views while providing excellent encapsulation and separation of concerns. These pages are mapped to fully qualified, SEO compliant URIs. Lazo renders the first page load on the server via a rendering engine that uses string concatenation. Subsequent page requests are rendered by browsers that support HTML5's pushstate capability. For those browsers that do not support pushstate, Lazo falls back to rendering views on the server. 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 without coding for them.

JavaScript-centric Full Stack Framework

Lazo leverages common OSS projects:

• Node.js is the foundation that Lazo on which is built.
• Hapi is what powers the Lazo sever.
• Backbone.js provides structure and an API familiar to Backbone developers.
• RequireJS is an AMD loader with support for dynamic loading, multiple contexts per environment, and an optimizer for bundling modules.
• Handlebars is the default template engine for Lazo. If Handlebars is not your cup of tea there is a pluggable API so you can easily drop in your favorite template library.
• Lazo bundles jQuery and Underscore.js for easy DOM manipulation and functional programming at its finest. Don’t see your favorite library? Adding it to your application is a breeze.

Core Benefits

• Conditional tier rendering: Lazo is able to render on both the client and server. This allows Lazo to render the first page response on the server for a very fast time to render. No more spinners. It then renders subsequent page requests on the client if the client supports pushstate.
• Extensible/Pluggable: No special packaging required. If you want to use a JavaScript library simply place it on the server and point to it.
• Modular design: Lazo follows a component MVC architecture. Components are self contained, reusable, nestable encapsulations of code, assets, and templates. This design allows developers to easily create complex UIs composed of nested views. We put the C in MV*. Yes we went there.
• Stateless Server: No state for you.
• Event Based Client: Loose coupling is the way of the walk. Communication between all Lazo objects is event based. Lazo utilizes BackBone.Events.
• i18n, I10n: English is not the only language. Lazo makes internationalizing your application a breeze via asset strings.
• Assets: Asset strings can be defined both at the application and component level. The asset loading API is pluggable, so you are free to load your assets from any source your heart desires.
• Simplified application structure: Backbone and other libraries are great for providing minimal structure, but what about application structure? This is where Lazo shines. Lazo applications have a simple directory structure, and Lazo handles all the dirty details, such as dependency management and life cycles. This allows you to focus on building your application knowing that it will be maintainable until the end of time.
• 100% SEO compliant: Lazo does not break the web. Routes are mapped to fully qualified URIs, which makes it easier for crawlers to index your site. It also renders the first page load on the server, so crawlers can parse the information on your page and rank your page accordingly.
• Collection view support: UIs aren’t always simple. You need the ability to easily render a collection. Lazo has you covered with its collection view. It works just as you would expect, but it supports multiple collections. That's right a 1 to n collection with or without surrounding markup. Whoomp there it is.
• Code shared between client and server: Writing the same code twice is so last month. The majority of code runs both on the client and server including your application code, so you write once and let Lazo worry about the environment. Have server only or client only code? Just drop it in a directory named "server" or "client". Done.
• Rendering without the DOM: Lazo uses string concatenation to render a component tree. This means that the DOM is only touched once per rendering life cycle regardless of the number of branches, so it renders nested views quicker and the browser reflows less.