What and why: Web dev Frameworks
The difference between Frontend, Backend, and Meta frameworks
Hi Friends,
A short post today because I needed to keep it simple to manage to finish a post this week. To be honest, its not that easy to find enough time to write long and high quality posts!
Please let me know if you found this type of content valuable or not.
/Eric
What is the difference between Frontend and Backend frameworks?
Frontend runs in the browser, which runs on the client’s device (mobile/laptop/computer). The backend runs on a server somewhere else, and can be located anywhere as long as it is available through the internet.
The frontend displays a graphical interface for the user abd communicates with the backend to perform certain backend tasks such as authentication, fetching data from a database, computation-heavy tasks, and so on.
Frontend frameworks are always based on JavaScript (since that is the language that browsers can run), while backend frameworks exist in many languages, such as Python, C++, Go, Ruby, and JavaScript (using Node.js).
In more detail, what are backend frameworks used for?
Whenever you need to store states or data that lives longer than the browser experience.
Whenever you need to do processing on a server rather than the browser.
Whenever you have dynamic content that changes based on multiple users input (e.g., this site).
Managing authentication and access to certain pages or resources.
What are the main frontend frameworks?
There are many frontend frameworks, here are the most popular:
React
Vue
Angular
Svelte
What are the main backend frameworks?
Laravel (PHP)
Flask (Python)
Django (Python)
Express (JavaScript)
Ruby on Rails (Ruby)
Gin (Go)
What about server-less backends?
Backend code needs to run on a server somewhere. Usually you rent a server somewhere but manage the backend code and seting up the backend frameworks yourself.
Modern cloud infrastructure providers such as AWS and Google Cloud offer server-less backend services. Essentially, these are services that already runs a backend for you (backend as a service), and you just have to use the backend API they provide in your app. You don’t have to setup and manage a backend with database, authentication services, analytics, or task workers, it is already done for you and ready with a simple API.
The catch? You pay per-use of these services and are locked into a specific cloud provider (it’s very cheap though for small apps).
Personally, I don’t really run any backend servers anymore. It’s just so nice and convenient to use server-less services. Saves me a ton of time.
I use Firebase in most of my projects, but AWS also has a server-less backend called Amplify. Supabase is open-source, but you need to host it yourself.
What about using meta/hybrid frameworks as backends?
Meta-frameworks were invented becase Frontend Single-Page-Application (SPA) frameworks, such as React, Vue, and Angular, is really bad for SEO, since they use javascript to populate the HTML page with content on the client-side (all the search engine crawler sees is an empty HTML shell).
Meta-frameworks like Next.js, Nuxt and Angular Universal solves the SEO problem by making it possible to render pages on the server while still using SPA frameworks (now the crawler sees a page with content).
But while meta-frameworks makes it possible for some server-side/backend rendering, it is not a replacement for full backend frameworks. Backend frameworks provide authentication, data storage, and so on, which meta-frameworks can’t (yet) do.
A simple tech stack for your app
UI (CSS) framework: Bootstrap or Tailwind CSS
Frontend (JavaScript) framework: React or Vue (Nuxt or Next.js if you need server-side rendering for SEO)
Backend framework: Firebase as a server-less backend.
Thanks for reading!
To me, some parts of this post feels to basic and some parts feels like it is not explained enough. I’d love to hear your thoughts. Please leave a comment below! :)