WTF Is Enhance Framework?

Web components this thing isn't you know, it's called or default function,

designed to provide a dependable foundation for building lightweight, 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,

js. This is a new is

in a nicer syntax, so to say, and then have a system for things like API routes, Use the coupon code Tasty treat, all lowercase, all one word, 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 I guess they're just straight up strings, right, that you'd convert.

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

Utilizing what are what's effectively

But, basically, this is a project that allows you to essentially write With me as always is Wes Bos.

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

Tell.

web development treats coming in hot. Here is Wes, Barracuda,

Let's get ready to syntax.

Boss, and Scott

Monday. Monday. Monday.

Like Svelte or React in terms of feature set. Right? This is all web components based stuff. So it's 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, as server side routes in general. It seems like, 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.

Then without importing or anything like that, Just within your HTML file, you just straight up use that component, You know? And

interesting really interesting platform, and we'll have some, 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.

But if you want to write single file components, more JavaScript forward even though The end of the day, both results are trying to get something that is output where, that are logged inside of Century to GitHub. You can do all sorts and more. So check it out at century.i0.

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 and a lot of the the The the structures that you would need for a better kind of routing system as well

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.

Basically, you're authoring HTML. You're using web standards and web components,

You just name a file my hyphen header dotmjs inside of the elements folder.

your components inside of an elements folder,

and then you're able to progressively enhance that HTML from from there. So It's a really framework, but there is JavaScript involved here. And this is a web standards based HTML framework So you'll be able to get information

UI

that is used for editing

for it called Sanity Studio, and that Is totally customizable because it's built in React.

Then you have another piece of the puzzle, which is Sanity Studio. This is the actual the UI, the CMS

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.

I like to think they're a developer first company.

multi user, real time

They truly are a

your content. So Sanity has amazing APIs that you can literally hook up to it via anything. But there's also a Amazing

And they have a great developer experience. That's the third thing here is that pros and cons versus,

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.

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.

Thick. Cool.

3 different pieces. They've got The content lake, that's such a good way

But same kinda area. I would say that enhance You you may know is that you have an HTML and web components. You have data attributes. Right? You can put attributes on HTML.

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

to

JSX, Because it's web components, you just use So because I think this is the same thing with Astro as well, where Astro doesn't

magic forward, And don't forget to subscribe in your podcast player And objects and arrays and stuff and data attributes, you can only put strings and Boolean type values. Right? Peace. Peace.

And Yeah.

easier interface for authoring components, and it provides Head on over to syntax.fm

Astro is more And because these things are end end up just being functions,

that component, use the colon host selector,

load up a ton of code on every route. I think also if you miss the ease of it's fast for the browser without having to 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.

regular CSS.

And if you want to scope CSS Beautiful. All right. Well, that's really exciting to see this type of thing.

beauty. Yeah, it's pretty cool. I wonder What the

more HTML forward, 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.

The other thing was CSS.

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

less magic forward, and easily get data directly into your application, or you can just have a quick post, 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, And data just shows up for those. Yeah, exactly. I think that this is One of which is attributes for string props, and then the other is A store for non string props like actual, Like string function. You know how, like, you do with style components? Flexible and future proof web applications.

and that will Only scope that to the shadow drama of that web component. Yeah. Really neat,

and, like, I mean, that's cool. Yeah.

basically, attributes are only strings. But, also,

from the server side into your application This is needed because, 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 data is gonna be passed in there directly into the store.

State dot store, but it's not like it functions the same way as, So that's you know, one important thing is there is no whereas this is just And Svelte and React. Yeah.

Maybe we need to do

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.

Let's make a show notes for that right now. It's like,

or drop a review if you like this show.

do data? And

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

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

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.

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

Yeah, it feels nice and easy.

We recently chatted with, so we'll get some I'll get the talk web component folks on too.

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

Some Astro stuff, this stuff, a lot of the remix stuff.

errors 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,

Yo. Hey, Wes. What's up? Inside of state, there's 2 different types of state inside of here.

and you'll get 2 months for free. Thank you so much to Century for sponsoring. We are also sponsored by Sanity, state and props, but not necessarily actually state and props.

in your UI, in your API? 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 End up what you have is state.

Hey, everybody.

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,

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 Does it allow you to

what kind of issues? How many bugs? What kind of things are happening in your application,

attach 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,

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.

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

function, essentially, that just lives there.

JSON stringify it on the server,

Yeah. Totally. And what's neat is that in addition to, You know, web components based and keeping it very simple. There is also or a Yo component, you do so within a pure 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

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

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, Just by accessing state dot store

looking at this and saying attributes, why why would they call that attributes?

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,

You can't put complex objects and, for a full archive of all of our shows.

which anybody who's worked in custom elements or or, you know, file in your routes.

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 It's 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 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 they're calling it a an HTML a React store or Svelte store anything like that. It's it's just for grabbing information.

have a state and is not a state management library,

actual components and give you things like

SSR, 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.

set state or is that outside the scope of what this does? I believe that's outside of the scope.

But they there are lots of another show on the standard web because between

object and complex data shapes.

your component.

Very, very simple. I like it a lot. There's a lot of really neat things in here,

an HTML, 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.

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

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.

like scrub what's the word for that?

that this framework does this for you.

Purify! We always use DOM Purify to take out any excess S thing so I'm assuming that will to to describe where do you put your data,

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,

that's all we use is we just generate HTML So you don't even need an API. You could just literally

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.

It provides And the way it works is that you you write your Alright. Let's talk about Enhance 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.

SSR.

you can deploy to AWS or or any of these other places.

Yes. Serverless function looks like the serverless is exactly the same as and you're up and running.

framework that provides

Enhance is again, it's an HTML 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 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 In this Monday episode of Syntax, we're gonna be talking about a new framework called enhanced

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.