Polymer - Web Components Exploration

Polymer - Web Components Exploration

There have been lots of questions and things I didn't know when I first started looking at Polymer since October 2016. It has been 6 weeks ever since. I have answered many of these questions that came up when I was exploring this Polymer website by myself. I really enjoy exploring and answering my own questions.  JSON files. Data binding. NMP. Bower. Package Manager. Closures. Frameworks. Material Design. Elements. Custom tags. Projects. Debugging. And so on.

I look. I read. I procrastinate. I nap a lot. I dig. I do things. I break things. I get frustrated easily. I don't give up easily. I feel good once I get things working! My plan of attack is to break problems into smaller problems and solve them one at a time. I can be slow at times but once I get it, I am FAST!

For the last few weeks, I went over JavaScript and I looked into the meta programming - especially function closures and JavaScript objects. I have ordered a few advanced JavaScript books and I will be writing future posts on these topics.

I came across a great simple tutorial on what is a web component. This article said web components is a new HTML technology that makes it easy for you to create web apps. There are short lessons in this website that introduces the following concepts (HTML tags, how to use web components in any web browser, changing the attributes for custom HTML tags on the fly etc) and try them out in interactive live demos. Nice and easy.

This tutorial can be found at » https://component.kitchen/tutorial

Polymer Project

I keep visiting this Polymer Project website. This website can be found at » https://www.polymer-project.org/1.0/ This is an elegant and clean website. I can use web components with confidence. My next plan is to select and use web components in my rather out of date website at www.deafdave.com.au.

I have a few ideas to build new custom web components. A small Auslan fingerspelling alphabet translator web component that changes words into fingerspelt icons on the fly. A silly and useless purple web component. A star wars scrolling web component. These three are the ones I wish to build asap.

My ultimate goal is to build a Polymer based app... It is exciting!


Over and out.
Deaf Dave.

Material Design used in Polymer development.

Material Design as part of Polymer

To recap, Google Polymer is an open source JavaScript library composed of web components that is used for building web applications seamlessly. This Polymer library is available on GitHub. The Polymer user interface framework supports custom elements, shadow DOM, HTML imports and templates and modern design principles. In this short post, I would like to write a bit about material design.

Material Design is a design language by Google released on 25 June, 2014 at the Google I/O conference. "Expanding upon the "card" motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows." Sourced from Wikipedia. This design language was used to build Gmail, YouTube, Google Drive, Google Docs, Google Maps etc.

From the Google's Material Design website;

"Material design is guided by print-based design elements – such as typography, grids, space, scale, color, and imagery – to create hierarchy, meaning, and focus that immerse the user in the experience."



Material Design has four design principles:

1. Tactile Surface
2. Publishing Design
3. Meaningful Animations
4. Adaptive Design

• Tactile surface represents the layers of "digital paper". These layers are arranged at varying heights to simulate depth and cast shadows on each other. This is analogous to stacked papers.
• Publishing Design represents "digital ink" that is the use of fonts and typography, colours and photos for example.
• Meaningful animation represents how controls on a web page interact with the user for example.
• Adaptive design is a method that allows designs to represent consistently across different web based devices with different resolution and screen sizes.

Wireframes are useful to help organise space and padding for different screens of devices. More information can be found at https://material.google.com/resources/layout-templates.html#layout-templates-whiteframes

In a nutshell, Material Design unifies visual, motion, and interaction design across different types of devices. It's modeled after tactile materials like paper and ink with fluid animation and lighting. Polymer brings these paper elements to life on the web. So the Google Design team came up with an unified approach to building consistent user interface across different web based devices.

Over and out

Deaf Dave.

References

• https://elements.polymer-project.org/guides/responsive-material-design-layouts
• https://material.google.com/
• https://en.wikipedia.org/wiki/Material_Design
• https://www.smashingmagazine.com/2015/10/responsive-material-design-app-with-polymer-starter-kit/
• https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/

Musings about Web Components and Community work

I have been thinking lots about web components but I am not actually building them yet. Procrastination has set in I think! Its November and the silly season is creeping upon us rather too quickly.

I have also been thinking about the meta side of things especially with web components and my life as a Deaf person. I did a quick course in jQuery and it has provided me the tools to quickly fetch and update individual elements on a web page. but I realised what if I have multiple pages and they needed to communicate across by exchanging data then it all gets messy quickly. On one hand, jQuery is useful for encapsulating low level routines into higher level functions or objects for instance but the other hand its all rather fine grained. So I came across frameworks. Angular JS is one of them and the ability to decouple data, views and controller modules helps the developer manage the complexity of building and deploying web applications. So that's the MVC paradigm. Ok I would like write more about this MVC but that's for a future blog post.

