aboutsummaryrefslogtreecommitdiff
path: root/content
diff options
context:
space:
mode:
Diffstat (limited to 'content')
-rw-r--r--content/posts/2022-10-06- state-of-web-technologies-in-year-2022.md38
1 files changed, 19 insertions, 19 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
index 47938d7..9c38db1 100644
--- 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
@@ -6,7 +6,7 @@ draft: false
6--- 6---
7 7
8**Table of Contents** 8**Table of Contents**
91. [Introduction](#introduction) 91. [Initial thoughts](#initial-thoughts)
102. [Giving React JS a spin](#giving-react-js-a-spin) 102. [Giving React JS a spin](#giving-react-js-a-spin)
113. [Bundlers and Transpilers](#bundlers-and-transpilers) 113. [Bundlers and Transpilers](#bundlers-and-transpilers)
124. [Jam Stack, Mach Stack no snack](#jam-stack-mach-stack-no-snack) 124. [Jam Stack, Mach Stack no snack](#jam-stack-mach-stack-no-snack)
@@ -15,17 +15,17 @@ draft: false
157. [Web development has a marketing issue](#web-development-has-a-marketing-issue) 157. [Web development has a marketing issue](#web-development-has-a-marketing-issue)
168. [Conclusion](#conclusion) 168. [Conclusion](#conclusion)
17 17
18## Introduction 18## Initial thoughts
19 19
20This post is a critique on the current state of web development. It is an opinionated post! I will learn more about this in the future, and probably slightly change my mind about some of the things I criticize. 20*This post is a critique on the current state of web development. It is an opinionated post! I will learn more about this in the future, and probably slightly change my mind about some of the things I criticize.*
21 21
22I have started working on a hobby project about two weeks ago, and I wanted to use that situation as a learning one. Trying new things, new technologies, new tools. I always considered myself to be an adventures person when it comes to technology. I never shy away from trying new languages, new operating systems etc. Likewise, I find the whole experience satisfying, and it tickles that part of my brain that finds discovery the highest of the mountains to climb. 22I have started working on a hobby project about two weeks ago, and I wanted to use that situation as a learning one. Trying new things, new technologies, new tools. I always considered myself to be an adventurous person when it comes to technology. I never shy away from trying new languages, new operating systems etc. Likewise, I find the whole experience satisfying, and it tickles that part of my brain that finds discovery the highest of the mountains to climb.
23 23
24What I always wanted to make was a coding game, that you would play in a browser (just to eliminate building binaries for each operating system) where you would level up your character and go into this scriptable battles. You know, RPG elements. 24What I always wanted to make was a coding game, that you would play in a browser (just to eliminate building binaries for each operating system) where you would level up your character and go into these scriptable battles. You know, RPG elements.
25 25
26So, the natural way to go would be some sort of SPA (single page application) with basic routing and some state management. Nothing crazy. 26So, the natural way to go would be some sort of SPA (single page application) with basic routing and some state management. Nothing crazy.
27 27
28> **Before we move on**, I have to be transparent. Take my views on this with a grain of salt. I have only scratched a surface with these technologies, and my knowledge is full of gaps. This is my experience using some of these products for the first time or in a limited capacity. 28> **Before we move on**, I have to be transparent. Take my views on this with a grain of salt. I have only scratched the surface with these technologies, and my knowledge is full of gaps. This is my experience using some of these products for the first time or in a limited capacity.
29> 29>
30 30
31Having this out of the way, I got myself a fresh pot of coffee and down the rabbit hole I went. 31Having this out of the way, I got myself a fresh pot of coffee and down the rabbit hole I went.
@@ -36,11 +36,11 @@ I first tried [React JS](https://reactjs.org/). I kind of like it. Furthermore,
36 36
37I prefer using [Tailwind CSS](https://tailwindcss.com/) for my styling pleasures, and integrating that was also a painless experience. It was actually nice to see that some things got better with time. In about 2 minutes I got Tailwind working, and I was able to use classes at my disposal. All that `postcss` stuff was taken care of by adding a couple of things in config files (all described really well in their documentation). 37I prefer using [Tailwind CSS](https://tailwindcss.com/) for my styling pleasures, and integrating that was also a painless experience. It was actually nice to see that some things got better with time. In about 2 minutes I got Tailwind working, and I was able to use classes at my disposal. All that `postcss` stuff was taken care of by adding a couple of things in config files (all described really well in their documentation).
38 38
39It is not that different from Vue. People will probably call me a lunatic for saying this. But you know, it is the truth. Same same, but different. I still believe that using libraries like this is beneficial. I am not a JavaScript purist. They all have their quirks, but at the end of the day, I truly believe it’s worth it. 39It is not that different from Vue which I have had more encounters with in the past People will probably call me a lunatic for saying this. But you know, it is the truth. Same same, but different. I still believe that using libraries like this is beneficial. I am not a JavaScript purist. They all have their quirks, but at the end of the day, I truly believe it’s worth it.
40 40
41## Bundlers and Transpilers 41## Bundlers and Transpilers
42 42
43I still reject calling [Typescript](https://www.typescriptlang.org/) to [JavaScript](https://www.javascript.com/) conversion as a compilation process. I call them [transpilers](https://devopedia.org/transpiler), and I don’t care! 😈 43I still reject calling [Typescript](https://www.typescriptlang.org/) to [JavaScript](https://www.javascript.com/) conversion a "compilation process". I call them [transpilers](https://devopedia.org/transpiler), and I don’t care! 😈
44 44
45And if you want to fight this, take a look at this little chart and be mad at it! 45And if you want to fight this, take a look at this little chart and be mad at it!
46 46
@@ -48,9 +48,9 @@ And if you want to fight this, take a look at this little chart and be mad at it
48 48
49The first one that I ever used was [webpack](https://webpack.js.org/), and it was an absolute horrific experience. Saying this, it is an absolutely fantastic tool. I felt more like a config editor than actually a programmer. To be fair, I am a huge fan of [make](https://www.gnu.org/software/make/), and you can do as you wish with this information. I like my build systems simple. 49The first one that I ever used was [webpack](https://webpack.js.org/), and it was an absolute horrific experience. Saying this, it is an absolutely fantastic tool. I felt more like a config editor than actually a programmer. To be fair, I am a huge fan of [make](https://www.gnu.org/software/make/), and you can do as you wish with this information. I like my build systems simple.
50 50
51Also, isn’t it interesting that we need something like [Bable](https://babeljs.io/) to make JavaScript code work in a browser that has only one client side scripting available, which is by no accident also JavaScript. Why? I know why it’s needed, but seriously, why. 51Also, isn’t it interesting that we need something like [Babel](https://babeljs.io/) to make JavaScript code work in a browser that has only one client side scripting available, which is by no accident also JavaScript. Why? I know why it’s needed, but seriously, why.
52 52
53I haven’t used Bable for years now. Or if I did, it was packaged together by some other bundler thingy. Which does not make things better, but at least I didn’t need to worry about it. 53I haven’t used Babel for years now. Or if I did, it was packaged together by some other bundler thingy. Which does not make things better, but at least I didn’t need to worry about it.
54 54
55I really don’t like complicated build systems. I really don’t like abstracting code and making things appear magical. The older I get, the more I appreciate clear and clean, expressive code. No one-liners, if possible. 55I really don’t like complicated build systems. I really don’t like abstracting code and making things appear magical. The older I get, the more I appreciate clear and clean, expressive code. No one-liners, if possible.
56 56
@@ -58,13 +58,13 @@ But I have to give props to [Vite](https://vitejs.dev/)! This was one of the bes
58 58
59I also noticed that now the catch-all phrase is “blazingly fast” and “lightning fast” and “next generation” and stuff like that. I mean, yeah, tools should get faster with time. But saying that starting a project now takes 2 seconds instead of 20 seconds is something that is a break it or make it kind of a deal is ridiculous. I don’t mind waiting a couple of seconds every couple of days. I also don’t create 700 projects every day, and also who does? This argument has no bite. All I want is a decent reload time (~100ms is more than good enough for me) and that is it. 59I also noticed that now the catch-all phrase is “blazingly fast” and “lightning fast” and “next generation” and stuff like that. I mean, yeah, tools should get faster with time. But saying that starting a project now takes 2 seconds instead of 20 seconds is something that is a break it or make it kind of a deal is ridiculous. I don’t mind waiting a couple of seconds every couple of days. I also don’t create 700 projects every day, and also who does? This argument has no bite. All I want is a decent reload time (~100ms is more than good enough for me) and that is it.
60 60
61You don’t need to sell me benefits if I only get them when I start a fresh project, and then try to convince me that this is somehow changing the faith of the universe. First of all, it is not. And second, if this is your only argument for your tool, I would advise you to maybe re-focus your efforts to something else. Vite says that startup times are really fast. And if that would be the only thing differentiating it from other tools, I would ignore it. But it has some really compelling features like [Hot Module Replacement](https://www.geeksforgeeks.org/reactjs-hot-module-replacement/) that really works well. It was a joy to use. 61You don’t need to sell me benefits if I only get them when I start a fresh project, and then try to convince me that this is somehow changing the fate of the universe. First of all, it is not. And second, if this is your only argument for your tool, I would advise you to maybe re-focus your efforts to something else. Vite says that startup times are really fast. And if that would be the only thing differentiating it from other tools, I would ignore it. But it has some really compelling features like [Hot Module Replacement](https://www.geeksforgeeks.org/reactjs-hot-module-replacement/) that really works well. It was a joy to use.
62 62
63So, I will be definitely using Vite in the future. 63So, I will be definitely using Vite in the future.
64 64
65## Jam Stack, Mach Stack no snack 65## Jam Stack, Mach Stack no snack
66 66
67To get the couple of the acronyms out of the way, so we all know what we are talking about: 67Let's get a couple of the acronyms out of the way, so we all know what we are talking about:
68 68
69- Jam Stack - JavaScript, API and Markup 69- Jam Stack - JavaScript, API and Markup
70- Mach Stack - Microservices, API-first, Cloud-Native SaaS, Headless 70- Mach Stack - Microservices, API-first, Cloud-Native SaaS, Headless
@@ -73,7 +73,7 @@ It is so hard to follow all these new trendy things happening around you, that i
73 73
74I have to admit. [Vercel](https://vercel.com/) is really cool! Love the simplicity of the service. You could compare it to [Netlify](https://www.netlify.com/). I haven’t tried Netlify extensively, but from a couple of experimental deployments I still prefer Vercel. It is much more streamlined, but maybe this is bias in me. I really like Vercel’s Analytics, which give you a [Core Web Vitals report](https://web.dev/vitals/) in their admin console. Kind of cool, I’m not going to lie. 74I have to admit. [Vercel](https://vercel.com/) is really cool! Love the simplicity of the service. You could compare it to [Netlify](https://www.netlify.com/). I haven’t tried Netlify extensively, but from a couple of experimental deployments I still prefer Vercel. It is much more streamlined, but maybe this is bias in me. I really like Vercel’s Analytics, which give you a [Core Web Vitals report](https://web.dev/vitals/) in their admin console. Kind of cool, I’m not going to lie.
75 75
76This whole idea about frontend and backend merging into [SSR (server-side rendering)](https://www.debugbear.com/blog/server-side-rendering) looks so good on the paper. It almost doesn’t come with any major flaws. 76This whole idea about frontend and backend merging into [SSR (server-side rendering)](https://www.debugbear.com/blog/server-side-rendering) looks so good on paper. It almost doesn’t come with any major flaws.
77 77
78But when it comes to the actual implementation, there is much to be desired. I’m going to lump [Next.js](https://nextjs.org/) and [Nuxt.js](https://nuxtjs.org/) together because they are essentially the same thing, just a different library. 78But when it comes to the actual implementation, there is much to be desired. I’m going to lump [Next.js](https://nextjs.org/) and [Nuxt.js](https://nuxtjs.org/) together because they are essentially the same thing, just a different library.
79 79
@@ -87,7 +87,7 @@ They sell you [NoOps](https://www.geeksforgeeks.org/overview-of-noops/), but whe
87 87
88Lately, this has become a huge trend that will for sure bite us in the future. And let’s not get it twisted. By doing this, PaaS providers like [AWS](https://aws.amazon.com/), [GCS](https://cloud.google.com/), etc. obscure their billing, and you end up paying more than you really should. And even if that is not an issue, it comes down to the principle of things. AWS is known for having multiple “currencies“ inside their projects like write operations, read operations, etc. which add up, and it creates this impossible to track billing scheme. It all behaves suspiciously like a pay-to-win game you could find on mobile phones that scams you out of your money. 88Lately, this has become a huge trend that will for sure bite us in the future. And let’s not get it twisted. By doing this, PaaS providers like [AWS](https://aws.amazon.com/), [GCS](https://cloud.google.com/), etc. obscure their billing, and you end up paying more than you really should. And even if that is not an issue, it comes down to the principle of things. AWS is known for having multiple “currencies“ inside their projects like write operations, read operations, etc. which add up, and it creates this impossible to track billing scheme. It all behaves suspiciously like a pay-to-win game you could find on mobile phones that scams you out of your money.
89 89
90And as far as I am concerned, the most important thing was me not coding the functionalities for the game I want to make. I was battling libraries and cloud providers. How to deploy, what settings are relevant. Bad documentation or multiple versions of achieving the same thing. You are getting bombarded by all this information, and you don’t really have any control over it. Production-ready code becomes a joke, essentially. Specially if you tend to work on that project for a prolonged period of time. 90And as far as I am concerned, the most important thing was me not coding the functionalities for the game I want to make. I was battling libraries and cloud providers. How to deploy, what settings are relevant. Bad documentation or multiple versions of achieving the same thing. You are getting bombarded by all this information, and you don’t really have any control over it. Production-ready code becomes a joke, essentially. Especially if you tend to work on that project for a prolonged period of time.
91 91
92All of these options end up creating a fatigue. What to choose, what not to choose. Unnecessary worrying about if the stack will still be deemed worthy in six months. There is elegance in simplicity. 92All of these options end up creating a fatigue. What to choose, what not to choose. Unnecessary worrying about if the stack will still be deemed worthy in six months. There is elegance in simplicity.
93 93
@@ -97,13 +97,13 @@ And this jab at these libraries and cloud providers is not done out of malice. I
97 97
98## Tailwind CSS still rocks! 98## Tailwind CSS still rocks!
99 99
100You know, many people say negative thing about Tailwind. And after a lot of deliberation, I came to the conclusion that Tailwind is good for two types of developers. Tailwind is good for a complete noob or a senior developer. A complete noob doesn’t really care about inner working of CSS, and a senior developer also doesn’t care about CSS. Well, at least, not anymore. And developers in between usually have the biggest issues with it. Not always of course, but in a lot of cases. 100You know, many people say negative things about Tailwind. And after a lot of deliberation, I came to the conclusion that Tailwind is good for two types of developers. Tailwind is good for a complete noob or a senior developer. A complete noob doesn’t really care about inner workings of CSS, and a senior developer also doesn’t care about CSS. Well, at least, not anymore. And developers in between usually have the biggest issues with it. Not always of course, but in a lot of cases.
101 101
102I like the creature comforts of Tailwind. Being utility first would make me argue that it is actually more similar to [Sass](https://sass-lang.com/) or [Less](https://lesscss.org/) than something like Bootstrap. Not technically, but ideologically. After I started using it, I never looked back. I use it every time I need to do something web related. 102I like the creature comforts of Tailwind. Being utility first would make me argue that it is actually more similar to [Sass](https://sass-lang.com/) or [Less](https://lesscss.org/) than something like Bootstrap. Not technically, but ideologically. After I started using it, I never looked back. I use it every time I need to do something web related.
103 103
104Writing CSS for general things feels like going several steps back. Instead of focusing on what you are actually trying to achieve, you focus on notations like [BEM](https://en.bem.info/methodology/css/), code structuring, optimizing HTML size. Just doing things that make 0.1% difference. You know that saying: Early optimization is the root of all evil. Exactly that. 104Writing CSS for general things feels like going several steps back. Instead of focusing on what you are actually trying to achieve, you focus on notations like [BEM](https://en.bem.info/methodology/css/), code structuring, optimizing HTML size. Just doing things that make 0.1% difference. You know that saying: Early optimization is the root of all evil. Exactly that.
105 105
106I am also not saying that Tailwind is the cure for everything. Something custom CSS is necessary. But from what I found out in using it for almost two years in a production environment (on a site getting quite a lot of traffic and constantly being changed), I can say without any reservations that Tailwind saved our asses countless times. We would be rewriting CSS all the time without it. And I don’t really think writing CSS is the best way to spent my time 😄. 106I am also not saying that Tailwind is the cure for everything. Sometimes custom CSS is necessary. But from what I found out in using it for almost two years in a production environment (on a site getting quite a lot of traffic and constantly being changed), I can say without any reservations that Tailwind saved our asses countless times. We would be rewriting CSS all the time without it. And I don’t really think writing CSS is the best way to spend my time.
107 107
108I have also noticed that people who criticize Tailwind the most never actually used it in a real project that has a long lifetime with plenty of changes that will happen in the future. 108I have also noticed that people who criticize Tailwind the most never actually used it in a real project that has a long lifetime with plenty of changes that will happen in the future.
109 109
@@ -113,7 +113,7 @@ But you know, whatever floats your boat!
113 113
114Somehow, people also stopped talking about maintenance. If you constantly try to catch the latest and greatest train, you are by that logic always trying new things. Which is a good thing if you want to learn about technologies and try them. But for the production environment, you have to have a stable stack that doesn’t change every 6 months. 114Somehow, people also stopped talking about maintenance. If you constantly try to catch the latest and greatest train, you are by that logic always trying new things. Which is a good thing if you want to learn about technologies and try them. But for the production environment, you have to have a stable stack that doesn’t change every 6 months.
115 115
116You can lock dependencies for sure. Nevertheless, the hype train moves along anyway. And the mindset this breads goes against locking the code. These bleeding-edge rolling release cycle is not helping. That is why enterprise solutions usually look down on these popular stacks and only do bare minimum to appear hip and cool. 116You can lock dependencies for sure. Nevertheless, the hype train moves along anyway. And the mindset this breeds goes against locking the code. This bleeding-edge rolling release cycle is not helping. That is why enterprise solutions usually look down on these popular stacks and only do bare minimum to appear hip and cool.
117 117
118With that said, I still think that progress is good, but should be taken with a grain of salt. If your project is something that should be built once and then rarely updated, going with the latest stack is a possible way to go. But, if you are working on a project that lasts for years, you should probably approach it with some level of caution. Web development is often times too volatile. 118With that said, I still think that progress is good, but should be taken with a grain of salt. If your project is something that should be built once and then rarely updated, going with the latest stack is a possible way to go. But, if you are working on a project that lasts for years, you should probably approach it with some level of caution. Web development is often times too volatile.
119 119
@@ -123,9 +123,9 @@ I noticed that almost every project now has this marketing spin put on it. Every
123 123
124And in order to appeal to mass market, they leave things out of their marketing materials. These open-source projects are now behaving more and more like companies do. Which is a scary thought on its self. 124And in order to appeal to mass market, they leave things out of their marketing materials. These open-source projects are now behaving more and more like companies do. Which is a scary thought on its self.
125 125
126And we are also seeing a rise in a concept of building a company in the open, which is a good thing, don't get me wrong. But when it is using open-source to lure people and then lock them in their ecosystem. There is where I have issues with it. 126And we are also seeing a rise in a concept of building a company in the open, which is a good thing, don't get me wrong. But when it is using open-source to lure people and then lock them in their ecosystem, there is where I have issues with it.
127 127
128This might be because I have been using GNU/Linux for 20 years now and have been so beholden for my success to open-source that I see issues when open-source is being used to trick people into a false sense of security that these projects are built in the spirit of open-source. Because there is a difference. And they are NOT! They have a really specific goal in mind. And the open-source is being used as a delivery system. Which is in opinion disgusting! 128This might be because I have been using GNU/Linux for 20 years now and have been so beholden for my success to open-source that I see issues when open-source is being used to trick people into a false sense of security that these projects are built in the spirit of open-source. Because there is a difference. They are NOT! They have a really specific goal in mind. And the open-source is being used as a delivery system. Which is in my opinion disgusting!
129 129
130## Conclusion 130## Conclusion
131 131