WTF Is Enhance Framework?

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, Yes. The tastiest web development treats coming in hot. Here is Wes, Barracuda,

Boss, and Scott

Tell.

Let's get ready to syntax.

In this Monday episode of Syntax, we're gonna be talking about a new framework called enhanced JS. You might be thinking another new framework? Come on, guys. Well, this one's quite a bit different. It's a totally different approach. And I think if we're gonna be loading up the world with different frameworks, and they even call this a standards based HTML framework. So it's a little it's a it's a big little difference there. So, you know, if we're gonna load them up with the frameworks, we might as well have a bunch of really interesting different options to go with. This episode today is sponsored by 2 amazing companies, Sentry, error and exception handling tracking and sanity.

With me as always is Wes Bos.

Hey, everybody.

Yo. Hey, Wes. What's up? I'm gonna take a quick second to talk about Sentry here. Sentry is the place to track all of your errors and exceptions and understand how your application is performing. And I say application because this works with just about anything you could possibly want. So it's not really dependent on your framework or your tools or anything like that. You just drop in their script, whether it's a node app or a UI, and you can get all sorts of information like, what kind of issues? How many bugs? What kind of things are happening in your application, in your UI, in your API? You can discover which of the routes in your application are the slowest and which are the fastest, how many crash free sessions. You can attach errors and things to users. You can, attach errors that are logged inside of Century to GitHub. You can do all sorts and more. So check it out at century.i0.

Use the coupon code Tasty treat, all lowercase, all one word, and you'll get 2 months for free. Thank you so much to Century for sponsoring. We are also sponsored by Sanity,

they are the place to put your content. If you're building a website or an app or literally anything and you need somewhere to put all that content, Sanity is the place for that. I like their website. It sort of breaks it down into 3 different pieces. They've got The content lake, that's such a good way to to describe where do you put your data, all of your images, all your video, all of your Everything in the lake. They call it a content lake. I love that. So you use structured content to describe what your data looks like.

Then you have another piece of the puzzle, which is Sanity Studio. This is the actual the UI, the CMS that is used for editing your content. So Sanity has amazing APIs that you can literally hook up to it via anything. But there's also a Amazing multi user, real time UI for it called Sanity Studio, and that Is totally customizable because it's built in React.

And they have a great developer experience. That's the third thing here is that They truly are a I like to think they're a developer first company.

But, like, there's also, like, the marketing folks and the lawyers love love this thing as well. So check it out for your next project. Sanity. Ioforward/syntax.

That's Gonna get you double the free usage tier, and they got a whole bunch of starters on there as well. Thank you, Sanity, for sponsoring.

Thick. Cool.

Alright. Let's talk about Enhance js. This is a new they're calling it a an HTML framework, but there is JavaScript involved here. And this is a web standards based HTML framework designed to provide a dependable foundation for building lightweight, Flexible and future proof web applications.

It comes to us from the folks behind begin.com.

I know Brian LaRue has a a big hand in it. There's Oh, really? A number of contributors. Yes. Yeah. There there's just recently a talk on it, which, we can share as well in the show notes here.

But, basically, this is a project that allows you to essentially write Web components in a nicer syntax, so to say, and then have a system for things like API routes, and Utilizing what are what's effectively state and props, but not necessarily actually state and props.

It it's a it's pretty interesting, and I think one of the key components about this thing is it's all HTML based. In fact, they have a a router, like, file based setup router.

So this file based router is very similar to what you'd expect with a Next. Js style router or anything like that. But inside of this router is only HTML files, So you can only write HTML, and it's just straight up HTML. It's not, you know, JSX or MDX or whatever. It's it's not like augmented HTML. It's HTML.

And the way it works is that you you write your your components inside of an elements folder, and you write Your pages inside of a pages folder, pages are all HTML, and then anytime you need a custom element, let's say you have a custom element, my header, You just name a file my hyphen header dotmjs inside of the elements folder.

