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

Building Autonomous Drone with Raspberry Pi and APM 2.8

I am a total newbie to hardware and was pushing my limits to see how far I can reach on with hardware projects (which sparked my interest lately). I have set out on a very ambitions mission to control a drone from raspberry pi.I began the research for this around 2 months ago and had brought a raspberry pi, drone body kit and apm flight controller. The key difference of this project from common drone projects is that I'm trying to avoid the use of and RC and instead use the raspberry pi to control it. 


Hardware Installation Setup:
I am using APM 2.8 and Mission Planner.I am using RPi 3 to control the APM 2.8 via Telem port of APMI am planning to power the apm via the battery to ESC (Electronic Speed Controllers)

Now, documenting my steps below:
Day 1Watch TutorialTo get started with APM flight controller, I watched this video tutorial [1] which gives a gentle introduction about APM board. 
Setup APM board and Calibrate SensorsI downloaded the APM Mission Planner software for mac and in…

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…