How The Boring JavaScript Stack works

Summary

The Boring JavaScript Stack embraces a traditional MVC (Model-View-Controller) architecture, using Sails.js as the backend framework while integrating Inertia.js to seamlessly connect the frontend and backend. Unlike the common approach of separating backend APIs and frontend SPAs, this stack allows developers to use Vue, React, or Svelte as the view layer within the MVC structure.

Key benefits of this approach include:

• Eliminating the need for a separate API layer.

• Keeping both frontend and backend within a unified JavaScript ecosystem.

• Providing flexibility in structuring applications, allowing a mix of static pages (using EJS) and interactive pages (using Inertia with Vue, React, or Svelte).

• Making full-stack development simpler and more maintainable by reducing complexity and unnecessary separation of concerns.

Overall, The Boring JavaScript Stack offers a practical and efficient way to build web applications while maintaining flexibility and ease of use.

Transcript

Traditional MVC Architecture

The Boring JavaScript Stack follows the tried-and-true Model-View-Controller (MVC) pattern for building web applications. Here’s how a traditional MVC setup works in a Sails.js application:

1. Client Request

   • A user visits a website (e.g., sailscasts.com).

   • The request is sent to the router, which determines which controller should handle it.

2. Controller Processing

   • The controller contains business logic and processes the request.

   • If necessary, the controller queries the database (e.g., retrieving the top three courses on SailsCasts).

3. Rendering the View

   • The response is sent to the view layer.

   • In traditional server-side rendering, templating engines like EJS (Embedded JavaScript) are used to generate HTML.

   • If the response is for an API, it is typically returned as JSON.

How The Boring JavaScript Stack Works

The Boring JavaScript Stack modifies this structure by incorporating Inertia.js to bridge the frontend and backend, eliminating the need for a separate API.

1. Request Flow

   • The client makes an HTTP request.

   • Sails.js processes it using the MVC structure.

   • The controller handles the request and passes it to Inertia.js instead of returning traditional HTML or JSON.

2. Inertia.js as the Response Layer

   • Inertia acts as a bridge between the backend and frontend.

   • Instead of returning raw HTML or JSON, the response includes:

     • The name of the frontend component to be rendered.

     • The data the component needs.

3. Frontend Rendering

   • The frontend can be built using Vue, React, or Svelte.

   • The styling is managed with Tailwind CSS.

   • Inertia swaps out components dynamically without requiring a full-page reload.

Benefits of The Boring JavaScript Stack

1. Unified Development

   • Full-stack development remains within JavaScript, reducing context switching.

   • Frontend developers working with Vue, React, or Svelte can easily understand Sails.js controllers and work with the ORM.

2. No Separate API Layer

   • Unlike traditional SPAs, there’s no need to maintain a separate API, reducing complexity.

3. Flexible Architecture

   • Developers can mix static pages (using EJS for SEO) and dynamic pages (using Vue, React, or Svelte with Inertia).

   • This hybrid approach allows for better performance and user experience.

4. Simpler Maintenance

   • Since the architecture is predictable and follows MVC principles, applications are easier to debug and maintain.

   • Developers don’t have to keep up with frequent changes in frontend frameworks or API structures.

Conclusion

The Boring JavaScript Stack provides a simple, stable, and flexible way to build web applications. By using Sails.js + Inertia.js + Vue/React/Svelte, developers can create scalable, maintainable applications without the hassle of managing separate frontends and backends.