DEV Community

Cover image for Mastering the Top 4 JavaScript Frameworks: My Epic Journey
Jeferson F Silva
Jeferson F Silva

Posted on

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
Enter fullscreen mode Exit fullscreen mode
  • Vue
pnpm create vite devflow-vue --template vue-ts
Enter fullscreen mode Exit fullscreen mode
  • Angular
npx -p @angular/cli@latest ng new devflow-angular --package-manager pnpm
Enter fullscreen mode Exit fullscreen mode
  • Svelte
npx sv create devflow-svelte
Enter fullscreen mode Exit fullscreen mode

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 and Angular:

pnpm add -D eslint eslint-config-prettier globals typescript-eslint prettier prettier-plugin-tailwindcss tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Svelte:

Note: Since I started a svelte project using sveltekit, the initial project is already configured with eslint, prettier and even tailwindcss. During the creation process, the CLI presents us with these options. So no additional configuration is required.

configuring eslint

Vue:

pnpm create @eslint/config@latest
Enter fullscreen mode Exit fullscreen mode

Angular:

npx -p @angular/cli@latest ng lint
Enter fullscreen mode Exit fullscreen mode

Note: React and Svelte already have eslint configured

configuring prettier

Create a .prettierrc file and add the following

{
  "singleQuote": true,
  "bracketSpacing": true,
  "printWidth": 120
}
Enter fullscreen mode Exit fullscreen mode

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 and Vue:

  • generating tailwind.config.js and postcss.config.js files.
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode
  • 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}",
  ],
...
Enter fullscreen mode Exit fullscreen mode

Angular:

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode
  • Configuring the template paths: Adding the paths to all the templates files in the tailwind.config.js file.
...
  content: [
    "./src/**/*.{html,ts}",
  ],
...
Enter fullscreen mode Exit fullscreen mode

Svelte: Nothing to do!

  • 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 and Angular:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Svelte: Nothing to do!

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!

Top comments (0)