Adocasts Adocasts
Adocasts Adocasts
Sign In Sign Up
Playing Next Lesson In
seconds
Building with AdonisJS & Inertia

Transcript

  1. So what exactly is InertiaJS? Well, it refers to itself as a modern monolith. It's not a framework, but a middleman between our server and

  2. our client that helps glue the two together into one seamless developer experience. This allows us to build client-side single page applications, as well as server

  3. rendered apps in a manner where we can still leverage typical monolithic data flows without needing to reach for an API.

  4. Our server is gonna instead be able to directly pass that data as needed to our client-side application, the same as it would if you were using EdgeJS or any other server-side template engine.

  5. Now, InertiaJS was originally created by Jonathan Reddick and Claudio Decker, but it's since been taken over by the Laravel core team. Although the Laravel team maintains the core of InertiaJS,

  6. its methodologies and languages are framework agnostic. And there's a plethora of options, both client and server side, that we can use with InertiaJS, including but not limited to

  7. Laravel, AdonisJS, Rails, Go, Django, Flask, and then on the client side, Vue, React, and Svelte. And the way that it helps bend the back end and the front end together, so

  8. if you have an AdonisJS server and a Vue front end, it's going to have an adapter for both the AdonisJS side as well as the Vue side, and it's gonna help broker

  9. the data transfer between the two via those adapters. Now, for the AdonisJS 6 adapter, it's inspired by the work done by Lev Edelman Negger for the AdonisJS 5 adapter.

  10. But for AdonisJS 6, it's now maintained by the AdonisJS core team, spearheaded by Julian Repiteaux. Now, one of the primary benefits AdonisJS has over the other back end

  11. frameworks is that, just like all of the front end frameworks, it too is written in TypeScript and JavaScript as a whole. So we're able to share some types and even some code between the back end and

  12. the front end as we see fit. Now, throughout this series, we're gonna be building an application called PlotMyCourse. We're gonna begin with the basics on how InertiaJS works and

  13. how it bends the back end and front end together. And then we'll round out our application by focusing on building out whole features using AdonisJS, Inertia as our middleman, and then Vue on our front end.

What Is InertiaJS?

@tomgobich
Published by
@tomgobich
In This Lesson

We'll introduce InertiaJS. We'll discuss what it is, what it helps with, its adapters, and more.

⏳ Chapters

00:00 - What Is InertiaJS?
01:04 - InertiaJS Adapters
01:27 - AdonisJS' Benefit
01:40 - About This Series

What Exactly is InertiaJS?

InertiaJS describes itself as a modern monolith. It’s not a framework but a middleman between the server and the client, enabling a seamless developer experience. This allows us to build client-side single-page applications (SPAs) as well as server-rendered apps in a way that leverages typical monolithic data flows without the need for an API. Instead, the server can directly pass data to the client-side application, just as it would with any server-side template engine like EdgeJS.

InertiaJS is framework-agnostic and supports various server and client-side frameworks. On the server side, this includes Laravel, AdonisJS, Rails, Go, Django, Flask, and more. Then, on the client side, Vue, React, Svelte, and Solid.

One of the primary advantages of AdonisJS over other backend frameworks is that it’s written in TypeScript and JavaScript, just like the frontend frameworks. This consistency allows us to share some types and even code between the backend and frontend.

What We'll Be Building

Throughout this series, we'll be building an application called PlotMyCourse. We’ll start with the basics of how InertiaJS works and how it binds the backend and frontend together. Then, we’ll focus on building out complete features using AdonisJS as our backend framework, InertiaJS as our middleman, and Vue on the frontend.

Join the Discussion 2 comments

Share your thoughts!
Create a free account to join in on the discussion
  1. @laithong-singhalat
    @laithong-singhalat

    Please Share me how to work with Transmit inertia vue.

    1
    1. Responding to laithong-singhalat
      @tomgobich
      @tomgobich Adocasts Plus

      Hi laithong! I haven't yet worked with Trasmit, but I don't believe using Inertia should change its implementation any from what is covered in the docs.

      The server-side installation would be the same as covered in the documentation; installing the packages, configuring your Redis connection, registering the routes, and defining the channels.

      Then, you'd define the client initialization inside a file within your Inertia directory, somewhere like ~/inertia/lib/transmit.ts, and import it where needed. I imagine the client will only work client-side in the browser. So, you may want to ensure whatever imports your transmit file is running only on the client and not using SSR. I'm not certain on that though.

      0