Building modern web appswith web components

Martin Naumann

This book is for sale athttp://leanpub.com/webcomponents

This version was published on 2014-06-03

This is a Leanpub book. Leanpub empowers authors andpublishers with the Lean Publishing process. LeanPublishing is the act of publishing an in-progress ebookusing lightweight tools and many iterations to get readerfeedback, pivot until you have the right book and buildtraction once you do.

©2014 Martin Naumann

Tweet This Book!Please help Martin Naumann by spreading the wordabout this book on Twitter!

The suggested hashtag for this book is #webcomponents.

Find out what other people are saying about the book byclicking on this link to search for this hashtag on Twitter:

https://twitter.com/search?q=#webcomponents

Contents

1 Introduction . . . . . . . . . . . . . . . . . . . 1

1 IntroductionTo dive into the matter let’s look at how web apps are builttoday.In contrast to websites most web apps are single pageapplications.

That means they do not work in terms of multiple request-response cycles but use a set of resources (a single HTMLfile plus CSS, Javascript, images, etc.) and, if at all, loadadditional content asynchronously via AJAX.

In those applications the UI is roughly described withHTML markup and CSS and Javascript are then used tomake the different components look and behave as desired.Here is a simple example of a filterable list:

1 <div class="filterList">

2 <label for="filterTerm">Search for: </label>

3 <input id="filterTerm">

4 <ul>

5 <li>Sailing</li>

6 <li>Scuba diving</li>

7 <li>Surfing</li>

8 <li>Jet ski</li>

9 <li>Diving</li>

Introduction 2

10 </ul>

11 </div>

12 <script>

13 document.getElementById("filterTerm").addEven\

14 tListener("keyup", function() {

15 var items = document.querySelectorAll(".fil\

16 terList li");

17 for(var i=0; i<items.length;i++) {

18 items[i].style.display =

19 (items[i].textContent.match(this.value)\

20 ? "block" : "none");

21 }

22 });

23 </script>

While this code creates a filterable list of items, it presentsa few problems in regards to reusability, readability andmaintainability.

First of all all the markup needs to be repeated everytime we want to use this component. Then we will runinto issues with the ID for the input field - an ID has tobe unique in the whole document. We could use a classinstead but the label relies on the ID to link itself to thefield it describes. We could, of course, not use the linkbetween label and input field but that would be a violationof accessibility guidelines and lacks semantic meaning.

We’d also need to be careful that stylesheets that may beused somewhere in the application do not do unexpected

Introduction 3

things that conflict with the style we want for our filterablelist.

Consider this alternative, pretending that it appears andworks as the previous example did:

1 <fl>

2 <li>Sailing</li>

3 <li>Scuba diving</li>

4 <li>Surfing</li>

5 <li>Jet ski</li>

6 <li>Diving</li>

7 </fl>

This is an example of a custom element (fl for “filterablelist”), made possible by the new web components stan-dards.

In the following chapters we will tackle three big topics:

1. Web components2. Building web apps3. Mobile web apps

Each of the topics will be as independent as possible, so thatyou can, for example, only read the first part or the secondand third, whatever fits your knowledge and interest.

Last but not least: The cover image is courtesy of http://creativity103.comand is licensed under the CC-BY 3.0 license.