The developer ecosystem has grown much and there are so many frameworks that a lot of developers don't know.

We "as developers" get a lot of framework options on how to build our app. Those choices are very important.

Let's cover 15 frameworks for you to make your next project. I will provide detailed resources so that you can learn each of these.

Trust me! This list is all you need.

Let's get started.

Library vs Framework

Before we start, let's understand how a framework is different from a library. Developers use it interchangeably!

Both libraries and frameworks are reusable code written by someone else.

In simpler terms:

Think of a library like a trip to Ikea. You've got your space at home, but you need some furniture help. You don't want to start from scratch, so you head to Ikea where you can pick and choose what you need. You're the one making the decisions.

Now, a framework is more like constructing a model home. You've got a set of plans and a few choices for the layout and design. But ultimately, the blueprint and the builder are in control. They'll let you know where you can add your input, but they're running the show.

In technical terms.

With a library, you're directing the flow of the application. You decide when and where to use the library's functions. But with a framework, the framework controls the flow. It gives you some spots to insert your code, but it's the one calling the shots on when your code runs.

I used this article "The Difference Between a Framework and a Library" by Freecodecamp especially due to the simple explanation. Give it a complete read!

1. Wing - A programming language for the cloud.

The wing is a framework designed to develop cloud applications.
It lets you build apps in the cloud and has a fairly easy syntax.

The core concept is that you can specify resources directly within your application.

You can run a local simulation and visualize what happens in each step using the Winglang console.

You Code. Test Locally. Compile. Deploy to Cloud Provider.

You would need Node v20 or higher for Wing.

Make a parent directory (we are using shared-counter) and set up the frontend with a new React app using Vite. You can use this npm command.

npm create -y vite frontend --template react-ts

// once installed, you can check if it's running properly.
cd frontend

npm install

npm run dev

You can install Wing using this npm command.

npm install -g winglang

You can verify the installation using wing -V.

Wing also provides official VSCode extension & IntelliJ which provides syntax highlighting, completions, go-to-definition, and embedded Wing Console support. You can install it before building an app!

You can build any full-stack app with Wing as a cloud backend.

Create a backend directory.

mkdir ~/shared-counter/backend
cd ~/shared-counter/backend

To create a new empty Wing project.

wing new empty
// This will generate three files: package.json, package-lock.json and main.w file with a simple "hello world" program

wing it // to run it in the Wing simulator
// The Wing Simulator will be opened in your browser and will show a map of your app with a single function.
//You can invoke the function from the interaction panel and check out the result.

The structure would be as follows after using the command wing new empty.

bring cloud;

// define a queue, a bucket, and a counter
let bucket = new cloud.Bucket();
let counter = new cloud.Counter(initial: 1);
let queue = new cloud.Queue();

// When a message is received in the queue -> it should be consumed
// by the following closure
queue.setConsumer(inflight (message: str) => {
  // Increment the distributed counter, the index variable will 
  // store the value before the increment
  let index = counter.inc();
  // Once two messages are pushed to the queue, e.g. "Wing" and "Queue".
  // Two files will be created:
  // - wing-1.txt with "Hello Wing"
  // - wing-2.txt with "Hello Queue"
  bucket.put("wing-{index}.txt", "Hello, {message}");
  log("file wing-{index}.txt created");
});

You can install @winglibs/vite to start the dev server rather than using the npm run dev to start the local web server.

// in the backend directory
npm i @winglibs/vite

You can send data to your frontend using publicEnv available at backend/main.w.
Let's see a minor example.

// backend/main.w
bring vite;

new vite.Vite(
  root: "../frontend",
  publicEnv: {
    TITLE: "Wing + Vite + React"
  }
);

// import it in frontend
// frontend/src/App.tsx
import "../.winglibs/wing-env.d.ts"

//You can access that value like this.
<h1>{window.wing.env.TITLE}</h1>

You can do more:

• read/update API routes & check it using Wing Simulator.
• Fetching the values by using the backend.
• Synchronize browsers using @winglibs/websockets which deploys a WebSocket server on the backend, and you can connect this WebSocket to receive real-time notifications.

Some of the features that can save a lot of your time are Hot Reloading to get instant feedback and the smooth generation of the necessary security policies.

There is no need to learn the syntax for each cloud provider.
Your code can be compiled to AWS, GCP, Azure, or any custom platform. Awesome :D

