I paused the video for a sec, so you can take a breath.. you're welcome! great video ,thank you!

@IsaacHarrisHolt

Ай бұрын

Haha thank you! Believe it or not I actuallyspeaklikethisallthetime

Learned a few things about state management and effects, thanks! If you’re open to feedback, I had a couple thoughts: - The intro before coding was a bit too abstract for me. Would’ve liked slower-paced visuals or to jump straight into code - Take a breather between segments! You have a great problem-> solution structure, but I needed beats in between

@IsaacHarrisHolt

Ай бұрын

Appreciate the feedback, thanks! Yeah, I agree the explanation of TEA could've perhaps been a little more concrete. As for the rest, that's just kinda my style 😅 it's polarising at times, but I do get lots of people say they enjoy not having to watch at 2x speed. Thanks again, and keep up the good work on Astro 😉

can't wait for the next gleam adventures you are covering, I'm subbing!

@IsaacHarrisHolt

Ай бұрын

Thank you! Lots of exciting stuff coming

0:09 this is my new favourite description of javascript

@IsaacHarrisHolt

Ай бұрын

Yesss it's been my go to for a while

I love all the memes / images you include, really subtle jokes sometimes ! The "scaffold" one was unexpectedly funny. Great video, ready for the next one, thank you !

@IsaacHarrisHolt

Ай бұрын

Thank you! I do try 😅

Whoa, this looks so amazing. I am in love with elm, and seeing gleam doing the same is just amazing. Maybe I can do my next project in it 🥰😍

@IsaacHarrisHolt

Ай бұрын

Do itttt! Gleam is a bit more flexible, and Lustre is fantastic!

Great content as usual... I look forward to the next one.

@IsaacHarrisHolt

Ай бұрын

Thanks!

20 million web developers and barely 20 good websites...

@IsaacHarrisHolt

Ай бұрын

Hahahhahaha so true!

Very nice video man !

@IsaacHarrisHolt

Ай бұрын

Thank you!

Looks great!

@IsaacHarrisHolt

Ай бұрын

It is! Highly recommend checking it out

Such a Beauty. Now i clearly see benefits from Gleam evolution. Transpiling to JS is mega selling point. If i didn't seen Elm before then feeling is like on first Rails presentation 20 years ago... magic and turtles all the way down ;)

@IsaacHarrisHolt

Ай бұрын

I think there's very little magic. In fact, what I like about Lustre is just how clear all the flows are, since they're all laid out in your model

Unfortunately ELM is not actively maintained, its lasted version is from 5years ago so I’m glad there’s finally a good alternative to ELM. Looking really good, definitely going to try it out.

@IsaacHarrisHolt

Ай бұрын

I would disagree that it's close to TypeScript at all. Gleam's type system is much more robust, and TEA is not something most TypeScript apps use.

@IsaacHarrisHolt

Ай бұрын

Gleam is getting popular because it's genuinely a joy to write. It's a really good intro to FP for people who aren't familiar with it, it's really simple, it's got a great type system, the community is lovely, and the multiple compilation targets are very useful. Most of the other langs that compile to JS don't also compile to a BEAM VM language. When I do later videos in this series, you'll see how beneficial that is - you'll get full stack type safety while being able to make use of the BEAM's amazing scalability and fault tolerance.

i really hope development for gleam and things like lustre continue and dont end up in ELM land

@IsaacHarrisHolt

Ай бұрын

I think Gleam will go further, being a general purpose language. It's also got amazing applications on the server thanks to its BEAM target

your videos are really good

@IsaacHarrisHolt

Ай бұрын

Thank you so much! I've got more coming 😉

As someone who is a little bit into gamedev I can relate really well with TEA .

@IsaacHarrisHolt

Ай бұрын

Awesome! Are you gonna try it?

I’m curious and need to play with this. I’ve been loving learning gleam and looking something to use it in. Any approach to use it on web makes easier to find a place I guess, even if just for simplicity, but I’m still wary of how good js transpile… I need to try it myself and check on the ergonomics of this kind o pf solutions

@IsaacHarrisHolt

Ай бұрын

Please do! Let me know what you think :) in my experience, the JS output is probably slightly less performant than vanilla JS, but the type guarantees you get outweigh that tenfold.

