Live Coding: Rust + WASM + Cloudflare Workers

so what i'm going to be playing around with i wrote a website a few years ago called who saw that coming and the idea was pretty straightforward you're able to come into a website you're able to come to the website you're able to type in a prediction of something you think is going to happen you can put in a date and it will create a hidden page that only shows you a sha 256 hash of the text you typed in so anyone can come in look at that you can share that url anyone can look at the page and they can figure out they can you know copy paste the shot they don't trust you in the future eventually when a certain date comes that page is now public and it will show the original text so you can go to make predictions like who's going to win the presidency or something like that and prove that you were just smarter than everyone else now of course there are plenty of ways to game the system there's a there's a fun old trick you can do with you know betting on football games you send 500 people you know team a is going to win and another 500 people team b is going to win and at least 500 people think you're a genius and you just keep doing that until you have 10 people convinced that you're able to uh predict a whole bunch of things in a row binary search tree you might call it anyway plenty of things to play around with that i took down the site just because i was lazy that's completely really the answer i didn't feel like maintaining yet another server but i've always thought about doing it again with cloudflare workers because then well actually i just want another excuse to play with wasp that's what it comes down to so cloudflare workers allows you to write serverless serverless funny word sites and you can do it in javascript or you can do it in webassembly so i've done one of these once for a site called sort of secret if it eventually loads so here's one oh i should probably really fix this stuff anyway so i wrote one of these things ooh the whole thing i really got to go back and fix this thing up oops uh yeah anyway i've written one of these it's been a while so i wanted a refresher so i'm going to be diving in and that is enough talking let's go ahead and get started so this is going to be a lot of reading so not the most exciting live coding but we will get there eventually let's see there should be starters that's what they call it all right so i'm going to shamelessly because i have no shame in this go ahead and rip off the hello world rust wow they've changed things since i didn't realize they had support for all these other like cobalt okay that's impressive but let's go ahead and i'm going to call this snoy predict because i think i'm going to host it on swimming.com so i'm going to go ahead and do wrangler generate so i predict [Music] based on this let's go ahead and pop open this page because i think they have some instructions so this is going to be based off of wise and blind gen i'm so i'm on windows and everyone can laugh at me for being on windows i'm on windows right now i may jump over to my wsl my linux instance because that might be a little bit less painful but in the meanwhile let's see what's going on here new project created so okay cool [Music] nice okay let's see what it says new project created you will need to update the following fields inside all right so let's get this up and running and i'm gonna have to think hold on one sec i think i have to update obs about which of my two different visual studio windows i want it to be showing you so just give me one sec on that front cool okay so we've got all of this code nice and generated and now we have somewhere we can actually play right there's a lot of stuff going on in here but i need to update my wrangler.tomml and i need to give it my account id my zone id so let's just go ahead and get that information i guess i should probably not share that with everyone that's probably a better idea but yeah let's go ahead and [Music] i forgot i had gotten out of powershell i really missed linux okay so i'm going to most i'm going to temporarily turn off the screen while i get some of the sensitive information and then i will pop right back let's go ahead and see if it tells me where to get it though i'm going to go to the zone overview tab the zone id is the right in the right sidebar of zones overview tab at dash.cloudflare.com so everyone give me just a second to uh i'll do it in a separate window so i can still talk to everyone while i'm looking at that then i will temporarily go away okay hope everyone's doing well today there we go okay oh you know what this is not private information i think yeah the api token is the private information all right so i'm not going to be quite as worried it's still going to be a little bit circumspect on this so let me turn off my automatic scene switcher stop okay so account id sonar dm setting [Music] count id i'm setting okay theoretically that's done i'm closing that window out okay and now we are back all right let's see now what our next steps should be in order to get this thing actually working so we have so usage gone in and generated it crap i don't think i installed wasn't back beforehand [Music] oh of course i didn't i should have done that i hope wazim pack is available for windows let's find out what is watson pack part of this is really reminding myself what the whole ecosystem looks like so to install wasn't pack very nice they've got a windows 64-bit downloader installer so you can't see this right now but windows protected my pc by not letting me install it not successfully installed that [Music] is very fast okay so now that i've got wazin pack [Music] all right cross compilation support in rust is of course amazing let's watch this thing build it's been a while since i've played around with all this stuff and i really should read through the while the rust wasn't book again to get a feel for all of the different components again so it's using this is using wasn't blind gen communicating between webassembly and javascript okay logging panic messages and we outlook okay all right the wasm package is ready to publish okay that's interesting usage use wrangler generate to clone this template okay and i built it i can test with this [Music] now i don't actually want to test right now do i what i really want to do [Music] is i want to see this thing running i have a feeling i'm going to have to go back i'm getting gekko driver i don't even have firefox installed and i don't care about the tests because i'm going to be completely yolo this time and not do any testing let's see learn more about wrangler generate let's pop back over to the learning side getting started sign up for a worker's account all right i have one of those install the worker cli did that configure oh let's go ahead and wrangler login is that going to help yeah i'd like to do that putting it in a separate window again for security purposes [Music] oh instead of michael at snowman to manage workers yeah there's nothing security sensitive here you can see all this authorizing wrangler okay i've got a new api token i can close this page cool generate a new project while i've generated the project because i'm doing this completely out of order now write code all right i'm going to pretend like i wrote code because i just want to get to the part where i actually see something running previewer project all right let's make sure now it's still waiting for an api token that's not particularly promising [Music] now let's try wrangler who am i well maybe it doesn't if i am let's try [Music] let's try logging in one more time all right i'm going to leave the page open for just a little bit longer still says it's waiting for the api token [Music] interesting well this is definitely getting off to a slow start [Music] i think i'm going to manually create a token what comes next in this whole process so i've already edited the wrangler.tamul and provided it with my account id let's type in wranglerdev and just see what happens i have a feeling this is going to fail because it doesn't know who i am installing lassen pack oh that was nice of them oh very nice preview without authentication i am very happy about that okay nice we've got things somewhat working all right let's dive into the code let's try to make a little bit of a home page for this thing we've got src lib make this a little bit smaller i hope everyone's still able to read it all right i've got utils they're just helpers you've got tests which as i mentioned i'm going to be an incredibly bad person and i'm not going to do any of that worker generated all right that's going to be the bridge where's the actual code for this thing it's got to be somewhere right you would imagine is it in this limb oh my god i'm staring at it this entire time okay well so wasn't bind gen so i've got a public function greet and it's going to return awesome worker now i'm trying to remember where does the routing go on i think i'm pulling up some memories from a long time ago fairly certain if i pop open this worker.js here we go okay here's the bridge so i've got this async function handle request and as we can see up here we're adding we're adding in an event listener there's some bridge going on between the javascript and the wasm world everything that actually interacts with cloudflare is going over the javascript stuff i've got an async function handle request all right now we're going to want to do some async stuff even if we don't technically need to do async stuff i kind of want to do some async stuff so let's see what happens if i pop over here and i change this into pub comes first doesn't it yeah all right minor modification oh does that not work filter resolve use of undeclared creator module wasn't binding futures huh do i just need to add a dependency on i've never actually remember probably dealt with the last time i did exactly this thing plasm bind gen futures bridging the gap between rust features and javascript promises okay kind of looks like exactly what we're trying to do all right there we go very lazy for me all right let's see what happens wrangler's pretty nice all right so it's trying to recompile not compile let's try that again so here we're getting tied down to an exact version was in blind gem let's be a little bit more generous about what we're using [Music] all right so that's coming along fairly nicely kind of on the slow slide but you know it is cross compiling a whole bunch of stuff now what i'm hoping is going to happen is i'm going to get an error when i try to watch this thing because now let me come back to the code so this is now an async function this should be returning to javascript promise but over here i haven't started i haven't actually awaited on the responsive agree yet let's go ahead and prove that i'm correct it's always fun like proving i'm correct object promise bingo yes okay and that should be as simple as to solve as throwing in and await there let's try that again did that not that may not have reloaded [Music] nice okay wow so now we've got some async in the pipeline the next thing we're going to want to do is we need to pass this request in and oh man remember this being a pain last time around also and then i'm going to go ahead and convert whatever comes out of this into a response let's start on the response side let's see if i'm able to generate a response directly from the rust side i think there is a possibility of doing that and yeah let's see what happens eventually i'll rename this from greet but it's not that important for the moment okay so this is going to fail [Music] miserably nice okay let's see what the error message is or just internal error of course all right so we need to return a response value and where exactly where is the bridge there is a there's a package and i'm dredging up all of the old memories at this point so one of the many many packages i could be pulling in there's my hasn't binded it's not bad [Music] there's some crate in rust that provides or maybe it's one of the dependencies anyone on the you know watching the stream has any ideas feel free to type them in i am i think i'm watching the chat i hope i'm watching the chat okay so [Music] plasma rust i have a script bridge is that vague enough [Music] all right save it okay here we go so cargo wazzy one of these is going to be the thing i'm looking stdweb okay standard library for the client-side web all right so let's go ahead and here's the docs [Music] all right let's see what happens if i run a dependency std web zero to four i was already in the right place [Music] depending on your project all right we'll let that happen in the background now let's see if i was right about my theory that there is somewhere in here type called response there isn't how did i think there was a response maybe i ran into this last time too yeah i think i ran into this last time too and i think what i ended up doing was on the yeah okay i'm gonna do this a little bit differently so what i'm going to do on the rust side i'm going to create my own type response [Music] and i'm going to have a status let's go back to over here in the javascript so in the javascript i got greeting let's call it rest response instead oh let's be proper okay they're not being proper fine i'll stick with the snake case then so we have rust response and then return and then i'm going to go ahead and grab rust response dot body response status and now i'm trying to remember this response constructor takes an object on the javascript side [Music] mozilla mdn response let's go ahead and look at these types this is the true pain point for me at least i don't do enough javascript definitely i thankfully i don't do very much javascript these days uh all of this bouncing back and forth between the different types is a pain so i'm hoping one of these days okay here we go headers i'm hoping one of these days i can avoid the javascript almost entirely for the moment this isn't so bad so the init is going to also take headers and headers is going to be what is the format for headers why doesn't it tell me oh contained within a headers object or object little literal of byte string key value pairs [Music] for the moment the only header the only response header that i'm going to care about is the type the mime type content type i'm going to hard code that one and i'm fairly certain if i pulled up the code for sort of secret i would see exactly the same thing i'm going to say status and i'm going to say headers [Music] how do you generate these headers create a new headers headers append ah name value perfect so let letters equals new headers here's dot append content type rustresponse.content and i'm sure i am making some kind of mistake i thought about javascript but you know we'll get back to that later so status is going to be a u8 u16 all right status is u8 iu16 body for now is going to be we saw that string worked don't want it to be string long-term i'd like to use executive u8 or something else but let's start off there and what was the name of the other thing so i said body status and content [Music] we'll make that a string as well this is going to return a response this is going to fail to compile by the way and that's going to be a good thing and we'll see why but let's go ahead and generate some kind of a response for now the status is going to be let's make it a 404. not found into content oh let's do this and content type html there's and we're going to make a utf-8 and because i really want to test the system out a little bit throwing in some heber to see how unicode handling works oh someone's asking what i'm building good time to remind everyone all right so i had this old website called who saw that coming the point of who saw that coming was you're able to jump in and good morning so the point of who saw that coming is you're able to come into the site you're able to log in to log in a prediction you're able to type in some random text and a date where you want it to go public then you get a url which is based off of the hash the sha-256 of what you typed in but it will not reveal what the actual prediction was until that date so you can go ahead and you can spread that url around let everyone know what your prediction that you've made a prediction but it'll only get revealed later on in time that makes sense and what i'm doing now is i'm building it on cloudflare workers because i'm too lazy to maintain yet another server the theory goes i do that all day at work and i'd rather spend my free time coding instead of maintaining a server we're going to see how that goes all right i need to do dot into okay cool so this thing is still going to fail to compile and let's go ahead and look at what this error message is so the error message says trayvon j's value is not satisfied cool that's exactly what i was hoping for once things actually went according to plan and the reason is this struct i think i just need to stick with some buying gen on it cool all right that's funny field is never read not really worried about that though and oh yeah all right so now let's see this thing compile running preview without authentication let's give it a second oh maybe it's already running let's refresh interesting so something happened console api called warning [Music] script modify context reset okay let's try that again [Music] [Music] huh let's pop back over to this javascript [Music] i'm at least sure of this headers part so let's go ahead and leave that off for the moment and see what happens i'm still going to include the body and [Music] status still nothing let's go ahead and [Music] hard code the status to 500. that's hard for the body to add body let's just make sure that the javascript side of this is actually working good okay some sanity restored next i'm going to [Music] put this back to rust press response.body [Music] script modified i don't know why it has to okay fine it looks like i have to rerun dev each time i modify the javascript side almost almost like i have to compile the javascript each time okay so 500 internal server error oh i told it to be 500. what happens if i do that it's still going to be 500 or is it going to be something else yeah 400. the page isn't working contact the site owner let me go back in time just a bit and originally it was just returning greeting the greeting was a string so sure enough if i go back to this [Music] and and this this should work just fine right i mean it's exactly the same as what we had before so there shouldn't be any kind of a difference okay this is where you start testing sanity [Music] so now i'm returning a response i know what i want to do let's come back over here to this side of the fence i've got my okay let's go ahead and just stringify this and see what happens see what's actually coming out of this mismatch types oh right of course [Music] that looks better all right let's reload because i changed my javascript again let's load this up huh well that's not what i was expecting so clearly i don't understand how wasm bind gen works there we go so i can't imagine this has anything to do with the async aspect of what's going on here but just to eliminate one possibility i don't know it probably has to do with with this the way that i'm actually generating these instances let's go ahead and actually look at the docs or wasm engine and see how we properly serialize data crates pull in the wasm engine attribute through this crate to create also provides js bindings through the js value interface all right i'm not impressed uh let's see [Music] maybe there's going to be some tutorial [Music] documentation all right here let's look at an example import great hello world features here we go the guide importing functions working with char [Music] got a bundler converting web assembly [Music] okay here we go supported types okay last and by engine attributes on javascript imports on rust exports constructor when attached to a rust constructor we'll make the generated javascript bindings callable as uh be used in javascript all right let's look at fields there we go okay there must be no oh oh of course okay now i get it i think i think what i've got to do is i've got to provide access your methods because why would why don't you do that so simple response do i have to make this all public yeah let's make it public function status u16 and this is going to return self.status hit status get body turn a reference to an str and finally get content type i have a feeling on today's stream we're going to get as far as having a semi-working bridge [Music] let's see if it talks at all about this exported rest types oh here str copies the strings contents back and forth you don't want to perform this copy and would rather work with the handles okay well we are going to go ahead and be lazy so string string [Music] clone quality let's be as lazy as humanly possible that's my built-in hat killer speaking okay so that's fine i didn't expect that well i didn't think it through of course that wouldn't change anything [Music] okay so now instead of status 500 let's do rust response.getstatus and rustresponse.getbody [Music] let's rerun this okay okay almost there almost there looked cool i just want to get the last bit of this working too we're going to say content type [Music] i wonder if i should send a pull request against the uh the template or asm this scene what i'm doing now seems to be a fairly common use case maybe i'll open up an issue after i'm done with this say hey you know what this would be useful nice okay whoo all right so we are now able to generate some actual have html essential all right now i want to be able to do some routing based off of the path on the javascript on the rust side so what i need to do is i need to look up here on the javascript side what does the request look like what information do i want to get out of the request the request has a bunch of properties i'm going to completely ignore headers and method for the moment everything's just going to be a get request contains the url all right and it says url gives me back oh it gives it back as a string maybe let's find out now i'm going to [Music] you know what let's just do this the easiest way i can think of doing it for now [Music] i'm going to take in a url string [Music] and look at how beautiful rust is as usual [Music] okay that's the green function now greet is going to need to take in that url so i am going to here i am going to still be awaiting on greet i'm going to say request dot i've already forgotten is it just dot url that's just request.url [Music] and let's see what happens all right and let's rerun this how does it think that the url is tutorial.cloudflareworkers. oh okay okay okay almost started losing faith in the system okay so i am for the purposes of routing i'm not going to care about the host name at all so what i want to do is i want to parse that url i'm going to guess that i could do that easily enough on the javascript side but why in the world would i do something on the javascript side and i can do it on the rest side obviously the rough side is better uri now it's url [Music] yup okay so now let's come on over here to the we're going to use the url package i will pop this in [Music] all right just to demonstrate things are working really quickly let's go ahead and this through i'm going to go ahead and just parse this like url [Music] now this should fail because it's going to say yep awesome okay it is debug nice all right so let's see if this thing actually parses i think i don't need to re rerun dev because i haven't changed anything in the javascript and that is correct and now i've got just the path which is the only thing i cared about okay at this point at this point let's do a little bit of error handling i don't remember what the version of anyhow is being very lazy this is now going to return in a result use anyhow star [Music] okay well okay we're rap response [Music] interesting right i don't want to return the response back out i want to sorry yeah i don't want to return the result back out instead what i want to do is handle all of the errors internally [Music] so watch this i'm going to read url greet enter url gotta wait i'm going to match yeah [Music] okay what else yeah i'll just match i always get i should be better at this by now i always get the method names and results kind of confused in my head as a functional programmer i should prefer doing it the other way but [Music] i don't yet so air e in the case of an error i'm going to return a brand new response the response is going to be status 500 body i'm going to assume that everything well yeah there are no secrets of this so i'm just going to include the entire response body [Music] occurred [Music] actually anyhow i think implements [Music] i think it implements display we'll see by the way there are any questions about what's going on so far because i can start answering some questions [Music] html type [Music] okay [Music] okay so that should generate a response and now i'm going to have async read inner string and it's going to return a result response instead that code compiles let's pop over here to not finish okay there we go url is that thing okay i don't care about the url some error handling so let path equal url.path path is just a string oh it's a method okay that's fine still easy enough to deal with compilation time isn't too bad all right there we go now let's go ahead and pop over to some iterator code split str split it's this one that returns an iterator over sub strings the pattern i'm going to match on is the forward slash i think [Music] pieces be a vec of str it's equal to path dot split let's try this out what i'm worried about is if i'm going to have to skip one at the beginning because of the leading slash i'm fairly certain i'm going to let's go ahead and try doing this [Music] all right beautiful okay now we're really in getting into good shape and now we are going to yep one and then collect all right now we've got the pieces and now we can do some routing since it's bothering the hell out of me it shouldn't but i don't like the fact that the entry point to this is called great so let's call this handle and they're still for them you know what i actually don't want it to be a url i want it to be your request type so one of the fields is going to be url in fact for the moment the only field is going to be your is going to be that url handle enter these are silly quality of life improvements but you know i like them so it's called handle it's going to take a request this is all going to fail and now we're going to have to jump back over to no no i have to look up look at the wasmbine gen guide again oh i reserved there we go i want to figure out what exactly do i need to do in order to export a constructor let's have a look at this so our new is going to take just one field all right we've got pub struct request as bind gen and the info on request is also going to have wax and bind gen [Music] and inside of it i'm going to have one more asm binding attribute which is going to take to say constructor constructor nice okay so pub funk new url is going to be a string and it's going to return itself and it's going to be the dumbest implementation you can think of okay so that's all good now over here i'm going to say const rust request equals [Music] here i'm going to have to say request [Music] and wait a sec [Music] i hope this is right [Music] that's cool i care more at this point about defeating this javascript rust bridge than actually making a working website all right so this is now going to say new request request.url and we're going to pass in the rest request [Music] remember so wait wasn't bind gen wasm i don't remember exactly what that's doing and i don't remember exactly what this is doing did i add in that some equal one i didn't that's funny all right let's see what happens [Music] something's gonna fail [Music] good because there was no way in hell that i actually wrote that correctly the first time [Music] and i remember this being a pain point previously also it would be really nice if i got a little bit more information out of cloudflare telling me what went wrong most likely there's some kind of information somewhere all right so let's work through this and figure out where exactly it's failing [Music] now just as a dummy response hello world [Music] i think that's valid i may have to give it a status code also okay so hello world so that's fine this is going to fail isn't it [Music] this is going to fail so hard i wonder if i have to give it a different name besides request wonder if it's a namespace issue [Music] okay so that part worked this is the part that's failing them isn't it interesting so for some reason i am able to success oh i must be creating the wrong kind of request let's give it a different name i know that isn't strictly necessary [Music] i know there are ways to deal with it but i honestly don't know enough javascript at this point to make any of this make sense [Music] all right popping back over here i've got to rename this to rest request rest request rest request and one more [Music] and one more all right let's check it out interesting so i was mistaken about what's wrong let's come back here to some examples let's let's make this a little easier to look at okay rust so why isn't bindings on sports js name equals blah of course i could have done that supported types exported rust types okay let's check out the rust usage uh the examples here so wasn't bind gen i'm gonna be doing something like that i don't see anything maybe i don't need the constructor stuff all right import export instruct name maybe i can just use a function all right do any of these instruct [Music] name struct by value name struct okay so it works and this is return name destruct where is that turn name struct all right let's try this as a top-level function instead of a constructor or method so instead i'm going to say [Music] hub function that's implied make request [Music] i'm going to end up changing this name back to request eventually i would imagine but [Music] all right [Music] so instead of actually pulling in that type make what did i call it make requester yeah just make requests make requests it's going to work of course not would be really nice to get a little bit more error information but i'm slightly suspecting that that's going to take too long to figure out just go back in time a little bit let's make sure that this thing is actually working [Music] okay so it is absolutely definitely this line right here some reason it does not like receiving this rest request i didn't do something stupid like make this asic no i didn't wait a sec now going to javascript usage side and actually try to console.log what happens if i yeah that's what i want to try next what i want to try next is let's try inspecting it's like the worst form of printf debugging [Music] let's see what happens what exactly is going on here [Music] it's a pointer it's a pointer [Music] so then why is this failing to get sent across seems completely reasonable doesn't it based off of the example here all the types seem to line up exported triple struct oh maybe it's not passing it over to who i expect it to let name struct [Music] [Music] all right believe how ugly this approach is how little the rewards are at the end of this maybe i should just give up on the request type but i really don't want to that's going to feel like a defeat specified key does not exist [Music] okay beginning to get to the end of my patients on this i'll come back to this another time let's just get rid of all this request stuff we've got this thing written as a handle we'll just go back to using the url directly enter and i return like a coward and admit defeat [Music] and we come back over here and instead of having a rest request instead of having make a request i just have handle don't have to bother with that [Music] now i'm going to handle a request dot url and get my response okay now let's watch our code actually work again [Music] beautiful okay so next thing i want to do start making this a little bit pretty let res equal [Music] match pieces so i'm going to map on the pieces we'll match on empty that's going to be homepage [Music] and i'm going to return page yeah that makes sense i'm going to match on style.css it's going to do css and or anything else not found then okay wrap it response [Music] what is it it's oh yeah i can just do anyhow path not found and i'll give it the path [Music] okay [Music] so function home page it's going to return a response [Music] now i should really i should really use some kind of a library or some kind of templating system bother with that [Music] content type is going to be html type into i usually use two owned but i'm into a shorter body is going to be [Music] always get the syntax for these a little bit off [Music] set it okay kind of blown away that i got that [Music] correct [Music] this is all just standard html stuff [Music] blah blah blah body html what's going on up here expected an array or slice cannot pattern cannot match oh oh okay so the borrowing here is not doing the thing i was hoping it was going to so i'm going to do as slice be very explosive now the error is the fact that there is no style css that's fine by the way i don't want that new one right at the beginning but i'm not going to care about it for css purposes [Music] and let's you know just for fun let's make this a little bit pretty [Music] hey how's it going okay margin zero auto and i don't know let's just make sure that this actually works all right error occurred path not found good now we don't actually want that to be an error occurred and i'm going to go back to what i had before not found [Music] oh of course i got actually [Music] link this thing interrupt equals css and now i'm gonna just blatantly steal this home page to the knockdown message [Music] not found is going to need to take in the path [Music] click not found could not find requested path boom now instead of dot into i'm using this as a format string and i pass in the actual i really didn't think that was all going to compile [Music] there we go look at that now we're actually generating some style sheets since everything else on my screen is in dark mode and this one is not let's go ahead and make our lives just ever so much nicer background black h1 and we'll leave it as red but we'll make the color here white it's going to be a pretty jarring contrast but you know whatever [Music] oh nice and we're in dark note and because i'm you know really going to be lazy [Music] cool okay i'm just waiting for it to compile i guess warning script modified context reset there we go return to homepage could not find a requested pat slash that shouldn't be going on did i forget to do the dot skip one no i got the dot skip one oh is it still going to have no it's still going to have exactly one empty path in it the style that css is working yeah everything is fine i've just got to do that right because there's going to be one empty string before the slash and one empty string after the slash nice okay keep going let's keep going let's try to collect some form data i don't think i'm going to get as far as actually storing all this information inside cloudflare worker key value store that would be the next step but i've ended up spending way more time on finding the tooling and i'll be fair i thought i would spend exactly this much time fighting with the tooling part of the reason i'm doing this as a live stream is i figured i wasn't gonna have the uh the energy to fight through all this stuff i didn't have a bunch of people laughing at me for failing so let's go ahead and put in a form i'm gonna want to collect the date yeah i'm going to want to collect the date where this is going to go live all right so form method equals post action equals predict we're going to do the dumbest kind of form possible [Music] prediction goes live on i'm going to have to go back to htm the html docs at some point and look up what all the different formats are for dates and everything because it's been a long [Music] time prediction goes live and text area name equals [Music] prediction sky will still be blue that seems like a nice default prediction okay all right so that is going to [Music] not bad not bad let's do some quality of life improvements shall we let's go ahead and make that text area just a little bit nicer [Music] height is going to be 10 lines [Music] that's not so bad didn't do the whole centering thing i was looking for but that's okay and i need a button [Music] all right there we go is that not how buttons work fine i'll do it the old way oh no i'm just being much dumber than i thought gotta actually put it inside the form people who don't understand what's going on i started writing html way back in the day and i still have trouble remembering things as recent as html4 every once in a while that on its own line that's nice not here could not find requested path predict good exactly what i wanted next i should with what i'm about to do i should be checking request methods to make sure they all match up i'm not going to care about that [Music] what i am going to need is could i do this with get doing this is so it's technically there are worse things in the world there are much worse things in the world well it's really cheap everyone feel good about cheating i feel great about cheating so it's not really a get request it's really a post request but we're going to go ahead and use a get request because then we don't have to pass in any additional information the url itself is going to have all the information we need because get parameters go over the url i'm going to say predict is going to take the parsed url [Music] eventually there will be some errors that come out of that but we're not there yet [Music] predict and let's just copy paste this [Music] so [Music] so i'm actually lying about the prediction getting made that's fine [Music] i want to actually see what's going on in this url [Music] i'll leave the return to home page wine [Music] i'm not mistaken we are going to have full query string information available there and it's going to be glorious compilation failed oh yeah i meant to rename that to predict [Music] what exactly is that complaining about oh i should turn off spell checking but easy enough all right close that out the thing i'm confused about oh maybe i need to refresh the thing i'm confused about is why are the there we go now the query string parameters popped up and let's actually oh and i need to mark it as required that's why that's why it's not complaining about the fact that i didn't fill something in this is what happens when someone hasn't done proper html in forever [Music] you can fill this in with the default date that'd be kind of nice but predict please fill out this field good predict nice okay so query is coming coming across like this now let's pop over to the docs for the url crate i'm fairly certain to provide some kind of parsing for query string parameters and i'm fairly certain about that because i had to do some ridiculous bridge with hyper at some point all right query pairs parse the urls query string it's going to return an iterator of key value pairs beautiful okay it's going to come back as a cow is that really necessary i'm guessing it's really necessary i'm going to look at the iterator implementation where is it ah there it is oh yeah it's definitely coming back as a cat that's fine so now i'm going to actually be returning a result from here because things may fail i think things may fail maybe they can't oh wow that's nice eventually i'll have to deal with some errors but it is not today [Music] at params equal url dot three pairs [Music] this time [Music] which i kind of want to collect into attachment [Music] now instead of showing the url which are the primes i cannot believe that compiled the first time around i'm actually truly blown away i'm not proud you know i don't pat myself on the back too often but when my code actually compiles first time around i feel pretty good all right so now we have actually received a prediction we have a date next thing i want to do is i want to generate the shot 256. and once we get past the i know i keep dragging this out a little bit longer once we get past the point of we have a working shot 256 i think i'm going to stop at that point because then we're going to have to start dealing with more web api stuff and that's that's boring that's not playing right thrust and rust is the thing that we actually like playing around with here and you know why not let's parse this into a naive date theoretically i could parse it and i should i could actually accept a full timestamp i think just going with the date is going to be easier for everyone involved so i'm going to use chrono for that [Music] i really don't remember if chrono is the most up-to-date of these libraries [Music] but i'm going to do it anyway and now i'm going to get to go ahead and put in my result the thing i'm thinking about is this is going to generate a 500 error if the parse fails then my question is do i care about the fact that it's generating the wrong kind of error message you know what sorry everyone i will put in some context though so we're going to get the params we're going to get what were the names of the two fields so prediction and date what prediction with rams.get it's going to be getting these as cows i think i'm going to have to wrap this i'm going to have to do an into but let's go ahead and do this dot okay or [Music] pulse this is what i was kind of complaining about this should ideally be a 400 error but it's going to end up generating a 500 error i'll leave it as an exercise to the reader to uh fix this meaning eventually i'll get around to it [Music] all right now it's time for some named parameters why is the type not lining up there match arms have incompatible types expect it okay so first things first now that i'm returning a result from up here got to do that [Music] i could provide some context here you know yeah why not it's fun i love anyhow with uh context and with the context methods [Music] next inspected in fn once oh ah all right so i said okay or else but then i didn't provided a closure laziness for the win all right so that's good [Music] so date is going to be [Music] date not provided and then [Music] let's use chrono naive date [Music] let date be a naive date and it's going to be date dot parse dot context invalid date fairly certain i'm gonna have to yeah fairly certain i'm gonna have to somehow display this thing yeah let's see maybe i'm wrong if there's a display implementation there is [Music] cool there we go okay so i made a prediction it parsed the date just to prove that things are actually going correctly if i do x up there error occurred processing prediction okay and i could make this error page nicer just like not found was [Music] should i it's okay i'll leave it alone for now no i won't know me okay function error response maybe this is where i could do some uh some proper 400 instead of 500 stuff but yeah let's do it we're getting towards the end of this [Music] anyway [Music] okay so the status we'll just start it off at 500 and get back to it and i'm gonna have to look into some of the fun stuff and anyhow i haven't done that in a while but yeah let's see this all right [Music] alright so pre pre i've got to deal with html escaping and all those other things if i was going to do this correctly but i'm not [Music] all right let's see this thing let's think about oh an error response isn't being used okay what if i actually need all this stuff now probably don't [Music] yeah okay i'll keep it the way it is all right so that's going to compile and if i come back here and i make a mistake [Music] an error occurred processing a prediction why is that the only thing it's showing that was the context but it's not showing the underlying error so i've got to look at the docs for anyhow which we're about to dive into anyway anyhow is doing trade object stuff i couldn't jump over to snafu a little tiny bit tempted to jump over to snafu that's right there's bail which i've been using you know what let's do proper error [Music] handling [Music] all right let's figure out all the different ways my program can type results [Music] derive snafu and i'm going to say enum error let's find all the places things fail all right so this is going to be a url parser [Music] yeah let's go ahead and do everything correctly snafu display equals [Music] map here [Music] all right dot map error and this is going to be [Music] url error [Music] [Music] is that the correct syntax yeah it's like syntax expected o and of course this needs to be a function [Music] cool closure is expected to take one argument how am i forgetting how to use snafu i just did this the other day all right snap fluid display i'll name display debug snafu what a context oh jeez that's why all right because i'm not going to use dot map error instead i'm going to use dot with context ah okay cool let's see what happens next [Music] so now i don't need the context that's going to become completely obvious from what's going on down below that's going to be in error here status is going to be air dot status and now we get to solve our 400 problem correctly this is a heck of a lot of work for very little gain but it's correct and we love being [Music] correct [Music] match cell so if the url error occurs that is actually going to be 500 that means something inherently went wrong behind the scenes error is ambiguous could be the trait imported oh okay i don't care about that trait [Music] it's not who what is this called our result text [Music] an extension trait [Music] all righty all right we're in good shape let's jump down here [Music] so let's look at our error the next kind of error we're going to handle is field not provided [Music] field not provided for [Music] prediction [Music] [Music] so context is going to be field not provided name is prediction theoretically i can provide a helper function to handle these two cases but i don't care huh let me do this with the option all right let's jump back over here i think one of these was returning an option maybe not oh there's an option next of course there is okay you know what that's killing me is [Music] screaming [Music] all right [Music] that worked and we can do the same thing again field [Music] all right now we're good and we're going to say date.parse dot with context [Music] invalid date [Music] dot [Music] all right and we are going to the method parse found for a result [Music] there we go so now invalid date is missing [Music] and there we go [Music] i don't remember which parser this is [Music] hopefully it's this we'll get an error message soon enough if it's the wrong one [Music] missing field date [Music] good okay now back up here now we get to see the beauty of the way we've set this up field not provided oh is there an auto complete i've never control done no matter oh and it's beautiful all right these are both going to be you don't care about what's inside of them and both of these are going to return for a force is that it i was sure we had something else that could fail along the way it's not okay okay so that's looking kind of nice [Music] and let's i'm just adding the dock back in and let's look at the network [Music] and it returned a 400 error which is exactly what we wanted raw so much overhead for so little value okay now if i remember correctly figuring out a shot 256 implementation that works correctly in the context of how this was a pain the last time i tried to do it web crypto may be the correct solution where i'm able to just provide i can call out to this i don't want to do that so i'm going to do the thing that all good programmers do and i'm going to call it quits on the head anyway we got to a point of at least having a web application that is it's written in rust it's wasm it's compiling it's receiving a request from the from javascript it's parsing it it's dispatching it's generating correct error error handling this is actually a pretty nice point to scott that uh at some point in the future i'll upload this video to youtube and i'll also put the code i would assume on github some somewhere if other people want to use this as a basis for doing some wasm work cool okay thanks everyone for joining uh i'll just wait if anyone had any questions anything they wanted me to cover in the code before i break i will wait another you know minute or so on the chat but let's close out a few of these tabs [Music] and let's go ahead and change now from here [Music] all right cool in that case thanks everyone have a good rest of the day have a good weekend since it is friday i'll talk to y'all [Music] later

Channel: Michael Snoyman

Views: 889

Keywords:

Id: 8YLfj-2UqR4

Length: 104min 47sec (6287 seconds)

Published: Fri Feb 05 2021