Framework vs Vanilla JS
Apologize for a noob question. I was wondering what’s the best way to tackle authentication, routing, search, and state management in multi page web apps? Should I use a framework or is vanilla JS sufficient? I have gotten conflicting opinions. I am working on a project from Frontend mentor. https://www.frontendmentor.io/challenges/entertainment-web-app-J-UhgAW1X
Frontend Mentor
Frontend Mentor | Entertainment web app coding challenge
This multi-page entertainment web app will have you working with JSON data, routing, state management, and search functionality.
4 Replies
Authentication is a very hard problem and even large corporations with millions to spend on their web infrastructure have trouble with it, so you definitely should not try to do this part on your own if security matters to you. Search is a fairly complex problem that is possible to do on your own, but you must have advanced algorithm skills to do it efficiently, unless you rely on the basic search capabilities present in database engines. Routing and state management are both practical to do in vanilla JS, but there are some potential complications that can make them more difficult. Routing for restricted content gets complicated due to the authentication being complicated. State management can get tedious if you want it to be reactive.
Authentication also can't be done on frontend, which is the only place truly vanilla js runs if you want to be pedantic.
it's honestly not that bad to set up a simple username / password authentication system, just read some best practices for storing and hashing passwords, best practices for checking that authentication, and make sure you understand how your backend code is run. If you're storing something sensitive like personal data, maybe don't roll your own, but as long as you do your research it can be fine.
but with this entire list of features you're asking for, I honestly would recommend using some kind of framework. It's all doable in vanilla, afterall the frameworks are written in vanilla as well, but there's a lot of overhead.
You could also write a barebones framework yourself if you want, then reuse that for future projects, but keep in mind that it'll take a lot longer probably
Full disclosure: I'm a big proponent of vanilla JS whenever possible, especially for learning purposes. If you don't already know a framework like React or Vue, or are not very comfortable with vanilla JS, then continue with vanilla JS to get a strong foundation before learning frameworks.
Although to be honest, one needs to set up some expectations and learn to use the best tool for the job and multi-page routing and state management are better handled by frameworks.
Authentication can be tricky to implement, and as with search it has to be done on the server. For this I would recommend reaching for something like Supabase, so that you are free to focus on the frontend. If you are up for the challenge try to use only vanilla JS.
Thank you all for the insights!