You can read the complete step-by-step guide on how to build a simple web application with React for our frontend and Wing for our backend. Testing is done using Wing Simulator and deployed to AWS using Terraform.

The AWS architecture after the deployment would be like this.

To give developers options and a better experience, Wing has rolled out full support for additional languages such as TypeScript (Wing). The only mandatory thing is you will have to install the Wing SDK.

This will also make the console fully accessible for local debugging and testing without learning the Wing language.

The wing currently supports these outputs:

• AWS CDK platform
• Terraform/AWS platform
• Terraform/GCP platform
• Terraform/Azure platform
• Simulator platform
• Custom platforms

Wing even has other guides so it's easier to follow along.

You can read the docs and see the examples.

You can also use Wing in the playground to check out the structure and examples.

If you're more of a tutorial person. Watch this!

Wing has 4.5k+ stars on GitHub, 1600+ Releases, and is still not on the v1 release which means a huge deal.

Star Wing ⭐️

2. Nest - efficient and scalable server-side applications.

A progressive Node.js framework for building efficient and scalable server-side applications with TypeScript/JavaScript.

It uses modern JavaScript, is built with TypeScript (preserves compatibility with pure JavaScript), and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

Under the hood, Nest uses Express, but also provides compatibility with a wide range of other libraries, like Fastify, allowing for easy use of the myriad of available third-party plugins.

Nest provides a level of abstraction above these common Node.js frameworks (Express/Fastify) but also exposes their APIs directly to the developer. This gives a level of freedom to developers.

Before we learn more, watch Nestjs in 100 seconds!

You certainly don't have to reinvent the wheel considering the level of flexibility they provide.

This is how you can set up a new project with the Nest CLI.

npm i -g @nestjs/cli
nest new project-name

This will bootstrap the app.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

You can read the docs.

They also offer a set of paid courses (I wonder why). Feel free to check them out if you need a complete roadmap and want to become an expert at using Nest.

But I recommend learning using these free tutorials by Freecodecamp.

• NestJs Course for Beginners - Create a REST API - It's around 3.42 hours and covers a lot of topics.

• Comprehensive NestJS Course - It covers 20 modules and is 14 hours long.

If you're looking for something as a starter project, learn How to Send Emails With Nodemailer in NestJS. You can get solid fundamentals using this.

Nest.js has a large community of developers and is used by a lot of companies. Find the complete list of projects and companies that have used Nest.

By the way, my most common concern as a beginner was with similar names, Nextjs, Nuxtjs, and Nestjs. I'm covering all so you don't have to get confused. Haha!

Nest has 64k+ stars on GitHub, with 15k+ commits, and is on the v10 release.

Star Nest ⭐️

3. Gatsby - best React-based framework with performance, scalability, and security built-in.

Gatsby is a free and open source framework based on React that helps developers build blazing-fast websites and apps.

It combines the control and scalability of dynamically rendered sites with the speed of static-site generation, creating a whole new web of possibilities.

Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.

Unlike Next.js, Gatsby does not perform server-side rendering. Instead, it generates HTML content on the client side during build time.

I've seen some of the great portfolios built using Gatsby.

Get started with the following npm command.

npm init gatsby

It’ll ask for a site title and the name of the project’s directory. Continue following the prompts to choose your preferred language (JavaScript or TypeScript), CMS, styling tools, and additional features.

This is how you can use this.

cd my-gatsby-site

// to start the local dev server
npm run develop

You can read the docs. I personally loved the flow of the documentation.

You can also follow tutorial to get started, How To Guides and Conceptual Guides that goes deep in Gatsby concepts along with website architecture.

Gatsby provides out-of-the-box PWA and a lot of themes. Using a Gatsby theme, all of your default configuration (shared functionality, data sourcing, design) is abstracted out of your site, and into an installable package. You can read more about the themes.

For instance, gatsby-theme-blog is the official Gatsby theme for creating a blog. There may be theme options that can be configured via gatsby-config.js.

npm install gatsby-theme-blog

Gatsby is not an ideal solution for content-heavy enterprise-scale websites like e-commerce stores or extensive media websites. The build time will drastically increase as the size of the content grows.

Find the list of 606 sites that are built using Gatsby. Out of those, 53 sites are open source so this can give inspiration and also a starting point.

They also provide a huge set of plugins divided into categories along with the clear docs in each of them. One of the examples is a plugin to add Google Analytics to your app.

