TodoMVC

once more

Modern Frontend Development Practices

#Conclusions (WIP)

  • MVX: How to write a Web App with any framework (WIP)
  • #Frameworks

    React Hooks + React Context

    React without any third-party state management libraries

    Source lines of code:SCSS277TypeScript249
    Dist: 140.07 kB
    Gzip: 45.56 kB
    Gzip Build:HTML0.29 kBCSS1.56 kBJavaScript43.71 kB
    Replacing React with Preact

    Preact is a fast 3kB alternative to React with the same modern API

    Full Stack: Vite, Preact, TypeScript, Sass
    Source lines of code:SCSS277TypeScript245
    Dist: 27.64 kB
    Gzip: 10.43 kB
    Gzip Build:HTML0.29 kBCSS1.56 kBJavaScript8.57 kB
    Source lines of code:SCSS277Vue112TypeScript44
    Dist: 59.74 kB
    Gzip: 23.65 kB
    Gzip Build:HTML0.28 kBCSS1.56 kBJavaScript21.81 kB
    Source lines of code:SCSS277Vue127TypeScript65
    Dist: 67.22 kB
    Gzip: 26.65 kB
    Gzip Build:HTML0.28 kBCSS1.56 kBJavaScript24.81 kB
    Source lines of code:SCSS277Svelte162TypeScript15
    Dist: 16.99 kB
    Gzip: 6.70 kB
    Gzip Build:HTML0.29 kBCSS1.56 kBJavaScript4.84 kB
    Source lines of code:SCSS277TypeScript194
    Dist: 17.71 kB
    Gzip: 6.75 kB
    Gzip Build:HTML0.35 kBCSS1.56 kBJavaScript4.85 kB
    Wait List
    • Vue 2
    • Vue 2 + Vuex
    • Angular
    • Flutter
    • Vanilla
    • Reason
    • Elm

    #React and Libraries

    Immer.js and immutability

    Immer.js simplifies handling immutable data structures

    Source lines of code:SCSS277TypeScript254
    Dist: 147.62 kB
    Gzip: 48.48 kB
    Gzip Build:HTML0.29 kBCSS1.56 kBJavaScript46.63 kB
    Source lines of code:SCSS277TypeScript277
    Dist: 150.89 kB
    Gzip: 48.58 kB
    Gzip Build:HTML0.29 kBCSS1.56 kBJavaScript46.73 kB
    React Hooks + Mobx + mobx-react-lite

    Simple, scalable state management with observable values

    Source lines of code:SCSS277TypeScript185
    Dist: 193.55 kB
    Gzip: 61.25 kB
    Gzip Build:HTML0.29 kBCSS1.56 kBJavaScript59.39 kB
    React Hooks + RxJS + observable-hooks

    ReactiveX is an API for asynchronous programming with observable streams

    Source lines of code:SCSS277TypeScript201
    Dist: 157.60 kB
    Gzip: 50.84 kB
    Gzip Build:HTML0.29 kBCSS1.56 kBJavaScript48.99 kB
    React Hooks + Recoil

    Use multiple atoms to organize state instead of a single store

    Source lines of code:SCSS277TypeScript240
    Dist: 214.33 kB
    Gzip: 68.46 kB
    Gzip Build:HTML0.29 kBCSS1.56 kBJavaScript66.61 kB
    Jotai instead of Recoil

    Jotai is a Recoil alternative with minimalistic API

    Source lines of code:SCSS277TypeScript232
    Dist: 147.48 kB
    Gzip: 48.28 kB
    Gzip Build:HTML0.29 kBCSS1.56 kBJavaScript46.42 kB
    Wait List
    • Zusland
    • Xstate
    • resso

    #Styling

    Wait List
    • React + Sass
    • TailwindCSS
    • React + UnoCSS
    • Vue + UnoCSS
    • Twind
    • Emotion

    #CLI Comparation

    Wait List
    • Vite
    • Create-React-App
    • Vue CLI
    • Astro

    #Other Helpful Tools

    This project also relies on these tools heavily, which I'd like to recommend to you guys. (Maybe you have already used some. Technically, they are the faster and simpler versions of their ancestors)

    • Vite: Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
    • Astro: Astro creates static sites with multiple frameworks but minimal output size
    • tsup: The simplest and fastest way to bundle your TypeScript libraries
    • tsno: node with typescript support
    • esbuild: An extremely fast JavaScript bundler
    • pnpm: pnpm has built-in support for monorepositories
    • fnm: Fast and simple Node.js version manager, built in Rust
    • ni: Use the right package manager
    • Vercel: Vercel is the best place to deploy any frontend app
    • Bundlephobia: Find the cost of adding a npm package to your bundle

    #Frontend Development Resources

    And here are some websites about cutting edge and trends in front-end development field you may want to see.

    #Story

    Years ago, when I start learning frontend development, I found a handy website called TodoMVC. it guide me into the wonderful JavaScript world. (And know a word called JavaScript Fatigue later, LOL)

    Time's changed, now we have npm as an official package registry (which come with the Heaviest Objects In The Universe ;), we have ES Modules as standard module syntax (and with still many Common JS in the Node.js world). Now when we talk about frontend frameworks, we are basically talking about the React Vue Angular trinity that each one has its own huge ecosystem, or maybe newer meta-frameworks (e.g. Next.js is built on top of React).

    But that's not the end of the story, the JavaScript world kept evolving. How do we build some complicated gigantic apps and manage the code? (Have you ever seen the source of VS Code? it has 3k+ TypeScript files and 80k+ lines code in amount!)

    The new era has new problems. We may use Flux-like, Observable, DDD, FRP, or other fancy patterns to organize UI states, but it seems there is still no one silver bullet that fits all. What about CSS? Do you use some CSS preprocessors, or ever think about styled-components and CSS-in-JS in your projects? (I personally prefer Atomic CSS)

    After all these mess, I decided to play around and try different stuff, sense these concepts and principles under the hood by building a simple Todo App one more time.