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