This past Saturday, I attended the Meet.js Summit in Poznań, Poland as a speaker. I gave a live coding presentation on building a simple single-page application (SPA) with Web Components.

I enjoyed other talks at the event, many of which covered advanced and sometimes controversial topics. I also loved the welcome perk – a very fun pair of socks!

 

In my presentation, I showed a typical workflow of building an app – including browsing the brilliant CustomElements.io registry for the available Web Components and installing them using Bower.

For my presentation, I used a database of music albums available as an XML dump from Discogs.com. I used 40,000 records that represented a single genre of music and only had YouTube music video information available. Importing such a dataset to the Starcounter database took about one minute on my MacBook Pro running Windows 8.1 in Parallels Desktop.

I presented how one can kickstart a SPA by using a JSON view-model defined on the Starcounter server, which can be accessed from the client using the <puppet-js> Custom Element. It removes the burden of maintaining a batch of REST calls by replacing them with a single JS object tree that is automatically observed and synchronized with the Starcounter server. The server listens to the changes and replaces values according to the user interaction.

Another component that I presented was <juicy-jsoneditor> which allowed me to quickly preview the current state of the JSON view-model. After that, I built a <template> using Polymer two-way data binding to show the detail page with the album cover as the page background, and embedded the music video using the <google-youtube> Custom Element. The cherry on top was a voice input recognition created using <voice-elements>.

The final app looked like this:

MusicBrowser app

It was not an easy task to build a functional music browser in just 20 minutes but it proved doable! I received positive feedback from the audience both at the event and afterwards on Twitter. I appreciated the kind words!

 

After the talk, I was asked several questions:

  • How does Polymer relate to Web Components? Is it a polyfill, enhancement, syntactic sugar or all of it?
  • What is the browser compatibility of Web Components?
  • Can I find Web Components production-ready?
  • What was the magical server that I used? (Yes, that’s Starcounter)

I will use the above questions to prepare for my next presentation on the same topic, which will be held at WebCamp Zagreb this Saturday, October 4th.