What is the experience of being a front-end in 2022?

Original link: https://blog.rxliuli.com/p/ef26175b98af43ccaf918296a739ded5/

Today, when I was talking about the react state manager in the community chat group, I suddenly remembered an old article about the experience of being a front-end in 2016 , so I imitated it and wrote a little bit with the latest new technology.

Q: I recently started a new web project, but honestly I haven’t touched the code in this area for a long time, I only wrote vue2 before. I heard that the front-end technology stack has undergone great changes. I wonder if you are still in the forefront of the developer array?
Answer: Yes, the web framework has changed a lot since hooks came out. And I just came back from Next.js Conf 2022, so I feel like I’m still up to date with what’s going on in the front-end web scene right now.
Q: Yes, yes, my needs are not complicated, that is, to obtain user activity data from the REST-style EndPoint provided by the back-end and display it on the front-end interface. And it needs to be displayed in the form of a list. At the same time, the list must support operations such as filtering and sorting. By the way, it is necessary to ensure that the front-end data is consistent with the server, and that basic editing can be done. In fact, it is a simple background addition, deletion, modification and query. According to my current understanding, I plan to use vue2+axios to capture and manipulate data. What do you think?
A: No, no, no, it is estimated that not many people use vue2 now. You can try react, it’s 2022 after all.
Q: Well, well, what’s the difference between react and vue2?
A: React is a functional, immutable framework with a rich community, a lot of practice, and hooks that change everything.
Q: Yes, yes, then can I use react+axios to display data?
A: Well, does your app need to handle any state changes?
Q: It should be required, any recommendations? I have used vuex before, I heard that the react community is redux?
Answer: It’s 2022, and redux is already outdated. Try the new hooks-based state manager Q: Give me an example?
Answer: jotai is used for distributed, zustand is used centrally, valtio is used for middle and backend brainless, basically daishi kato covers all your needs Q: Well, I know that there are many state managers now, it sounds like I should with valtio
A: Yes, there are actually dozens of them that I haven’t mentioned yet. Q: Can I use webpack to create a project for development? ? gulp?
A: webpack is too slow, now you should use faster build tools like vite, turbopack Q: what are they all?
A: vite is a cross-frame packaging tool based on rollup+esbuild, which is much faster than webpack. Turbopack is a build tool rewritten by the author of webpack based on swc, which is 10 times faster than vite (that is, it is not yet available for production# Whisper ask: Did you lined up the nouns? rollup I understand, what is esbuild/swc? ?
Answer: esbuild/swc are compilers based on native programming languages, they are written in golang/rust respectively, which are 10~100 times faster than babel?
Q: I have used babel before, there are many plugins, the last time you seem to recommend me is this?
A: Times are changing~, just like CSS is outdated now Q: Huh? CSS is outdated, so how do I write styles?
A: Try style-component? Or tailwind?
Q: I’ve heard of sass/less, but I don’t know what these are. A: style-component is to write css in js, it doesn’t need a separate css file, and it can be reused as js value more easily. tailwind allows you to not write at all, just write class, such as w-9 h-9
Q: Sounds like style inline styles? Are they not recommended?
A: tailwind is different, you can try it out Q: Well, I just want to write some simple styles, it won’t be too complicated A: Well, you can use css-module directly Q: I don’t want to worry anymore Because of these terms, I want to emphasize again, I just want to do a background addition, deletion, modification and inspection.
A: Then you probably don’t need a framework at all

PS1: The popularity before redux seems to be because the react community was stunned by FP at the time
PS2: Some people don’t like style-component/tailwind even when writing react

This article is reproduced from: https://blog.rxliuli.com/p/ef26175b98af43ccaf918296a739ded5/
This site is for inclusion only, and the copyright belongs to the original author.