Components now and in the future

This is what makes AngularJS particularly attractive to this author. The W3C Web Component specifications when fully implemented by the major browsers will most certainly cause a major paradigm shift in the way web page construction is viewed.

Building websites and web apps will no longer be seen as a monolithic engineering endeavor. Creating a web app and adding functionality, will become more of a process of adding and extending off-the-shelf UI components represented as HTML markup.

The Web Component specs describe how we will be able to encapsulate and scope JavaScript, CSS, with an HTML fragment and have it load, attach/detach and activate/deactivate at any point in the page lifecycle. Also, when Object.observe() is made available as the major browsers implement the next version of ECMA Script, model driven views (MDV) will become a basic part of any web page functionality.

<!-- import html directly into a page -->
<link rel="import" href="include.html">

<!-- the new template tag -->
<template id="commentTemplate">
   <!-- innert DOM -->
   <style> /* scoped css rules */ </style>
   <div></div>
</template>

<!-- extend existing or define new elements -->
<element extends="button" name="big-button">
    <script>
        // custom element script API
    </script>
</element>        

<script>
    // create a "light weight" iframe
    var s = element.createShadowRoot();
    var t = document.querySelector('#commentTemplate');
    r.appendChild(t.content.cloneNode(true));
    // all object will have observe() methods to facilitate 
    // model driven views
    Object.observe(callback);
</script>

However, in the snail’s pace of web standards development, full Web Component and MDV support may still be a ways off, but AngularJS directives along with AngularJS data binding (the VM of MVVM) allow us to emulate this type of component encapsulation and functionality now.

What’s even better is that the AngularJS team will actively evolve the framework toward full Web Component and MDV compatibility and usage. UI component code written in AngularJS will likely be quite a bit more forward compatible with evolving web standards than components created using Extjs or jQuery UI. This translates to a longer shelf life and easier upgrade path for the code we write today. What UI developer is ok with their code becoming obsolete after a year or two?

https://leanpub.com/web-component-development-with-angularjs/read

Leave a Reply