Building Native Web Components : Front-End Development with Polymer and Vue.js

Start developing single-page applications (SPAs) with modern architecture. This book shows you how to create, design, and publish native web components, ultimately allowing you to piece together those elements in a modern JavaScript framework. __Building Native Web Components__ dives right in and gets you started building your first web component. You’ll be introduced to native web component design systems and frameworks and discuss component-driven development to understand its importance in large-scale companies. You’ll then move on to building web components using templates and APIs, and custom event lifecycles. Techniques and best practices for moving data, customizing, and distributing components are also covered. Throughout, you’ll develop a foundation to start using Polymer, Vue.js, and Firebase in your day-to-day work. Confidently apply modern patterns and develop workflows to build agnostic software pieces that can be reused in SPAs. __Building Native Web Components__ is your guide to developing small and autonomous web components that are focused, independent, reusable, testable, and works with all JavaScript frameworks, modern browsers, and libraries. **What You Will Learn** * Incorporate component-driven development (CDD) and design systems into your workflow * Build apps with reusable UI components that are agnostic to JavaScript frameworks * Utilize Polymer and Vue.js in your day-to-day work * Publish your UI components in npm (Node Package Manager) **Who This Book Is For** The book is intended for Intermediate–Advanced level readers interested in single-page applications (SPAs), as well as Polymer, Vue.js, and Firebase. Start developing single-page applications (SPAs) with modern architecture. This book shows you how to create, design, and publish native web components, ultimately allowing you to piece together those elements in a modern JavaScript framework. Building Native Web Components dives right in and gets you started building your first web component. Youll be introduced to native web component design systems and frameworks, discuss component driven development and understand its importance in large-scale companies. Youll then move on to building web components using templates and APIs, and custom event lifecycles.Techniques and best practices for moving data, customizing, and distributing components are also covered. Throughout, youll develop a foundation to start using Polymer, Vue.js, and Firebase in your day-to-day work. Confidently apply modern patterns and develop workflows to build agnostic software pieces that can be reused in SPAs. Building Native Web Components is your guide to developing small and autonomous web components that are focused, independent, reusable, testable, and works with all JavaScript frameworks, modern browsers, and libraries. What You Will Learn Incorporate Conserved Domain Database (CDD) and design systems into your workflow Build apps with reusable UI components that are agnostic to JavaScript frameworks Utilize Polymer and Vue.js in your day-to-day work Publish your UI components in npm (or Node Package Manager) Who This Book Is For The book is intended forIntermediateAdvancedlevel readers interested in single-page applications (SPAs), as well as Polymer, Vue.js, and Firebase. 02 02 User level: Intermediate-Advanced 04 02 Chapter 1: Web Components Chapter Goal: Understand the history of the web components as well as the concept and its core technologies. Sub-Topics What is a web component? History of the component Browser support for web components Core technologies Custom elements Summary Chapter 2: Making Your First Web Component Chapter Goal: We are going to build a simple component learning some critical concepts along the way. Sub-Topics Getting started CDD Micro frameworks Design systems Development Summary Chapter 3: HTML Template Chapter Goal: We will Cover the template features provided by web component API and build a simple dropdown component using these APIs. The template API provides many low-level features needed to create UI components Sub-Topics Introducing HTML templates Creating and using templates Content slot API Named slots Creating a web component Summary Front Matter ....Pages i-xv Making Your First Web Component (Carlos Rojas)....Pages 1-21 Custom Elements (Carlos Rojas)....Pages 23-30 HTML Template (Carlos Rojas)....Pages 31-40 Shadow DOM (Carlos Rojas)....Pages 41-51 ES Modules (Carlos Rojas)....Pages 53-60 Component Architecture (Carlos Rojas)....Pages 61-88 Distributing Web Components (Carlos Rojas)....Pages 89-102 Polymer (Carlos Rojas)....Pages 103-138 Working with Vue.js (Carlos Rojas)....Pages 139-193 Publishing (Carlos Rojas)....Pages 195-222 Back Matter ....Pages 223-226