Search code examples
javascripttemplate-engine

Is there a template engine that updates the DOM when data is changed?


All of the template engines I've tried so far (Handlebars, Underscore, Embedded) require you to input data and render the template to HTML. However, my data updates fairly frequently and this causes the page to flicker as the layout is rebuilt.

Is there a template engine that supports updating the DOM instead of recreating it every time?


Solution

  • React is a sort of a "view framework" that allows the DOM to re-render based on whatever data you give it.

    You can write components and when the state changes (that is, the data that belongs to the component), the component will re-render.

    That means essentially that the layout is a function of data.

    I would take a look at Getting Started (React). There are many tutorials available.

    Note that React only handles the "view" layer. You have to decide how you want your data flow to occur. As a starting point, I would look at Redux, which is starting to get popular.

    Is there a template engine that supports updating the DOM instead of recreating it every time?

    Under the hood, React doesn't always necessarily re-render the entire DOM. It holds a virtual representation of the DOM in memory (called the virtual DOM), takes a look at the data, the actual DOM, and the virtual DOM, and decides what actually needs to be re-rendered.