Skip to main content
515

September 26th, 2022 × #html#webdev#webcomponents

WTF Is Enhance Framework?

A new HTML framework called Enhance JS that uses web standards and provides lightweight components, file-based routing, server-side rendering, and easy to write components.

or
Topic 0 00:00

Transcript

Announcer

Monday. Monday. Monday.

Announcer

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,

Wes Bos

Boss, and Scott

Announcer

Tell.

Scott Tolinski

Let's get ready to syntax.

Topic 1 00:30

New HTML framework called Enhance JS

Scott Tolinski

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.

Scott Tolinski

With me as always is Wes Bos.

Topic 2 01:06

Enhance JS is web standards based, provides lightweight components

Wes Bos

Hey, everybody.

Scott Tolinski

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.

Scott Tolinski

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,

Wes Bos

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.

Topic 3 02:11

Sanity.io sponsors segment

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

Thick. Cool.

Topic 4 03:39

Enhance JS overview

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 5 04:49

File based routing with HTML pages

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Topic 6 06:36

Write components in pure functions

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Topic 7 07:06

No built-in state management

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Topic 8 08:03

HTML tag template literals for components

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Topic 9 09:35

No templating language, just HTML

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

End up what you have is state.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 10 11:09

Enhanced store for complex state

Scott Tolinski

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.

Scott Tolinski

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.

Topic 11 11:49

Server data via JSON into store

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Topic 12 13:12

Deployable serverless functions

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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,

Topic 13 13:48

Provides SSR, easier components, routing

Wes Bos

The other thing was CSS.

Wes Bos

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

Wes Bos

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,

Scott Tolinski

whereas this is just And Svelte and React. Yeah.

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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

Topic 14 15:27

Using web standards

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

Yeah, it feels nice and easy.

Wes Bos

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

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

Peace. Peace.

Scott Tolinski

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

Scott Tolinski

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

Share