EdPike365

Front End Tech

August 23, 2021

HTML, CSS, JS | Design | UI Frameworks | Auth | Build Tools | Testing

HTML, CSS, JS

These are the core: Data, presentation, logic. Everything else is an elaboration.

  • Problems with Javascript:

    • Javascript is loosely typed. Developing a complex app requires discipline or it is easy to end up with spaghetti code and horrific bugs. Typescript and JSDoc are fine attempts to fix this, but they add a layer of complexity. In any case, automated testing of complex web apps is crucial because its too easy to introduce regression with loosely typed, or complexly typed, languages.

    • Wasm: Web browsers need a strongly typed alternative to JS. Typescript is a clever bridge but someday we’ll complile strongly typed languages to Wasm and be done with it. As per Google.io 2023, Wasm is also gaining speedy access to GPUs, through WebGPU. In the age of AI, thats a big deal.

Design

  • I have a minor in Architecture. I appreciate good design. However, the fundamental physical reality is that web apps run over a network and increasingly (usually?) operate on a mobile device. The devices can be very small and have various UI constraints. Therefore, design must place high weight on other factors.
    • Mobile First, responsive
    • Ecological Design: Animations, even mouseovers, use energy. Light color themes use more battery than dark mode themes. It not only affects user engagement and retention, at scale it is an ecological issue.
    • Accessiblity (a11y): This is a broad topic. Low hanging fruit: Use REM for font sizes. A lot of people can’t read tiny fonts on their mobile devices, out in the sun. Screen readers are helpful for everyone but require extra work.
    • Simplicity: Don’t make scrolling alter the size of web elements, or play animation, instead of scrolling. I’m looking at you Google Store.
  • Lighthouse: Build a good LightHouse score into your CI/CD pipeline.

UI Frameworks

  • React: I’m not a huge fan of JSX or any framework that uses shadow DOMs. BUT its the leading SPA tech by a long shot so I’ve learned it.

    • GatsbyJS SSG, GraphQL, highly opinionated. I picked this for my site just before NextJS added SSG. If I had to do it again, I’d likely pick NextJS. The GraphQL data lake is cool but it is limitiing when you want to pull in data during certain build phases.
    • NextJS SSR, and now SSG. I’m interested in trying this out to compare with Gatsby.
    • Redux State container. I like what it gives you (replayability), but I don’t like the nomenclature (reducers?). They should use event bus nomenclature and it would be more clear. I will try Redux Toolkit at some point in 2022.
    • Reach Router Used by Gatsby.
    • Vercel They own NextJS. They are competing with Netlify, GatsbyJS.
    • Create React App

  • Svelte: Compiles to vanilla JS during build. Reactive, NO SHADOW DOM. I am VERY interested but have not built anything yet. Vercel hired its creator in late 2021. In 2023 they are transitioning away from TS.

  • Angular 2+ I love that its Typescript from the ground up but unfortunately market share is low. Having TS at the core vs an addon means the value starts to balance out the added complexity. Coming from JSP development, it has a lot to offer. Strong typing, event driven, dependency injection.

    • AngularJS is legacy and very different from Angular 2+.

  • Vue I decided to ignore this one because I have to draw boundaries somewhere. Sounds like an improvement over React but Svelte is where I think things are heading.

  • JQuery: The old fat standby, but recently lighter (30kB) and more modular. Polyfill vanilla apps. Good for non-SPA intranet apps.

  • Component Libraries

    • Bootstrap: I like the large ecosystem. Very approachable. Heavy, sadly.
    • Material-UI: less approachable but I appreciate its design philosphy. Also heavy.
    • Web Components I’m watching this. Unfortunately, it uses a Shadow DOM.
    • Figma I’ve played with this but I have not used it in production.
    • Adobe XD I think Figma is displacing this.

  • CSS: I prefer using StyleSheets the way they were designed: with CSS variables at the top level, like Grandma taught me. I like using Material Design and Typography to generate default values. Then, I use locally scoped CSS that refers to the top level style sheet classes and variables.

Client Side Authentication, Authorization

Cloud SDKs

Build Tools

Testing

  • Jest

  • Mocha.js: Test framework/suite. Modular.

  • Chai: TDD and BDD assertion framework. Mocah pluginable.

  • Sinon.js: stub, spy, mock. Standalone or plugin.

  • Jasmine No external dependencies!

  • Runtime Testing

Other

  • Flutter BACK BURNER. Same code base can build mobile, web, desktop. Uses Dart. Rapidly approaching compiling to Wasm for web apps.

  • React Native I watch this from afar. Reasons:

    1. I believe in PWAs (progressive web apps) vs native apps.
    2. I heard too many horror stories about it not working, though I’ve heard it is better now.
    3. Wasm is coming which I believe will make PWAs dominant over apps. Or conceptually they will finally merge.