Awesome Polymer
A collection of awesome Polymer resources.
- General resources
- Polymer Communities
- Polymer & Web Components Blogs
- Polymer Codelabs / Playgrounds
- Directories
- Elements
- Mixins / Behaviors
- Libraries
- Patterns
- Polymer is SEO-friendly
- Tutorials / Guides
- Case Studies
- Integration with other frameworks
- Articles
- Videos
- Templates
- Tools
- Editor Plugins
- Testing
- Notable projects
- Polymer Authors
- Other awesome resources
General resources
- Polymer Official Site
- Polymer Project repo - Roadmap, Code of Conduct, How to Contribute, and more.
- Polymer Library repo
- Polymer repos
- Polymer Elements repos
- Polymer Labs repos
- Polymer Summit
- Chrome Dev Summit
Hashtags
Polymer Communities
- Slack
- StackOverflow
- GoogleGroup
- Google+ Profile
- Google+ Community
- Chinese QQ Group
- Polymeristi - Czech & Slovak Polymer community.
Polymer & Web Components Blogs
Polymer Codelabs / Playgrounds
- Polymer Summit 2017 Codelabs
- Polymer Summit 2016 Codelabs
- Google Developers Web Codelabs
- StartPolymer Playgrounds
Directories
Elements
- Polymer Catalog
- Material Web Components
- Awesome Elements
- StartPolymer Elements
- Vaadin Core Elements - Themable UI elements (Material and Valo themes).
Routing
- <app-route> Declarative, self-describing routing for a web app.
- <polymer-ui-router> - UI Router wrapper for Polymer 2.x+
Mixins / Behaviors
Libraries
- pwa-helpers - Small helper methods or mixins to help you build web apps.
lit-html
- lit-html - HTML templates with JS template literals, and efficiently render and re-render those templates to DOM.
- lit-element - Base class for creating custom elements using Polymer and lit-html.
- fit-html - 3KB web components + lit-html + redux library without bloat.
- Awesome lit-html
Patterns
Managing State
Mediator Pattern
Global Mediator Pattern
UniFlow
- UniFlow - uni-directional data flow + maintains state of entire application
- Difference between UniFlow and Redux
- ToDo MVC Demo
- UniFlow Polymer Starter Kit
- Answers from author @militeev on Slack
- With UniFlow you move all your complex logic to action dispatchers, leaving to the visual elements only tasks of rendering the data and reacting to user events. This simplifies things a lot, especially when it comes to unit testing.
- Answering the question if this is another alternative to Redux, the answer is probably yes. We started the project in early 2016, and Flux and Redux ideas definitely influenced it.
- I would say it's implementation of basic principles of Flux/Redux + convenience methods for views.
- Yes, it was developed as part of an internal project at Google, then we separated it out, documented and open-sourced.
- From my experience, patterns are easier to follow if they're implemented in the code. For small projects it's not critical. When you have large group of people working on a project, chances are that different people will attempt doing same thing in various different ways. Having library and guidelines how to use it helps in this case.
- Yes, you can easily implement all these concepts yourself, customizing the way you want. The advantage of having the library is that someone already thought about different scenarios that may occur, coded those and unit-tested.
Redux
- How to use Redux in Polymer -- Polycasts #61
- Project Structure for Using Redux with Polymer 2.0
- Why not to store objects in Redux - 2017-07
- redux-store-element - A custom element allowing a more declarative use of Redux.
- pwa-helpers - Redux helpers - These utility methods are useful if your application is using Redux for state management.
PRPL Pattern
PRPL Pattern is alternative for a benefits of server-side rendering.
PRPL Servers
Features
Polymer is SEO-friendly
Polymer Project develops PRPL server using Rendertron server which runs Headless Chrome to render and serialize web pages for search bots, so all the content is contained in one network request.
- PRPL server - Rendering for Bots
- Solving SEO with Headless Chrome (Polymer Summit 2017)
- Puppeteer Playground
- Rendertron - headless Chrome rendering solution designed to render & serialise web pages on the fly
Searchbots
- Polymer 2 and Googlebot - 2017-12
Tutorials / Guides
- Build your first Polymer 2 element
- Build your first Polymer 2 app
- The Gold Standard Checklist for Web Components
- Flexbox layout guide
- Polymer Cheat Sheets
Style Guides
- Document your elements
- Chromium Web Development Style Guide
- Polymer Style Guide
- FamilySearch Polymer Style guide
Upgrade Guides
Case Studies
- Polymer @ YouTube - The YouTube site is comprised of over 400 web components. - 2017-08
- Santa Tracker as a PWA - 2017-03
- NET-A-PORTER - 2016-04
- Creating a Lightsaber with Polymer - 2015-12
Integration with other frameworks
- Integrating Polymer 3 Components on Angular 5, more simple… - 2018-04
- Aurelia + Polymer integration
- How to use Polymer with Webpack - 2017-07
GraphQL
Articles
- Learn Polymer - From Beginner to Expert - 2018-04
- How to combine Web Components with Storybook - 2018-03
- Make Polymer 2.0 Web Components work on IE11 and Edge - 2017-12
- Thoughts on Polymer 3.0 after Polymer Summit 2017 - 2017-09
- Building Polymer apps with gulp - 2017-08
- Localize Polymer apps with translation platform - 2017-08
- Shadow DOM: fast and encapsulated styles - 2017-08
- Polymer + Cordova: Can’t access device images - 2017-08
- Project Structure for Using Redux with Polymer 2.0 - 2017-07
- Managing State in Polymer 2.0 - Beyond Parent / Child Binding - 2017-07
- Polymer anti-patterns: Prevent leaking internals between components - 2017-07
- Don’t use jQuery plugins with Shadow DOM - 2017-06
- Polymer 2.0 pitfalls: key bindings (Accessibility) 2017-06
- Polymer 2.0 + IE11: Don’t use in your index.html - 2017-06
- Polymer Tips: Prevent Inactive Views Responding To Other Route Changes - 2017-05
- Custom Elements That Work Anywhere - 2016-11
- Property Change Observers in Polymer - 2016-01
- Building web components using ES6 classes - 2015-09
- Live-reload for Polymer Chrome Apps - 2015-06
- Guitar Tuner with Web audio API - 2015-06
- Polymer for the Performance-obsessed - 2015-06
- What is shady DOM - 2015-05
- Using Polymer webcomponents with Angular JS - 2015-05
- Setting up your Production-ready Polymer 1.0 Application Development - 2015-06
- Dynamically Loading Elements & ES6 Modules
- The Cost of Frameworks - 2015-11
Videos
- Polycasts
- Building a Polymer 2 Progressive Web App with the Polymer CLI - 2017-07
- State of Polymer Jan '17 at This.JavaScript with Rob Dodson - 2017-02
- Make your Polymer web-app Progressive - 2016-11
- Learn Polymer 1.0 - 2015
- Level up Tutorials - 2015
Polymer Summit
- Polymer Summit 2017 - 2017-08
- Polymer Summit 2016 - 2016-10
- Polymer Summit 2015 - 2015-10
Progressive Web App Summit
- Progressive Web App Summit 2016 - 2016-06
Chrome Dev Summit
- Chrome Dev Summit 2017 - 2017-10
- Chrome Dev Summit 2016 - 2016-11
- Chrome Dev Summit 2015 - 2015-11
Google I/O
- Web Components and the Polymer Project @ Google I/O 2018 - 2018-05
- Chrome and Web @ Google I/O 2018 - 2018-05
- Polymer @ Google I/O 2017 - 2017-05
- Chrome and Web @ Google I/O 2017 - 2017-05
- Polymer @ Google I/O 2016 - 2016-05
- Web and Chrome @ Google I/O 2016 - 2016-05
- Polymer and modern web APIs: In production at Google scale @ Google I/O 2015 - 2015-05
Templates
- Awesome PWA Starter Kit
- Polymer Starter Kit
- Polymer Starter Kit Plus
- Polymer News
- Polymer Shop
- Polymer Hacker News client v2
- Polymer Hacker News client v3 (lit-html + Redux)
Tools
- Polymer CLI - The command-line tool for Polymer projects and Web Components.
- Polymer Chrome DevTools Extension
- Polymer Ready Chrome Extension - Show an icon in the address bar when it detects some Polymer and Custom components.
- Polymer Iconset Generator
- Polymer Magic Server - The Magic Server serves files directly from github (via
cdn.rawgit.com) in a manner that is compatible with HTML Imports natural deduplication feature. - StartPolymer CDN
- On-the-fly Polymer style modules
- StartPolymer Toolbox - Hot Reloading and more tools...
Editor Plugins
Polymer Editor Plugins @ Polymer Summit 2016
Atom
VS Code
Sublime Text
Testing
- Web components tester makes testing your web components a breeze!
- test-fixture - Element that can simplify the exercise of consistently resetting a test suite's DOM.
- iron-test-helpers - Utility classes to make testing easier.
- Testing Tips - 2016-01
Notable projects
- Polymon - Seek out Polymer team members and capture them as Polymon!
- Cheese - Simple web app that lets you take a selfie and automatically places stickers on the face.
- PWA for Polymer Summit 2017
- Guitar Tuner
- Padlock - A minimalist open source password manager.
- TimeDoser - Pomodoro Timer
Lists
- Polymer Projects - List of websites and apps built with Polymer.
- Who's using Polymer?
