Giter VIP home page Giter VIP logo

lazo's Introduction

lazojs


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.

Have a question? Want to keep up-to-date on changes and releases? Post questions to the LazoJS Google Group and follow @lazojs on Twitter.

Looking for documentation? Check out our wiki.

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.

Learn More

Getting Started

Lazo is a node module. Installing and creating a new Lazo application is as easy as uno, dos, tres.

Installation and Application Creation

To install Lazo execute the following command:

npm install -g --production lazo

Next clone Lazo TodoMVC example:

git clone [email protected]:lazojs/lazo-todomvc.git

Install dependencies (from local lazo-todomvc repo):

npm install

Finally start the new application (from local lazo-todomvc repo):

npm start

You are done.

Open http://localhost:8080 in a browser to verify that the application is running.

lazo's People

Contributors

abadri avatar adam-26 avatar jstrimpel avatar michaeljacobdavis avatar pdehaan avatar pjvds avatar pknepper avatar ptomasroos avatar rodfernandez avatar sberryman avatar subramgr avatar xtal0 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lazo's Issues

move dependency loading from controller to depedency parent

The controller is currently responsible for loading dependencies all the way down the chain. This makes it difficult to load child view dependencies and opens collection views up to errors on the client side for unresolved views and templates.

incorrect HTTP code for errors

When an error, such as a 404, occurs lazo replies using hapi's reply.view to serve an error view/template. This changes the HTTP code to 200. This behavior is incorrect.

asynchronous rendering life cycle

Make rendering life cycle asynchronous. This would allow for the usage asynchronous template solutions and make it easier to handle the rendering of child and item views (pulling in dependencies at run time).

Allow wiring socket.io into LAZO js

I've been trying to add socket.io listener to lazo server. There are a few issues I encountered:

  1. It seems that you need to have an access to HAPI pack in order to install socket.io plugin. The only way I found to do that was via LAZO._servers.primary, which doesn't feel good.
  2. Trying to require socket.io in Lazo app server-side fails for both LAZO.require and usual require. Is there something I'm doing wrong?

Remove, Minimize Lazo Dependencies

We are relying on and loading modules that should be left up to the application developer's discretion. This issue consolidates this effort.

  • Remove Handlebars #165
  • Remove jQuery #166
  • Remove Underscore #167
  • Custom Backbone Build #168
  • Remove Async #169

expose hapi in lazo

Expose Hapi making it easier for developers to leverage it within Lazo. Ideally this should make it easier for Lazo to be multiple purpose, e.g., serve end points.

CSS Loading Error

When CSS link load results in a 404 it causes FF to hang because there is not an error back in the doc.updateCss method.

replace underscore with lodash

Originally started out with underscore, but lodash has nice features such as deep cloning. It would be nice to have a version for the server, client, and alternates for devices that do not need legacy support.

Custom Backbone Build

If underscore is removed or we do a custom lodash build then we need to create a custom amd build of backbone.

better error template handling

Error templates are very limited. No styling can be applied. Investigate making error templates more robust. One implementation possibility is to have a default error component that would render the corresponding view for an error code, e.g., 500 would render 500.hbs applying all application CSS and JS plus any error component styling and JS.

do not remove body children when navigating

When we navigate between routes that do not share the same layout or do not have a layout we are clear out the body. We should only remove the root controller's element and append the new root controller's element.

The reason being is that an application level widget may have appended markup to the body. This is commonly done for widgets that need to position themselves absolutely and have the highest z-index, e.g., a modal dialog.

cache false property for models and collections

In some cases it is necessary to fetch fresh data for a model between page navigations. It would be nice to able to set a property on a model or collection that would allow for this to happen on case by case basis with the default being to cache.

LazoModel.extend({
    cache: false
});

custom app/bundle.js loaded twice

When the module 'app/bundle' is part of a combo handled response the module still loads because lazo is referencing it before the combo handled response has been processed.

cross site ajax call

is it possible to make a cross site ajax call,

i have one server running on port 9000 which access a rest web service running on port 9080. when i call the service using jquery ajax with POST. while doing that my POST request becomes GET and I get a Method Not Allowed message in Chrome Console.

I have set jsonp and have set the response header as Access-Control-Allow-Origin with '*'

Comments and suggestions are welcome.

Thanks
Naren

attempt to set Model ids in collection

When a model is in a collection and a CRUD operation is called on a model the Lazo base model should attempt to resolve a model id to an id parameter if one does not exist. it should also respect the idAttribute functionality in Backbone passing that attribute and its value as an id to the parameters if they do not exist already. An additional feature is to allow parameters to optionally be a function that returns a hash. This will ensure that all parameters make it to the model syncher.

