#Conclusions (WIP)
#Frameworks
React without any third-party state management libraries
Preact is a fast 3kB alternative to React with the same modern API
- Vue 2
- Vue 2 + Vuex
- Angular
- Flutter
- Vanilla
- Reason
- Elm
#React and Libraries
Immer.js simplifies handling immutable data structures
State management in the early ages
Simple, scalable state management with observable values
ReactiveX is an API for asynchronous programming with observable streams
Use multiple atoms to organize state instead of a single store
Jotai is a Recoil alternative with minimalistic API
- 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.