So you're building an app consisting of a UI and potentially an API as well. What are some excellent default technology choices that are easy to use, scalable and in line with the technology used by the rest of the industry?
In this article, I'll go through some technology choices that I'd pick for my next JavaScript project. Leave a comment and let me know how your stack would look like 😍
1. 🏰 Language - TypeScript
It's worth it. Everyone struggles with it at first, and you may even question if it's worth the (temporary) productivity loss. Very few would go back to writing plain JavaScript after they are fluent with it. It makes reading and writing code a lot easier + you get safety against human errors from the compiler.
2. 🦄 React + Next.js
React is a well-documented, battle-tested and an industry-standard library for building user interfaces in the web. There's a massive ecosystem around it and most UI components you can find already implemented from npm.
I often hear people asking if there's a good boilerplate out there for web projects. Kind of like create-react-app, but with a backend. Next.js does precisely this and more.
Next.js includes the following out of the box, pre-configured and ready to rock:
- Routing
- Static site rendering
- Server-side rendering
- Bundle splitting
One of the things I really enjoy about Next.js is the fact that API endpoints are defined as plain functions – just like you'd do with the Serverless framework or similar. I think this is huge. Next.js is easiest deployed to http://now.sh/, but nothing is stopping you from deploying it to AWS for instance. There's actually a Serverless component meant for precisely this.
You get so many benefits using Next.js as a project boilerplate that it's tough to argue why you wouldn't use it.
3. 🚢 Data storage - PostgreSQL
Choosing a database should always be done based on the structure and relations of the data you intend to store and how it's accessed and manipulated. That being said, in many cases, PostgreSQL is a great place to start.
For a Node.js client, I'd recommend
https://github.com/adelsz/pgtyped
Writing SQL queries to .sql files is way nicer than using an ORM or a query builder such as Knex + you get TypeScript types that always match the schema you have in your database.
4. 👮♂️ Input validation - Yup or Zod
https://github.com/jquense/yup
https://github.com/vriad/zod
You can get by with no input validation library. However, as your application gets more and more API endpoints that modify your data, it's good to find an abstraction you can share throughout the codebase to validate user input. Both of these validation libraries support TypeScript, which will make your life a lot easier. As we're living in the age of TypeScript, your compiler can do some of that validation before you deploy your app.
5. 🎨 Styling - styled-jsx or Tailwind
6. 🔐 Authentication & Authorisation - Auth0
7. 📝 Logging & Error management - Sentry
8. 🧪 Testing - Jest, react-testing-library and Cypress
What else? What would you do differently? Leave a comment and let me know!
Top comments (3)
I'd use vanilla JS with modules and no build step, no frameworks, probably no CSS frameworks either, and I'd use express and sqlite for a backend. If I needed to go bigger I'd probably use postgres. For auth idk what I'd use, maybe passport or indielogin. I don't usually capture client side logs, and if I did I'd use Google Forms because I'm lazy. Testing!?! What's that? /s I haven't ever set up a JS testing system, and I usually just test individual functions as I write them. Any feedback or suggestions esp. about testing are welcome.
I'm in the middle of a Greenfield project at the moment, and I've had the great fortune of picking the tech stack and learning more stuff as I go.
If I was to start again, I'd reconsider entirely the data structures and use more NoSQL, possibly more Redis.
I'd make more use of Vue.js, as that's becoming used more and more in the project.
I'm not using a CSS framework yet, but I plan on looking at some soon as a bit of an academic exercise to see which I'd use in future.
I'm currently testing out Nest for the backend and so far I really like it. I've always been a fan of the approach that Python's Flask uses: starting with a minimal core and adding everything else using pluggable extensions. So for example, Nest Core is basically Express with some sugar coating and if you need AAA, you can plug in mature libraries like Passport or Mongoose for Mongo DB access.
On top of that I use Vue for the frontend and really like it's simplicity.