21 : The X-Tag Project

Daniel Buchner (@csuwildcat), Product Manager at Target & former Mozillian, talks with The Web Platform Podcast on x-tag, the Custom Elements library competitor to Polymer that he created alongside former Mozillian & Kraken Developer, Arron Schaar (@pennyfx). X-tag is a interesting way to work with web components that takes a totally imperative approach to creating Web Components as opposed to the declarative way of building with Polymer. Some features include legacy browser support, optional mixins to share across components, & functional pseudos to assist in delegation.

 

Daniel has worked on the W3C specs for Web Components and is now updating x-tag to meet the demands of developers to have more flexibility with Shadow DOM, Templates, and HTML Imports. Daniel is very active on github and would love to have more contributors help build the future of the x-tag projects as well as all projects that help make the web better.

Resources

 

Direct download: episode-21_the-xtag-project.mp3
Category:web-components -- posted at: 2:59pm EDT
Comments[0]

20: Mozilla Brick, ‘UIKit’ for The Web

Matt Claypotch (@potch), Mozilla Apps Engineer & Lead on Mozilla Brick Project and Soledad Penades(@supersole), GIF Hacktivist & Mozilla Apps Engineer, join us for Episode 20, “Mozilla Brick, ‘UIKit’ for The Web”, where we talk about building UI focused Web Components for the Mobile First Web Development.

 

Mozilla Brick is a set of ‘Mobile First’ focused Web Components built as close to the specs as possible. It is not a library built on top of web components but a collection of elements with as little abstraction as possible. Brick's goal has been to make building the interface of web applications easier. UI is not as easy for many developers to build from scratch and it can be difficult to get performant, usable, and attractive widgets.

 

“Just as native platforms have UI toolkits, Brick aims to provide a 'UIKit for the Web' using the latest standards to make authoring webapp UI easier than ever before.”

 

The Mozilla Brick Team

Resources

Firefox OS Marketplace example app - https://marketplace.firefox.com/app/firesea-irc?src=search

Direct download: episode-20-mozilla-brick-uikit-for-the-web.mp3
Category:web-components -- posted at: 9:40am EDT
Comments[1]

14: Web Components Interop and Polymer

Today, Web Components have emerged from cutting edge technologies to technologies we can implement in our small scale production. It won’t be long before we are building large scale applications with Custom Elements, HTML Imports, Template Tags, and the infamous Shadow DOM. In embracing this type of developer environment, with it’s flexibility and compositional nature, consider interoperabilty as a core concept.

 

If you need a custom element for a card layout, as an example, you should be able to use any Web Component out there in the ecosystem regardless of which library or toolchain it comes from. If the component provides the desired functionality and styling you would require it should work seamlessly in your application. Furthermore, toolsets should not limit the the extending and composition of these custom elements. In practice, this may or may not always be the case and library & toolchain creators will need to be aware of these concerns.

 

Rob Dodson (@rob_dodson), Developer Advocate on the Google Chrome team, talks about his thoughts on the subject. Rob is helping to educate developers, not just about Google’s Polymer Library built on top of Web Components, but across the entire Web Components community.

 

Rob goes through many of the changes made to Polymer 0.4.2, including accessibility and performance that help in making applications more integrated and how Google is working to share what the Blink Team has learned from implementing Web Components in Chrome with other browser vendors and developers.

 

Working closely with Mozilla developers on his SFHTML 5 Meetup talk on Web Components Mashups, Rob was able to collaborate and share ideas so that Web Components could alleviate many of the concerns we had when migrating from one JavaScript library to another. It is painful for developers to have to remake components every time they switch libraries or frameworks. Web Components aims to make that a thing of the past and Rob has done much more on this topic since that talk. Have a listen and hear what he has to say.

Resources

Rob’s Blog - http://robdodson.me/

I/O Presentation - http://webcomponents.org/presentations/unlock-the-next-era-of-ui-development-with-polymer-at-io/

Accessible Web Components Part 1 -https://www.polymer-project.org/articles/accessible-web-components.html

SFHTML Mashup Video -https://www.youtube.com/watch?v=75EuHl6CSTo

The Web Platform Status for IE - https://status.modern.ie/

IE Beta Channel - http://www.microsoft.com/en-us/download/details.aspx?id=43360

Polytechnic Events - http://itshackademic.com/

Polycast Playlist - https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN

Custom Elements on GitHub - https://twitter.com/polymer/status/464103568392200193

IE Platform Voting -https://wpdev.uservoice.com/forums/257854-internet-explorer-platform

customelements.io - http://customelements.io/

Webcomponents.org -http://webcomponents.org/

