Mobile Devs Hate Servers. Expo Wants To Fix That.

apps love them or hate them they are a huge part of how we interface with the world mobile applications are how most people experience most websites and as such having good apps is super important whether or not you like react native it's important to recognize how much value it's brought the mobile development Community both by standardizing a set of tools that any developer can use to build great mobile apps and also by introducing a lot of important Concepts to mobile developers even if most mobile devs don't love what react native is doing they have to at least contend with the cool stuff happening and with such we end up with awesome things like code push Swift UI and so much more as of today react native is pushing a little bit harder than ever did before because starting now react native works on servers no I'm not talking about server components at least I'm not yet because first mobile devs need to get their feet wet in servers what do I mean well first I want to talk about the developer Spectrum I've talked about this in other videos before but there's a spectrum for developers technically you can go further in either direction where you have like infrastructure Hardware Engineers on one side and you have like designers and people in figma on the other but I've chosen to to shorten this to backend and front end so now the question is where do mobile devs go historically I used to think mobile devs fit right here and I was wrong I learned that I was wrong when I keynoted chain react which is a react native conference and I talked about how cool server components would be for mobile devs sadly when I started talking about servers most mobile devs kind of like broke out into a cold sweat because they hate servers so much that not only do they try to avoid using them they actually actively adopt Alternatives like Firebase I'd go as far as to say Firebase would not have been successful platform if it wasn't for mobile devs and their just general disdain towards servers as such I've slowly learned that mobile devs not only are they closer to front end they're actually past here and they work even further from the servers than most front-end devs do when I realized this it hurt me deeply because products like upload thing expect you to have a server because if you don't have a server the only way you can authenticate a user is if someone else's server has the right integration for what you need and I don't want to have to build based plugins sub based plugins and all these other UI things in our web app so that a user can upload a file safely with something like upload thing most developers building applications should have a server of some form where they can safely run code that connects to any of many sources any of many things so you can render the correct UI for the user safely sadly this has been incredibly difficult for mobile so much so that whole product categories have been formed around helping mobile devs avoid doing this I'm pretty familiar with this though because a lot of front end tools were in a similar place remember the era where everybody was trying to make automatic graphql endpoints for their databases remember Hur my favorite product hopefully you can detect the sarcasm there because I hated all of those tools I really hated the idea of drawing a hard line between back end and front end and telling people on either side hey you don't have to pay attention to what's on that other side don't worry we got you just pass some Json over the fence we're fine mobile devs put this line even further which is terrifying thankfully in the web we learned our lesson quickly and with tools like nextjs even Gatsby we realized we could do a little bit of backend to make our front ends better as of today a lot of those same things can be done in mobile apps too specifically react native apps using the newest version of Expo what the hell am I talking about why are Mobile devs going to be doing backend let's take a look Expo router V3 is here full stack react for iOS Android and web this is the piece we're here to focus on API routes and no this isn't just a thing for web I know it's easy to assume that but we're here to talk about API routes although I will say it's hard to not talk about the Tailwind support because Expo hired the person who was building native wind and they got Tailwind working in Expo directly which is super super cool so if you want to hear me talk about Tailwind on mobile let me know in the comments Expo router V3 API routes bundle splitting speed improvements and more welcome to the Expo router V3 our most powerful release yet today we're introducing Beta Support for the newest Expo platform servers this is such a bold statement I don't think you all understand telling mobile devs that their tooling is now prepared to handle servers is a huge deal and yes this is setting up a future where server comp component going to happen but I want to be very clear once again this is not server components this is API routes where you can build a server endpoint for your app and for your website let's take a look this syntax might look somewhat familiar it's similar to the file-based routing you have it's something like next but instead of a route. TS it's api. TS and it's Plus api. Ts so you know this is for an API endpoint and here you can import Expo request response as far as I know you can also use browser standards which is cool but the important piece here is that in your code collocated with your mobile code you can do things that are on the back end so you can safely connect to a database you can safely handle authentication you can safely do all sorts of things you might have needed to spin up a backend for before just writing one file in your codebase aore already said in chat trpc yes this makes supporting trpc in an expo app trivial super super cool stuff I've been waiting for this for a while because having server support in your application is necessary to do a lot of important things and now you can just export a get export a post and you're done really really cool stuff and as they say here it's the first step towards making Expo router a full stack react framework but this is backend code so where's the backend where's this running how does this even work no better way to see how this works than to try it right first we need to create an expo app I'm using the DHT which I believe is for the typescript template but it also should include Expo router oh oh it's for me to make decisions cool dope Expo backend test cool and now we have the main entry point we have bunch more Expo packages importantly though we have the Expo router the Expo router is an interesting thing because it kind of walks the line between a router and a framework where next is a framework that is a router built in expo's kind of a router with a framework built in it does really cool stuff and probably deserves a video of its own but the focus here is not all the cool stuff you can do with the router it's specifically the ability to do this API stuff so let's do it the way I would we'll make our API folder inside of the app and here I will make test.ts the catch here is for the explorator to know this for an API you put plus API at the end I don't love that syntax I really like it's felt kit that you put the Plus in the front because it moves all of the things that affect routing to the top just due to alphabetical order sorting in your editor which is really nice to see oh these are the things that are routes everything else isn't part of that I like the syntax a lot I wish more things stole it cuz it's really good but I do also generally like that you can have a custom name that represents things while also specifying that it's an API that I want to do test and then inside of there have an API so like in next the way you would do this is you'd have test the folder and then here you'd have route. TS which I would say is the wor of the conventions this is a better hybrid feels a little remixy overall not bad what we want to do is process a request and return a response I'm actually just going to follow along with their docs nice and simple one important piece is we have to specify in the app Json that there is a server output so we'll do that by going into the app Json and under web we're going to change that to Output server cool now that's been changed we can host this theoretically anywhere that supports a node server such as netlify Cloud flare and versel so let's do it it works in any winter CG compliant environment which is really cool if you're not familiar with winter CG it's the group of people making a standard for JavaScript runtimes so you can have code that handles request response and it will work in Cloud Flare's Edge it'll work in Doo and it'll work in node it's a really cool project and a really cool part of like the w3c standards to try and make all of these things standard let's go back to actually showing how it works though so we have our api. TS just going to copy paste this code because it's easy and again they're using Expo request response but this should be able to be any web standard we'll be sure to test that momentarily but now we have this end point and when we get it'll return with Json with key hello Value World we can run it with npx Expo cool normally you'd open up the web view iOS simulator Android simulator or scan the QR code and run it on your phone so you can actually see things I demo that before it's really cool stuff we don't care about any of that we just want to hit back end so let's give it a shot no easier way than curl right Local Host 881 is the port it defaulted to interesting we can go with that API test and look at that we get a response from our server in Expo so since since we put this in API test the URL will be/ API test and when I curl this we immediately get the response hello world super cool I want to delete all the Expo code now there is no Expo specific code here look at that it still works ready for something really fun we're going to make a new project real quick fex create next app latest project name API demo enter a bunch cool here is a random nextjs project you can tell because it has way too much Tailwind in the initial example let's make an API folder let's make a file named test again/ route. TS because NEX has different opinions about how these things should be named but I am pasting that exact code if we look here that is the exact same code between the Expo backend and the next API and if I uh Bun Run Dev so now if I curl Local Host 3000 which is where the next app is same exact response the specific thing I'm trying to Showcase here is that this is web standard code if you learn how to do this in Expo you how to do it in next you know to do it in most other things really really nice you can write this code once learn these patterns once and reuse them other places it also means you can write a bunch of Route processors that export the get the post and all these things and it will just work in Expo now and it will just work in next to the reason this is important is you look at how upload thing works if you're already familiar upload thing is a project that my company ping built in order to make you easier to manage file uploads in your web def projects we say next here well this Expo change we're going to have to change our branding because finally you can include our existing bindings in your Expo app and it should just work just to take a look at how you handle next right now we can scroll to the upload thing route TOS you import our create route Handler function you import your file router which is backend code that defines what users can do and now you export const get post by calling our function and we just return a get function and a post function and as long as these are using web standard request response which they are now this binding or exactly as is in both next and in react native that is so so cool and we finally have a happy path to supporting good mobile experiences for our react native developers that want to use upload thing I am hyped on this it is so cool that you can finally in your Expo apps have well integrated backend stuff someone in chat just asked a really good question but where is the server very important question when you use next you're probably going to post on verell there's a lot of other cool places you can upload your next app to and run it you can run it in a container you can run it on netlify or cloud or these other serverless places and as you might be sensing you do the same exact thing here so let's quickly deploy this deployment for maybe familiar with the basics of npx Expo export so if you just want to use express and like run the Expo app within Express you can do that you can also again use web standards let's take a look at the versel one it's experimental and subject to Breaking changes cool we're going to do it create a server entry file all requests will be delegated through this middleware the exact file location is important API index.js the reason this has to be here I'll explain moment enely I think yall will understand once I do though so now we're going to grab this verell Json versell js's a cool way to configure Frameworks that don't have a bunch of built-in support like next theoretically you can use the versel Json to support basically anything in fact I started using versell as a v user because I wanted to host endpoints a cool thing many people don't know about forell is on any project you can make this API directory and you can just put things in it like I could put hello Dogo and I can write go code in here and then when I go to/ Aiello once this is deployed it will run this go code serverless in send a response there's a bunch of languages that forell supports in the API directory that have nothing to do with next whatsoever and I feel like this gets missed a lot because people just think of verell as the next thing but you can support a bunch of different things with it here's the dock with all of the official and unofficial run times here's all the things they officially support you can run node which is the more traditional js on the server as well as Edge which is the cloud flare JavaScript that tends to run a bit faster because it can skip a lot of the cold start stuff but also is limited with what it does and doesn't support so a lot of old packages won't work there we also have go python Ruby and a bunch of community ones like bash Dino PHP rust see some other cool stuff too I know that for example GMO actually has done some cool demos with the PHP binding very easy way to deploy basically any language serverless without thinking about it we're not here for any language we're here for JavaScript so as I showed you here we're creating this Handler it binds to the disc server folder which gets built when we build and this allows for this index.js endpoint that the versel Json points 2 functions API index.js here's the runtime it uses here's the files to include and now that we have that done I will continue following the instructions to make sure I do it the way they want me to now I have to add the versel build script which they showed that as a code snippit but it's relatively simple to add package scripts versel build cool I already have the versel CLI so for cell deploy npx for cell deploy obviously this was on GitHub I could have just clicked the button this is easier my personal not an existing project XO back and test code is here we'll let it do its thing theoretically once this builds it should all just work and to those watching the video don't think these links will still work so I'll be sure to take this app down before you try here's all the stuff I have in my personal versell right now and we see we have this new Expo backend test we'll take a look see how this deployment is going still building expect this build to take a decent bit because just like the size of all of the Expo packages is massive well need a 30 seconds to get all the packages installed just cuz it's so much stuff which I honestly think is fair when again you consider everything that this build system is doing and that it can then cach the node module so doesn't have to do this for future builds exporting one API route this is the important bit the API route cuz that's creating that new endpoint for us oh it even created static routes too cuz again they're trying to make Expo more a full stack framework even for web so this also created endpoints and web pages that you can go to it's pretty cool playing the outputs about 2 minutes for the first time building not bad at all let's take a look here is again the react native code running here so you have a whole web app that works still using Expo same code for the web and the mobile app really dope that's what we're here to talk about we're here to talk about the curl so let's curl SL API test look at that we have a real endpoint in an expo app that's deployed on versell that returns us some Json was that more steps than I would have liked kind of but once you understand all of those steps it makes a ton of sense top to bottom we have the versel build which is a custom build command that versell can run to make the web export and deploy that versell looks to this API folder to see if it has things it can use to make new endpoints so we created an index.js file so we don't have to build it by making this. JS we get to skip a bunch of build steps and other things and just write a simple file this was typescript we'd have to compile this which would be annoying we also have the versel Json which specifies to versell hey by the way here's where the output directory is here are the functions that we defined and here is what runtime we need for these to run properly oh also if there are any routes that we don't have a page for you should redirect them to API index.js instead I think this is totally reasonable and again the result is dope now in my Expo mobile app I can export an endpoint and a server that both the web and mobile apps can use and I can export a web app like an actual website that people can go to as well really really nice stuff I am hyped the team has worked as hard as they have to make this all possible the results dope I genuinely hyped that mobile devs finally start using servers in their application development what do you think about all this are you excited to start integrating backend more directly with your mobile apps do you even build mobile apps I'd love to hear more about your experiences with apis backends and mobile and how these things all come together because we want to get this right working really hard to make upload thing the best possible experience for both mobile and web devs looking to upload files and what expo's built here are the necessary pieces for us to do just that and again we haven't even started talking about server components so I'm really excited for a future where all of these things can come together anyways that's all I have to say about Expo router 3 and all the cool stuff the Expo team's doing we love your thoughts let me know in the comments see you guys in the next one peace NS

Channel: Theo - t3․gg

Views: 69,131

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: 2P0q1EdH_oQ

Length: 16min 5sec (965 seconds)

Published: Mon Jan 29 2024