CODEWITHSUNDEEP
javascriptangularjsreactjsvue.js
Gary
Gary

Reputation: 273

Angular and Vue Templates and Bindings

I a new developer. I have been working to get up to speed. Part of that has made me review Angular, React, and Vue. Each of these seem to use something called "declarative binding" and "templating". I believe I understand what these are. However, I do not understand why I need them. My question is:

  1. Why should I care about declarative binding?
  2. Why should I care about templating?

They basically seem like two ways to generate HTML. For that reason, I feel like I'm missing something. Can someone help me understand this?

Thanks

Upvotes: 1

Views: 294

Answers (2)

miellaby
miellaby

Reputation: 106

HTML precedes Javascript. So now HTML is exposed to Javascript as a tree of objects that JS code can read and write to.

That's why the old way to give life to a web site (JQuery era) consists in running a layer of JS code on top of a preexisting HTML page. The JS program finds interactive parts of pages and attach code in response to user events. JS code also finds movable parts of the page so to complete or update them.

But when JS application are written this way, they are difficult to maintain and improve. As soon as you want to change things in HTML (moving a button from a page to another, turning a list into a table, adding another display of some numerical value, etc), the JS code in charge of powering the HTML gets outdated, often broken. Plus, once a page turns wrong, there is no easy way to track back which JS code is responsible of what's on screen.

If you think twice about it, you want to invert the relationship between JS and HTML when developing complex applications. That's the purpose of templating/binding middleware. They invert the relationship between JS and HTML so that JS Objects become now the basis layer on which you build the User Interface.

A framework like Angular or a library like Knockout, enriches HTML with directives so that now HTML page works like real programs running on top of Javascript. The Javascript layer only powers the application logic, and doesn't depend anymore on how the user interface is made. It won't break when you move a button, replace something by another, split a page in two, and so on.

Templating is the first step of this approach. It consists in putting directly names of JS variables into Html. The template engine will substitute these variables with their values when the template is executed.

But templating is not enough. You still have to manually code the execution of the template when any displayed variable has changed. This is the worst part a the programmer job, tracking every possible events that can change a page component and manually adding binding to these events so to update components.

A truely bidirectional data-binding middleware does much more than a template engine. It works like a template engine at first, but it also tracks all substituted variables/expressions and will update the HTML document autoMAGICally as soon as the values change. It can also "magically" apply changes in JS variables when the user edits form fields and the like.

It's exactly like when you write a number in a Excel spreadsheet and a formula nearby is automatically updated. An excel formula is a form of "declarative binding". You don't need to write codes to make the formula result being updated, Excel makes the tedious work for you.

The reason this new way of coding is a true progress is that in Real Life(tm), the View Layer of an evolving application changes 10 times more than its logic layer (thinks about your bank web site). So being able to revamp a page layout without breaking everything in your JS logic is a web developer bliss.

Upvotes: 1

AldoRomo88
AldoRomo88

Reputation: 2076

Data bindings and templates are the glue that join your html and your javascript.

If you don't use one of those frameworks you would need to code a lot of logic to keep in sync DOM and app state (javascript), for example update text on a input element, create a list (<ul> </ul>) that display data of an array, handle button's click...

Besides that, frameworks that you mentioned usually offers other features like routing, animations, resource handling.

If you are new developer you should read about MVVM pattern and probably start for a easier framework like knockout. Knockout's tutorial is quite simple and comprehensible

Upvotes: 0

Related Questions