npm install gatsby-plugin-google-analytics

You can also use Starter library of Gatsby. What more do you need to build your next app with Gatsby?

Use these reference guides to get detailed information about Gatsby's APIs.

If you prefer a full course, I recommend watching Gatsby Static Site Generator Tutorial - a 9 hours tutorial by Freecodecamp.

Gatsby has 55k stars on GitHub, is on the v5 release, and is used by 245k+ developers.

Star Gatsby ⭐️

4. Nextjs - The React framework for the web.

One of my favorite frameworks due to the level of optimization it provides.

Next.js enables you to create full-stack web applications by extending the latest React features and integrating powerful Rust-based JavaScript tooling for the fastest builds.

Next.js was created by the Dutch company Vercel (previously known as ZEIT) in 2017.

Next.js does offer static generators as well like Gatsby. Next.js is built with the principle of Build once, runs everywhere so you can make web applications with Next.js, mobile apps, desktop apps, and progressive web apps.

Nextjs offers a lot of features such as file routing, rendering techniques (such as ISR), and deep-level Image and font optimization. You can check the SEO stats of any nextjs website and it would be top-notch in most cases.

Get started with the following npm command.

npx create-next-app@latest

You can read the docs and follow this guide to get started.

There are a lot of concepts involved, and it would take months to read complete docs. I wrote an article some time back that you can check out. It didn't get famous but it's one of the best that I wrote with years of my experience in Nextjs. I've also mentioned the official course provided by the Nextjs team.

12 things you didn't know you could do with Nextjs

Anmol Baranwal ・ Feb 20

#nextjs #programming #beginners #tutorial

If you want to learn through a YouTube tutorial, I recommend watching these recent tutorials as the docs are updated very often so it's better to watch something more recent rather than a few years back.

• Nextjs 13 (App Router) with TypeScript - 1 hour tutorial.
• Next.js 14 Full Course 2024 - 3 hours tutorial.

You can also watch Nextjs in 100 seconds. They have added a basic tutorial leading it to 11 minutes.

I've learned it by myself using docs and built more than 6 projects using it, even a 20k+ codebase SAAS app. That is why I say, it's one of the best frameworks you can choose.

Some of the popular websites that are built using Next.js are Auth0, Coinbase, Docker, GitHub, Hulu, Netflix, Sesame, Starbucks, Trulia, Twitch, and Uber. You can see all the websites that use Nextjs.

They have also provided a wide range of starter templates that you can directly use.

Next has 120k stars on GitHub, is on the v14.2 release, and has 6000k+ weekly downloads on NPM. Used by 2.6M developers as shown on their repository.

Star Nextjs ⭐️

5. Preact - Fast 3kB React alternative with the same modern API.

Preact is a lightweight, swift, high-performance library and alternative to React. Preact is merely 3kb in size (minified and gzipped) and yet gives you all the necessary functionality of React, making it one of the best JavaScript frameworks.

Jason Miller, a senior Developer Programs Engineer at Google, created Preact.

Preact is basically all the power of Virtual DOM components, without the overhead such as:

• Familiar with React API & patterns that is ES6 Class, hooks, and Functional Components.
• Extensive React compatibility via a simple preact/compat alias.
• Everything you need like JSX, VDOM, DevTools, HMR, SSR.

You can easily switch to Preact from React in an existing project during production since they support the same API.

A sample structure of code is shown below. You can also see this sample codepen that you can view to understand the structure of the codebase in Preact.

Get started with the following npm command.

npm init preact

This is how you can run the dev server.

# Go into the generated project folder
cd my-preact-app

# Start a development server
npm run dev

You will have to configure some stuff, especially aliasing. Follow this guide.

You can read the docs and see the extensive list of demos & examples.

They also provide a web-based tutorial which you can follow to learn Preact.

Use Awesome Preact if you need example apps, boilerplates, components, toolkits, and more.

Preact has 36k stars on GitHub and is on the v10 release.

Star Preact ⭐️

6. tRPC - End-to-end typesafe APIs made easy.

tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.

If we're going deep, then you should definitely read a bit about the history.

A Brief History of API: RPC, REST, GraphQL, tRPC

JS for ZenStack ・ Jan 11 '23

#webdev #javascript #api #typescript

