aboutsummaryrefslogtreecommitdiff
path: root/content/posts/2022-10-06-state-of-web-technologies-in-year-2022.md
diff options
context:
space:
mode:
authorMitja Felicijan <m@mitjafelicijan.com>2023-07-08 23:25:41 +0200
committerMitja Felicijan <m@mitjafelicijan.com>2023-07-08 23:25:41 +0200
commitcd6644ea4ddc78597934ab0ef5ba50e3c3daa927 (patch)
tree03de331a8db6386dfd6fa75155bfbcea6b4feaf3 /content/posts/2022-10-06-state-of-web-technologies-in-year-2022.md
parent84ed124529ffeee1590295b8de3a8faf51848680 (diff)
downloadmitjafelicijan.com-cd6644ea4ddc78597934ab0ef5ba50e3c3daa927.tar.gz
Moved to a simpler SSG
Diffstat (limited to 'content/posts/2022-10-06-state-of-web-technologies-in-year-2022.md')
-rw-r--r--content/posts/2022-10-06-state-of-web-technologies-in-year-2022.md303
1 files changed, 0 insertions, 303 deletions
diff --git a/content/posts/2022-10-06-state-of-web-technologies-in-year-2022.md b/content/posts/2022-10-06-state-of-web-technologies-in-year-2022.md
deleted file mode 100644
index 78595fa..0000000
--- a/content/posts/2022-10-06-state-of-web-technologies-in-year-2022.md
+++ /dev/null
@@ -1,303 +0,0 @@
1---
2title: State of Web Technologies and Web development in year 2022
3url: state-of-web-technologies-and-web-development-in-year-2022.html
4date: 2022-10-06T12:00:00+02:00
5draft: false
6---
7
8## Initial thoughts
9
10*This post is a critique on the current state of web development. It is an
11opinionated post! I will learn more about this in the future, and probably
12slightly change my mind about some of the things I criticize.*
13
14I have started working on a hobby project about two weeks ago, and I wanted to
15use that situation as a learning one. Trying new things, new technologies, new
16tools. I always considered myself to be an adventurous person when it comes to
17technology. I never shy away from trying new languages, new operating systems
18etc. Likewise, I find the whole experience satisfying, and it tickles that part
19of my brain that finds discovery the highest of the mountains to climb.
20
21What I always wanted to make was a coding game, that you would play in a browser
22(just to eliminate building binaries for each operating system) where you would
23level up your character and go into these scriptable battles. You know, RPG
24elements.
25
26So, the natural way to go would be some sort of SPA (single page application)
27with basic routing and some state management. Nothing crazy.
28
29> **Before we move on**, I have to be transparent. Take my views on this with
30> a grain of salt. I have only scratched the surface with these technologies,
31> and my knowledge is full of gaps. This is my experience using some of these
32> products for the first time or in a limited capacity.
33
34Having this out of the way, I got myself a fresh pot of coffee and down the
35rabbit hole I went.
36
37## Giving React JS a spin
38
39I first tried [React JS](https://reactjs.org/). I kind of like it. Furthermore,
40I have worked with libraries like this in the past and also wrote a couple of
41them (nothing compared to that level), but I had the basic understanding of what
42was going on. I rolled up a project quickly and had basic things done in a
43matter of two hours, which was impressive.
44
45I prefer using [Tailwind CSS](https://tailwindcss.com/) for my styling
46pleasures, and integrating that was also a painless experience. It was actually
47nice to see that some things got better with time. In about 2 minutes I got
48Tailwind working, and I was able to use classes at my disposal. All that
49`postcss` stuff was taken care of by adding a couple of things in config files
50(all described really well in their documentation).
51
52It is not that different from Vue which I have had more encounters with in the
53past People will probably call me a lunatic for saying this. But you know, it is
54the truth. Same same, but different. I still believe that using libraries like
55this is beneficial. I am not a JavaScript purist. They all have their quirks,
56but at the end of the day, I truly believe it’s worth it.
57
58## Bundlers and Transpilers
59
60I still reject calling [Typescript](https://www.typescriptlang.org/) to
61[JavaScript](https://www.javascript.com/) conversion a "compilation process". I
62call them [transpilers](https://devopedia.org/transpiler), and I don’t care! 😈
63
64And if you want to fight this, take a look at this little chart and be mad at
65it!
66
67![Compiling vs Transpiling](/assets/state-of-web/compiling-vs-transpiling.png)
68
69The first one that I ever used was [webpack](https://webpack.js.org/), and it
70was an absolute horrific experience. Saying this, it is an absolutely fantastic
71tool. I felt more like a config editor than actually a programmer. To be fair,
72I am a huge fan of [make](https://www.gnu.org/software/make/), and you can do as
73you wish with this information. I like my build systems simple.
74
75Also, isn’t it interesting that we need something like
76[Babel](https://babeljs.io/) to make JavaScript code work in a browser that has
77only one client side scripting available, which is by no accident also
78JavaScript. Why? I know why it’s needed, but seriously, why.
79
80I haven’t used Babel for years now. Or if I did, it was packaged together by
81some other bundler thingy. Which does not make things better, but at least I
82didn’t need to worry about it.
83
84I really don’t like complicated build systems. I really don’t like abstracting
85code and making things appear magical. The older I get, the more I appreciate
86clear and clean, expressive code. No one-liners, if possible.
87
88But I have to give props to [Vite](https://vitejs.dev/)! This was one of the
89best developer experiences I have ever had. Granted, it still has magical
90properties. And yes, it still is a bundler and abstracts things to the nth
91degree. But at least it didn’t force me to configure 700 lines of JSON. And I
92know that this makes me a hypocrite. You can’t have it all. Nonetheless, my
93reasoning here is, if using bundlers is inevitable, then at least they should
94provide an excellent developer experience.
95
96I also noticed that now the catch-all phrase is “blazingly fast” and “lightning
97fast” and “next generation” and stuff like that. I mean, yeah, tools should get
98faster with time. But saying that starting a project now takes 2 seconds instead
99of 20 seconds is something that is a break it or make it kind of a deal is
100ridiculous. I don’t mind waiting a couple of seconds every couple of days. I
101also don’t create 700 projects every day, and also who does? This argument has
102no bite. All I want is a decent reload time (~100ms is more than good enough for
103me) and that is it.
104
105You don’t need to sell me benefits if I only get them when I start a fresh
106project, and then try to convince me that this is somehow changing the fate of
107the universe. First of all, it is not. And second, if this is your only argument
108for your tool, I would advise you to maybe re-focus your efforts to something
109else. Vite says that startup times are really fast. And if that would be the
110only thing differentiating it from other tools, I would ignore it. But it has
111some really compelling features like [Hot Module
112Replacement](https://www.geeksforgeeks.org/reactjs-hot-module-replacement/) that
113really works well. It was a joy to use.
114
115So, I will be definitely using Vite in the future.
116
117## Jam Stack, Mach Stack no snack
118
119Let's get a couple of the acronyms out of the way, so we all know what we are
120talking about:
121
122- Jam Stack - JavaScript, API and Markup
123- Mach Stack - Microservices, API-first, Cloud-Native SaaS, Headless
124
125It is so hard to follow all these new trendy things happening around you, that
126it makes you have a massive **FOMO** all the time. But on the other hand, you
127also don’t want to be that old fart that doesn’t move with the times and still
128writes his trusty jQuery code while listening to Blink 182 All the small things
129on full blast. It’s a good song, don’t get me wrong, but there are other songs
130out there.
131
132I have to admit. [Vercel](https://vercel.com/) is really cool! Love the
133simplicity of the service. You could compare it to
134[Netlify](https://www.netlify.com/). I haven’t tried Netlify extensively, but
135from a couple of experimental deployments I still prefer Vercel. It is much more
136streamlined, but maybe this is bias in me. I really like Vercel’s Analytics,
137which give you a [Core Web Vitals report](https://web.dev/vitals/) in their
138admin console. Kind of cool, I’m not going to lie.
139
140This whole idea about frontend and backend merging into [SSR (server-side
141rendering)](https://www.debugbear.com/blog/server-side-rendering) looks so good
142on paper. It almost doesn’t come with any major flaws.
143
144But when it comes to the actual implementation, there is much to be desired.
145I’m going to lump [Next.js](https://nextjs.org/) and
146[Nuxt.js](https://nuxtjs.org/) together because they are essentially the same
147thing, just a different library.
148
149Now comes the reality. Mixing backend and frontend in this manner creates this
150weird mental model where you kind of rely on magical properties of these
151libraries. You relinquish control over to them for better developer experience.
152But is that really true? Initially, I was so stoked about it. However, the more
153I used them, the more I felt uncomfortable. I felt dirty, actually. Maybe this
154is because I come from old ways of doing things where you control every step of
155request, and allowing something to hijack it feels like blasphemy.
156
157More than that, some pretty significant technical issues arose from this. How do
158you do JWT token authentication? You put it in `api` folder and then do some
159fetching and storing into local state management. But doing this also requires
160some tinkering with await/async stuff on the React/Vue side of things. And then
161you need to write middleware for it. And the more I look at it, the more I see
162that this whole thing was not meant to be used like this, and it all feels and
163looks like a huge hack.
164
165The issue I have with this is that they over-promise and under-deliver. They
166want to be an all-in-one replacement for everything, and they don’t deliver on
167this promise. And how could they?! We have to be fair. It is an impossible task.
168
169They sell you [NoOps](https://www.geeksforgeeks.org/overview-of-noops/), but
170when you need to accomplish something a little bit more out of the scope of
171Hello World, you have to make hacky decisions to make it work. And having a
172deployment strategy that relies on many moving parts is never a good idea.
173Abstracting too much is usually a sign of bad architecture.
174
175Lately, this has become a huge trend that will for sure bite us in the future.
176And let’s not get it twisted. By doing this, PaaS providers like
177[AWS](https://aws.amazon.com/), [GCS](https://cloud.google.com/), etc. obscure
178their billing, and you end up paying more than you really should. And even if
179that is not an issue, it comes down to the principle of things. AWS is known for
180having multiple “currencies“ inside their projects like write operations, read
181operations, etc. which add up, and it creates this impossible to track billing
182scheme. It all behaves suspiciously like a pay-to-win game you could find on
183mobile phones that scams you out of your money.
184
185And as far as I am concerned, the most important thing was me not coding the
186functionalities for the game I want to make. I was battling libraries and cloud
187providers. How to deploy, what settings are relevant. Bad documentation or
188multiple versions of achieving the same thing. You are getting bombarded by all
189this information, and you don’t really have any control over it.
190Production-ready code becomes a joke, essentially. Especially if you tend to
191work on that project for a prolonged period of time.
192
193All of these options end up creating a fatigue. What to choose, what not to
194choose. Unnecessary worrying about if the stack will still be deemed worthy in
195six months. There is elegance in simplicity.
196
197> JavaScript UI frameworks and libraries work in cycles. Every six months or
198> so, a new one pops up, claiming that it has revolutionized UI development.
199> Thousands of developers adopt it into their new projects, blog posts are
200> written, Stack Overflow questions are asked and answered, and then a newer
201> (and even more revolutionary) framework pops up to usurp the throne.
202> — Ian Allen
203
204![To many options](/assets/state-of-web/2008-vs-2020.png)
205
206And this jab at these libraries and cloud providers is not done out of malice.
207It is a real concern that I have about them. In my life, I have seen
208technologies come and go, but the basics always stick around. So surrendering
209all the power you have to a library or a cloud provider is in my opinion a
210stupid move.
211
212## Tailwind CSS still rocks!
213
214You know, many people say negative things about Tailwind. And after a lot of
215deliberation, I came to the conclusion that Tailwind is good for two types of
216developers. Tailwind is good for a complete noob or a senior developer. A
217complete noob doesn’t really care about inner workings of CSS, and a senior
218developer also doesn’t care about CSS. Well, at least, not anymore. And
219developers in between usually have the biggest issues with it. Not always of
220course, but in a lot of cases.
221
222I like the creature comforts of Tailwind. Being utility first would make me
223argue that it is actually more similar to [Sass](https://sass-lang.com/) or
224[Less](https://lesscss.org/) than something like Bootstrap. Not technically, but
225ideologically. After I started using it, I never looked back. I use it every
226time I need to do something web related.
227
228Writing CSS for general things feels like going several steps back. Instead of
229focusing on what you are actually trying to achieve, you focus on notations like
230[BEM](https://en.bem.info/methodology/css/), code structuring, optimizing HTML
231size. Just doing things that make 0.1% difference. You know that saying: Early
232optimization is the root of all evil. Exactly that.
233
234I am also not saying that Tailwind is the cure for everything. Sometimes custom
235CSS is necessary. But from what I found out in using it for almost two years in
236a production environment (on a site getting quite a lot of traffic and
237constantly being changed), I can say without any reservations that Tailwind
238saved our asses countless times. We would be rewriting CSS all the time without
239it. And I don’t really think writing CSS is the best way to spend my time.
240
241I have also noticed that people who criticize Tailwind the most never actually
242used it in a real project that has a long lifetime with plenty of changes that
243will happen in the future.
244
245But you know, whatever floats your boat!
246
247## Code maintainability
248
249Somehow, people also stopped talking about maintenance. If you constantly try to
250catch the latest and greatest train, you are by that logic always trying new
251things. Which is a good thing if you want to learn about technologies and try
252them. But for the production environment, you have to have a stable stack that
253doesn’t change every 6 months.
254
255You can lock dependencies for sure. Nevertheless, the hype train moves along
256anyway. And the mindset this breeds goes against locking the code. This
257bleeding-edge rolling release cycle is not helping. That is why enterprise
258solutions usually look down on these popular stacks and only do bare minimum to
259appear hip and cool.
260
261With that said, I still think that progress is good, but should be taken with a
262grain of salt. If your project is something that should be built once and then
263rarely updated, going with the latest stack is a possible way to go. But, if you
264are working on a project that lasts for years, you should probably approach it
265with some level of caution. Web development is often times too volatile.
266
267## Web development has a marketing issue
268
269I noticed that almost every project now has this marketing spin put on it.
270Everything is blazingly fast now. I get it, they are competing for your
271attention, but what happened to just being truthful and not inflating reality.
272
273And in order to appeal to mass market, they leave things out of their marketing
274materials. These open-source projects are now behaving more and more like
275companies do. Which is a scary thought on its self.
276
277And we are also seeing a rise in a concept of building a company in the open,
278which is a good thing, don't get me wrong. But when it is using open-source to
279lure people and then lock them in their ecosystem, there is where I have issues
280with it.
281
282This might be because I have been using GNU/Linux for 20 years now and have been
283so beholden for my success to open-source that I see issues when open-source is
284being used to trick people into a false sense of security that these projects
285are built in the spirit of open-source. Because there is a difference. They are
286NOT! They have a really specific goal in mind. And the open-source is being used
287as a delivery system. Which is in my opinion disgusting!
288
289## Conclusion
290
291I will end my post with this. Web development is running now in circles. People
292are discovering [RPC](https://www.tutorialspoint.com/remote-procedure-call-rpc)
293now and this is the now the next big thing. [GraphQL](https://graphql.org/) is
294so passé. And I am so tired of it all. Of blazingly fast libraries, of all these
295new technologies that are actually just a remake of old ones. Of just the
296general spirit of the web. I will just use what I already know. Which worked 10
297years ago and will work 10 years after this. I will adopt a couple of little
298tools like Vite. But I will not waste my time on this anymore.
299
300It was a good exercise to get in touch with what’s new now. Nothing really
301changed that much. FOMO is now cured! Now I have to get my ass back to actually
302code and make the project that I wanted to make in the first place.
303