JSFoo 2014

JavaScript as the centerpiece of a complex web stack

Web Components - Fundamentals and Case Studies

Submitted by Bhargava Srinarasi (@srinarasi) on Monday, 30 June 2014

videocam_off

Technical level

Intermediate

Section

Full talk

Status

Submitted

Vote on this proposal

Login to vote

Total votes:  +4

Objective

Web Components, a set of new standards, is set to change the way we build the Web. You will walk away with a clear knowledge of why and how you need to use Web Components. The first part of the session will be on the fundamentals of Web Components and the latter will be on case studies which show some of the Web Component "Magic".

Description

We'll start with the current state of the web and the proposed solution. We'll then make a quick tour of the building blocks of the Web Components,

  • Shadow Dom
  • HTML Templates
  • Custom Elements
  • HTML Imports

each of which is a W3C standard.

We then move on to the case studies which show the power of Web Components and how quickly and elegantly we can reuse code.
Some of the scenarios include,

  1. Make a Polymer component talk to an X-Tag component.
  2. Show the same component working inside Ember, Angular and may be some other framework with minimal code change.
  3. Take a look at what other people are already building with Web Components.

In the end, we'll talk about when is it not a good idea to make something a Web Component.

Requirements

  1. Ablility to empathize with the pain of figuring out which div contains which div in a document and wondering how we ended up with a 20-level div hierarchy for a fairly simple application.
  2. Hope that things can change for the better.

Speaker bio

A member of Adobe Dreamweaver Development team, Bhargava has been working at Adobe for more than 6 years. His interests include web development, data analysis, data visualization and building tools to help others with the same. He has contributed to open source IDEs like Brackets. He likes talking about himself in third person.

Comments

Login with Twitter or Google to leave a comment