Bosonic Shadow DOM Issue (#4) - https://github.com/bosonic/bosonic/issues/4

The Bower Package Manager - http://bower.io/

Divshot - http://divshot.io

Divshot Blog - https://divshot.com/blog/

BuiltWithPolymer - http://builtwithpolymer.org/

Divshot’s Web Component Playground - https://ele.io/

Angular 2 Web Components Data Binding Document - https://docs.google.com/document/d/1kpuR512G1b0D8egl9245OHaG0cFh0ST0ekhD_g8sxtI/edit?hl=en&forcehl=1&pli=1#heading=h.xgjl2srtytjt

ReadTheSource - http://hangouts.readthesource.io/hangouts/divshot-superstatic/

RailsCasts -http://railscasts.com/

PhantomJS -https://github.com/ariya/phantomjs/wiki/PhantomJS-2

saucelabs -https://saucelabs.com/

People

Alex Russel -https://twitter.com/slightlylate

Alice Boxhall -https://twitter.com/sundress

Raphael Rugeron - https://twitter.com/goldoraf

Jonathon Sampson  -https://twitter.com/jonathansampson

Arron Schaar - https://github.com/pennyfx

Michael Bleigh - https://twitter.com/mbleigh

Scott Corgan - https://twitter.com/scottcorgan

Projects

Reactive Elements -https://github.com/PixelsCommander/ReactiveElements

X-Tags Imports - https://github.com/x-tag/x-tag-imports

Enyo -http://enyojs.com/

React.js -http://facebook.github.io/react/

Famo.us -http://famo.us/

Chromium Blink -http://www.chromium.org/blink

Polymer 0.4.2 -https://github.com/Polymer/polymer/releases/tag/0.4.2

Brick 2.0 -http://brick.mozilla.io/

X-Tags -http://www.x-tags.org/

Polymer -https://www.polymer-project.org/

Bosonic -https://bosonic.github.io/

Vulcanize - https://github.com/polymer/vulcanize

generator-element -https://github.com/webcomponents/generator-element

Firefox OS - https://www.mozilla.org/en-US/firefox/os/

web-component-tester -https://github.com/Polymer/web-component-tester

Topeka -https://github.com/polymer/topeka

Jquery UI -http://jqueryui.com/

Components

core-a11ykeys -https://github.com/Polymer/core-a11y-keys

core-list -https://github.com/Polymer/core-list

core-animated-pages -https://github.com/Polymer/core-animated-pages

Brick Components -http://brick.mozilla.io/v2.0/docs

WinJS Polymer Samples -https://github.com/banguero/winjs-polymer-samples

core-ajax - https://github.com/polymer/core-ajax

google-map - https://github.com/GoogleWebComponents/google-map

core-shared-lib - https://github.com/Polymer/core-shared-lib

google-apis - https://github.com/GoogleWebComponents/google-apis

core-selector - https://github.com/polymer/core-selector

paper-menu-button - https://github.com/Polymer/paper-menu-button

paper-tabs - https://github.com/Polymer/paper-tabs

paper-elements - https://www.polymer-project.org/docs/elements/paper-elements.html

core-signals -https://github.com/Polymer/core-signals

Direct download: episode-14_web-components-interop-and-polymer.mp3
Category:web-components -- posted at: 11:44am EDT
Comments[2]

11: The Bosonic Project

Raphael Rougeron joins us from Toulouse, France to talk about The Bosonic Project.  Raphael and his team of developers mostly focus their development efforts working in the Financial Industry, building out secure and robust applications as well as intricate cross browser UI Components. The UI components part of his work is especially interesting in that it led him to create The Bosonic Project.

 

Raphael was frustrated, like most of us, with having to constantly rewrite all of his components every time his team shifted technologies so he created The Bosonic Project. Bosonic, deriving its name from the word Boson, which is a subatomic particle that has zero or integral spin, is a philosophy and supporting tool chain to assist in building better UI components as the standardized Web Component specs (Custom Elements, HTML Imports, Shadow DOM, Templates, and CSS Decorators) describe them. This approach shields components against potential spec changes and provides support for “not-so-modern” browsers like Internet Explorer 9 (IE9).

 

Resources

https://bosonic.github.io/

https://github.com/bosonic/grunt-bosonic

https://github.com/bosonic/bosonic

https://bosonic.github.io/getting-started.html

https://raw.githubusercontent.com/bosonic/bosonic/master/dist/bosonic-polyfills.js

https://github.com/bosonic/transpiler

http://blog.raphael-rougeron.com/

https://twitter.com/goldoraf

Direct download: episode-11_the-bosonic-project.mp3
Category:web-components -- posted at: 7:57am EDT
Comments[0]

5: The Web Components Community

Web Components are a set of emerging and rapidly changing technologies alter the way many developers are starting to build web applications. Zeno Rocha (@zenorocha), a dominant force in the front end development community talks with hosts Erik Isaksen (@eisaksen) & Christian Smith(@anvilhacks) on how developers can get started building with these technologies today & how to build their own components, tooling & using the Github & Bower communities, and other front end developer goodness.

Zeno, began a small project, CustomElements.io ( http://customelements.io/), that was meant to track his and others Web Components. CustomElements.io, now used by Mozilla as their X-Tags (http://www.x-tags.org/) registry, has become much more than that and is now a central place for developers to share, publish, and maintain their Web Components. The project spawned an incredible amount of support from the web development community that grew into several other related projects such as ‘WebComponents.org’ ( http://webcomponents.org/ ) & the boilerplate Yeoman project ‘generator-element’ https://github.com/webcomponents/generator-element )

Direct download: episode-5_the-web-components-community.mp3
Category:web-components -- posted at: 12:00am EDT
Comments[0]