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
Więcej informacji
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,526