I love how this is like Elm, but open source and backed capable. My problem with this level of abstraction over HTML is how hard animations become. After experiencing how easy animations are with svelte, and how important they are for user experience I am very worried about trying anything else

@IsaacHarrisHolt

Ай бұрын

Fair point. It's something that's come to my mind too, honestly. You CAN break things out into components, so I imagine for things that need animations you'd do that, but you could also just write the animations in CSS (which is mostly what Svelte does anyway)

@Danielo515

Ай бұрын

@@IsaacHarrisHolt css animations are great when they fill the bill, however when they are not you want to have dom manipulation control. Svelte provides fly, slide and other animations that are not doable with plain css

@IsaacHarrisHolt

Ай бұрын

That's true. You could probably achieve what you want with effects that show/hide elements and do a transition in the background, sending a message once done

Looking good, I wonder what it would look like when the application is at the production scale 😂 tons of effects and states inside the modal?

@IsaacHarrisHolt

Ай бұрын

You'd generally split your model and message types, and then have an update and view function per page that gets called from the main ones depending on the view!

Already made one 2 weeks ago. Was nice

@IsaacHarrisHolt

Ай бұрын

Awesome! Are you planning to do it again?

Does it transpile into JS? Then what stops runtime code in JS (which have weak typing) to create runtime errors? What about external data, eg from API? At least, WebAssembly is typesafe

@IsaacHarrisHolt

Ай бұрын

External data can be a source of errors regardless of the language. Thankfully, Gleam decoders prevent it from crashing your code and provide a nice way to handle it. And yes, it does transpile to JS, but the type guarantees you get from Gleam's type system work really nicely, and Gleam code won't throw exceptions (unless you FFI to JS code that throws)

Thanks for this video! Gleam and Lustre are very interesting. I’ve been learning phoenix, and one thing that I can’t find is information on interop approaches between Gleam and other beam languages. I think that’s an overlooked killer feature for gleam that nobody seems to be talking about. Image the power of tools like ecto and phoenix written in gleam!

@IsaacHarrisHolt

Ай бұрын

I've actually got a video on this coming out... _checks watch_ tomorrow!

@camstuart

Ай бұрын

@@IsaacHarrisHolt can’t wait!!

Beautifull!

@IsaacHarrisHolt

Ай бұрын

I know right!

It’s giving great content

@IsaacHarrisHolt

Ай бұрын

Thanks!

This is pretty cool. I have a question though. How does the browser interpret the interaction? Does it get compiled to javascript ? Is it possible to just return HTML from lustre endpoints and use something like HTMX ?

@IsaacHarrisHolt

Ай бұрын

It does compile to JS, yes. You CAN use HTMX with Lustre SSR, but it's kinda pointless. Lustre is full stack, so you can use it on the backend too. I just haven't got that far in the series!

@danilodjokic5303

Ай бұрын

@@IsaacHarrisHolt Interesting. You can build both your FE and BE in gleam and leverage BEAM on the backend and type-safety on the frontend, right? If so, what would be the pros and cons of this approach ?

@IsaacHarrisHolt

Ай бұрын

The biggest pro is that you get full stack type safety, and you get to leverage the BEAM to create a really scalable backend. Cons wise, you're locking yourself into Gleam. I don't see that as a massive problem though, to be honest

Why would I use that?

@IsaacHarrisHolt

Ай бұрын

It's a different way of thinking and it actually makes a lot of sense. Give it a go and you'll understand :)

does lustre work like Phoenix liveview under the hood, i.e. does state live on the backend?

@IsaacHarrisHolt

25 күн бұрын

Not in this example - here we're just serving HTML, CSS and JS (compiled from Gleam) to the frontend. Lustre supports server components which work on the way you're describing

Lustre is so dang cool

@IsaacHarrisHolt

Ай бұрын

I know, right. It's the only reason Gleam is any good, tbh

@OfficialLify

Ай бұрын

You creator of gleam?

@IsaacHarrisHolt

Ай бұрын

Louis? Yeah he is

@lpil

Ай бұрын

@@OfficialLify yup

I am totally new to the elixir erlang thing, phoenix really something like not using json my mind broke. Can I do the same thing with gleam or am I misunderstood. Thanks

@IsaacHarrisHolt

Ай бұрын

Yes! Lustre supports sending updates over websockets. That's a future video :)

@cig_in_mouth3786

Ай бұрын

@@IsaacHarrisHolt how can I learn these? Like I learnt the struct and basics of elixir and now thinking about phoenix but I never wrote Ruby on rails so pattern is something else. I was thinking of switching to gleam and your videos really motivate me

@IsaacHarrisHolt

Ай бұрын

@@cig_in_mouth3786 I would take a look at the Lustre docs, which are linked in the description

@cig_in_mouth3786

Ай бұрын

Wow the last part is amazing so I can generate a static site, so cloudflare can cache those and even my server is down, my blog will be up

@IsaacHarrisHolt

Ай бұрын

@@cig_in_mouth3786 it's good stuff!

I'm an alternative timeline, Lua became the backbone of the web, and in that timeline, I'd be happy... 😔

@IsaacHarrisHolt

Ай бұрын

What's stopping you from making it happen 👀

I'm an Elm orphan, I love ELM but I'm really disappointed by the fact it's more or less abandoned. I'm glad Gleam and Lustre are here to make SPA development joyful again. The difference with Elm is, as I understand, Gleam is not a pure functional language, any function can be non deterministic and have a side effect, so it's up to the developer's discipline to write pure function and managed effects while using Lustre. I think encouraging purity without imposing it is a good trade off though, especially for a language that targets mainly the BEAM and is meant for backend dev.

@IsaacHarrisHolt

Ай бұрын

Gleam is wonderful, honestly. And you're right, Gleam functions can have side effects. As you said though, it's discouraged outside of a managed effect when using Lustre. Especially IO, as that'll have a performance impact and will probably block your UI updates.

Would be interesting to see some good and more complex interactivity implemented in Lustre. I know it wasnt your intent to show case that but with frameworks like this I often think that it seems slightly painful to build a great user experience.

@Fik0n

Ай бұрын

Also, why focus on a js target with gleam? To me the erlang machine seems much more interesting. The JS frontend ecosystem is so developed at thus point

@nightmare_js

Ай бұрын

Yeah that’s a great point, I wonder how would it look like to build a reusable search-box component with autocomplete, multi-selection and accessibility. How many messages and update functions would be needed, it also seems like all component’s state is managed at the application level which can be overwhelming. On the other hand this seems very interesting specially for simple UIs that may not need a whole JS Framework. I definitely would love to see more of Lustre and Gleam.

@IsaacHarrisHolt

Ай бұрын

For stuff like this, Lustre DOES support a component model, so you can delegate to that when you need to. You just wouldn't store your entire application's state in such a model

@IsaacHarrisHolt

Ай бұрын

As for why the JS target, it's just a different application of Gleam. Lustre is actually a full stack framework - I'll be doing into doing more with Lustre on the BEAM in future videos!

@Fik0n

Ай бұрын

@IsaacHarrisHolt that's cool, but I'm remain unconvinced that backend is the right place to create this interactive experiences. Feels like they will always play catchup, personally I think some more headless setup is better for that. Not a knock on your video though, more a general thought

I get the following error when trying to run the app as you do (7:40) error: Unknown module error: Unknown module ┌─ D:\gleam programs\app\src\app.gleam:31:26 │ 31 │ fn view(model: Model) -> element.Element(Msg) { │ ^^^^^^^^^^^^^^^^^^^^ Did you mean `lustre/element`? No module has been found with the name `element`.

@IsaacHarrisHolt

Ай бұрын

I haven't shown all the imports in my code. You'll need to import `lustre/element` like the error message says

so gleam is fullstack?

@IsaacHarrisHolt

Ай бұрын

Absolutely! You can use Gleam for your backend and your frontend, and Lustre can cross both!

@knolljo

Ай бұрын

@@IsaacHarrisHolt amazing!

Nice. The problem, though, is that with all these languages offering an alternative development experience (F#, Elm, PureScript, etc.), the ecosystem and libraries are so far behind modern-day frontend development that there's literally no good argument for using them other than for fun side projects in your spare time. I will try gleam for my next toy frontend app though 🍻

@IsaacHarrisHolt

Ай бұрын

In some ways yes, and in others no. I agree that the ecosystem is larger in other langs, but I don't necessarily agree that there's no good argument to use them. Elm has been used in production sites just fine, and if you don't need a mega-interactive site (which is 99% of projects, to be honest), something like Lustre is probably one of the more robust ways to get there.

@keffbarn

Ай бұрын

@@IsaacHarrisHolt Well, I'll give you that there are good arguments for using something like Gleam, but I would say they are not strong enough if your end goal is to ship products as fast as possible. However, if something like shadcn/ui and Flutter comes to Gleam, I'll definitely change that statement!

@IsaacHarrisHolt

Ай бұрын

@@keffbarn totally fair! We're exploring the possibility of a Laravel-like backend framework for Gleam at the moment too: github.com/Pevensie/pevensie/discussions/1

@chneau

Ай бұрын

Can think of blazor from c# too

@IsaacHarrisHolt

Ай бұрын

@@chneau I'm not entirely sure I see the connection here. Isn't Blazor just a templating language?

🎉 amazing! Introduce a little bit of interactivity such as AlpineJS. It would be amazing.

@IsaacHarrisHolt

Ай бұрын

But I can already add interactivity with Lustre. I'm not sure I see the need for Alpine

I feel like the view will look messed up when the html has to be nested a lot

@IsaacHarrisHolt

Ай бұрын

Why? You can break it out into view functions :)

Woaw, another tool to create basic CRUD stuff, that's what we needed

@IsaacHarrisHolt

Ай бұрын

It's not just CRUD stuff - that's just what I've shown off here. You can do a whole lot with Lustre! Would you say React is something for "basic CRUD stuff"?

@paulojose7568

Ай бұрын

Useless complaint

Its fast and cool , but what the problem with the syntaxe , uts totally different ? 😅

@IsaacHarrisHolt

Ай бұрын

Gleam is a functional programming language, so the syntax will be different to non functional languages somewhat. That said, Gleam still aims to be readable for non functional programmers

looks very promising, but is it performant comparing to vanilla js?

@IsaacHarrisHolt

7 күн бұрын

It's unlikely to be exactly as performant, but browsers are so fast these days that you're not going to notice the difference. It also depends on your code. It's really easy to write really slow JS

So I can't just write xml, I have to nest functions? that is pretty off putting.

@IsaacHarrisHolt

Ай бұрын

It feels a little strange, but you get used to it pretty quickly. Louis (Gleam creator) has also made a tool that translates XML to Lustre

Bro how come number/0 is 0 in gleam :((( why

@IsaacHarrisHolt

Ай бұрын

There are good reasons for it, and they're well documented!

@hoteny

Ай бұрын

@@IsaacHarrisHolt i bet its some optimization thing but yeah gotta be careful (i dont know enough about web dev)

@IsaacHarrisHolt

Ай бұрын

@@hoteny there's a GitHub issue explaining everything here: github.com/gleam-lang/gleam/issues/895

Ha, the description initially about state is literally identical to how Dan Abramov talked about redux in like 2015/14.

@IsaacHarrisHolt

15 күн бұрын

Interesting! That's well before my time I'm afraid

@thisismissem

14 күн бұрын

(Unfortunately I couldn't give you the direct URL to another KZread video in response because KZread thought it was spam 🤦🏻‍♀️

@IsaacHarrisHolt

14 күн бұрын

Ah that's annoying. I'll find it :)

@thisismissem

13 күн бұрын

@@IsaacHarrisHolt there's also a really interesting talk from Mark Erikson at React Summit 2024 that gives the history of redux & shows the diagram I was talking about which originally came from a thing called Flux Architecture from Facebook.

@IsaacHarrisHolt

12 күн бұрын

Interesting! I do think that, while the idea behind Redux was good, there are better alternatives in the React space that fit React's rendering model better. It works well in Lustre and Elm because they were built from the group up for this approach, but iirc Redux would cause a lot of unnecessary rerenders

Github code is 404'd :(

@IsaacHarrisHolt

Ай бұрын

I forgot to merge the PR! All sorted :) Thanks for calling me out

tailwind, tailwind, tailwind

@IsaacHarrisHolt

Ай бұрын

It's great! Pairs really well with Lustre

I'd pay for an Udemy course on this.

@IsaacHarrisHolt

Ай бұрын

You won't need to! It's all gonna come to KZread :)

SSR for all the times you don’t need a SPA with offline functionality, WASM for when you do. Enough with awful JS and the endless front end frameworks, libraries, and languages that transpile to JS.

@IsaacHarrisHolt

23 күн бұрын

JS is not just about having offline functionality, it's about delivering experiences that delight your users, and more importantly, ones that don't frustrate them. I don't wanna have to wait for a server roundtrip to open a modal

@JohnSmith-op7ls

23 күн бұрын

@@IsaacHarrisHolt If you legitimately have users on very poor connections and a request to the server for interactions are frequent and slow enough to be noticeably worse than downloading a bunch of JS which is probably going to mostly make requests for JSON for most interactions, go for it. Also, SSR frameworks don’t stop you from still using JS for trivial things if you want, it lets you stop using it for the other 90%+. But for non-edge cases, let’s be real here, nobody’s “waiting” on that 20-30ms delay to show some UI element. Especially after you’ve made them wait to download your front end framework and the endless libraries that make up the rest of the stack.

@IsaacHarrisHolt

23 күн бұрын

I agree about slow connections, but that's why progressive enhancement exists. Also, 20-30ms is unrealistic for anything that also needs a database call, which a lot of things do these days. But I do get your point, however this video was meant to show off Lustre. The next video in the series is good to use Lustre in SSR mode :)

looks interesting, but in real project this architecture doesn't work context and local state really necessary features

@IsaacHarrisHolt

Ай бұрын

It does, and plenty of large apps were put into production using Elm. You have to break things down, but ultimately you still have a single model at the top of everything.

@snatvb

Ай бұрын

@@IsaacHarrisHolt support of it will be headacke actually. I had expreience with Elm, and to move slower and slower. And hard connections doesn't help. Split system by features too. For instance you can have platform, where is a lot of forms, graphs, chat with clients. You wanna avoid load code for graphs before open the route and etc. You need controll data load and free manually. When I use react - I can write such code, if my branch's created, I load data, when it's removed, it'll be free

@IsaacHarrisHolt

Ай бұрын

I didn't cover it in this video, but Lustre has a component model you can delegate to if you really need to. It's good for really interactive things like graphs and chats, but ultimately you'd keep your page state at the top level

@snatvb

Ай бұрын

@@IsaacHarrisHolt maybe it needs to see for understand how is it good/bad for change opinion. I tried to use Elm and in some time I fell like I am in swamp)) Also there is really hard to do something not in the loop(outside of architecture). Gleam does not have this drawback

@IsaacHarrisHolt

Ай бұрын

Give it a go!

Isn't this extremely slow though? Productivity wise I mean. What you did in the first 8 minutes could be done in a minute using any modern JS framework.

@IsaacHarrisHolt

Ай бұрын

That's because in the first 8 minutes I was exploring the core concepts and building up to an application with effects. In reality you'd go straight into building your model and so forth. This video is meant for learning, not necessarily a "here's the step by step guide to create an app from scratch if you already know what you're doing". You'd skip the first few steps, as you would with JS.

@shyrogan2341

Ай бұрын

@@IsaacHarrisHoltthis looks also a bit unscalable in my opinion, having a single massive enumeration for all your messages in your entire app sounds.. bad?

@IsaacHarrisHolt

Ай бұрын

You'd typically break it down and have one per page that are then encapsulated by one at the top level

It ain't typesafe if it is compiled to JS

@IsaacHarrisHolt

8 күн бұрын

It still is as long as you primarily write your program in Gleam. It's like TypeScript... but better

@iKyroja

8 күн бұрын

@@IsaacHarrisHolt Still doesn't make Javascript typesafe ;) It is time for something new...

algo rhythm

not a fan of elm architecture. i remember when all of the rust wasm frameworks used to be based on this. they shifted to signals and hooks which is much better.

@IsaacHarrisHolt

Ай бұрын

If it's not for you, that's totally fair

Rust. We use Rust.

@IsaacHarrisHolt

Ай бұрын

Totally fair! But I don't have to fight a borrow checker 😉

@crab-cake

Ай бұрын

@@IsaacHarrisHolt with leptos you don't have to fight the borrow checker

@kollpotato

7 күн бұрын

@@crab-cake i had to

Nice, been keeping an eye on Gleam. But the real reason I'm commenting is to say that Pevensie is a uniquely horrible name for a framework :P

@IsaacHarrisHolt

Ай бұрын

Adding ':P' doesn't make a rude comment less rude 😅 but I'm curious why you think so

@rumble1925

Ай бұрын

@@IsaacHarrisHolt Two syllable words are best for mind share, or at least something that is punchy, easy to pronounce and remember. I know Gleam community is mainly british but if you are successful you might want to have your stuff easily pronounced and understood by others. Lustre = good. Gleam = Good. Pevensie = Huh? Pensive, pvc, peevency? Also, rude?

@IsaacHarrisHolt

Ай бұрын

Yeah, I would argue that "I'm only bothering to comment because I think something you've done is horrible in such a way that nothing else is" is not the nicest of ways of phrasing something. On your two syllable point... Laravel.

@rumble1925

Ай бұрын

@@IsaacHarrisHolt sensitive

@IsaacHarrisHolt

Ай бұрын

Again, this is just a kinda unnecessary comment? I'm not sure what you get out of it; you're deliberately doing more harm than good

These are not revolutionary techniques. Fable, ReScript, ReasonML, many more existed before Gleam.

@IsaacHarrisHolt

Ай бұрын

Never claimed they were! I was just showing off the Lustre framework

@PaulSebastianM

Ай бұрын

@@IsaacHarrisHolt yeah but a lot content like this hypes it so.

@IsaacHarrisHolt

Ай бұрын

I think I tried to provide a fair overview

@aDaily1222

Ай бұрын

who said it was revolutionary? he was just showing off some cool tools for a cool new language

I hate this gifs so much, all others is great

@IsaacHarrisHolt

Ай бұрын

Any particular gif you don't like?

FP concepts are fine, but trying to solve real-world problems solely through pure programming is wrong. Computers are machines with mutable state. Accept it.

@IsaacHarrisHolt

Ай бұрын

That's exactly why effects exist!

@rogergalindo7318

Ай бұрын

old man yelling at cloud! lol

@Tirka100

Ай бұрын

@@rogergalindo7318 guess what is your cloud made of, sweet baby pony

@IsaacHarrisHolt

Ай бұрын

@@Tirka100 a lot of Erlang

@mellowcloud6434

28 күн бұрын

Gleam has ffi, you can make external JavaScript files that can mutate state of your own gleam files and types Lustre has a JavaScript runtime for their framework that allows mutability via effects

I find your number of random memes disturbing

@IsaacHarrisHolt

21 күн бұрын

Thank you, I have quite the collection

@iflux8821

20 күн бұрын

@@IsaacHarrisHolt please validate your assumption that it’s a good thing

@IsaacHarrisHolt

20 күн бұрын

I'm a glass half full kinda guy, and I assumed that people on the internet wouldn't go out of their way to try and knock someone down, especially over something small like this, because that would be unnecessary and mean. I prefer to hope that people aren't mean :)

@iflux8821

20 күн бұрын

@@IsaacHarrisHolt I see it as helping each other to make the world better - the memes don’t contribute to the process, nothing personal. I like the intellectual part of the content but it’s hard to watch most of the time because of them )

@IsaacHarrisHolt

20 күн бұрын

Understandable. What would you suggest instead?

ngl I thought I was watching @Fireship

@IsaacHarrisHolt

Ай бұрын

Is that a compliment 👀

@fortwentiblazeit4177

Ай бұрын

@@IsaacHarrisHolt Depending on who you ask :))

@IsaacHarrisHolt

Ай бұрын

@@fortwentiblazeit4177 and if I ask you? 👀

It was going so well until you added tailwind to the project

@IsaacHarrisHolt

Ай бұрын

You don't have to use it 👀

@precumming

Ай бұрын

@@IsaacHarrisHolt I know, it just makes me sad; and I wanted to see how styles would normally be applied to components (The video is fantastic, the tailwind is the only bit that isn’t excellent)

@IsaacHarrisHolt

Ай бұрын

You'd just use a normal stylesheet and link it in the way I do with the Tailwind one. Ultimately Tailwind is just being used as a CSS generator here

@precumming

Ай бұрын

@@IsaacHarrisHolt aha I see, I assume there probably are options available for styled components type of thing - I’ll have a look

@IsaacHarrisHolt

Ай бұрын

Lustre UI might be worth a look