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.

Based on an article from 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, 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.

As an example - from ( https://css-tricks.com/an-introduction-to-web-components/ ) - More details can be directly accessed from the link.

HTML

<template id="book-template">
  <li><span class="title"></span> &mdash; <span class="author"></span></li>
</template>

<ul id="books"></ul>

JS

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);
});

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 as a bundling tool could help.

• Separate my components, into individual folders - with separate HTML + CSS & JS files

• Configure Webpack to bundle everything together, injecting it into index.html

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

This is better.

• It makes the project more manageable.

• Adding custom CSS, icon libraries became a bit easier.

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

Approach 3

Switch back to using a Framework - Angular, React, Vue, Svelte etc. But

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 )

Finally

So, I started looking for Web Component frameworks, and came across StencilJS ( part of the IONIC ecosystem ) . I have worked with Ionic 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 -

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 - liked it, But always had that nagging feeling of

Will I be able to do everything that i can do with Angular? with the same ease.

Let's Find out...