Rendering Riot.js tags in Twig using Node.js
This Proof of Concept (POC) implementation of a Twig function to Render Riot.js components on the server side using a Yandex Maps Web Component I created before. It uses a bare bones PHP implementation with Twig, Symfony Process library and Node.js (for Riot.js).
tl;dr: Read the source on Github: https://github.com/janit/twigriot
Riot.js and Server Side Rendering
Riot.js allows developers to build web components with friendly syntax. This encapsulates all resources to a single .tag file:
- HTML Markup
- Scoped CSS
This means the browser will receive valid markup and program code directly, without first needing to compile from intermediary formats. Similar to how preprocessing SASS to CSS on the server is superior to sending SASS to the browser and then rendering it to CSS on the client side. Native formats are native formats...
Read more about Riot.js and how it compares to other similar tools: Riot vs React & Polymer
Show me the code
The implementation launches new Node processes on each page load, and security, etc. have not been considered. I simply wanted to test if the concept is feasible at all. This implementation can be extended in the future to work with eZ Platform, Bolt, Drupal 8 or other CMSes using the Twig templating engine.
The target is to render Riot.js tags directly using Twig syntax in your templates. This is accomplished by adding a Twig Function:
This then maps to a class that extends the Twig_Extension class, who also sets the "is_safe" flag so rendered HTML output is not escaped by Twig:
Once these are available, our Twig templates can use the Twig function with parameters in our templates:
The end result is that our Twig calls render the Riot.js initial markup and script format right in the inital HTML markup:
The full code of the application, along with installation instructions is available on Github: https://github.com/janit/twigriot
Why bridge Node.js rendering and Twig?
This is just an initial test done in a couple of hours, and I can already see plenty of improvement areas such as running Node as a rendering daemon, improved caching, better state management (the one in place is a kludge).
Or maybe we'll just send the initial JSON embedded to the HTML for a better solution. Who knows.