Skip to main content

I'm Live Blogging : Polymer, Webcomponents - Google Developer Group Trivandrum DevFest 2014




Overview 

Started (by +Arun Shanker Prasad ) with a slight intro and kicked-off with an overview of a data science application that was built by the Qburst (Company) team. And then moved over to Web Components and Polymer.

Parser Combinators for Event Detection

Presenter : +Navin Philip , Associate Architect, Qburst

A beautiful project data-crunching app that utilises the Theory of Computation to verify and quantify different hypothesis and give useful results. Had a quick demo. d

Web Components

webcomponents.org
Presenter : Shyam, Qburst

Why Web Components?

You could import/export encapsulated custom components. There are 4 main technologies in web components.

Eg: 
Make a Facebook like button without importing javascript.
Include maps in a page. 
googlewebcomponents.github.io
customelmeents.io

Polymer , X-tags( (Mozzila), Bosonic (Independent) 

Templating

New templating tags in html.
<templating>
</tempating> 

HTML Imports

Loads custom element and resoureces
In node.js
npm  install -g vulcanize
grunt-vulcanize
gulp-vulcanize

Shadow DOM

This a component that brings in the concept of Encapsulation in html. These elements exist but are not a part of the DOM. Have you ever wondered how the video tag works behind the scene? It uses Shadow DOM.

Scoped CSS!!!+encapsulated markup


element.createShadowRoot();
<div class=“widget”>Hello, world</div>
<script>
var host  = document.querySelector(“.widget”);
host. createShadowRoot();
root.innerHTMLL - “<em> I’m inside yr div!</em>"
</script>

Custom Elements

Element prototype must inherit from HTMLElement
there are things like HTMLUnknownElements that swallows the error when u declare undefined errors
Custom Elements vs AngularJS
CE is similar to directives provided by AngualarJS. AngularJS version 2.0 will be using web components.
<tabs>.. </tabs> //invalid elements
<x-tabsx>.. <x-tabs> //Valid elements


Polymer : The future of web development ? 

polymer-project.org
Presenter :Google - +Vijay Dev , Twitter- @vijaydevin
What are Web Components?
Is an umbrella four four different technologies (explained above). 
Have tags like : 
  • <core-toolbar>...</core-toolbar>
  • <paper-tabs>...<paper-tabs>
  • <super-button>
  • <super-textarea>

Implement functionalities like scroll till the end of agreement on clicking 'I agree' button. (Eg; The feature in android playstore). 

Most browsers are yet to catch up with webcomps ( excepet opera, firefox and chrome) and would take a long time. Thats where Polymer comes in. 

Polyfills Web Components with webcomponents.js ( previously platform.js ). 


  • Sugaring: Templates
  • Sugaring: Custom Elements
  • Sugaring: Shadow Elements
  • Sugaring: HTML Imports

Define custom tabs
  • <animated-pages>
  • <menu-button>
  • <page-scaffolde>

Map App Example 
  • Demoed an app like google apps, designed with 
  • <core-toolbar>
  • <core-header-panel flex>

Paper -Elements 
Make interfaces we see in Android Lollipop
  • <paper-elements>
  • <paper-input>

Styling
  • ::shadow
  • /deep/
  • With ::shadow and /deep/ you can apply sitewide themes


Similar topics 
Mozilla Brick

Good resources to checkout: 
  • polymer-project.org
  • polycasts (Video of what people are doing with polymer
  • YO POLYMER (Auto generate a lot of code)
  • seed-element ( Create basic, your own element)
  • Chrome Dev Editor
  • customelements.io

Good Web components to checkout
  • <app-router>
  • <page-er>
  • <ajax-form>

Intresting
Github is using web components. All timestamps are custom elements. 
Rating , accordian

GDG Trivandrum Web : http://www.gdgtvpm.org/

Popular posts from this blog

ICFAI Sikkim Distance MBA Review From My Experience

After a long research I joined for the ICFAI distance MBA program in 2012. Now I've completed 2 semesters ( as of 2013 ). I wanted to write this review so that people who are looking for a good MBA program can get a hand-on review about the distance MBA offered by the ICFAI Sikkim. I've been through all the cycles of this program and this review might help you make the right choice about the program. This article presents my own ( and unbiased ) view of the program and is in no way associated with the course provider.


Is the MBA ICFAI Sikkim Approved By UGC?  As per the latest AICTE regulations, a distance education program must have the approval of a joint commission of  UGC- University Grant CommissionAICTE- All Indian Council for Technical EducationDEC- Distance Education CouncilICFAI Sikkim doesn't have this approval (don't get disappointed, it's not over yet). Only institutes and colleges affiliated to a University are required to take AICTE approval. So ICFAI be…

Is MacBook Air Good For Programming / Blogging ?

I'm a passionate java developer who just migrated from a Windows PC netbook ( Dell mini ) to a 13 inch MacBook Air. Before the netbook I owned a Dell inspirion 1501. I'm quite a bit of an avid blogger as well. I purchased Dell mini just as it was launched hoping that it's compact and mobile architecture would solve all of my need as a programmer and a writer. Unfortunately it turned out that it was a worthless device.The rest of the story goes...



Do Not Compare a Netbook With MacBook AirMacBook's astonishing features far exceeds anything that of a normal Netbook.Before
Buying a netbook for programming and blogging was one of the biggest blunders I ever made on choosing a machine. The screen was 11 inch and clumsy icons of the Windows were a disgrace all the time.The tightly arranged keys in the keyboard made typing a pain. It's slow Intel Atom Processor is too sluggish to run even VLC player.


After  The Mac's backlit spacious keyboard layout, 1440x900 resolution d…

Best Places To Eat at Trivandrum

Are you searching for the most amazing places to eat at Trivandrum? Well, this article is a collection of places from where I've carried the taste after eating. All of them are located in Trivandrum. There is no specific focus for a single kind or restaurant, I've written about the latest hot-spot cafes to ethnic and traditional places at the heart of the city and people for decades.
General Places Azad Hotel Azad Hotel is a hotel-chain all over India and they are one of the best hotels in Trivandrum too. They claim to have introduced the popular dish 'biriyani' in India. However, they provide a good ambience and tasty food. There are all kind of popular non-vegetarian dishes available here. They have a long tradition of serving quality food and that's what makes them the best. There are
Zam Zam This is the most sought after destination in city for the best cooked chicken dishes. The 'Shawai' is the all time best seller of Zam Zam. It's very rushy alwa…