# Why this book?

I have been an Angular developer for the past 5 years.  Started out with Angular 1.3 and over the years have jumped across to Angular 2, 4, 6, 8 and 9 - and will continue to move to 11 and ...

My web development career is very synonymous with Angular. I never did any JQuery, plain JS development, Ajax nothing, at least not anything production grade.

> A couple of weeks earlier, I decided to explore something different.&#x20;

Based on an article from [https://daily.dev/](https://daily.dev/) , I was looking to build out a Chrome Extension.  I initially started with just Plain JS, but then as the web-page evolved into having headers, footers, cards etc, a more _component based approach_ seemed necessary. ( and more technically rewarding ).

### Approach 1

Started with simple Web Components, [https://www.webcomponents.org/introduction](https://www.webcomponents.org/introduction), with basic customElements, ShadowDOM, ES Modules, HTML Template etc. \
It was fine, but coming from an Angular world, i started to miss out on the fun features, that i have grown so comfortable with.&#x20;

As an example - from ( [https://css-tricks.com/an-introduction-to-web-components/](https://css-tricks.com/an-introduction-to-web-components/) ) - _More details can be directly accessed from the link._&#x20;

{% tabs %}
{% tab title="HTML" %}
```markup
<template id="book-template">
  <li><span class="title"></span> &mdash; <span class="author"></span></li>
</template>

<ul id="books"></ul>
```
{% endtab %}

{% tab title="JS" %}
```javascript
const fragment = document.getElementById('book-template');
const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
  { title: 'A Farewell to Arms', author: 'Ernest Hemingway' },
  { title: 'Catch 22', author: 'Joseph Heller' }
];

books.forEach(book => {
  // Create an instance of the template content
  const instance = document.importNode(fragment.content, true);
  // Add relevant content to the template
  instance.querySelector('.title').innerHTML = book.title;
  instance.querySelector('.author').innerHTML = book.author;
  // Append the instance ot the DOM
  document.getElementById('books').appendChild(instance);
});
```
{% endtab %}
{% endtabs %}

Wait.. **what is this for loop?.** I am so used to \*ngFor within the HTML file for a component, that this took me by surprise. \
It's one thing to write it once, but to write this for 20+ components, who's going to maintain this !!.

### Approach 2

A bit more Googling, and i found that using [Webpack ](https://webpack.js.org/)as a bundling tool could help. &#x20;

* [x] Separate my components, into individual folders - with separate HTML + CSS & JS files
* [x] Configure Webpack to bundle everything together, injecting it into index.html&#x20;

Read more about the implementation here - [https://roshan-khandelwal.medium.com/web-components-c7aef23fe478](https://roshan-khandelwal.medium.com/web-components-c7aef23fe478)

This is better.&#x20;

* It makes the project more manageable.&#x20;
* Adding custom CSS, icon libraries became a bit easier.&#x20;

The JS part, not so much. It still stays the same. \
Iterating over data and setting in into HTML, still feels very cumbersome.&#x20;

### Approach 3

_Switch back to using a Framework_ - Angular, React, Vue, Svelte etc. \
**But**&#x20;

1. I wanted to be a bit more in control of the rendering process, this time ( with Angular, if you are not observant, CD could run amok )
2. Be a bit closer to the standards.
3. And while you are doing this, make the HTML a bit more cleaner. ( I love the directives, but i would still like a bit more cleaner HTML ) &#x20;

### Finally

So, I started looking for Web Component frameworks, and came across [StencilJS ](https://stenciljs.com/)( _part of the IONIC ecosystem_ ) . \
I have worked with [Ionic ](https://ionic.io/)before for building a Hybrid app - _**AmIThere** ( never published on the APP Store. Should publish another book ),_ and loved their documentation.

Two things, work in its favor - &#x20;

1. Stencil components are just Web Components, so they work with any major framework or no framework at all.
2. _Stencil was created to power the components for Ionic Framework_ - a cross-platform mobile development technology stack.

Took a day - went through its [documentation ](https://stenciljs.com/docs/introduction)- liked it, But always had that nagging feeling of&#x20;

> _Will I be able to do everything that i can do with Angular? with the same ease_**.**&#x20;

&#x20;**Let's Find out...**