improve view unit test

today we need to mock a bunch of dependencies in order to be able to instantiate and render a view for testing purposes

bundler utility

Create application bundling utility for combo handling JS and CSS. Ideally this should be plug-able into other tools like Grunt and Gulp.

Added JS is not being loaded into page

When I tried to load additional scripts using the app.json file OR in the LazoApp.extend({ js: [] }) it wouldn't take. I tried to access globals set in it and had no luck.

upgrade to hapi 8

where is this in the backlog? It looks like you are presently pegged to 6.7.1. I'm starting to develop a new api to replace our existing restify based api with hapi v8. It would be nice to be using v8.x.x across the board as things have changed quite a bit in v8.

createModel (collection) failes to pass on options to model instances

use createModel to create a collection on the fly.

Pass the options { persistent: false; }. When the collection creates the actual model within the collection the option is no longer preserved as is it expected to do.

Tried to find a fix for it but if you can take a look at it would be great. Currently blocking us.

Heads up for a great work with Lazo!

Remove Underscore

Investigate removing underscore or replacing with lodash. Potentially have a custom build under a different module id that only contains the methods lazo relies on. If we do that then we need to ensure that Backbone contains all the expected methods.

Verify nested component stuctures

Verify all use cases of nested component directory stuctures.
ie.
components
|-- c1
|--subcomp1a
|--subcomp1aa
|--subcomp1ab
|--subcomp1b
|-- c2

bypass tunnel

Would it be possible to bypass the tunnel in the case that an application would like to leverage CORS?

Remove Handlebars from Lazo

People keep running into application level conflicts when versions don't match for precompiled templates among other issues. I would prefer to just remove Handlebars from Lazo since it doesn't really need it. We can just use _.template to render the initial page and have it be the default template engine. Removing the Handlebars dependency will reduce the initial page weight and provide more flexibility especially when people are trying to port existing code.

document testing

it looks like @rodfernandez is making some progress documenting in the development branch. his documentation has helped me quite a bit as it his examples seem easier to consume for me than the wiki (thanks @rodfernandez)

I can't seem to find any documentation on testing a lazo based app. what are you guys using internally? i'm assuming i should be looking at documentation on how to test a backbone based app right?

application generator

Create a generator to make it easier to spin up applications. Example commands:

create model model_name --syncher
create component component_name --controller --view
create application application_name

ability to specify ctl.navigate target element

If a developer has a complex interface that is displayed temporarily, e.g., a dialog that contain a rich UI they should have the ability to specify the target element for ctl.navigate. The caveat being that if a target element is supplied that it is not part of the rendering context, i.e., it is not maintained when a parent view calls render. The developer should get a handle back to the create ctl, so that they can destroy it and its view.

Remove jQuery

Remove jQuery or a custom build under a different module id comprised of events and ajax only.

TypeError while loading item view of collection view on the client.

Hi, there is a TypeError : string is not a function on the client side within a collection view (loaded on a client) when that view reacts to changes in the underlying collection.

OSX 10.9.4 Chrome Version 37.0.2062.120

To reproduce the issue:

  1. Check out lazojs-viewcollection-issue.
  2. Go to localhost (page refresh)
  3. Click more a couple of times - items will be added to the collection.
  4. Go to Hello and then back to News. Try clicking More now - items will not be added to the solution.

It looks like uncompiled template is somehow used in this case.

There are a few screenshots below.

I'm sorry I couldn't be more helpful, I just discovered node.js and Javascript last week.

screenshot 2014-09-16 20 35 20
screenshot 2014-09-16 20 05 26

child views

Implement child views that are part of the rendering life cycle receiving the calling controller's context. Possible interface would be child view hash that maps to data attributes in the parent view's template.

LazoView.extend({

    children: {
        viewPropName: {
            view: 'view_file_name',
            target: 'data_attr_val'
        }     
    }

});

lazo object mocking for testing

Better object mocking support for applications that use lazo, e.g., automatic generation of context object, factories for creating instances, etc. Open source mocks.

Throw an error if Collection View doesn't have empty view

Currently, if the a view collection does not have an empty view assigned AND collection is empty, lazo will just silently timeout on server-side rendering, throwing Uncaught error: Invalid nested use of protect.run() from HAPI internals.

AFAIK, that is caused by the fact that controller._getEmptyViewInstance does not find anything and callbacks don't get fired.

May be lazo could guard against such common mistake by newbies by throwing an error or at least printing a warning?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.