Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Polymer Project Basics

boban-radeski
September 23, 2014
Research
1
67

Polymer Project Basics

boban-radeski

September 23, 2014
Tweet

More Decks by boban-radeski

See All by boban-radeski
Twitter Bootstrap 3.2.0
boban
1
100
Web Page Performance and Optimization
boban
0
64

Other Decks in Research

See All in Research
Discovering Universal Geometry in Embeddings with ICA
momoseoyama
1
360
2024-01-23-az
sofievl
1
780
CARMUI:自動運転車遠隔監視システムのUI検討のためのバーチャル都市プラットフォームの開発 / CARMUI-i2024
yumulab
0
110
ICLR2024 LLMエージェントの研究動向
masatoto
8
3k
CSC590 Lecture 01
javiergs
PRO
0
130
精神疾患患者のアクティビティデータを利用したリハビリテーションのためのシステムに関する研究
comfortdesignlab
0
150
Target trial emulationの概要
shuntaros
2
1.2k
クリック率を最大化しない推薦システム
joisino
42
14k
LLMマルチエージェントを俯瞰する
masatoto
26
16k
Accurate Method and Variable Tracking in Commit History
tsantalis
0
270
時系列解析と疫学
kingqwert
2
940
First Authorに俺はなるっ！! IROS’23 CCC2023 FY
shota_nishiyama
0
180

Featured

See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
We Have a Design System, Now What?
morganepeng
44
6.8k
GraphQLとの向き合い方2022年版
quramy
33
12k
Designing for Performance
lara
602
67k
How STYLIGHT went responsive
nonsquared
92
4.8k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
YesSQL, Process and Tooling at Scale
rocio
165
13k

Transcript

  1. Polymer Project Welcome to the future

  2. About me Boban Radeski, Front end Development engineer at HASELT

    Currently working with cutting edge front end technologies like: HTML5, CSS3, LESS, SASS, GulpJS, JavaScript, Polymer-Project, AngularJS, C# Razor, Web optimization, Web performance, Yeoman, Bootstrap, …. Testing new unpublished and technologies in draft version and giving feedback to W3 group. Facebook: https://www.facebook.com/boban.radeski LinkedIn: https://www.linkedin.com/pub/boban-radeski/38/952/a90 Twitter: https://twitter.com/master_boban

  3. Introduction to Polymer • Web Components usher in a new

    era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond. • Everything is an Element: The Polymer world-view

  4. Before we go deeper • Web Components are a collection

    of standards which are working their way through the W3C and landing in browsers as we speak. In a nutshell, they allow us to bundle markup and styles into custom HTML elements. What's truly amazing about these new elements is that they fully encapsulate all of their HTML and CSS. That means the styles that you write always render as you intended, and your HTML is safe from the prying eyes of external JavaScript.

  5. Create custom element • We’ll need a basic HTTP server

    to serve your pages (wamp, IIS) • We’ll learn about: • Using HMLT imports • Using Polymer elements with standard HTML, CSS and JavaScript • Basic structure of index.html <!doctype html> <html> <head> <title>unquote</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <script src="../components/platform/platform.js"> </script> <link rel="import" href="../components/font-roboto/roboto.html"> ... This bare-bones file defines some styles and embeds the platform.js script, which supplies any missing platform features. The link rel="import" element is an HTML import, a new way of including resources into an HTML file.

  6. Definition of custom element • We’ll need a basic HTTP

    server to serve our pages (wamp, IIS) <polymer-element name="post-card"> <template> <style> :host { display: block; position: relative; background-color: white; padding: 20px; width: 100%; font-size: 1.2rem; font-weight: 300; } .card-header { margin-bottom: 10px; } </style> <!-- CARD CONTENTS GO HERE --> </template> ... <script> Polymer({}); </script> </polymer-element> The <polymer-element> element is how you define a new custom element in Polymer. In this case, you're creating an element called "post-card". The <template> defines the element's internal DOM structure, or shadow DOM. This is where you'll add markup for your custom element. Used inside a shadow DOM tree, the :host pseudo-class matches the element that hosts the tree. In this case, it matches the <post-card> element. The Polymer call at the end of the file registers the element so it's recognized by the browser.

  7. Is Polymer production ready? Polymer is currently in “developer preview.”

    However, despite the label many people have already had success using Polymer in production. Although things might still change, we encourage developers to take Polymer out for a test drive. From: http://www.polymer-project.org/resources/faq.html

  8. Browser Compatibility

  9. Useful links • https://www.youtube.com/watch?v=yRbOSdAe_JU • http://www.polymer-project.org/ • http://webcomponents.org/ • https://www.youtube.com/watch?v=eORqFaf_QzM

    • http://component.kitchen/

  10. Tell me yours impressions.