Тёмный

Building WASM web UI with Rust 

chris biscardi
Подписаться 29 тыс.
Просмотров 45 тыс.
50% 1

I've been writing thousands of lines of code of Leptos, a Rust web framework that compiles to WASM in the browser. Here's what the development experience is like.

Наука

Опубликовано:

 

22 май 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 45   
@tenthlegionstudios1343
@tenthlegionstudios1343 Год назад
Super cool to see how useful cargo toml's can be. Straightforward configs - clear client server dependency breakdown. Great content! Thanks
@flwi
@flwi 3 месяца назад
Very helpful, thanks for sharing! Also wanted to add that your ui looks really nice!
@hartmut-a9dt
@hartmut-a9dt 4 месяца назад
Nicely shown, very helpful
@camilletjhoa8099
@camilletjhoa8099 Год назад
Nice to see some "real world" example and have clear explanations. Do you plan to open-source that project at some point?
@chrisbiscardi
@chrisbiscardi Год назад
This project in particular probably won't be open sourced, since it's the admin app for me to update Rust Adventure workshops. I'll likely make other apps instead to do that with.
@meowsqueak
@meowsqueak Год назад
@chrisbiscardi would you be willing to open-source a stripped down version of this (or similar) app for learning purposes? Maybe with all the working parts connected but with the business logic removed? Something like this, along with this great video, would be a great starter project to study for someone wanting to get up and running with Leptos & MySQL.
@chrisbiscardi
@chrisbiscardi Год назад
@@meowsqueak I will be doing this when I start building workshops for Rust Adventure that teach Leptos. First I need to finish the actual site which is pretty close to done.
@phantombeing3015
@phantombeing3015 8 месяцев назад
​​@@chrisbiscardiwill you make leptos tutorial anytime soon? It's so hard to find some projects.
@JReuben111
@JReuben111 6 месяцев назад
beautiful !
@Spookyhoobster
@Spookyhoobster Год назад
What are you using for the JSX highlighting in leptos?
@chrisbiscardi
@chrisbiscardi Год назад
I'm actually not sure! I've done a lot of UI work in the past, so probably picked up something somewhere along the line. I definitely didn't install anything specifically for that. The editor is VSCode.
@RogerValor
@RogerValor Год назад
super interesting insights! can you not use macros to write registration like some sort of decorator (which you would do e.g. in python frameworks), that makes a pub sub registry, that rolls out all registration calls? I kind of dislike as a backend dev to see stuff like needing to get the pool in what seems to be a business function and doing a bunch of dB stuff, that looks very much like boiler plate, that you at least would hide in some kind of ORM Manager or other repo pattern, as it kind of looks like this is something that becomes quite a copypaste thing
@chrisbiscardi
@chrisbiscardi Год назад
When the server macro does its code generation, it creates the register_in function, which is responsible for the mechanics behind the register() calls: github.com/leptos-rs/leptos/blob/23f9d537e9d6cafc27ef8fa1299f32b0a0e006c2/server_fn/src/lib.rs#L301-L361. It basically creates an async block and registers it in a hashmap to be called at a later time. The call_fn here is the body of the function you wrote and the hashmap of server functions is lazy_static initialized: github.com/leptos-rs/leptos/blob/23f9d537e9d6cafc27ef8fa1299f32b0a0e006c2/leptos_server/src/lib.rs#L105. I would love to see this registration happen automatically, but that's also just not the way it works today. The DB code is *definitely* copy/paste. In Axum this would live in an extractor, and in my API projects this is where that logic lives. The function argument for the extractor looks like this in Axum, which would eliminate all the boilerplate. DatabaseConnection(conn): DatabaseConnection The issue is that Leptos doesn't integrate well enough with Axum at the moment when it comes to server functions, so you can't use Axum extractors this way in the definition of a server function, you have to pass the pool (or connection or whatnot) in through context/scope. Although from what I hear, that is going to improve soon.
@tenthlegionstudios1343
@tenthlegionstudios1343 Год назад
How is the performance of the WASM binaries and compilation on the client for you? Is the WASM being streamed and compiled in steps for you automatically for speed ups? I am pretty sure this isn't server side generated only - but still have limited experience with leptos, so ignore my question if I am not tracking how this works :)
@chrisbiscardi
@chrisbiscardi Год назад
compilation doesn't happen on the client (unless you mean what happens when a regular wasm binary is loaded). The wasm bundle is compiled when the server binary is compiled, at development time or in CI. Then you run the server which does typical server things, and you server the wasm to the client to rehydrate the app client-side. Overall the performance hasn't been noticably worse than any JS-based framework, so I'm happy enough with it.
@tenthlegionstudios1343
@tenthlegionstudios1343 Год назад
@@chrisbiscardi ya I was referring to the wasm binary being compiled to machine code by the browser in the standard way all WASM binaries are converted to machine code - I heard that this can hurt performance. Especially if it isnt being streamed and loaded in chunks. But if you havent noticed any perf issues compared to other JS frameworks, that's good enough for me :) . Edit: just wanted to add this only affects initial load times - this is the only concern I have heard with WASM perf.
@MartynDunnMusic
@MartynDunnMusic 11 месяцев назад
Hey Chris, thanks for the cool videos. I just wanted to let you know that when I tried signing up to get notified of new posts on Rust Adventure I got a 405 error.
@chrisbiscardi
@chrisbiscardi 11 месяцев назад
Thanks for letting me know! I'll look into it.
@4115steve
@4115steve 17 дней назад
mega cool
@carsontrainer3364
@carsontrainer3364 Год назад
Should I use yew or leptos to make a web app, for say a client? and why
@chrisbiscardi
@chrisbiscardi Год назад
That's totally a choice between you and the client. Only you know what your own (and your client's) appetite for risk is, and whether or not you can fix issues with the framework itself if it comes to that. I might use Leptos for a client, if I was confident that the application could be well formulated in the current iteration of the framework, but there's also the long-term maintenance angle to consider. Does the client have Rust devs that can onboard to maintain the project? how much of their time is going to go towards keeping up with changes for an early framework like Leptos? Is the tradeoff worth it?
@illiksis
@illiksis Год назад
Hmm.. I am not well versed in Leptos nor in Rust but why use raw SQL files wth SQLx? Whats the advantage over having some ORM handle it for you (eg. Diesel?) From the file structure alone it looks *really* verbose. Not to mention the current implementation makes for a very static approach.
Год назад
code reuse, that doesn't exist in sql
@chrisbiscardi
@chrisbiscardi Год назад
The raw SQL files are prepared and compile-time checked against the database schema. By keeping them as separate SQL files, I get to take advantage of SQL formatting or any other extensions my editor provides. Its also worth noting that this project is definitely not "optimal", its just a real-world example of a Leptos project. My priorities have definitely been "get the app working/done" and not "make all the *right* choices". For more dynamic applications, diesel might make more sense, but you also then need to include that dynamism on the client-side when building the forms which I wasn't going to do anyway.
@larrymarso4492
@larrymarso4492 Год назад
Thumbs up for direct use of SQL. "raw" as a term is overwrought.
@darlingtonolelewe1212
@darlingtonolelewe1212 Год назад
on the side-nav by the left, if you scroll more than 100vh you will reach the end, which looks odd. you can fix that by setting its height .side_nav{ min-height = 100vh }
@larrymarso4492
@larrymarso4492 Год назад
How is use of limited javascript client side in wasm/leptos these days?
@chrisbiscardi
@chrisbiscardi Год назад
it depends on what the javascript does. It it doesn't interact with the wasm, such as being a standalone web component that instantiates a video player, then it works just fine. custom javascript that you bindgen yourself will also work fine. Third party npm dependencies could require a lot of work, or if they're integrated with a javascript framework like React require being rewritten.
@ControlTheGuh
@ControlTheGuh 11 месяцев назад
love the dashboard, is the code open source on github?
@chrisbiscardi
@chrisbiscardi 11 месяцев назад
This is the admin app I use for updating www.rustadventure.dev/ workshops, so its not open source. I will have workshops detailing how to work with Leptos on Rust Adventure though, and that code will be available.
@Tigregalis
@Tigregalis Год назад
How do you embed Bevy into a Leptos app?
@chrisbiscardi
@chrisbiscardi Год назад
I suppose it depends on what exactly you mean by embed! You can likely "just use" any of the ecs crates, or wgpu, etc.
@rutabega306
@rutabega306 Год назад
Do you have a video about why one might choose Leptos over Yew?
@chrisbiscardi
@chrisbiscardi Год назад
I have a video for a whole bunch of different frameworks in this playlist: ru-vid.com/group/PLWtPciJ1UMuBpRg1KbXqxE5WOdY9ze37S and the choices I'm making for this project in this playlist: ru-vid.com/group/PLWtPciJ1UMuARHHLqRVzBiPZSwlqXthgN but no dedicated video comparing Yew and Leptos directly. My personal tldr; is that Yew is more established and I might use it in a situation where I require stability, such as working with a team or a client, and Leptos is much newer and I often am using the main branch commit, so I'm using it partially because I like using emerging frameworks and I think some of the ideas are interesting.
@b1chler
@b1chler 11 месяцев назад
is this like the Rust version of tRPC?
@chrisbiscardi
@chrisbiscardi 11 месяцев назад
more like the Rust version of a Solid/other framework. The "trpc"-ish part that you're noticing is a feature of Leptos called Server Functions - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gr6WHJI8zjQ.html
@b1chler
@b1chler 11 месяцев назад
@@chrisbiscardi But I guess this way of doing this makes the most sense if the api is never intended to be public and only has one client? Asked differently. What approach would you choose when you'd want to build a public facing api?
@chrisbiscardi
@chrisbiscardi 11 месяцев назад
Building a public API for me would be something else completely. Either a REST style API with Axum or a GraphQL API depending on needs. Leptos server functions are not a user-facing API, and neither is trpc. Server Functions in Leptos are specifically "run this bit of code on the server instead of the client and make it easy to call". That can definitely be used as a shortcut to run some SQL like I'm doing here in this admin app, but it could also be used to add authentication via an http-only cookie to call out to a "real" API, or just process some markdown outside of the browser, etc.
@SteveBClark
@SteveBClark 10 месяцев назад
Which code editor you use
@chrisbiscardi
@chrisbiscardi 10 месяцев назад
vscode
@SteveBClark
@SteveBClark 10 месяцев назад
@@chrisbiscardi so how it's look different
@chrisbiscardi
@chrisbiscardi 10 месяцев назад
@@SteveBClark I made a video about that: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-apEXmJP5xxw.html
@TeamDman
@TeamDman 10 месяцев назад
TIL one pass has a cli
@chrisbiscardi
@chrisbiscardi 10 месяцев назад
its quite nice! Means I can keep things in .envrc without having to worry about it leaking in my videos, or in my shell history which is also nice for using shell history syncing tools like atuin
Далее
I spent six months rewriting everything in Rust
15:11
Просмотров 412 тыс.
The Truth about Rust/WebAssembly Performance
29:47
Просмотров 174 тыс.
Me: Don't cross there's cars coming
00:16
Просмотров 12 млн
меня не было еще год
08:33
Просмотров 2,4 млн
Сумерки сасага🧛
11:41
Просмотров 1,1 млн
An introduction to WebAssembly
25:23
Просмотров 187 тыс.
Why WebAssembly is the future of Web development
7:33
Просмотров 180 тыс.
Makepad: How to use Rust for fast UI - Rik Arends
43:36
Simple, Portable, Immediate mode UI with egui
13:45
Просмотров 43 тыс.
Rust & Wasm
9:38
Просмотров 188 тыс.
Will Rust Beat JavaScript in 2023?
23:48
Просмотров 109 тыс.
Now is The Best Time to Learn WebAssembly
8:00
Просмотров 65 тыс.
Why JavaScript Devs are Switching to Rust in 2024
10:35
Blackview N6000SE Краш Тест!
1:00
Просмотров 38 тыс.
ИГРОВОВЫЙ НОУТ ASUS ЗА 57 тысяч
25:33