Currently, GraphQL is the dominant way to implement typesafe APIs in TypeScript (and it's amazing!). Since GraphQL is designed as a language-agnostic specification for implementing APIs, it doesn't take full advantage of the power of a language like TypeScript.

If your project is built with full-stack TypeScript, you can share types directly between your client and server, without relying on code generation.

tRPC is for full-stack TypeScript developers. It makes it easy to write endpoints that you can safely use in both the front and backend of your app. Type errors with your API contracts will be caught at build time, reducing the surface for bugs in your application at runtime.

This is designed for mono repo, as you need to export/import the type definitions from/to your server.

Get started with the following npm command.

npm install @trpc/server@next @trpc/client@next

You have to define a backend router with an instance. Read the the quickstart guide for more details.

It's important to understand the concepts involved in trpc such as about rpc and terminologies used.

You can read the docs.

If you already work in a team where languages are mixed or have third-party consumers over whom you have no control, you should create a language-agnostic GraphQL-API.

If you want to test things out, I recommend using this template that includes a minimal example.

You can also watch this 45 minutes YouTube tutorial to understand more about trpc.

They have 32k+ stars on GitHub, are on the v11 beta release, and are used by 51k developers.

Star tRPC ⭐️

7. Nuxtjs - Intuitive Vue Framework.

Nuxt is a progressive open-source framework based on the Vue.js ecosystem used to build performant web applications, especially server-side rendered apps.

But remember that Nuxt is not a substitute for Vue.js as it cannot function alone. And neither can it be considered a full-fledged backend framework like Express.

Watch Nuxtjs in 100 seconds to grasp the overall concept.

Nuxt is one of the best JavaScript frameworks to create these three kinds of web apps – Pre-rendered Static pages, Single-page web applications (SPA), Server-side rendered web applications(SSR), or even universal Apps.

Developers love Nuxt especially because of a rich collection of libraries and modules.

Get started with the following npm command.

npx nuxi@latest init <my-project>

You can read the docs and check codesandbox example.

You can follow this guide to learn about more of the key concepts.

There are a lot of integration options so it's easier for you to keep using your preferred tools and services.

You can see the list of free courses to learn about the Nuxt ecosystem.

If you want a recommended course, then learn from Nuxt 3 — Course for Beginners - a 3 hour tutorial by Freecodecamp.

Some of the popular websites that are built using Nuxt are Aircall, Amplitude, Backmarket, Bitpay, Bootstrap Vue, Fox News, Gitlab, Icons8, Instrument, MyScript, Nespresso, Note.com, Ozon.ru, Roland Garros, System76, Todoist, Upwork, Wappalyzer. Find the complete list of showcased websites under different categories.

If you want to test and build quickly, then I recommend checking out the starter templates.

Nuxt has 51k+ stars on GitHub and is used by 318k+ developers.

Star Nuxt ⭐️

8. Ember.js - A JavaScript framework for creating ambitious web applications.

Ember.js is a JavaScript framework for building scalable single-page web applications for businesses. Model-View-ViewModel (MVVW) architecture is the foundation for Ember, unlike other frameworks.

Ember.js was originally a SproutCore 2.0 framework that was renamed Ember.js by its creator Yehuda Katz, an accomplished developer credited as one of the chief creators of jQuery.

They also provide a Command-line interface tool. The Ember CLI is the official way to create, build, test, and serve the files that make up an Ember app or addon.

npm install -g ember-cli

Even though Ember.js is an older front-end JavaScript framework compared to React, Vue, and Svelte, it still packs a punch and has a big user base with major companies like – Microsoft, LinkedIn, Netflix, and Twitch. View the complete list.

With strong defaults, you may never need to configure anything in your app, but the options are there if you need them!

That means Ember.js follows the “CoC – Convention over Configuration” approach, which ensures that there is no need for any configuration in most cases so that you can jump straight away to coding and building your web application.

They also support 2-way data binding similar to AngularJS.

As we are going deep, it's important to understand how ember.js came to be, the pioneers behind its creation, and the life-altering decisions that go into making open source software. Watch this!

Once you have installed Ember CLI.

npm install -g ember-cli  

You can create a new app as shown.

ember new ember-quickstart --lang en

cd ember-quickstart
npm start

You can read the detailed quickstart docs and the official guides.

For learning ember.js, you can follow this step-by-step tutorial created by their official team. You can read more about APIs on the Ember API Documentation.

There are thousands of JavaScript libraries that work great in Ember. When an npm package offers some Ember-specific features, they call it an addon. An addon provides a way to write reusable code, share components and styling, extend the build tooling, and more—all with minimal configuration. Find the complete list of addons.

If you're looking for more articles to learn Ember.js, I recommend these:

• Ember JS Essentials: A beginner's guide to installation and its features by Startech.

• A Guide to Building Your First Ember.js App by Toptal.

This will be enough to understand the structure and to decide when Ember is appropriate for your project.

They have 22k+ stars on GitHub and are on the v5.8 release with 500+ releases.

Star Ember.js ⭐️

9. Backbone.js - Give your JS App some Backbone with Models, Views, Collections, and Events.

Backbone.js is a JavaScript-based framework that connects to an API via a RESTful JSON interface.

Jeremy Ashkenas, renowned for creating some of the best JavaScript frameworks, such as CoffeeScript and Underscore.js, launched Backbone.js in October 2010.

It is intended to create single-page web applications and maintain synchronization between different web application components, such as numerous clients and servers.

Backbone.js is known for being small and light because it only requires jQuery and one JavaScript library, Underscore.js, to use the entire library.

Backbone.js supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

This is a simple backbone view.

var AppView = Backbone.View.extend({
  // el - stands for element. Every view has an element associated with HTML
  //      content will be rendered.
  el: '#container',
  // It's the first function called when this view is instantiated.
  initialize: function(){
    this.render();
  },
  // $el - it's a cached jQuery object (el), in which you can use jQuery functions
  //       to push content. Like the Hello World in this case.
  render: function(){
    this.$el.html("Hello World");
  }
});

You can read the docs.

Backbone.js is used by many trusted companies such as Walmart, Pinterest, SoundCloud, and many more.

You can refer to their wiki where they have documented Tutorials, blog posts, and example sites.

There are a couple of great articles that you can refer to learn more:

• BackboneJS: Getting Started - Recommended.
• Backbone.js for Absolute Beginners
• BackboneJS Tutorial - Tutorials point.

They have 28k+ stars on GitHub and are used by 66k+ developers as per repo stats.

Star Backbone.js ⭐️

10. Svelte - Cybernetically enhanced web apps.

Svelte is a new way to build web applications.

It was created by Rich Harris (famous frontend developer). Svelte was first launched in 2016 and has witnessed an absolute explosion in popularity.

Many developers consider Svelte a truly game-changing and revolutionary idea that fundamentally changes how we code web applications.

Svelte, unlike other JavaScript frameworks such as React or Vue.js, has no virtual DOM. Instead, you build components boilerplate-free in simple HTML, CSS, and JavaScript code.

Svelte Compiler then compiles this code into small framework-free vanilla JavaScript modules during build time and surgically updates the DOM when the state changes.

So unlike other traditional frameworks like React or Vue.js, Svelte does not require high browser processing.

Svelte relies on reactive programming to surgically update the DOM. As a result, it can achieve the fastest rendering compared to almost any other framework and tops most of the performance benchmarks.

Get started with the following npm command.

npm create svelte@latest my-app

This is how you can use it.

cd my-app
npm install
npm run dev -- --open

You can read the docs. The team also provides a official VSCode extension that can integrate with various other editors and tools as well.

They also provide a detailed web-based tutorial to learn Svelte.

You can see all the examples to understand critical concepts and structure including DOM events, lifecycle, motion, transitions, and dealing with SVGs.

These are a couple of tutorials that you can watch to learn everything about Svelte.

• Learn Svelte – Full Course for Beginners - 23 hours tutorial by Freecodecamp.

• Sveltekit & Tailwind - 2 hours tutorial by Freecodecamp.

A big kudos to the instructors for providing such detailed tutorials for absolutely free!

Svelte has 76k+ stars on GitHub, is on the v4.2 release, and is used by 282k developers.

Star Svelte ⭐️

11. Remix - Build Better Websites.

Remix is a full-stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience that deploys to any Node.js server and even non-Node.js environments at the edge like Cloudflare Workers.

Built on top of React Router, Remix is four things:

• A compiler
• A server-side HTTP handler
• A server framework
• A browser framework

You can watch this to understand more about Remix by Fireship.

Through nested routes, Remix can eliminate nearly every loading state as shown.

Get started with the following npm command.

npx create-remix@latest

This is how you can use this.

mkdir my-remix-app
cd my-remix-app
npm init -y

# install runtime dependencies
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom

# install dev dependencies
npm i -D @remix-run/dev vite

Read this quickstart guide if you want to include your server and more on how you need to provide a Vite config with the Remix Vite plugin since Remix uses Vite.

You can read the docs. They have distributed it depending on what you want to do, which I loved by the way.

Find the complete list of websites that are built using Remix.

You should also check out Remix Resources which is made by the community. Some of them are helpful and improve the whole ecosystem.

If you've come across Remix for the first time, I suggest going through Remix Tutorial -30min created by the official team.

They have 27k+ stars on GitHub and are on the v2.8 release.

Star Remix ⭐️

12. AdonisJS - TypeScript-first web framework for building web apps and API servers.

AdonisJS is a fully-featured backend framework for Node.js. The framework is created from the ground up with a strong emphasis on developer ergonomics and ease of use.

AdonisJS focuses on the backend and lets you choose the frontend stack of your choice meaning Frontend agnostic.

It is one of the rarest frameworks in the Node.js community that ships with a suite of first-party packages that helps you create and ship products without wasting hundreds of hours assembling different npm packages.

At the fundamental level, AdonisJS provides structure to your applications, configures a seamless TypeScript development environment, configures HMR for your backend code, and offers a vast collection of well-maintained and extensively documented packages.

They have emphasized a bit on testing which is very good.

Get started with the following npm command.

npm init adonisjs@latest hello-world

AdonisJS embraces the classic MVC design pattern. You start by defining the routes using the functional JavaScript API, bind controllers to them, and write logic to handle the HTTP requests within the controllers.

import router from '@adonisjs/core/services/router'
import PostsController from '#controllers/posts_controller'

router.get('posts', [PostsController, 'index'])

Controllers can use models to fetch data from the database and render a view (aka template) as a response.

import { HttpContext } from '@adonisjs/core/http'
import Post from '#models/post'

export default class PostsController {
  async index({ view }: HttpContext) {
    const posts = await Post.all()
    return view.render('pages/posts/list', { posts })
  }
}

If you are building an API server, you can replace the view layer with a JSON response. But, the flow of handling and responding to the HTTP requests remains the same.

You can read the docs.

You can also refer to the starter kits.

They also provide a VSCode extension which you should use if you're starting with Adonisjs.

You must check out Awesome Adonisjs which provides a list of awesome bookmarks, packages, tutorials, videos, courses, companies with websites using this and other cool resources from the AdonisJS ecosystem.

Most of the time it is tough to get started with something very new so the team has provided 10+ courses to learn about the Adonisjs ecosystem.

They have 15k+ stars on GitHub and are on the v6.8 release.

Star AdonisJS ⭐️

13. Astro - The web framework for content-driven websites.

Astro is an open-source, server-first web framework that combines the best of static site generation (SSG) and server-side rendering (SSR) to create fast, SEO-friendly websites. Astro is purpose-built to power content-rich websites like blogs, and e-commerce and has a great development ecosystem.

Get started with the following npm command.

npm create astro@latest

You can read the docs and the showcased websites built with Astro. Some of those are really awesome and visually stunning!

Astro supports React, Preact, Svelte, Vue, Solid, Lit, HTMX, web components, and more. Read about all the features documented.

You can follow this tutorial to build your first blog with Astro. Or use the themes to jumpstart your next project. Some of those are free while others are paid!

You can see the loading performance as shown and even I was surprised by this.

Performance is crucial especially if you're doing something commercially because an efficient algo will lead to saving more money and hassle.

The integration options are huge whether in terms of accessibility, icons, or using different libraries.

You can watch Astro Web Framework Crash Course a one-hour tutorial by Freecodecamp.

Astro has 42k+ stars on GitHub, is on the v4.6 (1800+ releases), and is used by 112k+ developers.

Star Astro ⭐️

14. Fresh - The next-gen web framework.

Fresh is a next-generation web framework, built for speed, reliability, and simplicity.

Some stand-out features:

• Island-based client hydration for maximum interactivity.
• Zero runtime overhead meaning no JS is shipped to the client by default.
• No configuration necessary.
• TypeScript support out of the box.

The framework uses Preact and JSX for rendering and templating, handling tasks on both the server and the client.

Moreover, Fresh eliminates the need for a build step. The code you write operates directly on both the server and client sides. Transpilation of TypeScript or JSX to plain JavaScript occurs dynamically, precisely when required. This facilitates incredibly rapid iteration cycles and swift deployments.

Get started with this.

deno run -A -r https://fresh.deno.dev

The most significant architectural decision Fresh adopts is its usage of the islands architecture pattern.

This means that Fresh applications ship pure HTML to the client by default. Parts of a server-rendered page can then be independently re-hydrated with interactive widgets (islands).

The client is only responsible for rendering parts of the page that are interactive enough to warrant the extra effort. Any purely static content does not have related client-side JavaScript and is thus very lightweight.

You can read the docs.

You can find all the websites that are built using this such as the portfolio website of Max Schmidt.

They have 11k+ stars on GitHub and are on the v1.6 release.

Star Fresh ⭐️

15. Vue.js - a progressive JavaScript framework for building UI on the web.

Vue.js is a progressive framework due to its capability to facilitate the design of high-end single-page web applications through dual integration mode. Read all the ways of using Vue including from embedding web components to standalone scripts, or even for building complex apps with server-side rendering or static site generation.

Using the MVVM (Model-View-ViewModel) architecture, Vue.js keeps things simple, flexible, and beginner-friendly.

Vue.js was first launched in 2014 by Evan You, a developer working for Google who took inspiration from AngularJS to deliver a simple, lightweight, and efficient alternative.

While borrowing some features from ReactJS and AngularJS, Vue.js has enhanced them to offer a smoother, more user-friendly experience. For example, Vue.js combines AngularJS's 2-way data binding with React's efficient Virtual DOM.

Vue has an inbuilt MVC that enables quick and easy configuration, unlike React. Also, the zipped version of Vue.js is barely 18-20 kb in size, much lighter than its bloated, bulky rivals like React or AngularJS.

Vue.js also includes a handy built-in component for CSS transitions and animations.

Watch Vue.js in 100 seconds to learn more!

Get started with the following npm command.

npm create vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool. You will get prompts for several optional features such as TypeScript and testing support.

This is how you can start the dev server.

cd <your-project-name>
npm install
npm run dev

A simple app.

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

The above example demonstrates the two core features of Vue:

1. Declarative Rendering: Vue extends standard HTML with a template syntax that declaratively describes HTML output based on JavaScript state.

2. Reactivity: Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.

You can also use it using CDN which will use the global build. Read the quickstart guide to know more.

You can read the docs and see the code editor examples of different topics, even on how to build a Markdown Editor.

To get a taste of Vue.js, you can try it directly in their live playground as well.

One of the articles about Vue that I really loved is by Michael on DEV. Must read!

25 Vue Tips You Need to Know

Michael Thiessen ・ Jul 21 '21

#vue #webdev #javascript #tutorial

If you're just starting, you can follow this official tutorial created by their team.

Similar to Astro, they also have a courses section and Vue School where you can find all sorts of topics.

Vue.js powers many reputable websites, including Font Awesome, Upwork, and Namecheap, among others.

Freecodecamp has a 3 hour tutorial on Vue for beginners but I don't recommend it because it is from 2019, and we know how quickly concepts change in these frameworks.

They have 44k+ stars on GitHub and are on the v3.4 release. It is one of the most loved frameworks of all time by developers.

Star Vuejs ⭐️

There are so many other frameworks some of which you can check out: Aurelia.js, Mithril.js, Stimulus.js, Meteor.js, Angular.js, React.js, Knockout.js and Alpine.js.

Yes I know, I'm feeling 😵 and excited at the same time. HAHA!

I've got some video recommendations that could give more depth to this article.

I made this full of tutorials on purpose to help you find everything in one place. I hope you enjoyed this!

While I'm a big fan of Next.js, exploring other awesome frameworks like Wing could be perfect for your next project.

Let us know which frameworks you're planning to use or if there's anything else you think others should know.

Have a great day! Till next time.

I create tech content to help others grow 1% daily so you can follow me on Twitter and LinkedIn to get daily insights.

If you like this kind of stuff, please follow me for more :)

Follow Winglang for more content like this.

Winglang Follow

Winglang is a new open-source programming language that combines infrastructure and runtime code in a safe and unified programming model (aka "cloud-oriented"). It comes with a built-in local simulator and an observability & debugging console.