Skip to main content

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

By



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/

Labels:

Comments

Post a Comment

Popular posts from this blog

Building Autonomous Drone with Raspberry Pi and APM 2.8

By
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 Ins tallation 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 APM I am planning to power the apm via the battery to ESC (Electronic Speed Controllers) Now, documenting my steps below: Day 1 Watch Tutorial To 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 Sensors I downloaded the APM Missi
Post a Comment
Read more

Hadoop The Definitive Guide [Book] - Study Notes

By
Chap-1- Meet Hadoop Requirement and adoption in yahoo. A framework that can scale to the web. Map and Reduce acitivity and features like data locality. Can be applied with a variety of algorithms Huge data processing can beat good algorithms Chap-2 - MapReduce The Map Java class and Reducer Java class The Job java class Jobtracker and tasktracker Hadoop reduces the input to input splits or just splits Map tasks write the intermediate output to local disks, so that they can be discarded after use. Outputs of Reduce tasks are stored in HDFS Combiner function can be run on map output, and the combiner functions output forms the input to the reduce function Hadoop streaming proivide hadoop apis in languages other than Java Chap-3 - The Hadoop Distributed Filesystem Fault tolerant solution. Same data written at multiple places. Filesystems that manage the storage across a network of machines are called distributed filesystems. Blocks - a block size is the minim
Post a Comment
Read more

Adafruit GFX - How to change line spacing in text?

By
  You may want to update the line spacing to be a little lower than default due to small screen size on IoT devices. I faced this challenge while working on a Watchy hobby project. You may have used a font generator or just using the default fonts and got a *.h file that has the details of the font. In that case just change the last integer value in the PROGMEM variable.
Post a Comment
Read more