What I learned from rebuilding Sailscasts 2.0 with Inertia

For some time now the rise of SSG(Static Site Generation) and the Jamstack has been eating into web development and I too thought this movement was a blessing when I built sailscasts.com back in 2021.

In 2021 I built sailscasts.com the platform to learn and master Sails for rapidly building your next idea with JavaScript.

Sailscasts was an SSG app with Nuxt that gets data(courses, screencasts, etc from a REST API backend powered by Sails).

Though everything seems good I still had this nudge in the back of my head if it was not too good to be true.

You see the JAMstack sold that your page will be faster when statically generated but what they didn't say was what good is a fast page with no data or does showing annoying loading spinners mean your page is "useful" to your users? Heck no!

Also, SPAs or SSG apps with frameworks like Nuxt tend to make you duplicate things. For example, you will be duplicating middleware in both your backend and in Nuxt. Routing is also duplicated as you need to route Nuxt-style and exposed APIs to the client.

And don't get me started on the authentication - who even understands using JWT the right way like revoking tokens, invalidating them, and refreshing them. Yikes!

Don't get me wrong, I love Nuxt and other meta frameworks like Next and the likes. However, with the above concerns in my mind, I put on my investigative hat and try to find out what I really liked about such frameworks. And the truth is shocking and it is this: I love authoring my pages in Vue SFC(Single File Components).

Integrating Vue in Sails was greatly simplified with Parasails but that euphoria of authoring Vue SFC was lacking with Parasails because of course it wasn't designed to be used like SFC but rather to sprinkle reactivity when you need it in your server-side template which is EJS in Sails case.

Knowing this, I started searching for a way to have the best of both worlds as I call it - Getting the benefits of SPA while still retaining a server-centric development workflow and I found it in Jonathan Reinnik's Inertia from the Laravel ecosystem.

I am unapologetically a fan of the Laravel ecosystem as they are always an inspiration in terms of being at the forefront of innovation and pushing the web forward with such technologies as Inertia, LiveWire, etc.

When I discovered Inertia I was like "Oh my God this is it". I read the protocol over and over again to try and understand it enough to write an adapter for Sails and after several weeks and even emailing Jonathan who was kind enough to respond back, I did it. A working version of inertia-sails.

I then started building a port of the PingCRM in Sails and Vue and it was just so soothing that I abandoned it and rebuild https://sailscasts.com in the stack and boy was it worth it. For example

• No duplicate routes as all routing are handled by Sails which means I can use good old tried and test session for authentication.

• With Sails policies, I can secure pages super easily.

• And yes one codebase and no more loading spinners.

• No need for state management technique as each page gets the data they need to render as props from Sails/Waterline

This was so good that I said perhaps other folks would want to build modern full-stack apps that act like a SPA without the crazy hassle of frontend tooling. I then built create-sails CLI for just this. create-sails is the quickest way to scaffold modern full-stack Sails apps with your frontend being handled by Vue, React, or Svelte.

All you have to do is run npx create-sails and choose your beloved frontend.

I dubbed this whole discovery my secret project for Sailsconf 2022 and I'm super excited to announce it to the world as the way I want to build full-stack Sails apps going forward.

Another benefit of this setup is that it gives you the option to drop down to making Ajax requests anytime you see fit as I use this as well to power guppy - the tinker tool for the Sails developer and even within the Sailscasts website.

In fact, you have all of the benefits of both Sails and SPAs without trading anything(I know it sounds too good to be true but it is)

With this setup, you can practice your MVC skills to the fullest and be more positioned to craft good data models and understand full-stack web development enough to build your next ideas on this stack with just JavaScript.

As indie makers, the smaller the friction to build out our ideas the faster we can move and this setup promises much more speed without any drawbacks.

So that's my learning. Special thanks to Jonathan for giving me Inertia - a glue to piece together my dream development stack.