Learning Web Component Development Discover the potential of web components using PolymerJS, Mozilla Brick, Bosonic, and ReactJS Sandeep Kumar Patel BIRMINGHAM - MUMBAI Learning Web Component Development Copyright © 2015 Packt Publishing All rights reserved No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews Every effort has been made in the preparation of this book to ensure the accuracy of the information presented However, the information contained in this book is sold without warranty, either express or implied Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals However, Packt Publishing cannot guarantee the accuracy of this information First published: May 2015 Production reference: 1180515 Published by Packt Publishing Ltd Livery Place 35 Livery Street Birmingham B3 2PB, UK ISBN 978-1-78439-364-9 www.packtpub.com Credits Author Sandeep Kumar Patel Reviewers Project Coordinator Akash Poojary Proofreaders Zhelan Chen Stephen Copestake Krzysztof Cislo Safis Editing Lars Kappert Sebastian Metzger Commissioning Editor Dipika Gaonkar Acquisition Editor Sam Wood Content Development Editor Anand Singh Technical Editor Prajakta Mhatre Copy Editors Charlotte Carneiro Sameen Siddiqui Indexer Rekha Nair Graphics Sheetal Aute Production Coordinator Melwyn D'sa Cover Work Melwyn D'sa About the Author Sandeep Kumar Patel is a senior web developer and the founder of www.tutorialsavvy.com, a programming blog that has been widely read since its inception in 2012 He has over years of experience in object-oriented JavaScript and JSON-based web applications development He is GATE-2005 Information Technology (IT) qualified and has a master's degree from VIT University, Vellore You can get to know more about him by looking at his LinkedIn profile (http:// www.linkedin.com/in/techblogger) He has received the DZone Most Valuable Blogger (MVB) award for technical publications related to web technologies His article can be viewed at http://www.dzone.com/users/sandeepgiet He has also received the Java Code Geeks (JCG) badge for a technical article published on the JGC website His article can be viewed at http://www.javacodegeeks.com/ author/sandeep-kumar-patel/ His other books are listed as follows: • Instant GSON • Responsive Web Design with AngularJS I would like to thank the three most important people in my life— my parents, Dilip Kumar Patel and Sanjukta Patel, for their love and my little sister, Sangeeta Patel, for her support and motivation A special thanks to the team at Packt Publishing, without whom this book wouldn't have been possible About the Reviewers Zhelan Chen graduated from the University of Texas at Dallas with a major in computer science She has worked as an IT staff member for several companies while developing Java EE, NET applications, websites, and web services She has been teaching computer courses part time at Dallas Community College for several years She holds several Oracle Java EE certificates Krzysztof Cislo is a software developer and architect with 10 years of professional experience focused on web applications He started his programming journey by working with websites created in the PHP language, during which time he also tried to stay up to date with frontend languages, such as JavaScript, HTML, and CSS After a while, he completely turned his focus to server-side technologies, such as the Java language, which became his main area of interest for a long time However, these days he focuses more on frontend-side technologies and is considering going back to the JavaScript world Lars Kappert (http://webpro.nl) is a Dutch frontend solution architect and lead developer He specializes in architecture, solutions, performance, tooling, and the development of websites and applications He works closely with a number of core web technologies, including HTML5, JavaScript, NodeJS, and CSS He is an active open source developer on GitHub (https://github.com/webpro), and publishes articles for Medium (https://medium.com/@webprolific), Smashing Mag (https://www.smashingmagazine.com/author/lars-kappert/), and more You can follow him on Twitter at @webprolific (https://twitter.com/webprolific) Sebastian Metzger graduated from the University of Erlangen-Nuremberg in Germany with a diploma in information systems He then worked for both big banking corporations and small start-ups, after which he founded his own software development and technology consulting company in 2014 He started creating single-page web applications in 2011 using Java with the Google Web Toolkit (GWT) Now he has moved on to full stack native JavaScript development that facilitates NodeJS and AngularJS Always looking into recent developments, he created his first web components app using Google Polymer in the summer of 2014, which can be found at http://foodtrack.de Be sure to check out his company web page at http://sebastianmetzger.com, where he regularly blogs about the latest technologies and trends www.PacktPub.com Support files, eBooks, discount offers, and more For support files and downloads related to your book, please visit www.PacktPub.com Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy Get in touch with us at service@packtpub.com for more details At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks https://www2.packtpub.com/books/subscription/packtlib Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library Here, you can search, access, and read Packt's entire library of books Why subscribe? • Fully searchable across every book published by Packt • Copy and paste, print, and bookmark content • On demand and accessible via a web browser Free access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view entirely free books Simply use your login credentials for immediate access Table of Contents Preface vii Chapter 1: Introducing Web Components What are web components? Benefits and challenges of web components The web component architecture Template element Template element detail Template feature detection Inert template Activating a template Cloning a node Importing a node HTML Import HTML Import feature detection Accessing the HTML Import document HTML Import events Shadow DOM Shadow DOM feature detection Shadow tree Custom element Custom element feature detection Developing a custom element Creating a new object Defining object properties Defining lifecycle methods Registering a new element Extending an element Example of a custom element 2 3 8 10 12 12 14 16 18 20 22 27 27 29 29 29 31 31 32 33 [i] Web Component References If some of these links not work, they are usually replaced by a new version You should locate the latest version as software changes are fairly rapid and common Chapter • W3C web component specification status: http://www.w3.org/standards/techs/components#w3c_all • W3C Shadow DOM specification: http://w3c.github.io/webcomponents/spec/shadow/ • W3C template specification: http://www.w3.org/TR/2013/WD-components-intro20130606/#template-section • W3C custom element specification: http://www.w3.org/TR/2013/WD-components-intro-20130606/#customelement-section • W3C HTML Import specification: http://www.w3.org/TR/2013/WD-components-intro20130606/#imports-section • Mozilla documentation on web component specification: https://developer.mozilla.org/en-US/docs/Web/Web_Components • W3C web component specification repository: https://github.com/w3c/webcomponents • Gallery of reusable components: http://component.kitchen/components • Ten Principles for Great General Purpose Web Components: https://github.com/basic-web-components/components-dev/wiki/ Ten-Principles-for-Great-General-Purpose-Web-Components [ 223 ] Web Component References • Web component articles from HTML5 rocks: http://www.html5rocks.com/en/search?q=web+component • Web components—the future of web development: http://html5-demos.appspot.com/static/cds2013/index.html#28 • Web component gallery: http://customelements.io/ • Article on custom element: http://www.smashingmagazine.com/2014/03/04/introduction-tocustom-elements/ • Article on Web Components a tectonic shift for web development: http://www.webcomponentsshift.com/#2 • Material design specification: http://www.google.com/design/spec/material-design/introduction html Chapter • The PolymerJS code repository: https://github.com/polymer/polymer • The CDN link for the PolymerJS library: http://cdnjs.com/libraries/polymer • Tutorials on the PolymerJS library: http://www.tutorialsavvy.com/search/label/polymer • Twitter handle for the PolymerJS library: https://twitter.com/polymer • Applications built with the PolymerJS library: http://builtwithpolymer.org/ • PolymerJS ready Chrome plugin to detect a web application is built in PolymerJS: https://chrome.google.com/webstore/detail/polymer-ready/ aaifiopbmiecbpladpjaoemohhfjcbdk Chapter • Vulcanize process details: https://github.com/polymer/vulcanize • YouTube videos for the PolymerJS library: http://www.youtube.com/playlist?list=PLm0Hvc2jKkpAfjR2xuBFUPD4s 7n-fg023 [ 224 ] Appendix • Stack overflow community group for PolymerJS: http://stackoverflow.com/questions/tagged/polymer • Building Web Apps With Yeoman And Polymer: http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/ • Concatenating Web Components with Vulcanize: https://www.polymer-project.org/articles/concatenating-webcomponents.html • Building Web Apps With Yeoman And Polymer: http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/ • Google Chrome development editor for PolymerJS-based application development: https://chrome.google.com/webstore/detail/chrome-dev-editordevelop/pnoffddplpippgcfjdhbmhkofpnaalpg?hl=en Chapter • Twitter handle for the Bosonic library: https://twitter.com/bosonic_project • Bosonic built-in elements: http://bosonic.github.io/elements.html Chapter • Mozilla documentation on the Brick library: https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/ Web_components • Twitter handler for Mozilla Brick library: https://twitter.com/mozbrick • X-Tag library documentation: http://www.x-tags.org/docs • TechCrunch article on Mozilla Brick: http://techcrunch.com/2013/09/01/mozilla-gets-on-the-webcomponents-bandwagon-with-brick/ • Mozilla Brick online designer tool: https://apps.webmaker.org/designer [ 225 ] Web Component References Chapter • Stack overflow community group for ReactJS: http://stackoverflow.com/questions/tagged/reactjs • Google group for ReactJS library: https://groups.google.com/forum/#!forum/reactjs • ReactJS JSFiddle: http://jsfiddle.net/reactjs/69z2wepo/ • ReactJS JSFiddle without JSX: http://jsfiddle.net/reactjs/5vjqabv3/ • ReactJS starter kit: http://facebook.github.io/react/downloads/react-0.12.2.zip • Tutorials on ReactJS library: http://www.tutorialsavvy.com/category/tutorials/javascript/ reactjs/ • ReactJS conference 2015 video talks: http://www.youtube.com/playlist?list=PLb0IAmt7GS1cbw4qonlQztYV1TAW0sCr [ 226 ] Index A asynchronous task execution 121, 122 auto-binding feature URL 96 used, for Polymer templating 94-96 B Bosonic about 133 built-in elements 135 configuring 134 library, URL 53 lifecycle 148 packages 134, 135 supported browsers 134 URL 134 Bosonic packages about 134 Bosonic platform 135 Bosonic transpiler 135 Grunt Bosonic 135 Yeoman Bosonic 135 Bower URL 57, 163 brick-action element about 176-179 URL 179 brick-calendar element 166 brick-deck element about 169-173 URL 173 brick-flipbox element about 166-169 URL 169 brick-menu element 179, 180 brick-tabbar element about 173-175 URL 176 built-in components, Mozilla Brick 1.0 about 165 brick-action element 176, 177 brick-calendar element 166 brick-deck element 169-172 brick-flipbox element 166-169 brick-menu element 179, 180 brick-tabbar element 173-175 built-in elements, Bosonic library about 135 b-sortable element 135-138 b-toggle-button element 139, 140 URL 135 built-in filtering expression, Polymer expressions about 99 styleObject filter 101, 102 TokenList filter 99, 100 C Can I Use tool URL cloneNode method URL 10 using componentWillUnmount method 207 content insertion point 34-36 core elements, PolymerJS architecture about 63, 64 core-input element 64-66 core-label element 67, 68 [ 227 ] core-tooltip element 69-71 URL 63, 64 core-input element URL 66 custom component element code, defining 143, 144 current directory, changing to red message 142 developing 141 directory structure, verifying 143 distribution files, generating with Grunt 145-147 index.html demo file, modifying 144 index.html file, running 148 red-message element directory, creating 141 skeleton, generating for 142 custom element about 27 developing 29, 110-112 element, extending 32 example 33 extending 112-114 feature detection 27, 28 lifecycle methods, defining 31 new element, registering 31 new object, creating 29 object properties, defining 29, 30 custom X-Tag element accessors property 49 creating 48-52 events property 49 lifecycle property 49 methods property 49 D digital clock developing 123-159 developing, with X-Tag library 182-186 ReactJS, using 217 digital clock component building 43 clock element registration script 44, 45 digital clock template 43, 44 using 46, 47 digital clock, developing with ReactJS about 217 CSS styles, defining 218 lifecycle script, defining 217, 218 DocumentFargment about URL document.registerElement method URL 32 E elements, PolymerJS architecture core elements 63 paper elements 72, 73 F Flash of Unstyled Content (FOUC) 91 flux architecture action 189 application, working 190 dispatcher 189, 190 key features 190 store 189, 190 URL 191 views 189, 190 forceReady method 120 G GitHub token URL 84 Google Material Design URL 73 Grunt used, for generating distribution files 145-147 grunt-vulcanize URL 132 gulp-vulcanize URL 132 [ 228 ] H J HTML import about 12 document, accessing 14, 15 error event 16 events 16, 17 feature detection 12-14 handleError method 17 handleSuccess method 17 load event 16 HTML element about activating detail 3, inert template 6-8 interface definition language (IDL) definition node, cloning 8, node, importing 10 template feature detection 4-6 JavaScript XML (JSX) about 194 benefits 194 custom component, using 195, 196 event handling, in ReactJS 198-200 inline style, adding in ReactJS 196-198 non-DOM attributes 200-203 I IDL, shadow root element about 22 activeElement 23 elementFromPoint 23 getElementById 23 getElementsByClassName 23 getElementsByTagName 23 getElementsByTagNameNS 23 getSelection 23 host 23 innerHTML 23 olderShadowRoot 23 styleSheets 23 importNode method using 10 initialization phase, ReactJS about 204 componentWillMount method 205 getDefaultProps method 205 getInitialState method 205 L lifecycle, Bosonic callback methods 148 example 149-155 lifecycle, ReactJS example 207-209 initialization phase 204, 205 lifetime phase 204-206 teardown phase 204-207 URL 209 lifetime phase, ReactJS about 206 componentDidUpdate method 206 componentWillRecieveProps method 206 componentWillUpdate method 206 render method 206 shouldComponentUpdate method 206 M Mozilla Brick about 53, 161 configuring 164, 165 installing 163, 164 Mozilla Brick 1.0 162 Mozilla Brick 2.0 162 URL 53, 161 Mozilla Brick 1.0 about 162 built-in components 165 Mozilla Brick 2.0 162, 163 Mutation observer URL 61 [ 229 ] N P node distribution about 34 content insertion point 34-36 shadow insertion point 37, 38 node, HTML element cloning 8, deep cloning importing 10 shallow cloning node package manager (npm) 57, 130, 135 non-DOM attributes dangerouslySetInnerHTML 200 key 200 ref 200 paper elements, PolymerJS architecture about 72, 73 material design 74 paper-button element 79-81 paper-checkbox element 74-76 paper-slider element 77, 78 URL 73 paper-slider element URL 78 placeholder 34 polyfill URL 163 Polymer about 55 configuring 55 core layer 60 element generator, URL 89 elements layer 60 expressions 92 foundation layer 60 GitHub page generator, URL 90 installing 55 native layer 60 Polymer library 62 template attributes 96 templating, with auto-binding 94-96 web components, using with polyfill 61 Polymer configuration Bower, using 57-59 GIT clone, using 56, 57 ZIP file, downloading 56 Polymer custom element attributes, defining 107 default attributes defining 107 defining 106 developing 105 lifecycle method, defining 109, 110 methods, defining 107, 108 properties, publishing 108 public properties, defining 107, 108 registering 110 Polymer designer tool about 81-83 e-mail subscription form, developing 85, 86 GitHub token, obtaining 84 O Object.create method URL 29 Object.defineProperty method URL 30 object lifecycle, custom element attached state 31 attributeChanged state 31 created state 31 detached state 31 object properties, custom element propertyName 30 propertySettings 30 targetObject 30 operations, Polymer expressions array access 93 array and object initializers 94 binary operators 93 comparators 93 function 94 identifiers and paths 93 literal values 94 logical comparators 93 logical not operator 93 parenthesis 93 ternary operator 93 unary operators 93 [ 230 ] URL 82 used, for developing 83 polymer directory layout.html file 62 polymer.html file 63 polymer.js file 62 polymer-min.js file 62 Polymer expressions about 92 built-in filtering expression 99 custom filtering expression 102 filtering 99 global filtering expression 104 operations 93 Polymer templating 94 polymer-generator commands about 88 polymer application generator 88 Polymer element generator 89 Polymer GitHub page generator 90 Polymer seed generator 89 Polymer.import method 117 Polymer installation Bower, using 57-59 GIT clone, using 56, 57 ways 55 ZIP file, downloading 56 PolymerJS architecture about 60 elements 63 PolymerJS ready event 91, 92 Polymer library about 53 URL 53 Polymer methods about 114 forceReady method 120, 121 import method 117, 118 mixin method 114-116 waitingFor method 118, 119 Polymer seed generator URL 89 precompiled JSX JSX file watcher 216 used, for production 212-215 propertySettings, custom element configurable 30 enumerable 30 get 30 set 30 value 30 writable 30 pseudo selectors about 39 content pseudo selector 39 host pseudo selector 39 shadow pseudo selector 39 unresolved pseudo selector 39 R React Developer Tool about 219-221 URL 219 ReactJS addon 192 approach 189 component lifecycle 204 configuring 192 core library 192 debugging 219, 220 debugging tool, URL 219 event handling 198 inline style 196-198 installing 191, 192 JSX transformer library 192 URL 53 using 192, 193 using, for digital clock 217 reprojection 34 S Shadow DOM about 18 enabling 19 feature detection 20, 21 Shadow DOM tree about 22 composed tree 22 document tree 22 example 24-26 [ 231 ] host element 22 IDL, of shadow root element 22 sample DOM tree 22 shadow host 22 shadow tree 22 shadow insertion point 37, 38, 113 stateful custom component 210, 211 supported browsers, Bosonic 134 T template attributes, Polymer about 96-98 bind 96 if 96 ref 96 repeat 96 toggle method 168 transpiler 133 U UIKit 161 polyfill, URL 62 references 223-226 styling 39-42 X X-Tag library about 47, 180, 181 attributeChanged event 48 Bosonic library 53 core library, URL 48 created event 47 custom element development 48-52 files 181 inserted event 47 lifecycle 47 Mozilla Brick library 53 Polymer library 53 ReactJS library 53 removed event 48 URL 47, 180, 181 used, for developing digital clock 182-186 V Y vulcanize installation 130 process, running 131, 132 URL 132 used, for preparing production 130 Yeoman about 87 element generator 125-127 GitHub page generator 129 GitHub page generator, URL 130 polymer-generator commands 88 seed generator 128, 129 working with 125 W waitingFor method 118 WeakMap URL 61 web components about architecture 2, benefits challenges Z ZIP file URL, for downloading 56 [ 232 ] Thank you for buying Learning Web Component Development About Packt Publishing Packt, pronounced 'packed', published its first book, Mastering phpMyAdmin for Effective MySQL Management, in April 2004, and subsequently continued to specialize in publishing highly focused books on specific technologies and solutions Our books and publications share the experiences of your fellow IT professionals in adapting and customizing today's systems, applications, and frameworks Our solution-based books give you the knowledge and power to customize the software and technologies you're using to get the job done Packt books are more specific and less general than the IT books you have seen in the past Our unique business model allows us to bring you more focused information, giving you more of what you need to know, and less of what you don't Packt is a modern yet unique publishing company that focuses on producing quality, cutting-edge books for communities of developers, administrators, and newbies alike For more information, please visit our website at www.packtpub.com About Packt Open Source In 2010, Packt launched two new brands, Packt Open Source and Packt Enterprise, in order to continue its focus on specialization This book is part of the Packt Open Source brand, home to books published on software built around open source licenses, and offering information to anybody from advanced developers to budding web designers The Open Source brand also runs Packt's Open Source Royalty Scheme, by which Packt gives a royalty to each open source project about whose software a book is sold Writing for Packt We welcome all inquiries from people who are interested in authoring Book proposals should be sent to author@packtpub.com If your book idea is still at an early stage and you would like to discuss it first before writing a formal book proposal, then please contact us; one of our commissioning editors will get in touch with you We're not just looking for published authors; if you have strong technical skills but no writing experience, our experienced editors can help you develop a writing career, or simply get some additional reward for your expertise AngularJS Web Application Development Cookbook ISBN: 978-1-78328-335-4 Paperback: 346 pages Over 90 hands-on recipes to architect performant applications and implement best practices in AngularJS Understand how to design and organize your AngularJS application to make it efficient, performant, and scalable Discover patterns and strategies that will give your insights into the best ways to construct production AngularJS applications Get the most out of AngularJS by gaining exposure to real-world examples AngularJS UI Development ISBN: 978-1-78328-847-2 Paperback: 258 pages Design, build, and test production-ready applications in AngularJS Design and customize applications with mobile users in mind using open source CSS3 frameworks Use polished UI components written from scratch solely in AngularJS to build real-world applications with a comprehensive, step-by-step guide Learn using a proven workflow from setting up the environment to testing in order to be productive in writing ambitious applications Please check www.PacktPub.com for information on our titles MEAN Web Development ISBN: 978-1-78398-328-5 Paperback: 354 pages Master real-time web application development using a mean combination of MongoDB, Express, AngularJS, and Node.js Learn how to construct a fully functional MEAN application by using its components along with the best third-party modules Harness the power of the JavaScript ecosystem to effectively run, build, and test your MEAN application Gain a deep, practical understanding of real-time web application development through real-world examples Learning Single-page Web Application Development ISBN: 978-1-78355-209-2 Paperback: 214 pages Build powerful and scalable single-page web applications using a full stack JavaScript environment with Node.js, MongoDB, AngularJS, and the Express framework Deal with user authentication on single page web application Test with Karma and Protractor Continuous deployment with automated tools Please check www.PacktPub.com for information on our titles ... library web component libraries What are web components? Web components are a W3C specification to build a standalone component for web applications It helps developers leverage the development... problem leads to component-based development [1] Introducing Web Components Benefits and challenges of web components There are many benefits of web components: • A web component can be used in multiple.. .Learning Web Component Development Discover the potential of web components using PolymerJS, Mozilla Brick, Bosonic, and ReactJS Sandeep Kumar Patel BIRMINGHAM - MUMBAI Learning Web Component