Then without importing or anything like that, Just within your HTML file, you just straight up use that component, and it knows where to look for it based on the on the naming convention? Yeah. Love that. So what it does is it basically offers a sort of a more modern way of working in web components here While also having a full on routing structure without getting bogged down with a ton of JS features. In fact, this is by no means Like Svelte or React in terms of feature set. Right? This is all web components based stuff. So it's Basically, you're authoring HTML. You're using web standards and web components, and then you're able to progressively enhance that HTML from from there. So It's a really interesting really interesting platform, and we'll have some, code snippets in the show notes or we'll link to their docs here. But so one of the things is is that when you work with the web components inside of the system, you end up having all single file components, 1 component per file. I I prefer single file components at this point myself.

But if you want to write single file components, you do so within a pure or default function, your component.

That component gets passed a couple of things, which we'll talk about. 1 is the HTML function and one of which is the state.

Inside of state, there's 2 different types of state inside of here.

One of which is attributes for string props, and then the other is A store for non string props like actual, object and complex data shapes.

Does it allow you to set state or is that outside the scope of what this does? I believe that's outside of the scope.

So because I think this is the same thing with Astro as well, where Astro doesn't have a state and is not a state management library, But they there are lots of

JavaScript libraries out there that can give you state so you could just use one of those. Right? Yeah. Yeah. Totally. And and I think that's where this is kind of lying. It's like we're not shipping anything here. We're in fact, this is just kind of like a helper function to output actual components and give you things like SSR, which anybody who's worked in custom elements or or, you know, Web components knows that SSR is a topic that people talk about in web components as being a thing, that you probably need to use a system for. And so utilizing a system like this, that's HTML first is pretty neat.

And also it's kind of neat is that, you know, I never really liked the Components syntax essentially for web components. And what this does is it puts it into a pure function instead where you're returning an HTML, Like string function. You know how, like, you do with style components? Yeah. Tag template literal. Temp yes. Tag template literal. And so you do that with an HTML tag template literal, and then you just write up straight up HTML inside of there. And then instead of using Any any kind of sin syntax for a templating language. There's no templating language. There's no JSX or anything like that using string interpolation.

So that's you know, one important thing is there is no

there's no templating language. There's no features essentially. Is the templating language. This is something Anyone who's taken any of my courses that are not React will say this is how Wes does it because that's all we use is we just generate HTML with JavaScript and we return a string. And if you have variables that you want to put inside of that, then you interpolate it.

The one thing that we always have to do is we always have to go, like scrub what's the word for that? Purify! We always use DOM Purify to take out any excess S thing so I'm assuming that will that this framework does this for you.

Very, very simple. I like it a lot. There's a lot of really neat things in here, and I wanna spend some more time with it to really, really dive into it because it's simple. Right? You have single file components. You have the HTML template tag literal.

You have the ability to use slots and name slots just like you do inside of web components.

And then you have state, which those of you who are coming from reactors, felt, or view land will get a little bit confused by what's up with state and what's up with, like, Quote, unquote props because there's no such thing as, like, props inside of this framework.

End up what you have is state.

And You you may know is that you have an HTML and web components. You have data attributes. Right? You can put attributes on HTML.

You can't put complex objects and, objects and arrays and stuff and data attributes, you can only put strings and Boolean type values. Right? I guess they're just straight up strings, right, that you'd convert.

So this is functions the same way is that when you when you pass things as a, quote, unquote, what you would normally think of as a prop, it's really an attribute, And you can access that within the state dot attribute a a t t r's, which are the attributes. Again, these are just the straight up HTML attributes. This is, It's it's funny because it feels like it's taking a shift away from thinking in React, but what it really is is you're shifting into thinking about HTML and JavaScript and web components, which isn't necessarily a huge issue if you've spent any time with those. But if you've only been in React Land your whole time, looking at this and saying attributes, why why would they call that attributes? You know? Yeah. That's That's what they're called in HTML. Right? Yeah. So you also have something called an enhanced store, which is the single source of truth of how you get access to complex state data types Like, erase and objects inside of your custom element pure functions.

