When I first began delving into reactive client interface frameworks. This was one of my biggest gripes. It looks, and reads like a giant confusing mess. I finally came across <a href="http:&#x2F;&#x2F;vuejs.org&#x2F;" rel="nofollow">http:&#x2F;&#x2F;vuejs.org&#x2F;</a> and I haven&#x27;t looked back. Simple binding syntax to html elements, and powerful enough for most projects without being heavyweight.<p>I mean it doesn&#x27;t get any more straightforward than this.<p>&lt;div id=&quot;app&quot;&gt;
  &lt;p&gt;{{ message }}&lt;&#x2F;p&gt;
  &lt;input v-model=&quot;message&quot;&gt;
&lt;&#x2F;div&gt;<p>new Vue({
  el: &#x27;#app&#x27;,
  data: {
    message: &#x27;Hello Vue.js!&#x27;
  }
})