Web Dev. changes since 2020
Paqmind.com is not the only platform we write for but we definitely haven’t blogged a lot since 2020. The reasons are typical and boring – work, family, lack of time… We were also splitting our efforts between Russian and English content.
As of now we decided to keep blogging in English. Monolingual sites are so much easier to develop, support, and advertise. And most IT engineers know English anyway. So hi to all native and non-native speakers reading us, and let’s continue with the main topic of the post. Namely – what changed in the industry in recent years?
Web Dev in retrospective 🏺
I’ll start earlier to provide more context. Web Development has been booming for the third decade. Here’s a quick overview of the key milestones since the turn of the century:
- 2000: CSS (W3C – first CSS drafts)
- 2004: Web 2.0 (visitors create content)
- 2006: PAAS (AWS launches S3)
- 2006: SPA (jQuery, first class interactivity)
- 2007: Mobile Web (iPhone – new devices)
- 2008: Chrome (Google – Webkit becomes the main browsing engine)
- 2008: SSG (Jekyll, Front-Matter, GithubPages – pursuit for simplicity)
- 2008: Cloud (Github – open source, collective development)
- 2009: Devops (Devops movement gets traction)
- 2015: SSG + SPA hybrids (Gatsby – pull content, not push)
- 2016: SSR (NextJS – flexibility and SEO strike back)
- 2021: ISR (NextJS – holy grail model for many projects)
- 2021: Web 3.0 (emerging since 2014 – decentralized resources)
Sorry for not mentioning your favorite thing 🤷. It’s a topic that can never be “fully covered”.
And here we are in 2022, with the abundance of new tools, SAAS’, PAAS’, CMS’, cryptocurrencies, blockchains, neural networks, wearable devices, and whatnot… It was never so easy to implement many things that was scary to approach in the past. Yet at the same time there were never so many technologies and services to choose from. The overchoice is a real thing.
Frameworks 😮
One fast growing branch in this post-JavaScript world is… TypeScript frameworks. Tell me about JS fatique one more time! Some good-ol players like Meteor and “modern classic” like NextJS are not going to lose their positions. And at least a couple of new ones, if we count only those with novel ideas, appear each quarter.
The above is what I personally find the most interesting. Your preferences may vary.
After a quick review of each, Paqmind has decided to stay with NextJS though. Vercel team has never disappointed as – they know their stuff. They roll up perfectly timed NextJS updates each couple of months. They hire the best programming minds in the world. And they won’t have troubles to copy the best ideas from other frameworks if necessary. After so many years of being a tech. reference it would be fair to copy others a bit, for a difference.
Other Trends ✨
What else is going on with Web Development, besides new frameworks? I would highlight the following trends:
- Blockchains (Web 3.0, NFT)
- Content (MDX, headless CMS’)
- ML/AI (QA, analytics, coding assistance)
- Low Code (visual programming, high-level tools, SAAS)
- Performance (zero-size JS bundle)
- Static Types (TypeScript, GraphQL, typed APIs)
You’ll likely find at least one of the above (or related) buzzwords mentioned in any newer software product!
I’ve spend the most time exploring Low Code & Headless CMs’ topics so here are my top picks:
Again, some are well-known veterans of the industry and some are their challengers. I’d like to say something smart about Web 3 and so on, but I’m simply not competent there.
It’s sometimes hard to draw a line between a Headless CMS and a Database. Should you choose DGraph which provides an out-of-the-box GraphQL API and supports authentication or should you prefer GraphCMS? Sure, they are different enough, but selling points and features overlap way too much to ignore similarities.
Here are my personal watch-list of databases (and closely related things like ORMs, etc):
I’m happy to see that Neo4J gets official GraphQL support in a form of library. I always liked Cypher and now (as I’ve seen new monstrocities) I started to appreciate Neo4J and its contributions to the industry even more.
Contentlayer 🔥
Contentlayer is one of the most promising new tools. I swear by it. It’s a framework- and datasource-agnostic tool that you can use to add MDX support to your blog. And no, NextJs’ support of MDX is not that great.
Contentlayer also features out-of-the-box Prisma code highlighting and support for Remark/Rehype plugin ecosystem. All those little bells and whistles.
My sisters’ friends’ “investments”.
Have you noticed the correct quote symbols: “curly” instead of the inch symbol "? Be sure that all the symbols in the code stay untouched:
console.log("Test: my sisters' friends' investments")
🥰 this emoji is also automated and denoted as :smiling_face_with_3_hearts: It’s not a copy-pasted
unicode character which can break when collaborating! Can you see why I said 2022 is a great year for us?!
Mantine 💄
Another tool I’d like to specially mention is Mantine. Component libraries are probably among the most time-consuming software projects: it’s never too many widgets and features. Some tools have progressed significantly in recent years. For example, Material UI was rewritten from JSS to Emotion and now feels quite comfortable to use. Some tools continued to grow steadily, like Chakra (more on that below). And finally there’re some new players like Mantine which was initially selected to style this blog. It’s a new library developed by a single person but the quality and quantity of components is outstanding. Mantine is based on Emotion just as modern MUI.
MUI is a very solid and mature styleguide but it’s everywhere so we wanted to try something fresh. I made a comparison table where Mantine & Chakra ended up as two favorites. Mantine seemed like a larger library with more components, hooks, helpers, so I decided to try it first…
I’m going to describe my experience with Mantine in a separate article. On a spoiler note: it’s similar to other component libraries in a sense that it’s might be great for prototyping but feels way too rigid to support a non-generic design. You’ll have to apply many hacks and work around certain bad defaults and behaviors. The next major version, 5.0, should come up with a fully “unstyled” mode so I might give it another then. Documentation and sources can be named amonst positives – they are are unusually clear and readable.
At the moment, I can’t recommend Mantine for commercial products because of many bugs I encountered. But it’s definitely a library to keep an eye on. And you can certainly try it for the pet projects, if you wish so.
Chakra UI ⚡
Josh Comeau mentioned that Chakra is something else in his article “You don’t need a UI framework”. To be fair, I did not initially get what’s so special about it. A limited set of components (in comparison to alternatives), simplistic look, slower development cycles. But after I’ve been struggling with Mantine for another week I decided to check Chakra a closer look. And then it clicked!
It’s the most customizable and user-friendly UI framework I’ve ever used, by far. It’s built on top of rich heritage laid by Styled-System and Theme-UI (the latter is still supported). Again, I will describe my experience in more details separately. For now I’ll just say that I’m pretty impressed by Chakra and I’m an experienced guy, familiar with many UI libraries. Old and new, you name it: MUI, Bootstrap, Semantic UI, Ant Design, Evergreen, Fluent UI, Grommet, Headless UI, Next UI, Tailwind, Bulma, Foundation, etc. etc.
Chakra UI is superior to all of them (IMO) because it provides a top notch set of low-level components with carefully crafted APIs, names, and very flexible design decisions. It doesn’t feel like a set of Tetris figures. Rather like a set of Lego pieces that are easy to put together.
Unlike Mantine, I can already recommend Chakra for any kind of product. I’ve seen no bugs yet and my experience were pretty smooth. So far it seems like the library I was looking for, and I’m betting on it.
Links ⛓️
Some articles you may find interesting. To me, the most remarkable is how products of different categories get more and more comparable, eventually becoming competitors to each other: