Speaker has been working on a framework to make it easier for people to build on top of it. Speaker is going to add links to all the things in the recording. Speaker likes shells to fire ship on youtube.

Speaker explains how interactive content is deployed under cc and under adding interactivity. Speaker explains to Speaker how to build an interactive website.

Speaker allows clients to create island components that are also rendered client side. The modules in the islands folder encapsulate a single island component, the name of the module should be passing. Tsx put all the different components that you want to be interactive in the islands folder. Speaker likes the way dino works. Speaker thinks it's cool how they expand the user base.

Dino is new and there's not a lot of packaging and stuff for it. Now they have a place where you can deploy dino servers. Speaker explains to Speaker how the platform was created.

Speaker doesn't want to configure the framework. They just wants to write some code. Speaker is going to type some support out of the box. Speaker explains how to do server-side rendering of an app. Speaker explains how the server-side component was rendered and the javascript was added on the side to make it interactive.

Speaker spent a few minutes at the start of the work session working on a breaking change that broke some things on the site. It's working now. Speaker wants to share their screen with others. Speaker is talking about dino, a modern runtime for javascript and typescript. Dino is a modern and secure run type of javascript typescript and webassembly that uses v8. It was created by the person who created node js. Ryan doll is a person named dino. Ryan doll created a new thing called dino. Dino has the same letter as a node. Speaker explains how to get started with powershell.

They discuss the next generation web framework and how to interface with it. Speaker wants to make calls to the runtime.

Speaker likes what dino is doing to build up the base of it yummy. Speaker would like to have the same components and decide whether or not they want it to be surrendered or active. Speaker is going to get back to work. Speaker wants to start building things on dino.

Speaker is trying to figure out what is wrong with the website. It loads the main javascript file, but doesn't load the island counter. Speaker switched to a store where the client visible: visible component will not be sent to the client until it's visible on the page. Speaker is going to put a link to what you do in the links.

Speaker is closing a lot of tabs and wants to take a break. They will be back 15 minutes after the hour. Speaker is going to listen to some music and watch some videos.

Speaker has been doing their projects using astro recently. Speaker explains to jason miller how the island architecture works. Speaker switched because they can use pre-act, react and renderers. Speaker is not switching yet because they need to do some more things.

• modern runtime
• javascript typescript
• actual component
• image carousel neat
• user scrolls

Your dreams will you take it out welcome back that same old place that you like well then since you but those dreams everything, and they turn around Plus, we got it all the spot.

Welcome back, welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome.

Hey, welcome back.

How are you doing?

Hopefully all is well.

So all right so I Last brick session.

I spoke about those are breaking change.

That was pushed, and it broke some things because it's a breaking change and so it broke stuff here on the site.

And, so I just spent the last man a few minutes at the start of the work session to kind of get it all worked out and look like it's working now.

So I know it's working because at least on my end in the dashboard I can like login and that was the issue before and so it Works, you may need to refresh the page, the hard refresh, and it should work either.

And there is nothing that you would probably see unless you want to do some chatting.

But other than that, it should be fine.

So it should be working, cool if not, let me know.

Alright, so by wanted to talk about this thing that makes I have been keeping my eye on it and it seems like it's been growing and I kind of like what they're doing.

And, so I want to talk about it and Keep you know, maybe you want to keep eye on it as well, right?

And so the thing I am talking about is share my screen here.

This one, your audio just in case.

Now, the thing I want to talk about is Dino, all right, now, dino is a like it says they're a lot a modern runtime for JavaScript and typescript.

Even though I think it does typescript out the box.

I think it prefers typescript to oppose jiabao neither, but I guess you could write in both.

And so now this is not new but just in case for folks who are familiar, Nino is a simple modern and secure run type of JavaScript typescript and webassembly that uses V8 and is built-in run.

So basically, The person who created node js, right?

Created Dino.

Because there are things I guess as like the technology improved.

Like there're things that you can do in Dino.

Now that weren't really around with node and the with the way that node is kind of like architecture because basically what was their node was built on top of the things have changed, but notice so big now that you can't really make those changes in node without breaking things.

Kind of like it was doing earlier.

So Ryan doll is a person named.

I think it's been said that right, but they created Dino now.

So if all the things that he wanted to be able to put into node, he has this new thing Dino and what's funny is Dino have the same letter as a node.

I don't know if that was intentional or not boundaries either way in here.

Not talking about that but that's where we at with that, right?

And so if you wanted to kind of create your like a whole new back and there's a whole new run, Time for that.

You can write in to get that working and some of the benefits were going to have it on your somewhere but see certain things like you'd have to for installing it, you the Dual.

This is we doing Powershell if your Mac and Homebrew.

So like a few things to get started and then to get something started this thing.

The import it was cool that you import from an actual, like URL.

So, there are no, like, you know, there's the node modules folder, you don't have That anymore and then there's other stuff.

But the thing is, the notice huge has been around for a while.

Dino is new and thing is that there's not a lot of packaging and stuff for it, right?

So I don't have much of the examples, super cool now.

So, that is like the runtime, the underlying layer, that's supporting everything, right?

But then it's like, well, how, where do I put my Dino server, or what have you, you know, I am saying?

And so to help.

That because I think there was a lot of places back then, but I am sure they're probably growing as well and you see it's in production in these places here and so, yeah.

So like so they're like, alright, cool.

So you have this thing where it can, you put it?

So then they came out with, and we spoke about this before on a previous break few months ago.

I remember.

But Dino deploy.

And so now this is where you would deploy your Dino servers scripts.

What have you I am saying?

And so they made this, so there's like on the level so it's like, hey, there's this platform here and now you have a place to put it, all right?

And so, so some of the things with this is, instant appointments located in 34 regions worldwide.

So, it does like, the edge server stuff and zero, config zero maintenance and then it's typescript y's and GS modules.

Like we're saying Or pretty cool stuff to see.

So it's distributed systems that run JavaScript typescript and webassembly at the edge worldwide.

So taking those that Dino, and then putting it on the web basically for you to make it easier.

Yeah, so no vendor lock-in, built in for performance selected says, built with rust and then see.

SOC is built on the fastest server Technologies.

So, that's the thing.

Like where would you put them?

You know I am saying, like you built this thing and it's cool.

It's running on your local machine.

But where do you put that in the cloud for other people to use it?

And so that's where they got the dino deploy now.

And so they have so these things you have with it, which is cool.

Yeah, so there's that.

So now you have a place to deploy it.

Cool.

So you have your back end or what-have-you, right?

That's awesome.

Do they have different showcases?

Something that's pretty cool to see how you can look like a Blog.

So we have looked at all these before.

All right.

Cool.

But now, the thing that came out this week is so you have like the back end.

But what about the front end, right?

So, how do you interface with that?

And so this week, they came out with fresh.

Pretty cool.

I like the little the animation.

That's kind of cool.

All right so this is fresh its as they put it here.

The next gen web framework.

All right so now they're expanding it even more so is before like all right here's this like runtime you can use, and we think it's cool but then you're like well where can I put it?

Yeah I am saying, so I can make calls to it.

What have you?

And they have Dino deploy.

Awesome.

But now, what I am going to make calls from And now they have the framework for the client side that can interface with the dino back end, which is cool.

And it's all put together.

So fresh is a next-generation for a web framework Built For Speed reliability.

And simplicity some standout features are just in time rendering on the edge.

So again with the whole Dino deploy let us see island-based client hydration for maximum interactivity, so we will talk about that as well because that's Thing where I am like, I don't know.

It's super cool.

I dig it but I want more not explaining why zero runtime overhead.

So nodejs is shipped to the client by default, and we have heard that before because I spoke about something on this week about again.

We're talking about that as well.

All right.

No build steps.

Which is super cool, right?

So you just push it.

There's no building.

No configuration necessary.

I am a big fan of that.

Just give me the framework.

You figure all this stuff needs to be done.

I just want to write some code.

I don't want to configure anything, you know I am saying.

Like the Frameworks are just do it.

I don't have to worry about configuring the framework, let us do some Edge case thing but I don't do edge cases.

So I am going to type some support out of the box, which is cool because I don't want to set up typescript either part of the whole configuration thing.

Undo it.

Alright typescript don't want to configure typescript.

Alright so fresh Embraces the tried-and-true design of server-side rendering and Progressive enhancement on the client side so interacting with the Dino on the backend.

Do the server side rendering a shot and then getting started just this and you have your app and then you start and you have it up and running and so this is an example right?

So like this says there's this text is being server-side rendered on the Fly.

So on the edge and says, it's created, that's funny.

One, two, three, four.

I was like three milliseconds off or three seconds off.

One, two, three, four, five, nine, or you put the 926.

All right?

So the counter below was rendered on the server with the starting value of 3 and was in hydrated on the client side to provide interactivity.

Try out the buttons right.

And so, what they're saying is this actual component was done server side, and then JavaScript was added on the Side to make it interactive, so it made it quicker to ship it down to the browser and then you can see here, like it's interactive cool.

Only the J's required to render the counter is sent to the client awesome.

And so we have seen that other Frameworks and that's cool.

And it's in the came to den.

Oh, that's super awesome.

Now, how do you decide what's going to be interactive or not?

And so here under CC, they have deployed all this other stuff.

So this introduction Ocean.

But under adding interactivity.

So what you will do is you will put all the things that you want to be.

So fresh, and base is this model tell my Island architecture, architecture is basically you ship down everything, right?

And we will take a look at a graph later or a diagram.

You ship everything down.

You have different components of it.

Some components.

Don't need to be interactive, you know, I am saying, like maybe have like a banner section or whatever, you know, like ahead of you don't need to be interactive.

Well, you don't need to like, JavaScript, I am saying or like, Menu bar like you.

They're just links him saying that Indonesian JavaScript but then you may have Parts like maybe like the image Carousel or something interactive that you need and then only so that component only needs to be interactive.

So you only load the JavaScript for that component to make interactive instead of having a whole bunch of JavaScript for everything.

You only ship for what you need, which is cool, right?

Mix these with quicker.

And so the way they fix it is that all pages are rendered service side.

But you can create Island components that are also rendered client side and to do this fresh projects, have a special Island / folder.

So all the things that you.

So the modules in this folder, each encapsulate a single Island component, the name of the module should be passing.

Okay?

Is the other yet?

It's like countered.

TSX, cool.

So, Yes, he put all the different components that you want to be interactive in the islands folder.

Sounds cool that's good, right?

And it's also using pre-act.

So if you're a fan of pre-act so for not what it seems to me is that they're trying to reach out to as many people to use it.

So they're like, hey and practice basically like a quicker react.

And so react is a huge thing.

There's all these different like, libraries and stuff is like a huge.

Early of stuff, right?

And so, I think they're why they went with pre-act.

Not only because it's faster, but also, as you use his react.

So all the things that work in react, work in pre-act.

All right.

And so well, I think they're trying, why I think they came out with pre-act is they want to try reaching many people as possible so that you can build your front end in something that you're already familiar with and then uses other cool thing.

This Dino and then get you in that like Frame of mind.

Like, oh, I can build this the way I normally do and I get all this benefits, you know, by pushing to dino.

So I can kind of see like, where they're trying to expand the user base.

Yeah, I am saying.

And so I think that's cool.

That's a pretty cool, way of doing it.

So first you have you like your core technology and then you, you make that as good as it could be and then you kind of like expand out.

So then you like, Oh Where Can you deploy this thing?

You have been working on, make it easy, make it through more straightforward for people to do that and then People that other people want to build stuff on top of that in the front end, to use the back end that you provide a way as well with this framework, which I think is a good plan.

But yeah.

So it basically uses just like react under a lot of react or pre-act or anything.

So, now also big shoutouts to, oh, I am supposed to be adding links.

I am going to add links to all these things in the so next to the recording.

So you be able to check Get out.

Let us see here.

That said that one.

Hears Dino deploy.

Another thing they have so many different like URLs so there's like be no dot land for the actual Dino.

That is Dino.com.

Deploy for like the server hosting X8 server hosting, and then they have fresh denote Dev midi, note Dev goes to like GitHub or something, I don't know.

So it's kind of confusing because sometimes I am like, wait, what was the URL for this thing?

Again.

Yeah you know that's cool, alright and then also shells to fire ship on YouTube.

They did like a quick Like how long is it like three minutes on Fresh?

Which is its a good overview.

Super cool.

All right, so I am adding all these links.

All right, so, shouts to fire s***, really cool.

Let us see.

Now, for me most recently, I have been doing my projects using Astro, that's what about Astro before, right?

Astro kind of does the same things to what fresh is doing but it came out before.

So what's cool is it also remember that Island architecture?

We spoke about before that fresh is using and so the same thing.

So components load individually components render in isolation.

So here's the thing.

So Here's your header sidebar image carousel right now for the content like text and images that server render in HTML.

You don't need any more than that.

Same thing with like the footer and any advertisements, but if your sidebar header act and Carol image Carousel neat, interactivity then they each load their own separate like JavaScript, which is cool right now, my thing, and then.

So, so the idea for architectures, I guess, came from eyes.

Jason Miller who also created pre-act, which is amazing.

So that's super cool.

Shouts to them.

All right, I am over time but this is super cool.

Now, the thing is for me, There's a couple of things I am not going to switch yet because I get them with Astro.

That's why I switched to Astro.

So thing with Astro is that I can use pre-act, react felt solid JS and it's a bunch of stuff that has renderers for.

Whereas fresh is only pre-act and I don't use pre-act.

I mean so it is me personally, this is why I am not switching yet until you know, do some stuff.

And the other thing is this whole hydration stuff, right?

So if so, like with what you call it with fresh, you put the things in Islands, right?

And then it will load those.

So for example, like if you look at here, and you don't expect, So now, if you look at the network, right?

If you look at the network, I know I clicked it.

Oh, come on.

Why are you doing this to me?

Now Network please go to network.

Here we go.

Let me refresh this page the fresh dot denotes Dev.

I will come on.

What is wrong with this thing?

Okay, so You can see here the JavaScript that's loaded, right?

Or okay, maybe.

