The Two Paths: DIY or Framework?
When it comes to building a project, you essentially have two options.
- The first is a custom combination of tools tailored to your needs. A DIY approach.
- The second is to use a pre-selected set of tools from the developer community.
Building your custom stack. #DIY
Building a custom stack is an excellent choice for those who enjoy the hands-on approach. This option suits hobby projects, learning, or practice. Popular combinations include:
Learning Stack: HTML, CSS & JavaScript.
The most basic stack because it contains the three foundational elements of development. Can also be referred to as the ‘Vanilla stack’. Vanilla essentially means how a technology was originally intended to be written.
Small Application: React, JSX and Tailwind
Instead of using Vanilla HTML, CSS or JS, you can build apps using libraries that improve the developer experience, like JSX instead of HTML, Tailwind instead of CSS & React instead of Javascript.
This stack replaces the foundational tools you learned. At this point, you may be asking yourself, why not just use HTML, CSS, and Javascript? And we will get to that.
Also, note that this is what I would use; there are multiple combos you can have
Simple Website: Bootstrap, HTML & JQuery
For a simple website, you can use vanilla HTML, Bootstrap instead of CSS and JQuery instead of Javascript
Customized Website: HTML, TailwindCSS, & AlpineJS
For a more customized-looking website, you can use vanilla HTML, Tailwind instead of CSS & AlpineJS instead of Javascript
For simplicity, we haven’t included any databases or programming languages so far, but we will expound on them later.
Making it reusable
Let’s say you build a complete website (you decide what complete is, it could be just three files an index.html a style.css and a script.js) and now you would like to build a second website. Instead of starting from scratch, you could copy the three files from the ‘complete’ website and use them to build another website. And voila! You have just created a simple custom framework for building websites.
You have basically decided that the three files are all you need for a website, so those three files become the framework for your next website (obviously, you will have to edit the file contents to match the content of the next website). This is an overview of what a framework is. So, anytime you hear someone say framework, just imagine it as someone’s or a group of peoples idea of the files and tools you need to build a project.
Third-party framework, AKA someone else built it.
This is when you decide to copy someone else’s idea of a ‘complete’ combination of tools.
There’s hundreds of frameworks in existence of not thousands or as many as there are developers with ‘complete’ projects, but we’ll only mention a few popular ones like Laravel, MEAN, MERN, Django etc.
Major frameworks will have all 5 foundational elements integrated
Laravel framework (link)
Django framework (link)
NextJS framework (link)
Other popular frameworks/tech-stacks include:
- MERN: CSS (any), HTML (JSX), JS (React), DB (MongoDB), LANG (NodeJS – ExpressJS)
- MEAN: CSS (any), HTML (custom HTML), JS (Angular), DB (MongoDB), LANG (NodeJS – ExpressJS)
- MEVN: CSS (any), HTML (custom HTML), JS (Vue), DB (MongoDB), LANG (NodeJS – ExpressJS)
Other frameworks not included above are Ruby on Rails, Flask, Symfony, Blazor, etc.
Beyond the Basics: Extra Technologies and Tools
Thus far we have listed the 5 foundational aspects of web development, HTML, CSS, Javascript, Databases and a Programming language. On top of these fundamentals, other tools, best practices and technologies exist that assist with development. For example, Git, hosting, npm, sass, less, HTTP and many more.
Each element serves a specific purpose, and as we delve deeper, it will all come together and make sense. Moving forward with this series, we will use the Vanilla stack, HTML, CSS and JS (which is what you are familiar with) as the foundation and add on to it so that everything makes sense.
Remember, the key to mastery lies not in mastering every tool available but in selecting the ones that fit with your project. Happy coding!
easy cute code
Estimated Reading Time: 4 minutes