项目作者： olange
项目描述 ：
Learning using Google Polymer – articles, useful resources, courseware, personal notes
高级语言： HTML
项目地址: git://github.com/olange/learning-polymer.git
Learning Google Polymer
Articles, useful resources, courseware, homework and personal notes.
Events
Codelabs
- Build a Progressive Web App with Firebase, Polymerfire and Polymer Components 18.10.2016 Polymer Summit
(My codelab source code) A beginner project, demonstrating reuse of prepared Polymer elements to build an online note editor app, with Google OAuth authentication and Firebase persistence. - Building an Image Carousel Element with Polymer 2.0 17.10.2016 Polymer Summit
(My codelab source code) A beginner project, demonstrating how to use Polymer 2.0 with ES2015 class syntax, while building a simple image carousel and gradually adding features to it. - Data Visualization Using Polymer and WebGL Google Codelabs (My codelab source code) A visualization of thousands of data points over an interactive Google Map, taking advantage of Polymer and some Google Web Components to easily cobble together a pipeline to load data, pass it into WebGL, and then manipulate it in real time.
- Auth0 › Build Your First App with Polymer and Web Components Auth0 blog, Kim Maida, 05.10.2016
Build an app using web components and Polymer that interacts with an API and authenticates users with JSON Web Tokens (JWT).
- Google Material Design A graphical system and visual language, that synthesizes classic principles of good design with the innovation and possibility of technology and science; develops a single underlying system that allows for a unified experience across platforms and device sizes
- Polymer App Toolbox A collection of components, tools and templates for building Progressive Web Apps with Polymer, which features: component-based architecture; responsive design; modular routing; localization; turnkey support for app local storage;
offline caching; build tooling to support serving your app multiple ways (unbundled/HTTP2, bundled/HTTP1) - Progressive Web Apps · Guidelines A set of guidelines, that provide user experiences that have the reach of the web, and are reliable: load instantly, even in uncertain network conditions; fast: respond quickly to user interactions; engaging: feel like a natural app on the device
- Polymer App Toolbox · PRPL Pattern Push critical resources for the initial route; Render initial route; Pre-cache remaining routes; Lazy-load and create remaining routes on demand; see also the PRPL Server for Node
Articles
- ECMAScript modules in browsers (Jake Archibald, 02.05.2017)
- Polymer 2.0 Cheat Sheet (Monica Dinculescu, @notwaldorf)
- What is shady DOM? (Polymer Project Blog, Scott Miles, 28.05.2015)
- The four Web Components standards (Mozilla Developer Network)
- Are we componized yet? (John Rimmer) a matrix synthetizing current support status of the four Web Components Standards in the various browsers
- «Real» Mixins with JavaScript Classes (Justin Fagnani’s blog, 21.12.2015) what mixins should do, what’s wrong with current JavaScript mixins, and how simple it is to build a very capable mixin system in JavaScript that plays extremely well with classes
- Regarding the broken promise of Web Components Rob Dodson, 15.03.2017, in response to
The broken promise of Web Components Dmitrii Dimandt, 14.03.2017 - Custom Elements That Work Anywhere Rob Dodson, 30.06.2016
- Javascript Tools: A Story in Disgrace Dmitrii Dimandt, 14.03.2017 an opinion article, about state of JavaScript app dev; many interesting references
- Polymer Guides › Flexbox layout with iron-flex-layout A guide to the two different ways of using the
iron-flex-layout component – which provides simple ways to use CSS flexible box layout (flexbox): either the layout classes, which let us specify layout properties directly in markup; or the custom CSS mixins, that can be @apply-ied inside CSS rules - Polymer Guides › Responsive Material Design Layouts A short guide, that teaches how to use Paper, Iron and Iron Flex elements to create a responsive layout; beware: refers to Polymer 1 elements!
- Polymer Guides › Using Elements An overview of the primary collections of elements, how-to install and use them in a main page or an element; provides also a quick overview of data binding, of mapping attribute names to property names and of DOM manipulation concepts
- WebComponents › Best practices first published 29.04.2014 a list of best practices, that evolves over time with community suggestions
Case studies and fun apps
- Google Polymer Shop A complete case study of the Shop, a full-featured e-commerce PWA demo, built using the Toolbox
- Google Polymer News A complete case study of News, a full-featured PWA demo, built using the Toolbox
- Google Polymer Cheese Say « cheese » and take a photo; try it on a mobile device
- Google Polymon A multiplayer, location-based monster hunting game designed and maintained by the Polymer team; hint, when outside of a Polymer Summit: start at https://twitter.com/0xcda7a to find monsters
- Google Santa Tracker Use Google Santa Tracker to follow Santa Claus on Google Maps as he makes his journey around the world
- vpusher Game Card WebComponent Playing game card element based on ES6 and Polymer 2.0; infinitely scalable, thanks to unicode characters and SVG
- vpusher The Grid WebComponent Grid layout custom element based on ES2015 and Polymer 2.0
- Hacker News readers as Progressive Web Apps unofficial collection of Hacker News clients built with a number of popular JavaScript frameworks and libraries; each implementation is a complete Progressive Web App, that utilizes different progressive technologies to provide a fast, reliable and engaging experience
Books
See also
Material Design
- Material Design · Color tool create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination
Polymer
Storage
Auditing PWA apps
For IDE enthusiasts
