

Discover more from Mechanical Ink - Open Source - Open Web - Open Startup
Have we reached a point where we must fundamentally rethink how we build websites?
Is it just me, or do others feel we have overcomplicated how we build for the web?
Letβs start at the beginning of a brand-new project. Let us also assume that this is a web app akin to a ToDo app, so it is not overly complex, but not simple either. Here are some questions you may need to ask yourself.
Do I need a database?
Would a document database such as MongoDB suffice, or do I need a relational database?
Should I write my API in a traditional back-end language and framework like Django, or do I use Express or a full-stack front-end framework?
If I decide to use a full-stack framework, which one? Next? Nuxt? Astro?
I guess the decision there would be based on the type of website or web app you are building. For a ToDo-like app, Astro is probably not the best choice.
What object-relational mapper (ORM) do I use? I guess I also need to consider that I may start with an ORM that works with MongoDB, but then I later may find that I _do_ need a relational database. Will my current ORM support the switch? If it does, is it tacked on (i.e., there be dragons), or is support baked in at the core? Even if it is baked into the core, how much work would switching be? Maybe I should just start with a relational database from the get-go. π€ If so, is PostgreSQL the way to go, or would MySQL or MariaDB be equally good? What about Supabase or Firebase? Should I be considering those?
I guess I will need accounts. So, I need some way to authenticate users. I really do not want to build that myself. The security and privacy implications feel scary and overwhelming. Will Auth0 do the trick? I guess I should check whether my chosen framework will play nice with it. Oh no! Where is Nuxt?
Should my API be REST-based, or should I use GraphQL? Are they mutually exclusive?
Am I going to use JSX? Even if you are going the Nuxt route π, JSX is still an option, so it is still something to consider.
What do I do about state management? Do I use React Query, MobX, Pinia, Vuex, or stick with `useState` and `useContext` or its derivatives in Nuxt?
Do I want server-side rendering, hybrid, or client-side only rendering?
If I want server-side or hybrid, does the framework take care of hydration and ensure I do not get into tricky situations where there is a mismatch between what the server and the client renders?
Do I use JavaScript on the client and TypeScript for the API, or do I use TypeScript across the entire codebase?
Do I use CSS, SASS, CSS-in-JS, CSS modules, or a framework like Tailwind?
Do I need to include PostCSS?
What is the best, most up-to-date configuration for ESLint, Prettier, Stylint, and TypeScript? What plugins do I need for my editor or IDE to have the best developer experience?
How do I deploy this thing? Can I deploy to Netlify, or should I go with Fly.io? I guess that depends on the choices I made above. Are these really the only places I can deploy a Nuxt-based app, or is the list outdated?
What should I use for error logging in production? I chose Nuxt, but there seems to be no real support for Sentry with Nuxt. π€ Dang it! I wish I had known this earlier. But, I mean, there kinda is, as long as you are not using Nuxt3βdouble dang it.
What testing framework should I use? I hear many people use Cypress, but others say to stay away from Cypress. Apparently, Cypress does not have native support for working with iframes, and they use this thing that looks and smells like a Promise, but it is a Chainable and not a Promise as we know it. You also cannot use async/await. So, Jest? Wait, what now? Playwright? Who is that? Whatever happened to Puppeteer and Jest?
What is the continuous integration and deployment story at the moment? Have we all moved to GitHub Actions? What if I have two repositories, one for the front end and one for the back end? Can I still run my integration tests in CI? What if my frontend pull request depends on a pull request on the backend? Monorepos? What is that? Can I mix different technologies in a Monorepo? Am I even spelling that correctly? Can I still have branch deploys for pull requests?
My global state management solution does not play well with server-side rendering. Do I turn off SSR? Is it worth staying on the full-stack framework if I do, or do I switch back to just Vuejs? How much work would it be? Perhaps the file-based routing alone is worth sticking with Nuxt.
Is client-side navigation using this framework even accessible? It isnβt? Is there a drop-in replacement, that is? No?! What now? Do I have to rewrite everything in another framework? Ainβt nobody got time or budget for that. We had to ship yesterday.
Dang it, I did not consider the offline story⦠Does the framework have support for an offline first experience or any built-in offline support really? Ok, I guess I am hand-rolling it then.
Million what? Million.js - It makes React 10x faster? π€ But I chose Vue/Nuxt. Is there a Million.js for it, or is Vue/Nuxt already super fast?
What did you just say? Nodejs is old news? Are we using Deno now? Hot dang, I completely forgot about serverless and edge functions. Perhaps I should use Remix.
Or do we accept the limitations of the web platform and build an accessibility-first experience using open standards and progressive enhancement? And for the backend? We use a backend language and framework that has been around for years and has grown up alongside the web.
Do not get me wrong, this is not a world without its challenges, but with every passing day, it feels more and more like the numbered list of considerations and 1 AM surprises will be much shorter, fewer, and farther between.
What do you think?
Has modern frameworks and tools demonstrably improved your developer experience?
Do you feel that you are consistently shipping sites, apps, and products faster than ever and that the products are significantly better, more accessible, faster, and have a better user experience than anything you can build with open web standards?
Image generated with Ideogram.