And this thing isn't you know, it's called State dot store, but it's not like it functions the same way as, a React store or Svelte store anything like that. It's it's just for grabbing information.

This is needed because, basically, attributes are only strings. But, also, You know, many of your projects that are using these API routes that are included in here to get in information and get initial state to your application, That data is gonna be passed in there directly into the store.

So you'll be able to get information from the server side into your application Just by accessing state dot store and, like, I mean, that's cool. Yeah.

So you don't even need an API. You could just literally JSON stringify it on the server, and you're up and running.

Yeah. Totally. And what's neat is that in addition to, You know, web components based and keeping it very simple. There is also API routes, which is funny because everything is so I don't wanna say bare bones because that's not a good way to describe it. It's so simple in a good way.

It's so normal that then you see API. Holy cow. That's more of an advanced feature, but it really is just an API route given of the the same name. Enhanced API routes are back end JSON routes Designed for seamless client side progressive enhancement, API routes defined under app API allow for file based Naming routing conventions as app dot pages. So if you have something like forward slash yo inside of your API, you can get that at The Yo route for the API. And, likewise, if you have a Yo page, Yo. HTML or a Yo component, I believe. Let's see. How do you get progressively enhanced data form handling? Yeah. This is the stuff I need to spend some time at. Either way, You can progressively and easily get data directly into your application, or you can just have a quick post, function, essentially, that just lives there.

And because these things are end end up just being functions, you can deploy to AWS or or any of these other places.

Yes. Serverless function looks like the serverless is exactly the same as

A serverless function in any of these to play it to Fastify if you want just a single node app for it all. So That is enhanced j or are they calling enhanced JS? It's just as enhanced. I call it enhanced JS. I think it's just enhance.

Enhance is again, it's an HTML framework that provides SSR.

It provides easier interface for authoring components, and it provides a lot of the the The the structures that you would need for a better kind of routing system as well as server side routes in general. It seems like,

The other thing was CSS.

Because it's web components, you just use regular CSS.

And if you want to scope CSS to that component, use the colon host selector, and that will Only scope that to the shadow drama of that web component. Yeah. Really neat, beauty. Yeah, it's pretty cool. I wonder What the pros and cons versus, Astro? Because Astro is in the same space as this, I think, By just looking at it where it's a HTML framework, I guess Astro allows you to use JSX,

whereas this is just And Svelte and React. Yeah.

But same kinda area. I would say that enhance is more HTML forward, less magic forward, And Yeah.

Astro is more magic forward, more JavaScript forward even though The end of the day, both results are trying to get something that is output where, it's fast for the browser without having to load up a ton of code on every route. I think also if you miss the ease of

making a PHP file and just creating files and being able to create reusable functions that are Available everywhere to you magically.

And data just shows up for those. Yeah, exactly. I think that this is

Like, we, we did an entire show about how we all keep going back to PHP, and this is yet another example.

I gotta tell you, Wes, I'm currently doing some Just database calling directly from my Svelte server side routes now because there's, like, a dot server.ts file in your routes.

I'm just doing straight data loading straight from the database in my server dotts loading it up on the page. No APIs, no GraphQL, nothing. And I'm I'm just like, Yeah, this is this makes me feel this rules.

Yeah, it feels nice and easy.

Beautiful. All right. Well, that's really exciting to see this type of thing.

Maybe we need to do another show on the standard web because between Some Astro stuff, this stuff, a lot of the remix stuff.

Let's make a show notes for that right now. It's like, Yeah. Use use the web or use the platform. That's that's whatever it always says. Right? Use the platform. Yeah. Use the platform. Platform. Platform.

And we'll go through all the, like, how do you do forms and how do you do data? And

I think that's a good episode, but this is really exciting. So, yeah, we need to get some some web folks on our, web web component folks onto our our supper club. I know we have a a few people in mind who We recently chatted with, so we'll get some I'll get the talk web component folks on too.

Awesome. Alright. Well, thanks everybody for tuning in. We will catch you on Wednesday.

Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.