Why is everything not working?

Please?

Okay, that is on going further.

All right, here we go.

All right, so we have the main JS, right?

Then we have the island lemon drop, which is the drip, right?

That's up here.

Cool.

And then we have the counter.

All right, great.

Now let us say the thing is, I think it always loads it, whether or not is showing on the screen, right?

So it's going to load, like if like with the thing, see it's still loaded, the island counter, right?

So whether or not it's showing now, the cool thing with Astro, it kind of takes the whole thing a little bit further.

So like I say, and here's the whole thing here, right?

So they kind of take it a little bit further to where they have these different when they call them directives on the client, right?

So not, so it won't just only load the JavaScript.

If there's a thing on the page, I need to Interactive like because it will do that with client load, right?

But what's cool is they have this other one, we're like client visible: visible and this component Jets will not be sent to the client until the user Scrolls down and the component is visible on the page, right?

So if you were to redo this and Astro like the counter won't be the JavaScript for the counter won't be loaded until it's actually old into view which for me that's I am like that's pretty cool.

That's why I switched to a store like that is awesome.

Yeah I mean and so and they have other ones so there's like a media query so depending on a certain size or whatever or depending on the meteorite and then also I guess what framework, I have not tried this yet but so yeah, so there's that.

I am going to put this in the links as well.

So this is one of the reasons why I switch to a stroke and I thought that is awesome.

And, so I am adding that cool it's like I said they have all these other things.

Right.

So that's pretty dope.

Okay.

Oh yeah, quiet only.

So it just Skips a whole HTML server rendering at all.

Now, another thing that I am wondering about is like, so, for example, I have this cite, what you do.

I n.

All right, let me put a link to this as well and pretty much what you do.

Send you a notification because people say I am so busy, and it's like, well, what you do and then you're like, oh wait, what am I doing?

And so it sends you like a notification.

Asking you on the our like, hey what you do?

And then you can write back and say what you're doing, you can say like, you put it in there, so how it works turn on and get a notification, what you're doing?

Then you reply turn off.

You don't want it.

So now the thing is these buttons aren't interactive they're just for display, right?

So now when you refresh this See that it refreshed.

There's no JavaScript at all.

Is HTML CSS.

All right.

Now, when you go to the actual settings part, if you want to try it out, see how this button is interactive?

I want it to be interactive and let us see, it, should it?

And you can see it added some JavaScript here.

So the settings JavaScript, and the only.

So the only judge as is that client only that we spoke about before from astral and so, Yes, and then now this is Interactive.

Like, it's doing stuff and because I did it too quickly.

So now it turned it on, right?

So for me, so does that mean in fresh?

If I wanted to do the same thing, what I have to have like a button outside of the islands and another like a copy of it inside the island, your I mean, like how would that work?

I am not sure with that component and so that's why I like, what Astro I can have the same components and just decide whether or not I want it to be surrendered or like, Active, or what have you.

And so yeah.

So that's just my thoughts on it.

So it looks super cool.

I think I like what Dino is doing to build up the base of it yummy.

And, so I am looking forward to seeing what they continue to do with it, and I am gonna keep my eye on it but for right now like I get what I need from here so far, your I mean.

So yeah.

So that's that.

Okay.

Yeah, that's it.

So I am gonna get you all back to work again.

Thanks for hanging out.

Try and make sure I don't mess anything up.

But yeah, shouts a dino.

This looks super dope, and I am looking forward to more what they do with it.

Like if they can get fresh to also support likes felt, and I was like I want to build some stuff on Dino, kind of try it out but I don't if I am gonna build something I want to build, I am not going to use.

I am gonna use felt I mean, so, but yeah, beyond that looks super cool.

And then the hydration stuff if they can get that in there as well.

But if you use a sports felt I will start playing around with it.

Yeah I mean so it's our building stuff because I want to start building stuff with Dino.

This guy try stuff out I am saying but yeah.

So I just want to, you know, maybe keep your ear out you know, I mean and so you can kind of check out what's out there, and I am going to get you all back to work.

I am just closing a bunch of tabs and stuff right now just It's way too many tabs right now?

So we have one more break session.

And so if you want to come up and talk about a thing, you found interesting, like, I found about fresh, you can come up and also do like a 5-10 minute lightning talk.

Otherwise, we're going to take a look at an artist's website and listen, some music and let me watch the videos.

All right, so thanks again for hanging out.

We back 15 minutes after the hour.

And yeah, thanks for hanging out.

Wish you much productivity and going to be out of here.

So again, thanks for hanging out.

I am glad this thing looks like it's working now.

So that's good.

And yeah, thanks again.

I will see you all soon.

Wish you much productivity like I said, and this is Anthony Cruz.

AKA butter.

The track is called, thank you.

And thanks for hanging out.

I will see you later.

Be easy.