[WIP] Phase 1 Case Study

[thescientist13]

Overview

Just using this discussion to track some general thoughts and observations as part of migrating www.analogstudios.net from Angular -> Greenwood + Lit (e.g. Web Components). i had used Bootstrap + Font Awesome at the time for styling, and so that will stay the same as well. Using this issue to track the before and after and grouping it all here.

While the migration will take a few iterations, the specific scope of Phase 1 was to:

1. Move to pure WCs for the UI
2. Keep the infrastructure (mostly) running in AWS
   • Frontend: Netlify
   • Backend: EC2 w/ AMP stack
3. Keep the existing design "system"
4. Evaluate technologies and tools like WTR, Storybook, creating custom Greenwood plugins for TS and SASS

Over time, the plan will be to

• Leverage Storybook to experience creating a design system with Web Components and only the platform
• Migrate the custom admin dashboard I built to markdown or use something like Netlify CMS. That kind of data barely ever changes, no need for it to be in a DB.
• Adopt a more hybrid Jamstack architecture with Greenwood, ideally making content more statically generated over time (like artists and albums, etc) . Dream would be static generation up front backed by serverless between deployments, and basically no AMP stack?

Bundle Size and Performance (Production)

4.3 MB! 😱 (what was I thinking!)

ng2-lighthouse-report.pdf

Adopting Lit

So this part was pretty easy as Angular components are classes and this maps well to Web Components since they are also classes. All the business logic and methods and lifecycles were super easy

Before

// before
import { Component, OnInit } from '@angular/core';
import { PostInterface, PostsService  } from '../../services/posts.service';

@Component({
  selector: 'as-posts-list',
  templateUrl: './posts-list.html',
  styleUrls: [ './posts-list.scss' ]
})

export class PostsListComponent implements OnInit {
  private MAX_POSTS: number = 2;
  private posts: Array<PostInterface> = [];

  constructor(private PostsService: PostsService){
  }

  ngOnInit(): void {
    this.PostsService.getPosts().subscribe((data: Array<PostInterface>) => {
      this.posts = data.reverse();
    }, (err) => {
      console.error('error', err);
    })
  }

  getMaxPosts(): number {
    return this.MAX_POSTS;
  }
}

<div class="container as-card">
  <div class="row">
    <div class="col-xs-12">

      <div class="card-row hidden-sm-down" [routerLink]="getCardOptions().link">
        <div class="media">

          <div class="media-left">
            <img class="media-object" src="{{getCardOptions().imagePath}}" alt="{{getCardOptions().imageAltText}}">
          </div>

          <div class="media-body">
            <h4 class="media-heading">{{getCardOptions().headingText}}</h4>
            <p [innerHTML]="getCardOptions().bodyText"></p>
          </div>

        </div>
      </div>

      <div class="card-row hidden-md-up" [routerLink]="getCardOptions().link">
        <h4>{{getCardOptions().headingText}}</h4>
        <img [src]="getCardOptions().imagePath" alt="{{getCardOptions().imageAltText}}">
      </div>

    </div>

  </div>
</div>

After

import { css, html, LitElement, unsafeCSS, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { Details } from './card.model.ts';
import cardCss from './card.css?type=css';

@customElement('app-card')
export class CardComponent extends LitElement {
  @property() details: Details;

  static styles = css`${unsafeCSS(cardCss)}`;

  protected render():TemplateResult {
    const { details } = this;

    return html`
      <div class="container as-card">
        <div class="row">
          <!-- why doesn't col-xs-12 work here -->
          <div class="col-xs-12">

            <a href="${details.link}" title="Visit ${details.headingText}">
              <div class="card-row hidden-sm-down">
                <div class="media">

                  <div class="media-left">
                    <img class="media-object" src="${details.imagePath}" alt="${details.imageAltText}">
                  </div>

                  <div class="media-body">
                    <h4 class="media-heading">${details.headingText}</h4>
                    <p>${unsafeHTML(details.bodyText || '')}</p>
                  </div>

                </div>
              </div>
            </a>

            <a href="${details.link}" title="Visit ${details.headingText}">
              <div class="card-row hidden-md-up">
                <h4>${details.headingText}</h4>
                <img src="${details.imagePath}" alt="${details.imageAltText}">
              </div>
            </a>

          </div>

        </div>
      </div>
    `;
  }
}

As far as the Angular CLI and TypeScript, this project uses a general purpose web framework I've been working on called Greenwood that provides all the basic development workflows and have even been able to create a TypeScript plugin for the project, though I am still in progress on a SASS one. Personally, I would like to avoid any CSS processing at all other than for some simple PostCSS plugins to preserve for now I will have to source my own SASS plugin, which I've already started on.

Opportunities and Action Items

1. Unnest CSS to reduce external CSS plugin npm dependencies
2. Adopt SASS / SCSS plugin (could help with bundle size)?
3. Upgrade from Bootstrap v5 as per Octal literals and escape sequences are not allowed in template strings (only in development) ProjectEvergreen/greenwood#766

CSS and Theming

See #28

So this part was definitely the thorniest, and mostly I would say to how spoiled we all got with bundler tools letting you import anything in JavaScript and it would "just" work. While that's super convenient and certainly hve been a beneficiary of that, it rarely translates well outside of its ecosystem which while is fair, captures the spirit of why I started Greenwood in the first place, to address the vendor lock-in that is pervasive amongst frontend tools and frameworks today, especially of the meta variety.

So while getting all this "legacy" code to work, which itself is just CSS has been challenging, it provide an opportunity to try and see if there is a way to make the experience better. I am tracking some of these ideas down at the Greenwood level.
ProjectEvergreen/greenwood#763

Opportunities and Action Items

1. Breakout of Shadow DOM to avoid duplicate styles - deduped CSS and refactored to not use Shadow DOM #56
2. Should theme.css include anything other than variables and so should everything else go in styles.css?
3. Should measure the bundle / performance of having all this CSS in JS

DX

TODO

[thescientist13]

Round 1 of Lighthouse taken at commit 99ef6ed

round-1-lighthouse.pdf