Complete Intro to Blitz.js (Beta Preview, Jan 31, 2021)

awesome hello everyone uh i'm so excited to be here and it's awesome that you already had an intro to the pipe function because they will make an appearance later in this presentation so very nice intro all right so i was building full stack react apps for a number of years and i happily put up with the complexity and struggle required to do so and i did that because i loved building uis with react more than any other way but the honeymoon ended and i became increasingly frustrated with rest apis graphql apis configuration setup and just everything it takes to make a full stack app these days and anything that got in the way of me building features slowly depleted my morale i really wanted to love full stack web development again i wanted to be extremely productive again i wanted to focus on building features instead of messing around with all the other junk so i decided enough was enough and i set out to build the best possible developer experience for building full stack react apps so there were two things that i had to have to achieve the the dream that i had for this user experience number one it had to be monolithic and that means that it's um all one thing so there's only one thing to reason about when you're developing your application and only one thing to reason about when you're deploying your application and uh so everything's all in the same code base um and it's just it's all it's just one thing so it's much more simpler than like a front and a back end and having to wire them together so secondly is no api now i got into web development with ruby on rails and of course ruby on rails is server-side rendered there's no api for most of the views and it's so simple and productive and efficient because you don't have this api layer that is like getting in your way all the time this api layer is the biggest source of complexity and just frustration for building react apps and really any type of single page app and so i wanted to get rid of that and get back to that that simple productivity that ruby on rails provided but also had a hard requirement on using react so i thought well i mean we can do server-side rendering with react and maybe that's just what we should do is just build a nice framework around that and that'll be the next ruby on rails um in fact that's when i initially announced blitz 11 months ago almost exactly i that's what the the first prototype was it was just server-side rendered and it had setups for like controllers and things similar to rails but i wasn't happy with it because it it just like you miss out on the whole dynamic part of react apps where you're you have like loading stuff on the client with apis and so forth and so i i i just wasn't happy and so one day i was laying in thailand thinking about this and i asked myself what would this look like if it was easy and so i thought well i i guess it would be you would write a function that runs on the server that does your server side business logic talking to databases etc and you could import that function directly into your react component and just use it without messing with apis or anything so i was like wow that that would be pretty awesome that could be a real game changer if it's possible and turns out it is so let's get into blitz the nitty-gritty and um you know how it makes you productive what it is so the first thing is that throughout that entire time of just frustration with other stuff one thing constantly uh showing through the mess and that is next.js so blitz is built on top of nextgs next is a fantastic super solid foundation for building full stack react apps it's a hybrid framework which means that you can do pretty much anything that you can dream up possibly all within next so you have react of course you have server side rendered react you can have um static uh page or static pages like create react dot for example thirdly you can have static site generation like gatsby and then you can also have api endpoints so it's like everything you need for will stack app um but next js itself is very bare bones right and so you have to build everything around it and blitz is that thing that brings all the other integrations um and conventions and everything that you need for building next js apps so i'll go through our mono or foundational principles i'm not going to go into each one i'll just just highlight them so the first one is full stack and monolithic which i pretty much already explained api not required convention over configuration loose opinions so loose opinions in contrast of strong opinions blintz is a lot more has looser opinions than ruby on rails for example ruby on rails has a lot of opinions that if you try to go outside of that it's quite painful like if you don't want to use active record in rails you're it's kind of wild west right and so blitz is much more flexible and less prescriptive in that manner number five easy to start and easy to scale so you have to have you know the beginning has to be easy to get started but then that thing actually needs to last and perform for your business six numbers is stability and especially in the job fast-paced uh world of javascript uh so one thing we're going to do for this is once we get to 1.0 we're going to have a very uh stable and predictable release cycle inspired by ember i'm not sure on the details yet but ember how how the ember release cycle works is every six weeks is a new stable release and the next stable release is in beta for six weeks and so there's time to prove out the bugs and then there's also a long-term lts release long-term stability release released every six months and so we're going to we're going to do something similar to that all right and lastly community over code we really value community and we care about um community over perfect code or whatever it's about the people if we don't have people then then what are we even doing okay so the the first thing that you really kind of notice with blitz is that it does all the menial setup for you okay so you when you run out there's a command blitz new from the cli and it'll generate a new app for you and it'll generate a nice folder structure so you don't have to go to stack overflow and say how do i organize my files it'll already give you a starting point of course you can totally rearrange it if you want but it gives you a nice starting point um eslint is set up and configured for you and in fact um just just this week we added a eslint um back or a blitz eslant preset okay so now there's there's just one line in your eslant config um i'm using the blitz preset and it's based on the create react app eslint and includes everything you need for typescript and so forth sec thirdly is prettier code formatting is set up and configured for you a husky for get hooks so that whenever you run git commit it'll automatically let the code that you're committing and run prettier on it just to set up and we also have a blitz preset for jess so it's a really nice integration we include all the there's like 10 packages that you need really to work with jobs or typescript and so forth and all of those are included for you automatically by blitz so you're set up for your test and you have database setup so by default right now you have a sqlite database we'll be adding a a prompt in the future that allows you to toggle between sqlite and postgres um and then possibly others in the future but you're already set up out of the box ready to go to start building your application and then forms so when you're creating a new app we prompt you to choose between react final form react hook form and formic and you can choose one of those and it'll scaffold out a nice form wrapper for you that takes care of validation and typescript types and so forth and then also a wrapper for your input field that's ready for you to style or customize as you see fit all right now a big one is new apps have user sign up login and logout already set up for you so as soon as you generate a new app you can you can go to the web page and enter email password and log in and so this is one of my favorite features because i i well number one it's just a pain to deal with authentication right um and secondly is the default if you have to do it yourself you you tend to lean towards off the xero or some third-party service because well it's gonna be easy right because they do it for you well it turns out it's not so easy when you actually try to do it um so like for example author zero is difficult for using local on when you're running locally because you have to deal with the different urls it's just it's a mess right um so we include uh blitz has a built-in session management system custom built based on a thing called super tokens um and so it's it's it's awesome all right and then next next we have a reset password flow already in your app and so that's already already done for you and we have just tests for that so it's fully tested and that that most of that code is generated in your app so you can easily customize it if you need all right now let's talk about the um another key part so a prisma is a next generation orm for node and typescript and of course it works with javascript playing javascript as well um prisma 2 this is specifically prisma 2. prisma 1 had a graphql and some other stuff prisma 2 is is a kind of stark departure from prism 101 so forget everything you know about prisma one if you know anything about it and prisma 2 is the new prisma it is an orm it has nothing to do with graphql but it is a really awesome interface for your database it provides a fully type safe client for your database for reading and writing to data and then secondly it has declarative migrations so it is basically a full replacement for active record in rails or i think it's eloquent in laravel so here is what the prisma schema file looks like and so you have you're defining your database in this case is postgres you have a user model you can see all your fields the type whether it's an end date time stream whether it's required or not you can set a default um relations rules etc and so this is you just put in here whatever you want your database to look like and run and then run prisma migrate and it will migrate uh the database or it'll migrate the database for you and it'll generate sql files that you can customize uh if you need so you have the full power of sql at your fingertips and then they will also be adding some some features for nicer data migrations um using typescript so i'm looking forward to that all right now the other oh okay one more thing before i before i go in here is that prisma comes and blitz by default because we think it's the best user experience for most people but it's not required blitz is database agnostic so you can use any other database or orm or anything we have an example in the blitz repo using fauna which does not use prisma hopefully prisma will support fauna someday you could use typo rm or anything else like that so keep that in mind all right so the xero api data later now this is like the pinnacle of the blitz features this is the single biggest thing to know about blitz and what makes it different than anything else that has ever existed ever before as far as i know all right we abstract the api into a compile step okay so you there is an http api there's an api that connects your front end to your backend but as a developer you don't have to think about it you don't have to build it you don't have to fetch from it all that is handled for you automatically unless you need to opt in to you know do it manually yourself which you can but for most most things it's done automatically all right so this allows you to import server code directly into your front end okay it sounds crazy um but what happens is that compile time that is that we compile that thing out and then so your server code never ends up in your front end but we swap in our api implementation so what you're going to write mostly in blitz for your server code is blitz queries and mutations these are not graphql there's no graphql in blitz but we use the same nomenclature of queries and mutations for reading and writing data now these queries and mutations are just regular asynchronous javascript functions okay so you can do anything that you can do in node.js you can send emails talk to third-party apis talk to database etc these functions always run on the server and of course you can add an api um if you need so um one thing i might as well go and talk about it now is how to use mobile apps with blitz all right so if you don't have a graphql api um how are you going to use a mobile app well you could add a graphql api just for your mobile app um some like a lot of times the requirements you have for mobile apps are different than your web app and so maybe it makes sense and some people are doing that as just add it at a graphql api endpoint to your blitz app and then use that with your mobile totally fine or you can reuse the the auto-generated api from blitz and you can use the same authentication system and so forth we don't have any documentation up that for that yet but we will get there and then um the longer term goal is to generate there's two things first thing is generate an api client so that you just have a library that you just run like blitz um sdk generate sdk or something and then you can just import that code in your react native app call it just like similar to um similar to how you would in the in the blitz um in the react components in the web you would do that in the mobile app okay so that's a good start and then secondly is just a fully integrated first class experience where you import your queries and mutations directly into your react native app that's in the same repo and it would just all magically work so i'm pretty sure i'm gonna get that to work that's gonna be one of my big focuses for this year after 1.0 is is a really nice mobile app integration okay so how does this work well we literally compile a blitz app into a next.js app so one of the early contributors rudy yardley built a custom compiler that that takes all the code and then transforms it into a valid next.js app so we take your queries or mutations transform them and turn them into api endpoints index.js and you can see that all of that generated code in the dot blitz folder in your repo after you run blitz build so here's a sort of an architecture diagram of how this kind of looks so on the left is a server-side rendered page and you can see that it has code that runs on the server and on the client and then on the right side we have a client-side rendered page that that only runs on the client but it loads the data from the server through the auto generated api so this gray box is what blitz takes care of and you don't have to know about it so that the dotted lines represents your function import you import the get listing query into your page or update listing mutation into your page and then it'll automatically use that generated api endpoint and then this also demonstrates that the same query you can import into your server side rendered page and you would call that thing directly um in the in the server code and so in this case there would not be an api call but it would just be you would be talking directly to the database through your get listing function okay so now let's go dig into what some actual code looks like okay so this is what it looks like when you generate a new app so you run blitz new frontman in this case and you can see it it asks you for a form library i have picked react final form and then this is all the files that it generates for you so you can see we have a nice setup for environment variables your eslint config so forth we have all of the auth code so um login sign up change password forgot password reset password your pages for that and you have your form default form components some default pages like index underscore app underscore document 404 page and then blitzconfig.js which is same as nextconfig.js same format database file which has a schema your prisma migrations and a mailer for forgot password mailer and some some test stuff okay so it sets all that up for you and you can go into that directory and now we'll go into vs code and take a look here so this is your package json we have a number of nice scripts here for start build lent test etc some config items set up for you and you can see there's a number of dependencies here not too many because there's blitz includes a lot of things that you need for eslint and just but that's all extracted away nicely for you so yeah um yeah looking good okay so you at the top level folder here you have an app folder which is where most of your app code is going to go database code which has things like your prisma schema which i already showed you an example of before so by default it has a user model a session model for your login sessions a token model for uh reset password tokens and this can also be used for like email confirmation and anything of that sort we have an integrations folder that's a good place to put integrations with third parties like uh century mailchimp stripe all that sort of stuff can live in there we have a mailers folder to put in type of things for sending email public for static assets um and then a test folder for for test utilities so you can see just there's just config very simple works great we have a babel config simple works great um eslin config simple works great and etc so let's go into the app folder and you can see we have um there's an api folder in here so this is where you put any api endpoints you have a pages folder in here to where you put any pages now you'll notice that this is a little different than xjs nextgs requires your pages to be in the top level or inside a source directory but in blitz you can have a pages directory in nested inside app and you can actually have pages multiple pages folders so for example inside auth we have another pages folder and all of these pages folder folders are merged together at build time but it allows you to organize pages by domain so especially as you grow your team and you have different teams focused on different areas then you can just put those pages in that area and so they're everything's all it's kind of self-contained in the same area so like for example op is all in here so if you want to delete auth you can just delete this folder and it takes all the auth pages with it so it's really nice um and then users so this is where um any type of model so if you have users that would go in here projects tasks whatever the main models they would all go inside here and then inside core is where you have general app-wide concerns like components hooks layout layouts etc okay so let's just start this go back to my terminal here and run blitz start and blitz s is a shortcut for blitz start i like shortcuts so all of our cli commands has a shortcut for running them okay so now i'm going to open this up all right so we have this nice getting started page and you can see that we can go ahead and sign up so and we're signed up you can see we have a user id one user role all right you can we can log out log back in and oops you can see we have error validations already in here for you um forgot password so you can see that that all works too okay so um i should note that what i'm showing you right now is the blitz canary version okay so there um bliss canary 0.3 0.30.0 um has a bunch of changes compared to the the latest stable release which is 0.29.0 so if you're starting a new app today with blitz i would highly recommend using the blitz canary so you can install blitz at canary and it'll install the the canary version because it has a a bunch of changes that you don't i don't want you to have to make in like a week or two whenever it's a stable release so everything you've seen here is canary version just know that um so let's let's go back to our code for sign up and look at look at how this works so we are going to stop start in app auth mutations and we're going to go to the sign up mutation all right now here is your mutation file okay so it exports a javascript function and look at this there's a pipe function and this is this was uh just added recently so if i kind of separate this out a little bit you can see it's um let me just make it a little bit more re-readable there we go so um this exports a function and so we have um we have a pipe we azad schema so if we go over to validations you can say we have a a schema using zod is a really awesome um input validation library and so we're saying hey the email must be a string it must be a format email and then also the password which must be a minimum of 10 a maximum of 100 characters so go back over to signup mutation so this first pipe.zod takes in that schema and it's going to enforce that input data is correct it'll throw an error if not okay and then in here we have a just a synchro asynchronous function where the first parameter is the input data and the second parameter is the context okay so this this pipe is a little bit different in that the um it also has a second parameter which is um context provided by middleware and so the first thing we're going to do is hash the password we're going to call db.user.create pass in the data which is the email the password and give them a role of user okay so this is using prisma as you can see it's really nice simple to use and um after we do that we're going to call context dot session dot create and this is how you create a new user login session and you pass in the user id uh roles and any other data that you want like current organization um anything that is kind of critical to how you know the user identity and then we return that user okay now notice that this has a fully typed so this user uh with typescript here says hey that's gonna have an email an id a name and a role and that comes from prisma from that database schema okay so back over here where we have a user and so that that comes from there now you see it has tokens and sessions as relationships so we could if we wanted to we could say hey we also want um tokens tokens true okay and that will this turn result is now going to have a token's array which in this case you don't want to send tokens to your front end that would be that would be dumb but um that shows you the power of prisma and typescript so it's it's really sweet okay so now now that you've seen this mutation what happens on the server let's go over to our signup form and right here you can see that we import that thing that we were just looking at a sign up mutation we also import a used mutation hook from blitz and we set up this mutation by using the use mutation hook pass in that sign up signup mutation resolver and it gives us a function of call and then also has other other things in here like is error is loading stuff like that now this hook is provided by or is built on top of react query okay so react query is is another kind of core underlying component of blitz which is it's awesome if you used it you know it's awesome and it's just awesome all right so now we have this form thing um so this is using the provided form component form wrapper i should say let me just show you that quickly um so core components form okay so this is um imports react final form and look like this honestly is kind of it's kind of gross code um but all of this is necessary to make typescript really work nice with this form and every one of the form things that we have has code that similar looks dissimilar looks similar to this but it allows you to pass in a zod schema and it'll take the typescript types from that schema automatically and everything will be fully typed for you okay so it's it's really nice so try not to be intimidated um and it does validation through that zod schema um and then it renders the default kind of form thing um error message a button and then this is like where you could style the form as well okay so let's go back to that sign up page the form so you see we just pass in a submit text that'll give us a button with that name passing the schema which is that same signup schema that we use on the server to validate the input we use it here on the client for client side validations which is awesome i'm so excited about this because you just define the types one time and use it on both the client and the server and so you know it's it's always in sync all right and then our own submit hook we call this mutation function okay and you can see that the values here are fully typed correctly email and password and they're both a string and then the result of this is also going to be fully completed via typescript um ah come on show the type result dot okay there we go email id name role all right and that is all based on it comes all the way ultimately from the database schema all the way out here to your front end so it's really slick thank you prisma the fact that prisma was coming out was one of the big reasons i actually started to make blitz because i knew that like all right finally we have something that i would really that would fit good in a full stack framework okay now notice how we do um uh actually i'll come back to that later okay so we've done sign up flow all right let me quickly go through forgot password flow so this is forgot password mutation and you see that we have the same type of thing pipe.resolver we use pipe.zod and pass in a zod schema for forgot password which has an email and then we have this function that takes that the email which we know is is now valid and we're going to get the user from the database we're going to generate a token we're going to hash it set an expires date and then we're going to um create the tokens etc and so this is all all generated for you so that it's um easy to customize like there's there's this kind of trade-off between having all of this code abstracted away into blitz and then it's like kind of a mystery and then you're gonna it's not gonna have the option that you need and then we start adding a million options and then it's confusing and confusing confusing and hard and so uh for now we have the approach of generating this code into your app and so um you have full control over customizing anything you need because auth code if you have any type of sizeable business you're going to have all sorts of complex requirements and we don't want to get in the way of that all right now let's take a look at this this forgot password mailer here and so we we have the send email thing um we have this little abstraction actually it's not abstraction it's a pattern okay so forgot password mailer pass in the email to send the token and then send now let's go look at this and see what this is so go to mailers forgot password mailer and we export this um it's a little pattern so it takes and we set the url um that's gonna be for your server and we're gonna it's gonna send you a reset password page and then send the token so we set up the message from to subject html and then we have the inside the send function if it's production this is where you need to add your own production email integration using postmark or syn grid but in development we use preview email which is a dependency that automatically opens the email in your browser okay so it's in development it just opens a web page it's really easy to test your emails so this is very simple right now eventually we might add more libraries abstractions around it to improve it but it's a great starting point okay so now let's do something new so we're gonna go back to terminal killer server and we're going to um let's say we have a we're building this project this app and we want to add a projects model to it so like we're doing type of project management tool so we're going to call blitz generate all that's going to generate all the possible files that we have so you could do let's generate model let's generate queries mutations pages you can look up the docs but all will generate everything that we can do we're going to generate a project and we're going to give it a name that's a string okay so you can add in the field names here and we're going to call that and you can see it has added a project model to our schema it has automatically added the id created at updated at and then the the name field that we specified and then also generated all the pages for this so this is all the the crud operations create read update delete so it gives you you can list projects create a new one view one or edit one and then you also have the queries for get project get projects create project delete project and update project now what is on canary right now that what this code generates is non-production ready code it's very rough um and we haven't updated it in a while but we will be updating it soon with production ready code using zod schemas and all of that so keep that in mind right now it just kind of puts the files in place and you're going to have to customize them but this will get much better soon now okay so let's do what it says here run this migrate command so we have to migrate the database okay now we can run let's start okay and just reload our page here okay now we're going to go to slash projects and you can see that it shows a list of projects which right now there's nothing uh so we will click create project this takes us to projects new um right now this like i said this is just very very basic so we click submit button it says hey success and it takes us to view this page um and then it has a you know edit page you can click submit and it'll just change the name you can also delete it and that would do that so now you can you can see it here okay so super slick um and i'll i'll show you what the code uh that we generate currently so let's close uh all this stuff up all core due to do db okay so under app projects audit generated queries mutations components so get project query now um so this one see we don't have we're not using pipe in here yet um so we will we'll eventually do that but this shows you how that it's very simple all this is is a function that takes some input data as a first argument and the context provided by middleware has the second argument and here we are doing context session.authorize and so this requires that a user is logged in now if we wanted to enforce a certain role like admin we could say hey authorized admin so if you're not an admin and you're not logged in you're not getting in here okay so it's super slick already built in for you and you can actually provide custom adapters for this function to have um all sorts of advanced authorization stuff so very simple we call database uh project get that project if it doesn't exist the typescript server needs restarted which is why these things aren't aren't working here okay so same thing for mutations um it's a export function first authorize it create the project see this is very basic we're not uh validating the input right now using zod which we need to um but you know that's you can add that and then we'll make that generate better soon so let's show you um here are some code that i have taken out of one of my projection production blitz projects right now and so this this shows you like what a real world um in this case this is a query i will give you okay so this is a get project query and we have this zod schema so we're going to say hey you need an id to to view so it's going to be id of the project that you want to view and then organization id is optional so this means that let's say you have multiple organizations users can belong to organization projects can belong to an organization so by default you're going to view let me go sorry backup so in this resolver pipe first thing is we run the zod schema validate the input we're going to call authorize pipe.authorize which is going to ensure that the user is logged in and then we're going to we have this utility that says set default organization id so this means if you're not specifying a certain organization we're going to use the organization of the currently logged in user or the the organization that the currently logged in user is viewing because the user could belong to more than one organization right so it's which one is currently being viewed and then we have another type utility here which is authorized admin if not current organization so if you're trying to access a project from an organization that you're not currently viewing then you must be an admin okay and so this is a very common pattern that i that i use throughout throughout the app and then so now once we get into side this actual resolver implementation we know that the input is valid the user is valid and all we need to do is just go ahead and and try to get that thing from the database and so we we add a project where ids equal id and organization equals the organization that is set and that ensures that the user is getting the correct project that they are authorized to access okay and then if that's not found we throw an error otherwise i'll return that project okay so this is this is this is it's i'm very happy with this pipe function uh we just added it this week and i'm so excited about it so it's awesome a lot of us are really excited about it so one one thing that this really really cleans up is there are zero uh manual um typescript typings okay so before um so if we go over here so you see there's a manual type here you specify the type here here um and then when you do with this like to for this code here there's a ton of manual explicit touchscript types but using the pipes it's all inferred and so it's it's much cleaner and simpler it's awesome all right here's the utilities uh just to give you an idea what this looks like so the default organization id um so we have you have to use generics here so that the types flow through properly but the first argument is just some input data and then the the context which we get the session from so we're going to return the same input that came in we're going to return that but we're also going to ensure that user id is set so if it's passed in use that otherwise default to the currently viewed session okay and then the authorized admin so this is going this uses the authorized if utility and so it's going the first thing is going to be a function that takes that input and context and says if um if you are not so if the organization isn't even there at all it's going through an error and then if the input doesn't match the currently viewed viewed user then it's going to re force enforce the admin role okay so this is you know it's a little bit kind of like hard to understand but that's why you put in utility and give it a nice name and then you can use it everywhere in your project very simply okay so i think there's um i'm coming towards the end here let me show you error handling um which is something that i love in blitz um it's so it's so nice so what should we do let's okay let's try to access a project that doesn't exist okay so in this case um we're going to go to a page with an id of a project that doesn't exist and this line is going to execute right now or right here it's going to throw a new not found error now this is an error that you throw on the server okay so think about like what what would happen or what what should happen or what usually happens what usually happens is this is inside your api and your api is going to return maybe an error response maybe an okay response with an error object inside of it and then on the client you would this is outside of blitz like what what would you do on the client you would um read that um and you would say okay if there's an error um i don't know what do you do right um you gotta you gotta check if it's actual error and then you could create a new error on the client or just i don't know it's confusing it's kind of a pain button blitz is very simple and intuitive okay so if you throw an error on the server it will be automatically thrown all the way up the stack into your components okay and so if we go over to projects pages uh let's see pages projects to view a project and actually i haven't shown you this either i should show you this so this is i'll i'll get back to the air handling shortly so we take the get project query and use query hook and um right so right here this use query hook we pass in that query function and then the arguments is the second thing so where the id equals project id and this returns project okay and before that so we actually get the project id from the url using the use param hook and so it's going to get that id pass it into the query the query is going to return the project and then we render that project okay um you'll notice that there is no if loading show this if else else if error do this else actually show this stuff and that's because concurrent mode is enabled by default and blitz apps so this uses suspense um we've been we've been using this for i mean almost a year now and everybody really likes it it works it works really good it's it's so nice for your it removes all the ugly if else code in your components because if it's loading it's going to throw up to the this loading thing which is here suspense fallback floating okay so that's how you handle loading and then errors are going to be thrown up to an error boundary by default there is an error boundary and your very top level root app component and so that's where errors are going to be gone okay so now get back to this error handling if this id doesn't exist in this get project throws an error that air is going to come up from the server is going to come out through this component and it's going to go all the way up to stack until it finds an error boundary which in this case is an underscore at the very root of your thing of your app so here we have an arrow boundary component and here is what is going to display so it takes an error if the error is an instance of authentication error show a login form the if the error is an instance of authorization error display the error component which is going to be sorry you're not authorized to access this like a 403 code i think and then otherwise if there's any other type of error we'll just render whatever that error says okay this is a generated in your app by default um again you have full control over it so if you don't want this behavior you can customize it so let's let's go look let's go uh try this out so project slash one now that works works correctly you can see how there just for a slight instance the loading thing shows so let's go let's try to view project id 10 which does not exist 404 could not be found okay and that happens all because of this line right here this not found error um the default message for that is like not found and it also sets a status code on there 404 and so this thing is thrown all the way up through the stack into your pages folder wherever uh page wherever that went right here so it comes up through here and it goes all the way into underscore app into this error component right here and renders that 404 okay now the other thing will um same thing happens for authorization so if we go if we go back here log out and then try to go back to that view that project uh generate it just shows us a login page and that is because right here so session.authorize throws an authentication error because you're not logged in and then right here if that error is authentication error we display the login form okay so that's it's all like just automatically for you tightly integrated back into front end um and i i love it i hope you do too lots of people do okay let's jump back to my presentation here slides run through a few more things so we have this feature called blitz recipes this is based on um gatsby actually not based on it's similar to gatsby recipes we both had the idea uh like simultaneously and the implementations are a little bit different but basically it allows you to install third-party code with one command so for example blitz install tailwind will add all of the configuration needed for tailwind to your app dependencies files etc with just one command so you can we we don't have a lot of recipes available yet right now it's kind of difficult to write them we're going to be improving that make it easier um and then adding more like ultimately we'll have um hundreds thousands of recipes hopefully so currently currently we have blitz install chakra dash ui uh blitz installed material ui blitz install tailwind um blitz install i'm not sure there's a there's quite a few other that we have but it's very nice for integrating third-party code um the alternate like the alternative to this is having a bunch of examples like an example of how to use blitz's tail one example of how to do that but then you have to go copy and paste the code and it's just kind of tedious but this is very slick now you can write your own custom recipes um so you could like you could and the recipes can come from a github repo or um and i'm not sure about npm yet but definitely github repos so you can write your own um like private or it can be a file path too so for your company you could write recipes that i don't know do something so it's an easy way to package a shareable code okay blitz console is very similar to rails console if you've ever used that it's a rebel that loads your code and allows you to just manually run anything so we automatically load your database for you so here in this you can see an example of db.question.findmany and that's going to return all the questions in the database so this is really really nice for running one-off commands i use it for debugging production data and so it's very powerful tool a few other big features that we have is a passport js adapter which allows you to easily use any almost any passport.js strategy um for social login so you can easily add twitter login github login um facebook login whatever else you want to do there's also a magic link like a password passwordless adapter you can use so check that out if you're interested in that http middleware is a way to to read the request response objects modify them and pass add data to that context thing that actually is goes into queries and mutations so this is how we add our session middleware is our our built-in authentication stuff our session management is built using the middleware so we have advanced data serialization which automatically converts so when you when you have a date object on the server a date object you can't send a date object over the network it has to be converted to a string so when it gets on the front end you have to convert that string back to a date object if you want to manipulate it right well we do that automatically for you so you don't even have to think about that thing anymore it's awesome so if you return a date on the server it comes out as a date on the client if you return a map or a set on the server it comes out as a map or a set on the client if you return an error object on the server or throw an error object it comes out as an error object on the client and we actually wrote a custom serializer called super json for that all right you can deploy blitz to a server or serverless which is as sweet so you're not locked into one or the other um if you run serverless then all your endpoints are individual serverless functions which is sweet you we have full custom server support saying this next.js so you can add websockets or anything else you need to do for complex use cases and i already mentioned database agnostic okay um they mentioned i should talk about community history um but you're gonna have to go read this because i'm out of time but there's a page on our docs called history and it tells about how blitz got started um and basically the tl dr is i built a community before the project because when i launched a project there really was no project it was just a couple couple hundred lines of prototype code there was not even a github repo but the tweet kind of went viral and i got a bunch of people interested in helping build this and here we are almost a year later so a couple of uh testimonies um from twitter so this this fellow john says i used rails professionally for over a decade and i feel 10 times more productive on blitz already after just a few months that's kind of mind-blowing and this was just today a fellow who works at agolia the search company says that they wanted to use his colleagues wanted to use aws amplify for an internal tool but it caused so many uh issues that they switched to blitz and it was just plug and play and just started working automatically and then also today another someone else says that they're starting a project for a huge us university using blitz so we're starting to get a lot of traction and um we are just coming into beta transition right now so this next release 0.230.0 is going to be the beta release so it's available in canary right now but that's like the official beta launch and it's like this is a good time to start using blitz in production if you want i've been using blitz and production for many months and many and so i have many others and it's been working very well so far so to get started run npm i uh or yarn you can use yarn too but install the blitz cli globally and then run blitz new my app okay so we need your help um i'm not a billionaire and there's no company um no rich company pro spinning providing for this it's just me um donating my time i've been working on this mostly full time for since the beginning so close to 11 months like most of the time i average about 30 hours a week working on blitz and then i've also been doing consulting in addition to that to support myself so i would love your help in any way um you can become involved as much as you want we have um maintainer levels so we have level one maintainers so level two maintainers and then core team and so you can you can work your way up the ranks if you want and i'd love to have your help you can contribute in any way you want code documentation videos blog posts courses we already have some folks working on a book we have there's i think there's at least two or three courses on blitz that that are in progress right now there's already a egghead uh course um a mini egghead course and yeah so we love your um help and then also donations and sponsorships is a huge help so you can as an individual you can start donate as much as five dollars a month and then we also have multiple sponsorship tiers for companies where you can get your logo on the readme and the website now we're launching a new website uh within a week or two at the same time as the official beta launch and so now's a good time if you're a company and you want to get your your logo on the front page for the big beta launch go sponsor blizz right now thank you and a couple of things here so blitzjs.com blitzjs.com is the website and is where you would go to find documentation and how to get started i am flybear on twitter and you can follow blitz gis on twitter as well and that's all i have today thanks for watching

Channel: Blitz

Views: 7,159

Rating: 4.9813952 out of 5

Keywords:

Id: UHyx8MtCVVk

Length: 60min 4sec (3604 seconds)

Published: Mon Feb 01 2021