I want a javascript framework that allows me to update a page incrementally, but also always works correctly and contains full content from the first server-side page load.
Are there any options for this? Are there even keywords I can search for that discuss this?
Sure, this files under "anything is possible", but honestly, I'd like a javascript framework that doesn't actively fight me also having static content. Any of these libraries that put their document derivation logic front and center are ipso facto refusing to compose well with a simple static first page load that renders fast and then gains progressive enhancement from the JS.
It's no longer cool on HN to use it, but jQuery-Pjax (https://github.com/defunkt/jquery-pjax) solved this problem years ago in a minimally intrusive way. I build all my projects with it. It's the only SPA framework that allows for full server side rendering after minimal configuration.
It also manages to do this without introducing needless abstractions into your code. Even more magical: it works with any server side language or framework you desire!
The trick is that all rendering gets done server side and the SPA framework is just a dumb little script that replaces old DOM nodes with the newly rendered bits as they get sent down the pipe. You only bring the logic client side as needed, but defer work to the server 99% of the time. So no need to reproduce your rendering logic in 2 places.
Someone on HN has been hyping up his own variation on the technique and calls his framework IntercoolerJS but I haven't felt the need to move away from jQuery-Pjax.
This looks really cool! And simple. I am looking at it closely.
I'm wondering if it can also support merging elements into an existing document:
for example, I have a table of elements, and suppose that I have an 'id' attribute for each row which correctly identifies which elements I would like to replace when new content is fetched. If some elements are replaced, of course I must replace them; but if neighboring rows are unaffected, if the users has a selection in them, their cursor should not move. So, replacing the entire content div is not ideal: the user's cursor will be discarded if it's anywhere in the replaced area.
This seems like something that almost a for-loop around this jquery-pjax stuff would handle, but of course if someone else has written it already, I want to join their project rather than reinvent it!
It's a reimplementation of the library without jquery and with a few extra features.
Instead of working on a single container where all the ajaxing happens, you provide it a list of IDs, and then it extracts the nodes with those IDs from the response and replaces them throughout the document. If I understood you, that's the behaviour you're looking for.
It also has a few extra hooks for animating content in and out.
It's not as widely used as the defunkt version though, and I remember needing to stop using it because of a bug where it wasn't scrolling to in-page anchors properly. But hopefully it would work for you.
Personally, I might just use the defunkt version and write a before and after hook to refocus the appropriate input. When it comes to reimplementing browser features in JavaScript, there are lots of edge cases so it's nice to use widely adopted libraries.
jQuery-Pjax is used by GitHub so you know it's well tested :)
I'd really like to see this too. Most of what I've seen is something like "use node.js on the server and make use of the framework's server-side rendering capabilities". For me that's a problem, because I don't want and can't use node.js on the server.
These javascript frameworks ultimately produce, at the end of the first page load, a DOM structure with event hooks attached. The DOM structure could be 100% created using html markup from the server, so if the framework provided a way to just hook up the events and then manage the DOM from that point on, you'd get the best of both worlds. It's possible to do this with native javascript jQuery by putting either classes or data attributes in the markup to indicate where the hooks go and then running an init method to find them. Bootstrap components work this way, for example. One of the earlier SPA frameworks, Knockout, worked this way too.
I wonder if you could get a build tool to dig in to the redux default state and compile the thing to index.html. Then you could use whatever you want for the backend.
That's basically the pattern my company is already using, implementing using our own plugin. We render the full page server-side (using ASP.Net MVC, which is hooked into our server-side Enterprise Application Framework), and then we hook up javascript handlers to manage client-side events. Those handlers can make AJAX requests for content updates, which we deliver either as pure data or server-side rendered html (which are rendered using the same partial templates that the initial page used.)
Depending on the page, we can go anywhere from old-school full-page-refresh to a complete single-page-app design. Mostly we do Enterprise back-office interfaces and customer web portals, both of which tend to have a lot of data grids. So a very common feature of our applications is a data grid that supports paging-in-place, along with server-side filtering and sorting of large datasets. So we'll do that SPA-like, even if the overall site is more of an old-school design where each link loads a new page.
Our plugin does more than just fetch a url; the client side and server side are designed to work together to allow standard options to be passed up to the server along with the request, standardized error handling and content in the response, and standardized ways of handling the response when it gets back client-side.
It hasn't received much attention from the community apart from the occasional keynote presentation and it is not linked anywhere on the official documentation for Angular 2. However, the description now says "Current Status: Merging Universal into Angular core".
I've been trying to find a solution for this problem. Basically, most of these suggestions here are "rewrite everything in NodeJS" (ignoring the requirement not to) or don't actually come close to meeting your requirements. Great news, I probably won't do better, but I'll post some things I haven't seen yet:
- Ruby - Pakyow framework - I think it uses ring.js and/or vDOM
- Elixir - Texas - might be an experiment, not sure
- Scala - lyft framework
- NodeJS - anything
- anything else - You can use react/vuejs+nodejs as a "templates proxy" and defer your real backend to your language of choice. You get the full whatever of nodejs, plus you can simplify your back-end by only using JSON.
Have you looked at intercooler (http://intercoolerjs.org)? I do not typically work on front end stuff and I know very little about the ecosystem but I recently used intercooler to build a pretty simple site with some AJAX stuff going on and it worked really well for me. At least the way I did it, it fits your criteria since my pages are fully rendered by the server (django in my case) for the initial request.
It seems orders of magnitude simpler than something like Angular and I assume it's correspondingly less capable, but depending on your use case it seems like it might be a good fit.
edit: another guy in here suggested something called "jQuery-Pjax" which intercooler is possibly "inspired by" and very similar to, and if that's true then I can recommend jQuery-Pjax as well.
I'm experimenting with a hybrid approach, where the server injects a JSON string into a hidden div's data attribute, containing all the data the front end would have traditionally received through an ajax call on initialization.
It's no ideal, as the initial DOM render isn't fully populated, but it's much faster than waiting for another round trip to the server to populate the view.
If you are talking about an app shell and lazy-loading page fragments when you need them, check the PRPL pattern. Polymer provides an easy way to do it.
Are there any options for this? Are there even keywords I can search for that discuss this?
Sure, this files under "anything is possible", but honestly, I'd like a javascript framework that doesn't actively fight me also having static content. Any of these libraries that put their document derivation logic front and center are ipso facto refusing to compose well with a simple static first page load that renders fast and then gains progressive enhancement from the JS.