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 downloade...
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

Data Mining & Analytics with R : Running R Scripts and Data Mining Techniques - Day 2

By
Warning: These are my messy study notes, much better legible notes can be found here  http://onepager.togaware.com 1. A Tour Thru Rattle Transform Tab ( by no means near to the full power of underlying R) Data Mining Tabs - Cluster, Associate Model Log Tab  - Capture the corresponding R command Working from Left to Right on Tabs  Remember to Click Execute Button 'Save' -> Projects save the current state, all models etc. 'Open' Projects can be restored at a later time You can even load it back to R  2. First R Program Load rattle and ggplot2 library(rattle)  # Provides the weather dataset  library(rattle)  # Provides the ggplot() function ggplot -> Grammar of Graphics : Just like english grammar or grammar of a computer language. A result of Hadley's Phd . Look him up to learn more details. Then produce a plot using ggplot() # handsondatascience.com - tips on elegantly writing repeated code ds ...
Post a Comment
Read more