Addy Osmani did the opening keynote for LXJS – Componentize the Web.

It gave an overview of Web Components. Web components allow us to be able to declare custom HTML elements. It is a standard that is being developed by browser vendors so, it will be available at some point in most modern browsers.

Addy also gave an overview of the work being done with Polymer a framework that allows us to build web apps using the features provided by web components. The cool thing is that with Polymer we can have access to these features even in browsers that don’t support web components.

I’m looking forward to play with Polymer in the following weeks.

I left some of the notes I took during the talk below so I can come back to them later.

web components are providing is a way to solve problems better – it is
like an HTML renaissance

Elements are the building blocks of the web (they don’t require much
things they can be enabled without JS). Elements are configurable (we
give them a set of attributes and they behave differently). Elements
are composable. Elements are programmable.

Good elements aren’t dated and that is why we are still using them
today.

Writing code for browsers is easy. good developers write code that
other developers can understand.

core of web components: templates, custom elements, shadow DOM, HTML
import.

web components are an encapsulation mechanism and help us to formalize
better some existing patterns

we can use web components to have customs tags for gifs, vide-cameras,
etc. we just import the html and then pass it values and then it
works.

webcomponents.org has great resources on
the topic of web components.

web components for google’s services:
github.com/googlewebcomponents

you can use polymer in order to have custom web components in other
browsers. it comes with polyfills. it has different layers.

you can do a lot of things with polymer. there are visual elements,
there are non-visual elements, you can even build layouts (aligning
things, vertical/horizontal( just using a declarative syntax without
using css. you can even do media queries and art direction with it.

we can create elements declaratively. polymer-element is the tag. its
styles do not scope outside of the element. polymer also creates some
shadow DOM for the element.

we can also use data-binding. it uses handlebars syntax.

the key thing here is doing stuff with a declarative syntax.

more about material design on google.com/design

more about the project on polymer.project.org