Polymer


Twój następny framework?



Marcin Warpechowski (@warpech)

meet.js
Gdańsk, 28.04.2014

O mnie

  • Programista JavaScript (client-side)

  • Stworzyłem i  rozwijam open-source'owy plugin jQuery Handsontable, obecnie w 3 osoby

  • Wdrażam Web Components w przyszłościowym projekcie,  do jakiego zatrudniła mnie firma Starcounter

 


Aktywność Google w client side web development



Building blocks for the web

Polymer is a new type of library for web, built on top of Web Components, designed to leverage the evolving web platform on modern browsers.


Polymer is a library that uses the latest web technologies to let you create custom HTML elements. Build anything from a button to a complete application as an encapsulated, reusable element that works across desktop and mobile.

Modułowa budowa

50+ repozytoriów na GitHubie: Polymer, PolymerLabs

Polymer to kilka rzeczy na raz

Web Components


  • HTML Templates - Reużywalność - Pozwalają zdefiniować powtarzające się fragmenty DOM

  • Shadow DOM - enkapsulacja (hermetyzacja) DOM i styli. Dowolny element HTML może mieć wewnątrz swój własny DOM

  • Custom Elements - tworzenie własnych tagów HTML

  • HTML Imports - grupowanie i ładowanie zależności HTML/JS/CSS


Polymer udostępnia polyfill, czyli wsparcie dla tych specyfikacji w nowoczesnych przeglądarkach

Syntactic sugar


  • deklaratywne tworzenie własnych Custom Elements przy pomocy tagu <polymer-element>

  • automatyczne obserwowanie zmian w atrybutach, uruchamianie callbacków kiedy ich wartości są zmienione <yt-search query="cats">

  • przekazywanie referencji do obiektów w atrybutach <line-chart dataseries="{{array}}">

  • 2-way data binding <input value="{{query}}"><yt-search query="{{query}}">

2-way data binding


  • użycie zmiennych podobne do AngularJS: {{var}}

  • pętle: template repeat="{{item in items}}"

  • warunki: template if="{{selectedItem}}"

  • wyrażenia: template if="{{selectedItem == 1}}"

  • filtry: class="{{ {disabled: isDisabled} | tokenList }}"

Filozofia

  • Wykorzystanie nowoczesnych funkcji web platform (do granic możliwości)
  • Oparcie się na DOM. Wszystko jest elementem
  • Wyeliminowanie boilerplate. Budowanie aplikacji internetowych powinno być łatwe

Cele

  • Udostępnić własną opinię na temat tego, jak budować aplikacje oparte o Web Components
  • Szwedzki stół - korzystanie z każdego z elementów jest opcjonalne
  • Ewolucja razem z webem
  • Nieustanny kanał zwrotny ze standardami internetowymi

Polymer Elements


Layout
polymer-layout
polymer-flex-layout
polymer-grid-layout

Widok
polymer-media-query
polymer-page

Usługi
polymer-shared-lib
polymer-google-jsapi
Dane
polymer-localstorage
polymer-xhr
polymer-jsonp
polymer-file
polymer-meta

Interakcja
polymer-signals
polymer-selector

Polymer UI Elements


polymer-ui-accordion
polymer-ui-action-icons
polymer-ui-animated-pages
polymer-ui-arrow
polymer-ui-base
polymer-ui-breadcrumbs
polymer-ui-card
polymer-ui-clock
polymer-ui-collapsible
polymer-ui-dropdown
polymer-ui-dropup
polymer-ui-field
polymer-ui-icon
polymer-ui-icon-button
polymer-ui-iconset
polymer-ui-line-chart
polymer-ui-menu
polymer-ui-menu-button
polymer-ui-menu-item
polymer-ui-nav-arrow
polymer-ui-overlay
polymer-ui-pages
polymer-ui-ratings
polymer-ui-scaffold
polymer-ui-sidebar
polymer-ui-sidebar-header
polymer-ui-sidebar-menu
polymer-ui-splitter
polymer-ui-stock
polymer-ui-submenu-item
polymer-ui-theme-aware
polymer-ui-toggle-button
polymer-ui-toolbar
polymer-ui-weather

Demo

TodoMVC, Padlock

Więcej informacji


www.polymer-project.org


"Polymer Dev" Google Group


webcomponents.github.io


customelements.io

Google I/O 2014

  • 25-26.06.2014

  • Moscone Center, San Francisco (biletów już brak)

  • W 2013, Google I/O Extended odbywało się w Warszawie, Krakowie, Wrocławiu, Łodzi

  • streaming online wszystkich sesji





Dziękuję za uwagę

Polymer - Twój następny framework?

By warpech

Polymer - Twój następny framework?

  • 3,516