Using React, Vue, or Svelte components as server-side templates

[DominusKelvin]

Hey all, so I have been thinking about a modern template engine for Sails which I called Tide. It has been on my mind for the whole year but having to learn a new DSL don't sit well with me.

And don't even sound boring 🥱 enough. I share more details in this Twitter post.

Yesterday something hit me as I have been researching for Ship less JavaScript™️, I saw multiple times how Netflix use React on the server way before RSC and I had an epiphany, why not just let the developer use the same DSL they've picked for their frontend as well as their backend for writing templates to return just HTML and no need to have a separate DSL like EJS or Handlebars for server-side templates.

With the way I am thinking about it, you can have views/ be JSX, Vue SFC, or Svelte Components as well. Components are great and I really like them and I don't see any reason why we can't have the best way to declarative create our UIs both in the client and server.

If this works, you can also author your emails in JSX or Vue SFC as they already exists solutions like Vue Email and React Email to do this already. Think about this, one DSL for your server-side views, emails, and client-side SPAs. How boring can it get!

Let me know what you all think about this as I will start prototyping a PoC as soon as possible.

[tobySolutions]

Hey all, so I have been thinking about a modern template engine for Sails which I called Tide. It has been on my mind for the whole year but having to learn a new DSL don't sit well with me.

And don't even sound boring 🥱 enough. I share more details in this Twitter post.

Yesterday something hit me as I have been researching for Ship less JavaScript™️, I saw multiple times how Netflix use React on the server way before RSC and I had an epiphany, why not just let the developer use the same DSL they've picked for their frontend as well as their backend for writing templates to return just HTML and no need to have a separate DSL like EJS or Handlebars for server-side templates.

With the way I am thinking about it, you can have views/ be JSX, Vue SFC, or Svelte Components as well. Components are great and I really like them and I don't see any reason why we can't have the best way to declarative create our UIs both in the client and server.

If this works, you can also author your emails in JSX or Vue SFC as they already exists solutions like Vue Email and React Email to do this already. Think about this, one DSL for your server-side views, emails, and client-side SPAs. How boring can it get!

Let me know what you all think about this as I will start prototyping a PoC as soon as possible.

I think this is amazing actually. I especially am fascinated by the idea of maintaining the DSL for server and client-side.

[DominusKelvin]

Yeah me too and imagine having all your UIs in views/ it doesn't matter if its interactive or not and you can use JSX you love or Vue SFC for both plus emails.

[DominusKelvin]

You will no longer need a .ejs file even with this setup as your templates are either JSX or Vue SFC!

[lennyAiko]

This feature will be lovely and very useful for the boring stack. I currently use .ejs with sails mail, so I have seen how it is. It works but just not as flexible as it will be using JSX or Vue SFC (in my opinion).

This is will be very interesting to see when you get it to work. I'm especially intrigued on how you will get it done.

[DominusKelvin]

You are right @lennyAiko imagine same DX for UI whether the target is client side, HTML, email or even PDF 😍

[EOEboh]

Hey all, so I have been thinking about a modern template engine for Sails which I called Tide. It has been on my mind for the whole year but having to learn a new DSL don't sit well with me.

JSX seem to behave a different way in React and Solid, but it’s sounds amazing!
So it’s basically like writing templates on the backend using frontend syntax??

[DominusKelvin]

Hey all, so I have been thinking about a modern template engine for Sails which I called Tide. It has been on my mind for the whole year but having to learn a new DSL don't sit well with me.

JSX seem to behave a different way in React and Solid, but it’s sounds amazing!

So it’s basically like writing templates on the backend using frontend syntax??

Yes it is and thinking about it, it's more like what Dan said in this article. The DX is to give devs same components they like on client but on the server that spits out HTML on demand or at build time

https://overreacted.io/the-two-reacts/

[DominusKelvin]

Something that has been on my mind is what if folks want small interactivity on these pages. Do we then pay the cost of hydration? Or use something like HTMX or Alpine?