Are you ready to join me on an exciting adventure through the world of JavaScript frameworks? In this series, I'll share my hands-on experience building a real-world project with each of the top 4 frameworks: React, Vue, Angular, and Svelte.
Why this journey?
As a developer, staying up-to-date with the latest frameworks and technologies is crucial. With so many options, choosing the right one for your project can be daunting. By mastering these four frameworks, you'll gain a deeper understanding of their strengths, weaknesses, and use cases.
The Project: Social Blog app
Throughout this series, we'll build a feature-rich blog app with:
- User authentication
- Post creation, reading, updating, and deletion (CRUD)
- Commenting on posts
- Author following
- And more!
Let's Get Started!
To begin, we'll create a new project for each framework using the following CLI commands:
- React
pnpm create vite devflow-react --template react-ts
- Vue
pnpm create vite devflow-vue --template vue-ts
- Angular
npx -p @angular/cli@latest ng new devflow-angular \
--package-manager pnpm
- Svelte
pnpm create vite devflow-svelte --template svelte-ts
These commands will set up the basic project structure and dependencies for each framework. Note that I'm trying to maintain a standard. I'll use the same package-management for all projects, as well as try to use the same libraries as much as possible. Such as tailwindcss, prettier and eslint.
configuring esling, prettier and tailwindcss
To ensure beautiful and clean code, in addition to following good development practices, it is essential to install and configure eslint and prettier in our projects. I will do this in each of them. Also, I'll use the tailwindcss to style.
Installing the dependencies
React, Vue, Angular and Svelte:
pnpm add -D eslint eslint-config-prettier \
globals typescript-eslint prettier \
prettier-plugin-tailwindcss tailwindcss \
postcss autoprefixer
configuring eslint
Vue and Svelte:
pnpm create @eslint/config@latest
Angular:
npx -p @angular/cli@latest ng lint
Note: React and Svelte already have eslint configured
configuring prettier
Create a .prettierrc
file and add the following
{
"singleQuote": true,
"bracketSpacing": true,
"printWidth": 120
}
Create a file named .prettierignore
in the root of the project. Add files or folders to be ignored, for example: ./node_modules/
configuring tailwindcss
React, Vue and Svelte:
- generating
tailwind.config.js
andpostcss.config.js
files.
npx tailwindcss init -p
- Configuring the template paths: Adding the paths to all the templates files in the tailwind.config.js file.
/* ... */
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
/* ... */
Angular:
npx tailwindcss init
- Configuring the template paths: Adding the paths to all the templates files in the tailwind.config.js file.
/* ... */
content: [
"./src/**/*.{html,ts}",
],
/* ... */
- Adding the Tailwind directives to your CSS: Adding the @tailwind directives for each of Tailwind’s layers to
./src/styles.css
or./src/index.css
file.
React, Vue, Angular and Svelte:
@tailwind base;
@tailwind components;
@tailwind utilities;
In upcoming articles, we'll dive into:
- Implementing authentication and authorization
- Building the blog's core features and CRUDS
- Integrating commenting and user following
- Optimizing performance and deployment
Join the Journey!
Follow along as I share my experiences, tips, and insights. Whether you're a beginner or seasoned developer, this series will provide valuable hands-on knowledge and comparisons between these top JavaScript frameworks.
Stay tuned for the next article, where we'll start building our Blog!
About Me
As a dedicated remote web developer, I specialize in crafting modern, scalable web applications with a focus on performance and user experience. My expertise spans across full-stack development, utilizing cutting-edge technologies and best practices to deliver tailored solutions for diverse client needs. I’m committed to creating responsive, dynamic websites that bring ideas to life. Explore my portfolio here to see my latest projects, and connect with me on LinkedIn to discuss how I can help bring your next project to fruition!
Top comments (0)