57720

Updating server-side rendering client-side

I have a server-side templating engine, Jade, which I use to render a layout. When the client receives the layout for the first time, there will only be small subsequent changes in the contents of the layout that may need updating, not the layout itself.

Is there a way to "rerender" client-side by only changing what needs to be updating, and at the same time using the power of Jade.

Answer1:

You can do it via socket.io, I am currently developing the program in node.js to do it and have a working prototype - https://github.com/parj/tableUpdates/tree/tableUpdate

The view is rendered server side using jade. The components that need changing, I send a json from the server side, parse it on the client side and only update the required component using JavaScript.

In server.js, you can see the json in variable currencies I put together and then emit. On the client it is received and handled in public/javascript/buildtable.js

I have uploaded the latest code - server.js runs randomChanges() every second and sends random JSON data to the clients. The clients upon receiving rebuild a table. Hope this is what you are looking for.

Answer2:

There are some workarounds for using jade on the client-side. You might be able to take advantage of these two modules:

    <li>browserify</li> <li>jadeify</li> </ul>

    This allows you to do something like this client-side:

    var $ = require('jquery'); var jadeify = require('jadeify'); var msg = jadeify('msg.jade', { title : 'foo', body : 'bar baz quux' }).appendTo($('#messages'));

    Answer3:

    I have node.js, c#, PHP and Python teams on staff so I have to keep generalized solutions in mind lot of times so I try to think that way instead of being so specific to node.js itself. Keep that in mind before doinking me if you don't like this.

    You can do an end around by separating your data and your UI using JavaScript. List the script source on your page and give it a random querystring value but its actually going to a server-side code that is getting your data.

    <script src="/mypagedata?ran=[put random here to avoid caching]"></script> <script src="/displaypagedata.js"></script>

    Have the script source have a value inside it such as:

    window.pageData = { [whatever] };

    Then have the "/displaypagedata.js" do the replacing of the number values on your page. This way you can keep your view static. You could also code "/displaypagedata.js" to use long polling after window load to the same "/mypagedata" by continuously requesting to load the script file. I recommend using jQuery.getScript as it has an event handler to know when to attempt another load.

Recommend

  • VBA - web scraping can not find correct GET request
  • Mixed currency products in Magento
  • Firebase database query from multiple childs
  • Paypal Parallel Payment with Multiple Currencies
  • jQuery & CSS - Cut text by height, no truncate
  • Is storing an OAuth token in cookies bad practise?
  • getting started with http tunneling
  • Standard way for writing a debug mode in C++
  • How to send None with Signals across threads?
  • How can I encode a filename according to RFC 2231?
  • wxWidgets: Detecting click event on custom controls
  • How to limit cursor movement in WPF based app?
  • Socket io in node app on google app engine
  • Underlying type for Tuple in Swift
  • Create a multiple screen android application
  • select function not working in 3.5.4 version of d3.js
  • Spring integration inbound-gateway Fire an event when queue is empty
  • Pass Dictionary to Javascript array
  • How do I include a SWC in an AS2 Flash project?
  • AndEngine Applying Transparancy to AndEngine View
  • Button text different than value submitted in query string
  • Odoo 10 - Overriding unlink method
  • Zurb Foundation _global.scss meta styles for js?
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • jQuery ready not fired after rails link_to is clicked
  • Typescript - Unable to get 'import' statement to function
  • Change Inet root folder for iis 7
  • Java: can you cast Class into a specific interface?
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Change JButton Shape while respecting Look And Feel
  • HTML download movie download link
  • AES padding and writing the ciphertext to a disk file
  • How to extract text from Word files using C#?
  • Weird JavaScript statement, what does it mean?
  • How do you troubleshoot character encoding problems?
  • How to format a variable of double type
  • Proper way to use connect-multiparty with express.js?
  • How to set the response of a form post action to a iframe source?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • How to Embed XSL into XML