Wednesday, November 9, 2016

My observation of a Polymer Summit keynote video by Google

Tonight I went over to watch a couple of Polymer Summit 2016 videos on youTube (https://www.polymer-project.org/summit). What was great is that these videos are captioned. I was impressed that these videos have high quality captions with very few inaudible ones.

I chose to watch this keynote summit video at https://youtu.be/VBbejeKHrjg by Taylor Savage (what an unusual name). From what I have learnt by watching this video;

Web platform = confluence or a process of merging of three factors... 
1. Acceleration of mobile web development processes
2. Cross browser launch of web components
3. The launch of Polymer project 2.0

So for web development for computers, smart phones and tablets, basically these devices have different screen sizes. So mobile development have to keep this screen size factor in mind. We also have to account for offine mode (no internet access for instance). Slow internet or carrier speeds. Different code bases. All these constraints. Lots of different tools. Lots of overhead. Web development up to now is flaky and very hard to use and time consuming. 

Polymer - web platform

Google has built Polymer library and web components to support their emerging web platform. Now, Javascript is an essential part of the platform built by Google. This web platform needs to support
1. Scalar web apps
2. Web standards
3. Cross browser web components.  

These web components are supported by W3C which means we can easily build reusable web components. When Taylor talked about Web Components v1. A new Hope. I laughed at this one. I am a Star Wars fan too and own every DVD of every Star Wars movie that were released.

Going back to the Polymer and the web platform, we will have these custom elements and shadow DOM which are two critical specifications. Templates and HTML imports are not entirely supported by web browsers at this stage.

ES6 classes, modules, observers and properties

From this video, I came across ES6 modules, ES6 classes. Observers. Properties. What are they? I checked the Net via the good ole Google and came across the ECMAScript 6. 

These three websites helped me get more familiar with ECMAScript 6 features:


Up to now, Javascript classes in a nutshell are a bit different. Everything in Javascript is an object. We extend objects and add functions (methods) to them. Thats the drift.

What I now know about these ES6 classes is that JavaScript classes introduced in ECMAScript 6 are syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.  Source: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes

So I had a look at this website, HTML Goodies at HTML Goodies - JS Classes tutorial to revise my knowledge of JS objects. I will do more work with Javascript's methods, properties, prototype keyword and Javascript Objects. In my next blog post, I will post up JS code examples that cover these features.

Three years since Polymer was shipped.

Polymer v0.5 in 2014
Polymer v1 in 2015
Polymer 2 currently

In regards to the Polymer platform, the web component v1 supports custom elements and ES6 classes for example. So for the developers who want to upgrade from Polymer1 to 2, they can use the hybrid feature which is a compatibility layer so they can individually renew and upgrade web components one at a time from v1 to v2 and run on Polymer2 seamlessly.
















Polymer 2 overtime will get smaller. Currently the codebase is 12Kb which is tiny! As more and more browsers support web components, Polymer will get smaller over time. 

Polymer is being taken up by large companies like ING, EA, YouTube, Coca Cola etc. 500 projects with over 6000 elements. Polymer is like a living organic entity.

The Polymer web platform is evolving into an efficient ecosystem. This is very exciting.

I will need to find out more about these Polymer tools to help me build Polymer based custom elements and web applications. So the next step for me is to get familiar with the Polymer library and elements catalog. I will head over to the webcomponents.org (actually beta.webcomponents.org) website and have a play.

So it means there are Web component authors. So I will become a web component author eventually.

Standard Based Web platform

Basically once we have standard web components, they become the default components to use in web development. Standards based means enterprise grade applications. Standard based web components will  mean a wider community uptake and is community driven. That is not too different to the open source community where people can contribute.


Rob Dodson, a developer advocate

I then watched a brief video by a Developer Advocate, Rob Dodson on this youTube:
https://youtu.be/itTGnOMrTyc Taylor Savage gives Rob the highlights of his Keynote, touching on the next version of Polymer, Web Components and the growing community around it.

I will come back next week the middle week of November 2016 after I have finished watching this "How I learned to stop worrying and love the Polymer toolbox at Polymer Summit 2016"

Her summary of her talk is;
Think of your favorite app. It's probably meowni.ca/emojillate, but if it isn't (and we need to talk) it probably has one, if not all, of these things: a database; a potential for disaster, with many users looking at and clicking on the same data; offline support, a responsive layout while preferably being faster than the average bear. Recreating this experience from scratch might sound like a terrifying experience, but I'm going to show you how the polymer toolbox and a few other already-built elements can help you go from zero to hero and build a PWA - progressive web app in no time. Basic information about PWAs can be found at https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/

Demo: https://mojibrag.firebaseapp.com
Code: https://github.com/notwaldorf/mojibrag
Using the Polymer CLI: https://www.polymer-project.org/1.0/t... 
Polymerfire: https://github.com/firebase/polymerfire
App-localize-behavior: https://github.com/polymerelements/ap...

Ok, I will need to close this post and move on. So what does it mean to me... I need to learn more about Javascript/ES6 classes and to build custom elements that can run inside modern browsers. Lots of things I need to be aware of! Its very exciting indeed.


Over and out
Deaf Dave.

No comments:

Post a Comment