Mastering the Top 4 JavaScript Frameworks: My Epic Journey

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 and postcss.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:

1. Implementing authentication and authorization
2. Building the blog's core features and CRUDS
3. Integrating commenting and user following
4. 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!