It has been like 7 years since I worked in the software engineering industry (Altium - an Electronics Design Automation world class company) and I miss this type of work terribly.I worked as a software engineer, application engineer and finally as a technical writer for Altium and I worked extensively with Borland Delphi. I loved this tool. I came across Delphi components and how they helped me save time in coding and how it is easy to build applications with components.

I am a community manager for a little non for profit organisation funded by the Archdiocese of Sydney. I have done a lot of community work for the last 7 years. Why did I end up in the community sector after I was made redundant at Altium (no hard feelings!).   I was snapped up for lots of different jobs in the Deaf community after I left Altium. I taught many sign language courses for the Deaf Society of NSW. I designed and delivered lots of community courses and workshops for the deaf community in Sydney in the areas of family history research and Arduino - open source electronics prototyping boards. I thought it would be good to do something really different. The big pay drop was a blow I admit. It was only last year when I became a community manager, my salary was much more respectable.

On reflection, I realised there were things I could have done better when I was at Altium. I didnt know how to manage my anxiety issues. Thou I was an efficient worker and I had the great ability to get on with my co workers and have a laugh or two. I was able to hack into hard stuff and generate easy to understand technical documentation and generate useful code and script examples. That was so much fun.

I am a Deaf person and I use Auslan (Australian Sign Language). I found rather hard to cope being in a room full of people who can only speak and unable to sign Auslan. Now I am older and more mature. I think I am managing my anxiety issues very well. It is my fifth year with Movember - a charity devoted to helping men resolve their anxiety, depression and other related issues. I feel really good helping out. This is why I really enjoy helping people and finding solutions to make their lives easier. This attribute is important in all areas of work; whether it is community work or developing unique web components!

Fast forward to today.  I feel it is time for me to move on and harness the technical geek in me once again. I am ready to move on!

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:

• http://es6-features.org/
• http://www.2ality.com/2016/01/ecmascript-2016.html
• https://en.wikipedia.org/wiki/ECMAScript

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.

Using a Polymer Element for the first time

Hello, I logged into Polymer Project website today and the Polymer Project website has a beautiful minimal UI design.

I was in the mood for building something quickly today. So I went over to the » Polymer Summit 2016 website from Google Developers Code Lab and  I had a go in creating My Carousel Element demo project which is a Image Viewer that scrolls from the beginning to the end.

This Image Carousel project can be found at: » Polymer-2-Carousel

 I was able to get everything up and running the first go. Nothing went wrong. Nothing I misunderstood. I merely did a copy and paste from this website. I didnt go through the step folders provided by this website. I wanted to build the project from scratch.

I think the procedure was extremely well written that I was able to build a functioning web page the first go. This project has lots of hidden dependencies - the Polymer components such as the Carousel Image element, the Polymer server and all that.

Obviously I have a lot of learning to do so I quickly headed over to Web Fundamentals at Google Developers website. The website can be found at https://developers.google.com/web/fundamentals/getting-started/

I plan to use elements, build elements and finally build apps using Polymer over the coming weeks and months.

Over and out
Deaf Dave.

My first technical article - Sept 2016

I have decided to create this blog using Google's blogger. Tech DeafDave is the title I chose. I think it is apt because I am a deaf person who is a true geek. However I am working as a community manager for a little non for profit centre funded by the Archidiocese of Sydney. This area of work is challenging spiritually for me. My next career change is to get back into the computing/technical world which is my passion. Why I ended up as a community manager after working as a software engineer/application engineer/technical writer for around 15 years is another story to be written.

My technical passion lies in the following areas:
1. Coding such as Python, Delphi,  HTML 5, CSS, the Javascript ecosystem (including jQuery and HTML5 geolocation)
2. Google's web platform the mighty Polymer
3. the Electronics ecosystem especially the mighty Arduino.
4. DSLR photography - astro and macro worlds
5. Family Heritage research - stories and analytical/detective work

I will be exploring these topics as I go by. My aim is to build up my coding and writing skills to a standard that I will be able to get into Google. I will be posting diagrams, code examples, analyses and my comments.

On a side note, I have been teaching "How to use Arduino" on a regular basis to a group of deaf people and at schools with deaf kids and I have been teaching Family Heritage workshops since 2009.

Over and out,
Deaf Dave.