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

Polymer Project Basics

boban-radeski
September 23, 2014
Research
1
77

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
110
Web Page Performance and Optimization
boban
0
69

Other Decks in Research

See All in Research
EBPMにおける生成AI活用について
daimoriwaki
0
220
CoRL2024サーベイ
rpc
1
1.1k
言語処理学会30周年記念事業留学支援交流会＠YANS2024：「学生のための短期留学」
a1da4
1
270
さんかくのテスト.pdf
sankaku0724
0
530
129 2 th
0325
0
250
Embers of Autoregression: Understanding Large Language Models Through the Problem They are Trained to Solve
eumesy
PRO
7
1.2k
Weekly AI Agents News! 11月号 論文のアーカイブ
masatoto
0
180
Neural Fieldの紹介
nnchiba
1
410
ベイズ的方法に基づく統計的因果推論の基礎
holyshun
0
620
12
0325
0
200
テキストマイニングことはじめー基本的な考え方からメディアディスコース研究への応用まで
langstat
1
150
メールからの名刺情報抽出におけるLLM活用 / Use of LLM in extracting business card information from e-mails
sansan_randd
2
270

Featured

See All Featured
Scaling GitHub
holman
458
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Bash Introduction
62gerente
608
210k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
A designer walks into a library…
pauljervisheath
204
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Thoughts on Productivity
jonyablonski
67
4.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k

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.