CODEWITHSUNDEEP
javascriptcsstemplatesclient-sideweb-component
user1025852
user1025852

Reputation: 2784

JavaScript templates vs web components

Newbie in web dev. I need to implement a sliding window with more data when the user presses on item within a graph. Already have this nice slidingview with css and all now trying to figure out how to populate data in that on each item press.

Saw javascript template and would like to ask would that be a good way to approach? Maybe I should implement web component for that sliding view? I'm not sure I understand the differences (besides css is encapsulated in the web component..)

Upvotes: 0

Views: 1005

Answers (1)

Stuart Bennett
Stuart Bennett

Reputation: 121

When it comes to choosing this sort of thing - it all comes down to size and complexity of the code you're working with. From the sounds of it, your app needs a simple mechanism for fetching some data and updating a bunch of DOM elements.

If you haven't got too many elements to update, you could do this with just an AJAX request and some DOM update code on each click, no library, no dependencies and simple.

If the UI you want to update is a bit more complex, try something like knockout.js. It's not completely hands off and it uses data attribute based data-binding so you don't have to store and request a template, it's right there, already in the markup.

Now, as for the differences:

Web Components provide a standardised way of encapsulating discrete functionality into re-usable chunks of code. This is done via forthcoming browser APIs like Shadow DOM, HTML imports etc. The idea is that a browser vendor would implement things like shadow DOM manipulation (in the same way each browser has it's own DOM implementation from a standard). It's important to note that whilst these APIs are in development, you would need to use a library such as Polymer or X-Tags in the meantime to get the best browser support)

On the otherhand, JavaScript templating (using a JS templating library) you are essentially buying into the libraries opinion of how to parse and render the template. You may also get more or less functionality depending on the library you pick. The one side of the scale you have something like:

  • React.js - updates the DOM using a difference engine and offers a Web Component-ish approach to declaring custom elements.

Then on the other side of the scale, you could use a setup like:

  • Hogan.js - functionality to take a mustache template, parse it, compile it, and give you the result as a string. In this case you have more control:

    • You have to decide how to load the mustache template into the app

    • You have to take the resulting template and update the DOM accordingly

That's not to say that you can't get clean, re-usable controls without using Web Components - you just need to be disciplined and maintain good practices when writing your JavaScript.

Hope this helps (sorry for the lack of links, my rep doesn't let me post more than 2 at the minute)

Stu

Upvotes: 3

Related Questions