Image for post
Image for post

This article chronicles a small part of my journey towards creating a full website that can be rendered in three parallel frameworks and three parallel design systems (React + Material UI; Angular + Clarity; “Vanilla” JS + Carbon).

Next article: Setting up a simple Typescript project

My goal is to start with a “blank canvas” (an empty directory) and build a full web app that can runs in three parallel frameworks (or lack thereof), and three parallel design systems:

… while sharing as much code as possible.

I…


Image for post
Image for post

This article chronicles a small part of my journey towards creating a full website that can be rendered in two parallel frameworks and design systems (React + Material UI; Angular + Clarity), plus a “vanilla” implementation with all components and business logic written “by hand”.

← Previous article: A new structure for my single page application

One of the classic early lessons when learning how to build components for your web app is the “click counter button”:


Image for post
Image for post

This article chronicles a small part of my journey towards creating a full website that can be rendered in two parallel frameworks and design systems (React + Material UI; Angular + Clarity), plus a “vanilla” implementation with all components and business logic written “by hand”.

← Previous article: HTML templates in Webpack

→ Next article: Using TDD to build a “click counter button” in TypeScript

I started this project with the goal of creating a website that could be rendered in parallel in React, Angular, and “Vanilla” JavaScript. I also wanted to start from a blank canvas. Several steps later…


Image for post
Image for post

This article chronicles a small part of my journey towards creating a full website that can be rendered in three parallel frameworks and three parallel design systems (React + Material UI; Angular + Clarity; “Vanilla” JS + Carbon).

← Previous article: Jest, Typescript, and unit testing

→ Next article: A new structure for my single page application

To this point, I have intentionally built my site entirely in Typescript, including building and rendering content. While this works well to practice a pattern, explore a technique, or to prove a point, it isn’t a great long-term solution. …


Image for post
Image for post

This article chronicles a small part of my journey towards creating a full website that can be rendered in three parallel frameworks and three parallel design systems (React + Material UI; Angular + Clarity; “Vanilla” JS + Carbon).

← Previous article: Code quality: Prettier and ESLint

→ Next article: HTML templates in webpack

I am a strong advocate not only for writing quality code, but ensuring its correct behavior through effective testing. When I started this project, one of my first tasks was to switch from Javascript to Typescript; while Typescript is not commonly thought of as a testing framework…


Image for post
Image for post

This article chronicles a small part of my journey towards creating a full website that can be rendered in three parallel frameworks and three parallel design systems (React + Material UI; Angular + Clarity; “Vanilla” JS + Carbon).

← Previous article: Adding webpack to a HTML+Typescript project

→ Next article: Jest, Typescript, and unit testing

I am a huge fan of clean, readable, well-formatted code. …


Image for post
Image for post

This article chronicles a small part of my journey towards creating a full website that can be rendered in three parallel frameworks and three parallel design systems (React + Material UI; Angular + Clarity; “Vanilla” JS + Carbon).

← Previous article: Refactoring an HTML site into Typescript, part 2of 2

→ Next article: Code quality: Prettier and ESLint

This article starts at this commit in my “Parallel Frameworks Project”. At this point, the project is a simple single page application (SPA) with source code written and built with Typescript, and loaded into a single HTML template.

This setup worked well…


Image for post
Image for post
Code snippet from my new TypeScript-powered navigation system

This article chronicles a small part of my journey towards creating a full website that can be rendered in three parallel frameworks and three parallel design systems (React + Material UI; Angular + Clarity; “Vanilla” JS + Carbon).

← Previous article: Refactoring an HTML site into TypeScript, part 1 of 2

→ Next article: Adding webpack to a HTML + TypeScript site

Note: The navigation system described below is very basic, with only rudimentary functionality. There are plenty of ways in which this system could be extended and improved, and I’ll almost certainly cover some of these improvements in later…


Image for post
Image for post
The contents of index.ts, the entrypoint to my source code, after the updates in this two-part series.

This article chronicles a small part of my journey towards creating a full website that can be rendered in three parallel frameworks and three parallel design systems (React + Material UI; Angular + Clarity; “Vanilla” JS + Carbon).

← Previous article: Setting up a simple Typescript project

→ Next article: Refactoring an HTML site into Typescript: Part 2 of 2

I recently discussed creating a simple “Hello, World!” website in Typescript. Now that the basic tools are in place, I want to:

  • Add some more content, at first as static HTML
  • Render the content using Typescript, rather than static HTML


Image for post
Image for post
Photo by Arnold Francisca on Unsplash

This article chronicles a small part of my journey towards creating a full website that can be rendered in three parallel frameworks and three parallel design systems (React + Material UI; Angular + Clarity; “Vanilla” JS + Carbon).

← Previous article: Hello, World!

→ Next article: Refactoring a static HTML site into TypeScript, part 1 of 2

In my previous (and first!) article, I created a very basic HTML+JS page: A single index.html file for a template, and a single index.js that rendered “Hello, World!” in said template. …

Simon Lutterbie

Frontend Developer committed to clean, readable, tested code. Typescript, React, Angular, and more. Also: PhD in Social Psychology, avid cook, budding runner.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store