olange / learning-polymer

Learning using Google Polymer – articles, useful resources, courseware, personal notes

Learning Google Polymer

Articles, useful resources, courseware, homework and personal notes.

Events

• Polymer Summit 2016 London, Tobacco Docks, 17-18.10.2016
  Videos of the conferences YouTube, 41 videos of the 2 days
• Google I/O 2017
  Future, faster: Unlock the power of Web Components with Polymer Google, Wendy Ginsberg and Kevin Schaaf, 17.05.2017 (video, 43 min.)

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).

Supporting or related technologies

• 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)
• Shadow DOM v1: Self-Contained Web Components (Google Web Fundamentals, Eric Bidelman)
• Shadow DOM specification (W3C Editor's Draft, 28.11.2016)
• HTML's New Template Tag (HTML5Rocks, Eric Bidelman, 26.02.2013)
• Custom Elements v1: Reusable Web Components (Google Web Fundamentals, Eric Bidelman)
• HTML Imports (HTML5Rocks, Eric Bidelman, 11.11.2013)
• 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

• Production-Ready Microservices by Susan J. Fowler, O'Reilly, 12.2016
• Microservice Architecture by Mike Amundsen, Matt McLarty, Ronnie Mitra, Irakli Nadareishvili, O'Reilly, 08.2016

See also

• 10 Best ReactJS UI Frameworks for rapid prototyping hashnode, Tom Alter, 15.09.2016
• React · Material UI A set of React Components that Implement Google's Material Design
• Foundation A family of responsive front-end frameworks, for any device, medium, and accessibility; semantic, readable, flexible, and completely customizable; can be applied to websites, apps and e-mails

Tools

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

• Polymer CLI
• Polymer Build
• Polymer Editor plug-in
• Polymer Designer see also Introducing Polymer Designer Tools by Rob Dodson (video, 18 min.)

Storage

• Firebase Console
• Firebase CLI

Auditing PWA apps

• Chrome Lighthouse auditing and performance metrics for Progressive Web Apps Lighthoust Quick Start
• Chrome Inspect chrome://inspect and Chrome Tracing chrome://tracing

For IDE enthusiasts

• Visual Studio · Polymer IDE Unlocks all of the power of the Polymer Analyzer in VS Code: provides linting, autocompletion, and more for web components ext install polymer-ide