Javascript structure for pushstate "hijax"

Question

All our applications are php mvc and with a very simple behavioral layer js on top on the client side. We want to structure javascript more and stop asking for “snippets” to perform simple behaviors (like loading different jquery plugins all over the place). We do not use javascript MVC frameworks and look for the best solution for our new applications.

One of the most attractive solutions is to save the server side of the rendering for us, like Twitter . They call it "Hijax + server rendering." We prefer not to have a full-blown mvc structure in javascript, but these blog quotes are very attractive to us:

Under the contract, our components join one DOM node, listen for events through delegation, fire events in the DOM, and these events are transmitted to other components through the bubbling of DOM events. [...] Secondly, all of our components are defined using AMD.

We tried to create something of our own, but without a high-level javascript experience, we cannot go far in this. Something like jquery-pjax seems like a good solution for very simple cases.

We are looking for:

• User Interface / Data Segmentation for Weak XHR Connection with DOM
• An event-driven interface, so developers can connect listeners to all types of DOM objects.

Is there something like a javascript framework for this? As pushState gets more attention, I hope something will be available. Any ideas?

Answer 1

You can check History.js and Amplifyjs (and maybe microjs for some components to put together)

Answer 2

I will try to answer your question to the best of my ability. With that said, I will say that your question is very broad and rather ambiguous. You were unable to tell what exactly you are looking for in the JavaScript library. You mentioned many different topics that are all complex, and each of them exists for the specific purpose of the server in client development. Although it is possible that the realities of all these concepts exist in the wild, there is no single answer for solving all your problems.

I will start with your first point, "UI / Data Separation." This concept really deals with the separation of problems. You want your user interface to exist separately from your data. What you are really looking for here is your HTML to reflect the current state of your data model. You also want this to happen automatically for you. This is a very common workflow with the MVC design pattern. JavaScript has several options: Backbone.js , AngularJS , EmberJS , and the list goes on ...

In my personal experience using quite a few of these different frameworks, I would suggest Backbones for this flexible and lightweight character. At Backbone, we have the concept of "View", which can be linked directly to the data model. It also supports your desired pushSate concept through it. The mechanism of the routes.

The Event Driven User Interface part can be handled by any number of different JavaScript libraries. jQuery is probably the most popular library for attaching events to "all kinds of dom elements". Backbone.js also makes it easy to configure event delegation (via a bubble event) using the View object.

In short, if you want to add structure to your JavaScript ... it really depends on what you want. For simple things, a little manual jQuery will do. If you really want to use an application with a lot of MVC that has potential for growth, it could be an MVC framework like Backbone.