O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Getting Started with Polymer

Book Description

Explore the whole new world of web development and create responsive web apps using Polymer

About This Book

  • Get to grips with the principles of Material Design and Google Web components
  • Make full use of the Polymer Designer Tool, Polymer Starter Kit, and Dart to create responsive web apps
  • An in-depth guide with real-life examples so you can learn everything you need to know about Polymer

Who This Book Is For

If you are a beginner-level web developer who would like to learn the concepts of web development using the Polymer library, then this is the book for you. Knowledge of JavaScript and HTML is expected.

What You Will Learn

  • Understand the basics of web components such as Shadow DOM, HTML imports, Templates, and custom elements
  • Familiarize yourself with the principles of Material Design
  • Install Polymer on your system and create your project structure
  • Use the different Polymer 1.0 elements in your code
  • Work with Polymer.dart and create your own app
  • Get to know the best practices in Polymer programming from the top guys in the Polymer team

In Detail

Polymer is a library that helps you develop fast, responsive applications for the desktop and mobile web. It uses the Web Components specifications for the components and Material Design concepts to create a beautiful user interface.

This focused, fast-paced guide deals with Polymer web components. We will cover layouts, attributes, elements, and handling touch and gesture events. You will also see how to build custom web components and applications using Polymer. Don’t want to code? You can make the most of the Polymer Designer Tool app and create your own app without coding at all. Finally, you will see how you can improve your Polymer application by reading the best practices from Google Polymer team.

By the end of this book, you will be equipped with all the necessary skills to use Polymer to create custom web components.

Style and approach

This is your guide to designing custom web components, and the concepts are explained in a conversational and easy-to-follow style. Each topic is explained through examples, with detailed explanations wherever required.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Getting Started with Polymer
    1. Table of Contents
    2. Getting Started with Polymer
    3. Credits
    4. About the Author
    5. Acknowledgments
    6. About the Reviewer
    7. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Web Components
      1. Introduction to Web Components
      2. Templates
      3. Shadow DOM
        1. Inside the browser
        2. Creating a Shadow DOM
        3. Root shadowRoot
      4. Custom elements
        1. New item
        2. The expansion of built-in elements
        3. Life cycles
      5. HTML imports
        1. Web components
        2. Reusing an imported document
      6. Styles and selectors
        1. Exterior styling for Shadow DOM
        2. Styling depending on the host
        3. Style to content
      7. Summary
    10. 2. Material Design
      1. What is Material Design?
        1. Why do we need Material Design?
      2. Material Design – to the moon and back!
        1. Tactile surface
          1. Depth
        2. Publishing design
          1. Elegant typography
          2. Font size
          3. Contrast typography
          4. Geometric iconographies
          5. Colors
          6. Beautiful photos
        3. Meaningful animations
          1. Asymmetry
          2. Reaction
          3. Micro animations
          4. Clarity and sharpness
        4. Adaptive design
          1. From the general to the particular
          2. Padding
          3. Wireframes
          4. Guides
          5. Sizes
          6. Blocks
          7. Toolbars
      3. Other tools
      4. Summary
    11. 3. Introduction to Polymer
      1. What is Polymer?
      2. Downloading the code
        1. Bower
        2. Downloading the ZIP file
        3. Cloning from Git
      3. Working with Polymer
      4. Registering elements
      5. Declaring element properties
      6. Property change observers
      7. Local Polymer DOM elements
        1. Manipulating nodes inside Polymer elements
      8. Data binding in Polymer
        1. Binding annotations
      9. Behaviors in Polymer
        1. Events
        2. Styling
      10. Mixins in Polymer
      11. Summary
    12. 4. Polymer Elements
      1. App elements
        1. app-layout
        2. app-route
      2. Iron elements
        1. iron-a11y-keys
        2. iron-ajax
        3. iron-collapse
        4. iron-image
        5. iron-dropdown
        6. iron-flex-layout
        7. iron-form
        8. iron-icon
        9. iron-swipeable-container
      3. Paper elements
        1. paper-badge
        2. paper-button
        3. paper-card
        4. paper-checkbox
        5. paper-drawer-panel
        6. paper-dropdown-menu
        7. paper-fab
        8. paper-icon-button
        9. paper-input
        10. paper-listbox
        11. paper-material
        12. paper-menu
        13. paper-progress
        14. paper-radio-button
        15. paper-ripple
        16. paper-slider
        17. paper-spinner
        18. paper-tabs
        19. paper-toast
        20. paper-toggle-button
      4. Google web components
        1. google-analytics-query
        2. google-client-loader
        3. google-chart
        4. google-hangout-button
        5. google-map
        6. google-signin
        7. google-streetview-pano
        8. google-youtube
      5. Gold elements
        1. gold-cc-cvc-input
        2. gold-cc-input
        3. gold-email-input
        4. gold-phone-input
      6. Neon elements
      7. Platinum elements
        1. platinum-bluetooth
        2. platinum-push-messaging
      8. Molecules
        1. marked-element
      9. Summary
    13. 5. First Application with Polymer
      1. Meet P O L Y
      2. Setups
      3. Starting with the app development
        1. The login page
          1. The elements.html file
          2. <poly-login>
          3. <poly-signup>
      4. P O L Y – the app page (home.html)
        1. <poly-profile>
        2. <poly-gravatar>
        3. <poly-app>
        4. <poly-daily-music>
        5. <poly-songs>
        6. <poly-player>
        7. <poly-user-music>
        8. <poly-users>
      5. Summary
    14. 6. Polymer Designer Tool and Polymer Starter Kit
      1. Polymer Designer Tool
      2. The right-hand side panel
        1. Palette
        2. Tree
        3. Properties
        4. Styles
      3. The top panel
        1. Code
        2. Save, share, and preview
      4. Polymer Starter Kit
        1. Installation
        2. The directory structure
        3. Build and run
      5. Summary
    15. 7. Working with Polymer.dart
      1. What is Dart?
      2. Installing Dart
      3. Structuring an application
      4. Using custom elements in Dart
        1. How to use custom elements in code
      5. Creating custom elements in Dart
      6. Building an app
      7. Tools
        1. Tools for the Sublime Text editor
        2. Tools for Atom
      8. Summary
    16. 8. Best Practices
      1. The mystery with <paper-dialog>
      2. Importing HTML using RequireJS
      3. Floating action button (FAB) with menu items
      4. The paper-video element
      5. Elements in a collection
      6. Use Yeoman Polymer Generator! It's awesome!
        1. Installation
        2. The polymer:element generator
        3. The polymer:seed generator
        4. The polymer:gh generator
        5. Testing with web-component-tester
      7. Summary
    17. Index