7 ms·

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-sid

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.

paradite 10y ago
I think Universal Angular was designed to address that issue with server-side rendering: https://github.com/angular/universal https://github.com/angular/universal 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".
pomber 10y ago
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.
rk06 10y ago
that is pretty vague. can you elaborate more? preferably post an example of what you want and what is happenning.
bigmanwalter 10y ago
It's no longer cool on HN to use it, but jQuery-Pjax (https://github.com/defunkt/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.
- heavenlyhash 10y ago
  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!
  - bigmanwalter 10y ago
    https://github.com/MoOx/pjax https://github.com/MoOx/pjax is a version that might work. 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 :)
DougWebb 10y ago
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.
- niyazpk 10y ago
  >> don't want and can't use node.js on the server I don't understand, you want a javascript framework to do server-side rendering, but don't want to use node?
  - detaro 10y ago
    Sounds like he wants to the server-side rendering with whatever tech he is using now, and then have the client-side JS code take over.
  - DougWebb 10y ago
    No, I want to do server-side rendering using whatever I want, and have the js framework take over once it is clientside.
    - bigmanwalter 10y ago
      Please please please look at jQuery-Pjax. It does exactly this. If you have any questions about it, feel free to ask!
      - DougWebb 10y ago
count_zero 10y ago
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. Here's an example sketch using vue.js (data is in #game-data div): https://game-collector-staging.herokuapp.com/ https://game-collector-staging.herokuapp.com/
- bigmanwalter 10y ago
  Or, even better, I just inject the JSON data into a script tag with a var declaration, sort of like: <script> var models = {{=models}}; </script> And just like that, I have my data accessible as a global variable.
caconym_ 10y ago
Have you looked at intercooler (http://intercoolerjs.org 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.
gbrits 10y ago
Wrote a pretty popular SO answer once that covers this [0]. The gist still stands. http://stackoverflow.com/questions/7370056/accessibility-and-all-these-javascript-frameworks/7371629#7371629 http://stackoverflow.com/questions/7370056/accessibility-and...
Can_Not 10y ago
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.

paradite 10y ago

I think Universal Angular was designed to address that issue with server-side rendering: https://github.com/angular/universal https://github.com/angular/universal 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".

pomber 10y ago

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.

rk06 10y ago

that is pretty vague. can you elaborate more? preferably post an example of what you want and what is happenning.

bigmanwalter 10y ago

It's no longer cool on HN to use it, but jQuery-Pjax (https://github.com/defunkt/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.

heavenlyhash 10y ago
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!
- bigmanwalter 10y ago
  https://github.com/MoOx/pjax https://github.com/MoOx/pjax is a version that might work. 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 :)

DougWebb 10y ago

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.

niyazpk 10y ago
>> don't want and can't use node.js on the server I don't understand, you want a javascript framework to do server-side rendering, but don't want to use node?
- detaro 10y ago
  Sounds like he wants to the server-side rendering with whatever tech he is using now, and then have the client-side JS code take over.
- DougWebb 10y ago
  No, I want to do server-side rendering using whatever I want, and have the js framework take over once it is clientside.
  - bigmanwalter 10y ago
    Please please please look at jQuery-Pjax. It does exactly this. If you have any questions about it, feel free to ask!
    - DougWebb 10y ago

count_zero 10y ago

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. Here's an example sketch using vue.js (data is in #game-data div): https://game-collector-staging.herokuapp.com/ https://game-collector-staging.herokuapp.com/

bigmanwalter 10y ago
Or, even better, I just inject the JSON data into a script tag with a var declaration, sort of like: <script> var models = {{=models}}; </script> And just like that, I have my data accessible as a global variable.

caconym_ 10y ago

Have you looked at intercooler (http://intercoolerjs.org 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.

gbrits 10y ago

Wrote a pretty popular SO answer once that covers this [0]. The gist still stands. http://stackoverflow.com/questions/7370056/accessibility-and-all-these-javascript-frameworks/7371629#7371629 http://stackoverflow.com/questions/7370056/accessibility-and...

Can_Not 10y ago

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.