RedwoodJS: The Full-Stack React App Framework – Tom Preston-Werner, React Summit Remote Edition 2021

[Music] [Music] hmm [Music] i know what you're thinking i want to make a web app somebody need react i'm gonna need prisma on the back end to talk to a database i'm gonna need apollo to talk from the front end to the back end i'm gonna need jest so i can write some tests i'm gonna need storybooks so i can design code and test my components in isolation i'm going to need webpack to glue this whole thing together and i'm going to need babel so i can compile transpile es6 down to es5 that's the web app but i'm gonna need to figure out how to deploy this thing maybe it could go to netlify they're really into jam stack maybe it could go to versel they've got a cool triangle logo what about render maybe then i could use containers and get long running requests and graphql subscriptions or maybe i need the full power of aws i haven't decided yet in any case i'm going to need some kind of authentication so i could use auth0 for that i'm not going to write my own got to go further than that though i also need authorization so i'm going to need some role-based access controls and what about logging i'm going to need really good logging send that to the provider of my choice i'm going to have to code the split this thing so the browser doesn't get too much code at any one time i'm going to need og tags so this thing will unfurl on twitter and facebook gotta have pre-rendering probably in order to do that and i'm gonna need excel accessibility right out of the box so this thing works in screen readers all right let's do this thing [Music] that's not really how it works is it it's more like this all right google my old friend create react app okay there you are what's this there we go npx create react app all right oh what am i going to call this thing um [Music] knox that works all right we'll let that do its thing for a while let's learn how to use prisma okay prisma here we go nope not that one nope not that one either aha found you yep here we go prisma docs quickstart all right in this page you will learn how to send queries to uh okay great all right this is gonna take the rest of my life but despair not because i'm here today to tell you about redwood js the full stack react app framework of your dreams now i know what you're wondering who's this bozo telling me what to do well i'm tom preston werner you can find me online at mojambo on twitter and github in the past i've created such companies as github and chatterbug best place to learn a foreign language i am also very active in open source i created jekyll i wrote the semver the semantic versioning specification toml the configuration language used by a variety of packages and gravatar the avatars that follow you around now getting back to this screen remember all these technologies these technologies are awesome but you don't necessarily want to think about all of them in fact apollo is great but really when i write an application i want to worry about graphql and not really the intricacies of apollo and i also really don't want to worry about webpack or babel at all in fact i want to focus my attention on writing javascript or typescript that's what i'm here for i'm a programmer let me write code that's what i do and so a redwood application is going to be broken down into two sides very simple a very simple model to think about on the website you have your react application this is where you think about your testing with jest and your storybook those happen locally but conceptually they really are part of the website of this and then on the api side you've got an uh implementation of a graphql api that uses prisma and a bunch of javascript or typescript to create your services your business logic that is going to talk to your database and do what you need it to do in between you've got graphql that talks back and forth and graphql is how you make queries and also how you specify the queries and mutations that are going to happen but enough chit chat let's see some code i have here on the right open getup.com redwood.js example2do this is a simple to do application written in redwood that i thought i'd run you through a few things and show off how redwood works how it thinks about the world so i've cloned this down to my local machine i've run yarn you can see the instructions here and i've initialized the database so it's all set up ready to go so the first thing that i'm going to do is run yarn redwood dev to spin up the web server this is going to spin up both sides that i talked about before both the website and the api side the front and the back end link them together and fire up a new browser window with my to-do list so i'll show you how it works i can say i need to order some milk and some cheese and some eggs and i can toggle these things on and off this is talking to the back end via graphql you can see here in the logs the posts to the graphql backend so how does that work well in the editor over here you'll see the web folder and the api folder this is a mono repo structure so these are each separate packages within a single git repository so let's start where everything starts which is with the routes so the routes file here you can see that we have a router and within it we have a route for the home page and a route for a not found page this is essentially the 404 so this is our home page and in redwood we have another uh directory for pages and it's very easy to find things very organized the directory structure so this is the home page this app is using styled components which you'll see here and it's just standard react so this should look very familiar if you know react so here we have a wrapper we have the title to-do list and then we have a to-do list cell now redwood has a really special concept called cells and cells are a way to declaratively do your graphql data fetching so let's go look at that to do list cell is in source components to do list cell so source components to-do list cell and here's the file and how this works is you simply export a a certain set of um variables from here constants including the query so you start with your graphql query you just type it out here as a graphql query or it could you could have a mutation in here as well which you can actually see here and then you have different states and you just export these states as components you have a loading state and a success state you can also define a failure state and an empty state right here i've just done a loading it very simply says loading and a success state and so what this does is really simplify and focus you on what you're building so in this instance when this query completes whatever the query name is the graphql query that you're doing in this case to do's that will be sent in as a variable as a parameter into the success uh component and then within that you can do your work so this is doing some optimistic updating which you don't have to worry about too much for apollo but uh right here you can see that it's just taking the to do's and mapping over them and creating to do items which represent each of these items here and uh and that's what cells are so really just just a simple way to think about your data fetching so you don't have to do a lot of conditional logic it really organizes the code around that now when you get to the back end to the graphql side let's see what that looks like so here's the query to do's i'm going to look in the api side here i'm going to look in source graphql and to do's now these we call services so you break up your redwood application into different services this app is very simple it only has one service this to do's service a larger application you might break it down into different services for the different responsibilities that your application has so here we see an sdl file that is defined in a javascript file and here's the sdl so if you've written graphql before then this should look very familiar this is straight out of the box standard sdl the schema definition language and here we're defining a to do object and queries and mutations and the nice thing is each service can have one of these files and they can all be separate and redwood will do the hard work of stitching them together and presenting them to the world so let's look for what we were talking about to do's is going to return a array of to do items which are defined here and when you're normally writing apollo you have to think about writing your resolvers and there's a specific way that you do that and they all end up in the same file and it can feel very messy it feels like a lot of boilerplate so we've eliminated all of that in redwood and said well let's just match things up by name and so if you come into the services directory and look at services to do's to do's js what you're going to see here is a constant to do's this is the same name as the graphql query being exported and redwood is smart enough to match that up and say this is the implementation this is the resolver for that graphql call and in it we're going to use prisma which we just import here db represents the prisma database and now we can do any of our prisma calls on that in this case we're just doing a find many so a really fun way that we can explore that as you may be already used to is with a graphql playground and redwood of course ships with one of those and that's going to be at localhost 8911. and we can try this out so i already have loaded up this uh the same query that we find in to doula cells just the to do's query id body status and if we run that then we can see that we get back exactly what we expect milk cheese eggs and everything is as it should be and really that's all the code that it takes to do the front end to the back end so all right that's cool you say what about doing this from scratch having it all there right now is one thing but what if we want to do something from scratch well let's give that a try um i'm going to close all of these and i'm gonna switch over here and um what should we implement i think it would be fun to have a page that just showed me the count of two dues maybe maybe something else needs that for some reason it's a simple thing to implement so we have the ability to generate certain things in redwood so i'm going to run redwood sorry yarn redwood generate or just g for short page and i'm going to call it the count page i'm going to run that and what i'm going to see here now in my routes file is a new route has been generated slash count takes that from what i've typed in here and it has created an account page for me so let's go look at that count page it's also creating stories file for storybook this is integrated out of the box and a test this is the just test so we're beautifully integrating all of these different elements right now we can go look at this in slash count and here we go this is just the the generated page this is what it looks like if we make any changes in here then they will be immediately reflected over on the website so you can you can go back and forth very very simply and do this okay very cool now we need to get some data from the back end so let's switch over to the api side now and we're going to modify our sdl file to create a new graphql query and we're going to call it to do's count and it's going to return an integer always an integer i have a redwood extension installed in vs code here and it does some nice things so here you'll see that it can tell me that this service is actually not implemented i don't have an implementation for this specific query um and so this is just a very nice way because we do some things automatically for you we want to also help you see when some of those automatic things aren't going to work properly so this isn't implemented well let's go implement it that's in services to do's js we're going to create something called to do's count we'll do that right here export const to do's count that is going to be a function and it's going to just be db.todo.com okay well let's see if that worked we should be able to run it and see if it worked and here we go all right there we go see i added two lines of code and i created all of my graphql infrastructure that's necessary in order to get the back end working so there we go we have a new graphql query defined ready to return some data and be consumed by the front end on this count page well we're going to need a cell we're doing data fetching so we need a cell so let's create a cell yarn redwood generate cell to do's count we'll let that run and we're going to find this in components to do is count cell right here now it's generated this and it's guessed what i'm going to write as a graphql query but it's a little bit wrong let's make it correct it's just going to be two do's count like that the loading state is fine the empty state this is what i was talking about before these are all predefined we just change these as we like an error failure state and the success state is uh just gonna by default just do a json stringify on whatever comes out of here which is just going to be an integer and that's fine for now we like that and now we're going to use this in the count page so let's see in here why don't we say um to do's count is going to be the to do's count cell and then we need to import this we're not using that anymore so import to do's count cell from source components to do's count cell and if we come back here before we save this then there we go and that's really that's really it we did all of that in a couple of minutes i could if i wasn't talking so much i could have done that a lot faster even but that's front to back all the way on the react side to the graphql all the way to the backside prisma to the database the whole thing with just a few lines of code a few generator commands and that's really how easy redwood tries to make everything that you do now i mentioned before that we have storybook integration as well so i'd like to show that off real quick in order to get the server the storybook server running i'm going to run yarn redwood storybook and that'll take a few seconds to spin up and when it's done it's going to launch this page and you'll see here we have the storybook stories for the things that i've generated uh we have the account page which is generating and check this out it actually has some data for the account that's coming back but that's interesting 42 where did that come from why does it say id there that's a little bit weird well the reason that that's happening is that it's pulling it from here so the count page is that whole page is pulling from this count cell and one of the things that we do for you if you were paying attention over here when we created this and i came into this directory is you'll see this mock file and this mock file is going to make it really easy for you to see your cells in storybook because mocking out your data fetching in storybook is one of the real challenges to getting storybook working really nicely with your application again redwood tries to make it really easy for you and so we have the concept of mocking your data fetching and in this case we've just said we think that to do's count is going to return an object with an id you might remember that that was what we guessed you were going to do but it's very easy to come in here and just say oh it's actually just returning a number and save that and now you'll see that the success state of this uh updates and indeed the the page itself will update so all of these components can use these mocks the cells and that means that when you have a page or you have a cell or component that has a cell in it anytime you have one of those if you use it in your storybook it's cool it's just going to pull this mock data and it's going to include that so it's still very easy to visualize your components and work with them without the hassle of trying to think about how you're going to get that data mocked out in there and again you can very easily now work on the loading states of these things so to do's count cell has these various states i might want my loading state to just say just wait i can save that and now instead of trying to be in my app and and clicking refresh and being like oh what did it what does it look right oh i see it it's there for like a you know a 100 milliseconds or something even less that's kind of a pain and i can go to my inspector and i can make my page really slow and that's annoying but that's why we have storybook now i can come in here and i can stare at it for as long as i want and i can i can just i can make it work or the empty state what does that look like what happens when i get an error if i want to make an error happen in my application i have to go into my implementation probably and add some kind of a syntax error so that it's going to throw some kind of error no don't screw around with that that's why we have storybook and redwood is all about making the entire thing the entire application development process end to end as smooth as it can possibly be with as little amount of work as little amount of boilerplate as we can possibly make it for you we have spent so many hours reducing boilerplate and doing integrations of these products integrating just integrating storybook removing webpack you'll notice that in here you really don't see webpack at all you don't see babel at all of course we have some config files for you in case you need to dig into them but you never have to touch them really if you're just doing normal things this is not a part of your job anymore let the framework do the heavy lifting for you so that you can focus on your business logic well what else can redwood do for you well i'd like to show you something that we released recently that is pre-render the ability to take any of your pages and specify that they be built at build time that they'd be rendered at build time and then statically shipped so how's that gonna work well let's say you have a splash page some kind of a marketing page that really doesn't have a lot of dynamic content and you just want to build it uh at uh render it at build time and make it available so well let's do that let's create a page that is really just static so i can run redwood yarn redwood generate page i'll just call it splash and we'll get that splash page and let's go to it here so that we can see it and let's find it web source pages splash page and in here we're going to make this uh we're going to make this pretty simple let's just go with this content um but what i want to show you is how the hydration is going to work when we do this and how easy we make that as well so let's uh let's make this a button instead and give it an on click that is just going to be a function that runs an alert hi and we'll just call that splash because that's what it's already called and we'll see now that um we've got an errant get rid of that guy okay so now when i press this it says hi okay that's expected this is all dynamic if you turn javascript off in this mode this is the fully dynamic single page application i can turn it off i have a little javascript turn off button right here i'm going to click it and you'll see no more page obviously because react is mounting the entire thing all the html comes from javascript and react and that's not always what we want for seo reasons for performance reasons there are a lot of reasons why we might want to get this stuff generated at build time let me turn it back on and you'll see it so how do you do that in redwood how do i tell redwood to take this page and pre-render it at build time well let me show you you might expect that it's easy and you'll be right in fact it's one word easy all i do is come to my routes file i find the route that i want to pre-render and i just add pre-render onto it and that's it i just did i i'm done that's the only thing that i need to do can that really be true can it be that easy well let's let's find out so i have this specified now and what that means is during the build it's going to pay attention to that and build a static file for that and so i'm going to show you how to run a build and then you can inspect it and in in redwood you just run red yarn redwood build and that's going to do all the steps necessary to actually deploy this this is really what happens during the deploy process it goes through the website it goes through the api side and then it has a pre-rendering step and during the pre-rendering step it's going to look for any routes that has been specified to be pre-rendered and it's going to render them so let's look at the web disk directory that's where the the website of this ends up and you can see that there's the index there's the favicon there's the normal stuff there's static files this is where the javascript lives this is where the css lives it's all chunked up webpack right we did all that for you all the code splitting and everything happens via that mechanism and then we have a splash.html page and we can look at that and we can see that this is the text that we see here my default route is etc and here's the link to me with the button splash but look at this button splash button right there is no javascript in this page because it's static there's going to be no javascript the expectation is that there is no javascript at this point but what we want to be able to do is hydrate that page after the html is loaded and and you have the content on your browser and then layer on top of it using reacts hydration the functionality so let's see if we can make that work well i can show you how this works by going into the web dist directory and i'm just going to run serve which is just web server it's going to spin that up it's going to copy the url to my clipboard and it's going to send me into my app and unsurprisingly the home page doesn't work because it is a a full app and there's no back end and the error here is i can't find my graphql okay that we expect that but what if we go to the splash page ah we have our content indeed we do have our content and now i want to show you that it's real by turning javascript off so i just did that javascript is currently off so when i press this button nothing happens because there is no javascript on this page but what if i turn javascript back on you'll see that it reloaded i'll prove it reloaded and now boom it's still dynamic because it loaded the html and then it loaded uh react and layered that on and that's that's a beautiful that's a beautiful thing this is how you can get a statically generated pre-rendered page that can still be dynamic but you get all the benefits of seo because this is what google's getting right here google's gonna see this so if you have seo concerns on marketing pages then you want to pre-render that it's one word one word in your ads file remember this ridiculous screen that i assembled before redwood has a solution for every single one of these things all of the stuff in the application uh authentication providers from auth xero to netlify to many others a bunch of deployed targets including netlify and vercell and render and the ability to deploy your api side to aws we have so much more in the works to make your life easy the whole point of redwood is that we do the beautiful integration for you so that you can focus on your product and what makes your business valuable if you want some stickers you can get those on the website we'll ship them to you free anywhere in the world i'm really happy you joined me today and i hope you come and join our community and find this stuff really useful completely open source mit licensed free for you you to use we do this to try to make your life easier thanks for watching [Music] you

Channel: React Conferences by GitNation

Views: 1,292

Rating: 5 out of 5

Keywords: react, react summit, react summit remote edition, gitnation, react event, react conference, JavaScript, react.js, reactjs, redwoodjs, redwood.js, redwood, Tom Preston-Werner

Id: J21zOUhHjl4

Length: 28min 49sec (1729 seconds)

Published: Wed May 26 2021