Web Components: A Perspective by the Chicago Javascript Meetup

Justin McNally explains the value of web components at the July meetup for the Chicago JavaScript Meetup group. (Picture: Chicago JavaScript Meetup)

The Chicago Javascript Meetup group gathered once again for a rousing discussion on web components.  Web components are essentially the elements in a a web page or document that interacts with the web browser. These elements indicate to the browser what should appear in the browser window.

Justin McNally prepared a presentation called Web Components: The Future is Now, one of two for the July meetup for The Chicago Javascript Meetup group.  The presentation offered some historical overview of client side development  as well as concepts that Justin had learned through his own experience as a web developer.

The function of tag elements are key for understanding the history of client side development. They were first used for annoying text appearances  - yes, those texts that would flash onscreen - and tagging images that appear in the browser.  Blinking tags were a popular design choice back in 1994, but that was enhanced with the advent of Javascript a year later. Javascript code used tag elements effectively without requiring calls to the server. It quickly became the programming choice for scrolling text and popup windows.

Another historical development was the spec for the Casscading Style Sheet (CSS). The spec was developed and updated by the W3C.  According to Justin, the CSS spec usually lagged behind the capability of mainstream browsers (IE, Firefox, Safari, and later Chrome). The browsers would come with advanced or different specs that developers would have to work towards in their website design, which made the W3C  specs ineffective in some instances.  A 1.0 Spec in 1996 meant to make the internet more prettier, but browsers came with features that were later incorporated into the 2.0 Spec.

The recent release of Google Chrome 36 makes a significant departure from the misconnect between browser capability and CSS spec. It represents the first time a browser supported all key components for a web component spec. The release also signals that browser updates will be less of an influence to build apps and sites with web components in mind.

Meetup members listened as Justin provided code examples of web components

Justin elaborated on the key building blocks of web components. These are:

1. HTML import - can import fragments into a page, a one line tag, cleans up the DOM and componentizes the page
2. Shadow DOM - a private DOM within your component
3. Custom Elements - which eliminates the need for query bindings
4. A Template element - which can be repeated used in code development

Justin explained what principles are essential in planning and developing a web component.

• Functionality - is it worth doing?
• Reusability - ability to be used repeated within a code
• Interoperability - can external J/S interact with the component?
• Configurability - what components should be the most useful for people
• Programability / API - making the API part of an ecosystem and asking yourself "How could this be useful for other people?"
• Composability

The historic developments of element tags have lead to the creation of Select tags. Select tags have been introduced as an alternate tag element to  divs.  Divs are meant to be containers of an object, whereas selects are sophisticated containers that permit more detailed properties.  The end result is an increase capacity for usages with object oriented languages and easier functionality when code is planned and created.

Justin wrapped up noting a few great tools that can be used with respect to Javascript.  The frameworks that are likely to drive web component  development are Polymer (Google) and X-Tags (Mozilla).  Both have received support and interest from the developer community.

You can check out Justin’s presentation via this Dropbox link. The presentation includes more detail on web components including code examples.

https://www.dropbox.com/s/3bxh3iz348o2a92/JS%20Chi.pdf