While this question plagues many and myself, it is as frequently asked as it is frequently debated. Whether you’re looking to make a complete web a...
For further actions, you may consider blocking this person and/or reporting abuse
Honestly, I'm that one person who would build it entirely with vanilla JS, vanilla CSS, and plain old HTML. If I needed a backend, it would probably be built in Flask or Deno. My database... well if I could, JSON, otherwise SQLite3 (it's built in to Python).
I'm the kinda guy who just likes the plain stuff without layers upon layers on top.
I think if you decided to with a web app with vanilla js you would end up building a web framework all over again, unless you just need a little bit of reactivity or interactivity in which case its fine, unless you mean using something like web components
Yes, but that's one of today's problems: too many websites are web apps when they should rather be traditional websites! Some devs and product owners seem to like to overengineer everything, maybe to make it look more important or maybe just because they have a backend mindset and never really understood frontend web development in the first place. But it's still much easier to build a fast, accessible and user-friendly website with progressive enhancement, separation of concerns, more HTML and CSS and less JavaScript.
I mean, you can probably sell a webapp for more than a plain ole' website is what I am thinking. I think a big part of today's tech business world is not making the best product, but making the most expensive one and then shoving it down laypeople's throats.
My sister has a small business and IT professionals/devs always try to sell her useless crap they do their best to convince her she absolutely NEEDS, or her business will go bankrupt/get hacked/lack the necessary productivity etc etc. They back off really quick when I start asking questions.
Right! like every second startup think they need an app, maybe because investors tell them that they would.
I might do something like this, to make it easier, if that's what you mean:
But I don't think I'd do much more.
You can use this cool function to create elements:
see also here, here or here.
I once thought "Wouldn't it be cool if I could just write
html.span("content")"Then I built that.
Then I thought "Wouldn't it be cool if I could add attributes in the same function?"
Then I built that too.
Then I thought "While I'm at it, why don't I make it so I can attach event listeners as well?"
And I built that as well.
Then I figured "It would be nice if I could pass in a listenable state container, instead of a static element, and have it update automatically"
And, even though it was a bit more complicated, I built that as well.
I don't know at what point I'd draw the line, but somewhere along the way, I stopped making "vanilla JS" more usable, and started building my own micro-framework.
This isn't to say there is no merit to minimalism; to me a micro-framework is still better than something like React, but I've given up on this idea that "vanilla is enough". Rather, I'd say "frameworks needn't be big and bloated".
Then you should have a look on VanJS, that implements all this. Tao - the author and a brilliant programmer - managed to pack all this in a very small lib of less than 1 kB.
I've had a close look at VanJS not too long ago, when I first found out about it and overall it seems cool. Overall it appears to have independently reached some of the same conclusions as I did with my own project, but to my personal taste, it's just lacking a variety of quality of life features like turning
myElementintomy-element.My own library is only a bit over 200 lines long, so it's not like I'm paying an unreasonable price for those few extra features anyway.
But still, if VanJS had appeared a few years faster, I would probably be using that right now. It's a cool project and I absolutely feel validated by someone else coming up with the same thing on their own 😁
You should not care too much about the library size. VanJS is increadibly small, but even the VanJS-Logo is about 17kB long. In real life size does not seem to matter so much.
I had a similar project three years ago named DML, which targets more on writing compact code. So I put anything useful into the library which was about 30 kB in the first version. But you do not recognize this in a real life application. The next version anyway would be much shorter and can be used with Rollup.js.
I would have been happy to combine my efforts with VanJS, but it was so important to Tao to save even the last byte, so he did not want any extension. Now there is only a very short wrapper that adds some basic DML features to VanJS. If you like, give me a hint where I can find your lib.
Maybe try out github.com/Uiedbook/cradova
What a pity! There are so many projects like yours (and mine...), but there is not a single one that has enough traction to focus all the effort.
A library provides only the core functionallity. It would be fare more interesting to create functions and classes, that provide more complex solutions, like a page structure or a complex ui element. See this post as an example.
From my experience, building the DOM from Javascript solves 90% of the problems most web designers have to struggle with.
It's a good thing PWA's exist... I veer away from frameworks unless it's a massive project. Progressively enhancing to support app-like or native app when necessary.
I think this is a good idea for many people to start with!
HTML, CSS and JavaScript are an awesome foundation and I love working with them. I think there is nothin wrong with that.
Sooner or later, you may encounter various problems. If you learn more about and understand these problems, you will appreciate many solutions that are available out there.
The fact that many people complain about complex solutions is, in my opinion, due to the fact that they don't understand the problems well enough.
In this context I remember this page vanilla-js.com/ 😎
Embrace tradition!
Sounds scary to me dude
Same. The only difference for me is I may or may not use SCSS and I wouldn't even think to use SQLite.
Good enough for one's hobby site, yes.
I'm with you. I feel that sometimes we do not need layers over layers for most of the things.
Exactlyyyy
When you say JSON for a database, do you mean something like MongoDB or literally storing the data in a JSON file?
Like @joshuaamaju said, I meant JSON file.
Oh ok. I don't think it really makes sense to call that a database, more just a constants file.
Have you implemented it in any production environments?
I've never been part of a production environment. I'm just a hobbyist :)
Have you tried using JSON as an alternative to database? If yes, how did it go?
I am working on a personal project that would require me to store some data. Its not too much, so I think using a database like MongoDB(which i have to learn about first) would be necessary for me. And like you said I also like things plain and with as much as required. 😀
I haven't tried, that's one of the next projects on my list :)
I've used JSON in a production environment many times. It's fast and easy. I've never had more than about 5,000 total users (and even that only on one of my apps) and it's worked great for storing user data and the like.
JSON file I think
If he/she is anything like me, it's just a JSON file, maybe encrypted.
I absolutely agree with you. Just keeping it clean!
That's just disgusting.... I doubt you work as a software developer. I'm guessing you're just a hobbiest because the way you code will never scale.
To be honest, I'm in love with this combo!
how can nextjs be full stack?
Source: Nextjs
“Next.js enables you to create full-stack Web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.”
It is full stupid instead of full stack. Nextjs is merely an extension upon react.
true, and backed by a fully profit company that drive it in their favour.
This sounds solid! Is there a reason you prefer no-sql databases? I'm curious. Have a nice day ❤️
Nah, just hate SQL for no reason. Stupid me. 😅
Lol
i completely agree with this
Currently, I'm also enjoying this stack
Me too.
It feels really exciting to use this tech stack
It depends.
It depends if you actually have dozens millions of clients with huge expectations
And if yes, then please do lots of research.
If not, then YAGNI.
It depends then if you are alone or in a team.
If you are alone, I would choose the simplest thing that work and that you are comfortable with.
If you are in a team, I would choose the simplest thing that work and that you and your colleagues are comfortable with.
Your clients very much don't care about your stack.
They would like us to also focus on their problems, and if possible, solve them.
If your keep things easy and simple, you will have more bandwith to focus on what really matters.
At the end of the day, clients have no use for your code
Next is pretty bad performance wise for most use cases due to it being dependent on React which has awful boostrap performance (140 kB total JS code to parse, that is the size of
react+react-dom). Next also adds in even more code with it's client side router, slowing initial page load even more. Next appears to be snappy great perf once it's SPA is running (on a performant device), but when loading via native HTML page load it is never good, and on low end devices React apps struggle quite often.Astro would be a better choice for vast majority of cases people consider Next for as Astro allows to avoid requiring React for everything. Instead you can have a React SPA portion on your site where needed. The rest can be zero JS or light vanilla JS like HTML web components. It is pretty easy to make a 100/100 perf score site on Astro without even trying. That is something you never get on a full React stack site.
Astro also provides much better tooling for handling CSS scoping out-of-the-box than Next does. Next's best thing is probably CSS Modules, Astro supports that too but you can also throw
<style>on an.astrocomponent and it will become automatically scoped. You don't even need to spend time naming classes if you don't want to do that,article { ...styles here... }will be scoped appropriately to the component. You can have everything you need in one file.TypeScript is nice for backend code and for a complex SPA, but for the true front-end code that runs only on browser with events and DOM manipulation etc TS just gets in the way by being silly due to being unable to know the context well enough. Most of such code is also rather short and simple, so TS often just adds unnecessary verbosity and forces checks where they're not providing any meaningful value.
I don't claim Astro be the best though. It is just better for most use cases people use or consider Next for.
Astro is the best match for almost everything.
Astro + htmx + Alpine
I've never seen nothing simply, easy and optmized like AHA Stack
Websites in general: HTML, CSS, some JavaScript/TypeScript, and some server-side routes using either PHP or JS/TS, so that we can reuse header, footer, and other fragments.
To build content-heavy static websites, Jamstack is still a good choice (eleventy, gatsby, Hugo, etc.) or if you must make it editable by non-tech website owners, maybe even WordPress (with a hybrid theme, custom fields and custom post types so that they can't edit more than they need to!)
For building a complex, interactive, web app with a lot of client-side logic, we might use Svelte, Vue, React, or Angular, with or without an additional next/nuxt layer, but that still doesn't come with a standardized backend. So I would go for Symfony with PHP, Twig, Vue, TypeScript, and Doctrine - a database abstraction layer to prevent devs from writing naive or unoptimized SQL queries. Although I think that I know SQL, I would not recommend to use it directly for security and performance reasons.
As you mentioned jQuery, there is a lot of legacy code out there. Still, even worse, LinkedIn just launched a series of collaborative articles about topics like web development, obviously based on AI-generated content, so juniors reading those articles might be misled to think that jQuery and Flash (yes, Flash!) might be a valid option for web development in 2024. I didn't know if I should laugh or cry, so I added a cautionary paragraph. Here is the post: How do you become a Flash developer? Powered by AI and the LinkedIn community
Is youtube "a website"? Is amazon just "a website"
To build "a website" in 2024 you just need some HTML and CSS, this did not change over the last 30 years.
Maybe you should be a bit more specific in your title! What is "a website" in 2024???
A tech stack usually refers to the common baseline of technologies used. Sorry for any confusion ❤
You are not confusing anybody, this is more a general topic. People are doing very different things on the web, but anybody seems to know what the best "tech stack" is.
The web is much more than just a collection of websites, that it was designed for 30 years ago. It is an operation system running distributed applications with a broad mix of technologies. If I want to create an amazing graphical artwork, React is probably not the best platform for me. And I´m not sure if it outperforms wordpress if you have a content heavy project. Depends on your skills, your task and also your team.
So, please ask for the task before recommending any tools. People can make a hole in the wall using a hammer, but it could be a far better advise to use a drill... Depends much on the hole you need.
Very well said. I am tired of these tech junkies who just want to make noise
This is very true. Using a framework for something that could be an HTML document is just as questionable if not more so than building large systems with complex state management in vanilla/jquery.
Know what the right tool for a job is 👍
@wii what was that micro-framework for js that you built?
There's no "perfect answer", but I do think Django is pretty dang good. Most stuff you need comes out of the box, and while getting it to play nice with a frontend framework can be tricky, it's certainly doable.
P.S: Don't prematurely optimize. That's the biggest mistake in any framework choice. If you need to create 3 info pages for a local business, do you really need React, React Router, Tailwind, PostgreSQL, etc?
Django is a great choice!
This is probably a "hot take" but I only use Javascript on the frontend. I'd pick a scripting language for the backend such as PHP, Python, or C#. I love Vue for the frontend components. I don't get the love for Javascript on the backend.
Personally, it's just about choosing anything that is mature enough for your requirements, has a nice DX and that you think is the easiest to migrate from to another stack once it's needed.
I've recently moved from a more agnostic NextJS (BFF) with .NET API implementation to a full stack .NET with Blazor one. It handles all my use cases and the DX is amazing. My productivity at least doubled.
If you're sick of the React dumpster fire, here's a real DX stack for you:
TypeScript
Astro (for SSG)
Svelte (for components)
Tailwind (for styling, no vendor lock-in libraries)
Go/Echo (if back end needed, can bundle your whole site or app into one binary file)
SQLite (for simple content)
Directus(if you just need a simple CMS instead, made with Vue/Express)
Alternatives:
PostgreSQL, if you need robust DB.
SvelteKit, if you don't feel like having Astro, it can do SSG but Astro has the advantage of shipping minimal JS using islands architecture, which means you could also get by without a framework, just Astro.
Ideal for maintainance and stability:
Frontend: HTML + CSS (good idea to use some UI library of your taste, bootstrap/tailwind doesn't matter but just keep simple.If you have to, put some vanilla JS for some interactions.)
Backend: Some CMS with server-side rendered views.
Hosting: Depends on your backend but probably can run on those 5 dollar shared hosting deals that we have had 20+ years.
I would like to add to the discussion a more real and realistic case. Many of the demands coming for the construction of a website have as a requirement the autonomy of, for example, a Marketing team to make adjustments and changes, so as not to depend on the development team and not have to compete with other products that have clearer benefits in the prioritization queue.
What do you think about Headless Wordpress? Keeping the backend with Wordpress to facilitate changes but having the frontend layer built with a more modern stack like React and the like...?
I honestly don't believe there is ONE ideal tech stack for building a website 🤷
Of course, I have my favorite tech stacks on which I'm most productive, but a good developer should pick the tech stack comprising a bunch of aspects:
For example, if my client wants some a more app-based website, I might go with Vue/Nuxt. If the site is to be mainly static, I might go for something like Astro, for example.
Requirements should define your tech stack and not what is trending right now.
IMHO
Flash 😆
Just kidding... logically it will depend on the moment, or often, on how the client wants it. Right here I've seen a post from someone who deployed a website, originally in ReactJs, on hostgator, because it was requested by the client.
Lately I've been using ReactJs a lot, tailwindcss (because I'm lazy), antd, Firebase/Netlify. In 90% of projects it helps a lot.
Honestly I sometimes miss the Flash-era websites that would have dramatic welcome animations of like a vault opening to reveal their homepage.
For the backend, I'd go straight to .NET. It's really mind blowing. I'm working with it currently and the performance is of the charts, that's not mentioning its capabilities and the available tools.
The DB is a tough choice, but if you are using dotnet for backend, I would go with MS SQL Server, but if you are looking for an open source one, I would go with PostgreSQL.
For the frontend, I am not an expert myself in it so I can't decide clear choice, but I would go for angular or react. Blazor webassembly is a great choice for its performance and compatibility with .NET
Go + Htmx
This is the way
Oh hey, I love answering questions like this that I decided to make a parody amongst common web frameworks: Imperative HTML, basically HTML-in-JS.
That said I’m still in love with Astro even though I had to use Laravel for some of my web projects hosted in classic LAMP-based servers. But I hope one day I could rewrite this in Imperative HTML 🤣🤣🤣
When building your own SaaS product, Ruby on Rails is hard to beat for productivity. You've got everything you need all in one package, plus tons of libraries. Battle-tested for over 20 years.
I'm not sure why people get hung up on JavaScript.
I've been using ionic+vue with php backend (no php framework) and mysql for database these late 2 years for projects for my clients.
Be it for web app or mobile app, my clients mostly happy with the results. So for me, my stack has been battle proven to the market.
IMHO …
The most appealing thing about people using JS frameworks are UI libraries. Take this from them and things get a bit harder.
For me the MVC traditional approach is the way (Laravel, Rails, …. ). Because they are easy to develop and maintain. They are all-in-one solution. Everything works out of the box.
Nowadays there are good UI libraries for these MVC frameworks that are equivalent to JS world.
I like to build my fullstack web-applications with react.js, using either vanilla CSS or bootstrap for styling! Python for backend while using SQLalchemy or PostGres if I want to deploy! I have heard good things about Next.js and have been thinking about diving in!
Most of my work (meaning any projects I start) are some CRUD apps all over again.
In this field, for a long time my stack was Flask + MySQL/MariaDB.
Then I added Turbo/Hotwire for frontend interactivity (similar to HTMX).
Recently I started moving to Ruby on Rails, where the stack seems to be really simple:
For me, this is a great, complete toolbelt for making CRUD apps. It really helps to me to create what I want fast.
This article in a nutshell.
Answering a question that there's no definite answer for.
Stack:
Typescript, Next.js, PostgreSQL, Prisma, Zod, Zustand, TanStack query, Server Actions, Tailwind.
Storage and hosting differ. Redis is an awesome solution for cacheing.
This is my favorite stack to work with!
Other tools:
Bun, Hono if needed self hosting or a costume server.
That's it.
Gulp.js for tasks, twig.js for templates, sass for styles, bootstrap 5 sass for styles framework.
Can add PHP with twig if I need a backend.
Also can use the same stack with WordPress, using Timber (twig for WordPress).
A little of ITCSS and ABEM (see atomic design) for organizing the files, an browserify to support JS ver. ES5 and ES6, and you are ready for anything.
Plain and simple: Nuxt 3, SCSS & BCMS.
There is no such thing as an ideal tech stack. I think the key is to use the tech stack that the project needs. I agree with what many have said here, it makes no sense to use complicated things when it's not necessary, just because "it's the fashionable thing to do", but it's not about reinventing the wheel with every project either. Each project has its particularities and problems, which must be solved with the appropriate tools.
ChatGPT
😂
Kkkkk
For marketing/landing pages, I'd go with Webflow
I would say depends on the website. If performance and SEO is important to your use case, I would go for a framework that offers SSR out of the box - I have built my personal website with Astro which offers the possibility to build SSR pages integrated with components from popular frameworks like React and Vue. Besides Astro, Next as well as Nuxt are also doing a great job on that regard. In my experience it's way easier to optimise a website built with such a framework compared to traditional SPA frameworks like React.
I always doubt anything labeled as "ideal". Every app situation is different
This is very true!
My ideal tech stack to build a website in 2024:
If it is a portfolio or business site, then my personal opinion is to use Next.js for frontend and Strapi for backend.
Strapi gives you the ability to modify site content wihtout re-deploying the frontend. Thus developer dependency get removed, after development.
I default to Next.js, but recently I had good experience with HTMX, ejs and Nest.js.
I tried express-handlebars but it is too restrictive, so ejs mess it worth it.
If you're choosing API Platform for your backendend/API, it purpose a client generator in Vue, React, React native, Nextn Nuxt etc. : api-platform.com/docs/create-client/
I love Svelte.
I heard some good things about Silverlight. It IS the future!
Elixir, Phoenix, and LiveView
I personally think it's going to be, if it hasn't already, Laravel all the way!
Guys guys guys, don't sleep on Vue JS and Nuxt 3 for fullstack Website and app development.
I am a simple man
If back-end needed
NextJs, Node+ Express/NestJs, MongoDB is new front end stack
Your stack sucks. Mine is better.
Angular (Frontend)
.NET/C# (Backend)
.NET MAUI (Mobile Developmen)
SQL Server (Database)
Azure (DevOps)
The best stack is the one that works for you.
Im my case, Ruby On Rails or Vanilla
Go/Templ
Postgresql
Htmx.
Thank past yourself sooner.
And my stack will be
-Laravel
-Livewire
-Tailwindcss
MERN STACK is the best stack in my own opinion, everything is JavaScript/Typescript and you don't need learn another language as long you are familiar with JS/TS.
Ruby on Rails ftw
Am full stack developer, I just finished building a website using only html and css as requested by the client. I had no pain of missing react, site is highly performart.
I would follow KISS principle:
Great insights! And the best options for me: Vue/Nuxt and Node.js for backend.
HTML+CSS+JS+WEB SERVER+DB+CACHE SERVER
I like it! ❤️
I think Php with laravel + Vue js is perfect combination. I have used it in many projects.
expo + supabase come to mind, since expo can work both on web and mobile then supabase can help to not sweating much on js as backend
Just keep it simple and performant.My choice will be ReactJS, Bun and Postgres.
Currently use
React on frontend side,
Nodejs and expressjs in backend
Mongodb as a database.
Trying to shift to typescript...
Essential. That's enough!
I use ExpressJS, MongoDB and EJX