Adding persistence to React Apps by Leveraging Serverless Functions on Netlify or Verce.
React Chicago July 2020 Meetup sponsored by TEKsystems
Tell Firebase to Go Fly a Kite: Leveraging Serverless Functions to Add Persistence to your React App (or any app) on Netlify or Verce
Brett Haymaker is a Lead UI Engineer @ Bank of America Merrill Lynch and a Lead Instructor @ General Assembly.
So before I get started, I just want to say thank you to to Alysa, a Texas middle class, the organizer, the one and only Bill, crawled out for his talk about Mux Alex on a stuck on Mount Repose and an unfortunately, June, his beautiful talk about fire base. And now I'm here. I'm telling you to tell Firebase to to go fly a kite and I'm sorry. That's all right. So I want to start off by just kind of addressing the elephant in the room. And and so that elephant is that that June, he talked about how great firebases and it is. It really is. And this title is more about my weakness for pizzazz, if you will, than than anything else. But I would like to just share my thoughts about why I think firebases not not always the best choice. And I'm really excited to talk about how we leverage a technology called Fona DB, which is a similar to Chesire base. It is a database as a service. It's accessible, has a direct integration with with data by hosting providers like Mathlouthi and which used to be right or now. And and they're going to look at the different set of benefits to you as an engineer. So that being said, I'm my name's Brett Hamaker. I'm a UI engineer in the center industry here in Chicago. I'm also an instructor at General Assembly. I teach French development and research courses online. And yeah. So let's let's let's get into it. So let's let's go tell scientists to go fly a kite that's supposed to be like really, really cutting. Let's take that firebase. So first of all, I am not an expert and in serverless architectures, I am just starting to learn about this myself. I kind of just talk with, like an excuse for me to learn about these technologies as well. Everything that we can do today or that we're going to be talking about for the next 15 minutes. Most of it is, is you can do it in Firebase as well, but you can create your own cloud functions. And Firebase, what you can do, though, in using Forelady and Wi-Fi that you can't do and you probably will never be able to do in Firebase, you can save arrays. Yes, you can take that. But I just want to make sure that that you all know that I am I am a beginner at this as well. And I definitely want to be transparent about that. I also think it's a great idea to start talk what you what you are not. That's that's also a thing. So so really, the underlying the underlying question of this talk is at the front end developer using react or if I'm using view or I'm just using the object really shouldn't matter. Right. The point is, is how do I quickly add persistence services or some sort of persistence layer to my front an application. And the answer to that typically has to then Firebase. Right. It's a very, very well built solution. Their real time database is like it's off the charts and it's like it feels like magic is so good. Right. And and I think my my the this dichotomy of of Firebase vs. using Sonoda and Serverless functions kind of a false dichotomy because they're both databases of service platforms, they're both documents based. Right. But I think my my animus towards Firebase as a solution stems from my experience teaching it to students who are learning react and in my react course and and to qualify. What I'm saying is that Firebase is it's it's so frequently used to teach young developers or sprouting developers or developing developers, developing developers, they one to to add persistence to their applications. It's. Commonly referenced and in tutorials and blog posts as a way to to to save data, right. And I think for new students, this is like a really great thing because of everything that you mentioned. Right. Like, there's a ton of documentation and there's that overflow questions that are being addressed. There's a community it's supported by a large a large tech company. Right. Those are all really great things. But what I what I do and it also empowers the new students or someone who is transitioning into this career to get a fairly instant sense of gratification and verification of using such a tool. What I find, though, however, is and this is my my professional experience that I'm speaking from, is that that becomes fairly quickly what what I refer to as the honeypot. So and what I mean by that is for for a new student, they they kind of get the lay of the land of firebase and they find that it's quick. It's relatively easy. Right. Like, I can I can add them to my app really, really, really, really quickly and easily. And they give me all these things and but but after a while, you know, it's initially it's like, oh, this is so sweet and it's golden and probably warm and sticky. But then like you realize, after a while, you're you're stuck. You're trapped, actually. And so and what I mean by your trap is that firebase or rather the knowledge of firebase implementation. And again, in my professional experience, is not something that employers typically look for. It's not I think it's very difficult, at least in my experience, to translate your experience using Firebase as your your back end as a service to something that is something that an employer is already using or another skillset that might be in demand. That might be that one word that that that gets your resume through through the door that that firebase might hold the way. You know, I could be completely wrong about this if you're if you're an independent app developer creating mobile apps. This experience is probably the inverse right part of it and probably a very, very common solution to provide that sort of persistence layer. But in my my my experience and the experience of students that I have had, it doesn't seem like Firebase really helps them get in the door. And so that's kind of what I'm I'm also coming from that place. So so that's why I think Firebase, in some place in some sense is a honeypot. And that's where we get to talk to on a on a deep and really the value that I think is embedded in learning from TV and and becoming associated with or leveraging a for your project over Firebase, for example, is that that's gonna to be as first class graph you all support. And grad school is is something that is very much of value right now on the market and knowledge of grad school is incredibly valuable. So while you don't have to use graph quality responded, it's certainly something that you can opt into and take advantage of down the road. So it's a simple solution that comes with first class graph to support. The second option is that the major static site providers. So if you're using the gen stack, for example, and you're leveraging a static hosting platform like Netflix, buy or sell the product, you've had a direct integration or add ons for for that platform and those platforms. Today we're focusing on on net Wi-Fi, but this is also available in Brazil. I also think that it's a it's a value add to to anyone who hasn't had exposure to leveraging serverless functions before. So the point of entry for for you folks and and this is not necessarily a good thing because more so leveraging Sonobe via Serverless functions through the network. By hosting platform, so network five allows you to create serverless functions and build them and the host. Right. But it's basically just pouring them into a lamda. So it's a if you haven't worked with several to support serves that initial experience, I kind of get your feet wet and then you can go on and do a lot more stuff. OK, so enough enough with the context here. Let's let's let's dig in and let's talk about, OK, how do I how do I get started here. So the very, very first thing that you'll you'll need to do if you don't already have a necklace on account, go go to nullify time for you to go to that. That was my first sign up. They have a direct GitHub integration. So what that means is it any time you post code to your GitHub repository, you could have never had to listen for that push and it'll automatically build your application and deployed on that kind of or whatever whenever you push. And it can be bresch specific as well, which is really great. The second step is signing up and registering for a final DV account. And if you've signed up for that, I already and you haven't signed up for five DB when you go to to sign up, there's a network option which makes it really, really difficult. And they both know about each other instantly. And you can just kind of click that and you're all set. So after that, so you want to create a brand new up. You have a reactor that you want to start leveraging the stuff and it doesn't really matter. The other things that the two other things that you need to get started immediately using several assumptions. And finally, the degree is to install definitely the JavaScript SDK, which is just the final debate, and that's a direct dependency. And then you also need to install and the doctor will ask you to install the global and Kanakas, but that's now considered a bit of an anti pattern. So it's all done that whiffy Seelie as a as a dev dependency and then you can use Pontiac's to to reference any commands you have after that. OK, cool. And then so the after you've done these things right. So you can still sort of do this all the network. I feel like the very, very next thing you can do is execute this command in the root of your project is the network. And so what this is doing is this is basically it's going to create a dot net lafi directory in your project and inside. That is just going to be a little bit of JSON. I think it's called Staked Out Saison. And that is just going to hold a simple side reference to the site that has been initialized on matricide side with your repository. So this basically make sure that that Wi-Fi in remote land and your local project kind of know about each other and that's really all it's doing. So that's really it. If if the network I feel it makes at this step require you to to authenticate or log in if you aren't already logged in in in your local system with the network. I feel like this is likely going to redirect you simplify and say like, yes, this is me and it'll just kind of take care of itself. If you have to explicitly log in, there's a network I log in command that you can you can use to be explicit about that. Secondly, something that we have the option of doing. I don't need this persay, but it's good that we that we leverage. It is the Thommo file. So in our project of the route, we can create a Mathlouthi Tommo file. And this is basically just like if you've used Jenkins' or BitBucket pipelines or GitHub pages and they've had some sort of automation build script or something. This is basically just a big file format, Lissi, for it's built into cycle. And when you're when you're leveraging nullifies certain assumptions, integration. And and this is this is kind of agnostic of using on a DB. You want to. You two things are at least one thing if you're using functions, and that's to tell them that if I were to accept the functions to exist, so you are telling them what folder they will define your function files and you also want to provide the command that was I should run in order to build your app and then also once it's built where that build is located. So the public schools build that when you run the ghost and it'll create a whole directorate and all your OS will be inside of that. The second part of that I tummo configuration file with ofdeath. Right. That's that's really going to be used by this package that kind of comes with that. If I see like if I death that if my job is in data. So it's actually very, very new, probably it's probably going to change, but it's actually really powerful and really exciting. What they've been doing with this and this is what it does is it will it will replace your normal start command within NPM. You can still run and can run start. And you'll see that we replaced it earlier. But it will use networks like that to set up two servers, one to serve your app and the seconds to serve your functions, your server functions on their own server. So your app will behave exactly the way it will locally, as it would be when it's deployed on that Wi-Fi, which is really, really great to test your ear. How deeply coupled or how deeply integrated your your service functions are to your application. So in our package design, right. To make that transition, we would simply replace the start script instead of saying react scripts start. Right. If we're using a ICRA templates now, we're going to reference Mathlouthi with a simplified Seelie and we're going to reference the death commands that we just built. And I, Tommo, at the bottom there right now. Now we're now we're now rolling and we're almost we're almost there. Right. So the next step is to create a part of the database instance. There are three ways, three main ways to do that. One, I log into the facility, the Web app or the website. They have a thing called the Farnaby console, and that's basically like your firebase dashboard. You can create new databases, you can configure options, do all those things right. And you can totally do that in this way. We will not be doing that today. I will not be trying to do that because it's very self explanatory. The second way that you can do it is you can install a site specifically for a startup called Donoso and you can initialize database systems in this way. However, we are going to be leveraging since we want and care about deploying this application simplified. We are going to be using the FONA add on for Metalist and that's what this looks like. So so when we and I want to qualify what what is two command of doing so. Right. So. Although I'm not I swear to God, my audio's still working on this, and I skipped over some things and I'm disappointed in myself and so I'm just having a moment. So cool. So the first command to create FONA Command, what that does locally is it will generate a local phone and the instant and it will generate a random name for that instance. And it also generates three keys and three secrets for those for those keys. And that's all it will do. And that will just sit locally in your project and that I won't necessarily know about it. The second command and text that Lafi add on off onto that second command automatically redirects you to your phone, a DB account, and they will ask you, hey, this is local instance of the database that that Lafi knows about. Do you want to associate it with your phone or do you take ownership of that local input? This now becomes yours and at that point you can rename it if you if you wish and let me see if I have. Yeah. So so when you are redirected you'll you'll be presented with a screen that looks a lot like this. The database name is completely randomly generated, so it's going to look different. But here's just the opportunity to rename that database. You're you're then going to go into your your phone and TV console and what you need to do is so deeply over. You will show you like the collections of the entities or whatever, but you want to go down to the security tab and here you want to generate a new CD. You'll see three keys already. But that the necklace I see has generated for you, however, are not whiffy. Point still does not know or is aware of those secrets. So we need to generate one specifically to make that link, or at least for local development. So we're going to generate a new key. And when you do, you'll see something like this. And this is the only time that you'll ever see your keys secret and feel free to to use this or use this. However, however much you want, I don't care because it doesn't exist anymore. So feel free to use this key, but this is what you'll see. So so make sure that you save this and safeguard somewhere until you can add it to your necklace. I found that. So you get your keys, make sure that you use to specify the role as admin. So it'll give you all the rights to the database to do anything you want. And you're going to take that key and then you're going to go into your network dashboard. Right. You're going to you're going to identify the build that is associated with your local project. And in India, the net Wi-Fi options, you have the ability to add environmental variables. So you're just going to add this key here. And it's the front of the convention is gonna be the server secret. And that's that's a Murdocks, but it's also here for free for reference. So you're going to add that variable, you're going to save it. And now here's where things get really, really cool. I don't want to talk about that quite yet. So what is it? Here's the here's the thing. So I want to talk about this. So once you've done that right, you go back to your project and you're going to run a command called Engine Run Start that's going to start your your Web application. Right. Because what we have done is we've kind of hijacked that start command to leverage the network. Seelie it's going to run our app, but I don't know if you can see that. It's also it's also showing you function server is listening on four fifty five zero one zero. So it's on a parallel Web server to serve whatever service functions we create in our project. That port number is is important. And you can also see that it injects the environment variables into our local project. But it's actually pulling the secret here now from our Latifi account in production. So it is going and grabbing employment so we don't have to manually set environment variables to develop locally. It's our it's going to automatically pull what what is in our network viscounts to our local development environment, which is really, really awesome. You don't have to, like, go into a vastness and arbitrarily set. An environment very well, so you're going to run your server right after you've created the database and you've given metalic by the secret he for that database instance, and then you're you're finally ready to to create a or to start using your database now. And indeed, that was by private. And I'll share the link with with the group. There's a starter kit for for Netlist. I did the integration that met with I released. It's a really, really good product. And in my product they have a script called Bootstrap and this is a copy. So everything in here is just a copy of that set. Basically it is establishing a connection to to you or your finerty the server. Right. It's determining if you're actually inside of the context or if your local if you are inside mollifies like cool. I don't need to worry about this, but if you're local it will actually ensure that the database is created, but that the schema that you want to apply to that database. So what questions you want? Do you want to have indices on the day to day four in that collection, all those all those choices. Right. That hasn't yet been applied. It's just an empty database. And there's no if you think about it in school, there's no columns, no roads. No, not that. Right. So what this does is it's basically going to create and this is what to do is collection. Right? It's using this little snippet here is really is really the meat and potatoes of this and this. And this is the transcript. And you don't have to have a script. You'll have to do anything. It could literally be this happens on the phone and console. Right. Is it they're trying to make things as easy as possible in their starter kit. So what I want to talk about here is, is as well. And it's faunas version of a query language is Safonov query language. The syntax here of creating a new documents referencing a class of dos, creating an index. Right. Like this whole syntax here is referenced, unfortunately, in their API documentation. But that's all that's really happening there is it's just feeding your database with the name of the collection and the name of IT indices and the completely empty. After that, whatever you add to those things, they will look just like Firebase would is all document based. Right. So that's all that this is doing. So we would run, we would run, we would create a bootstrap command in our presentation and we would simply run that command and it would reference what was in that file. And we would use that exact to do it with the knowledge that it is going to ensure that whatever that Whiffy is aware of will continue to be applied. Cool. OK, so then then at that point we are in the final stretch. We are we are ready to to start creating our server functions. And before we do that, I just want to kind of overview what is the basic syntax, at least in the file and what is the basic syntax of a serverless function. And it follows this convention of export stuff and what the handler export. And in that function, you have just past events, information, contact information, and a callback object has information about the HTP request itself, like headers and stuff like that. Right. The context has information about the cloud environment where the the function lives. So in case you need some sort of context from that that cloud environment and then the callback is going to be something that is executed either on success or on an error. So if if that function fails or what the function does in some way, that that callback will give us an error message. If not, it will give us the response as a German response of of the successful call. Cool, cool, cool, cool. So then so then we're ready to start creating a function. Now you can do this manually and you can also do this using these Malfi commands. Festively, this is. To invoke a command locally, the command line and that I can name the specific service is something that I created, but I have to specify the port that is being run when I run my, my, my, my local functions server. Otherwise it won't know what to call right. So I need to make sure that I specify the port that I call the earlier and then I can provide also on the command line. I can provide like a sample payload, which is a string of five object in this example. So I can test both from the Seelie and I can also test my sample to do my to create function here right in my in my actual code. Now I don't want to go dig deep into this because we're not going to absorb it, let's be honest. But it's basically just you're making a connection to the client using the secrets that is pulled from the matricide production environment into your local environment. Right. So you're able to authenticate in that way and then you can basically use that instance to create or to add a new document in your 2D class for your traduce collection. And that's really all the rest of this is just promise and handling success or errors. Right. And returning appropriate messages and status messages. The great thing about this is like you could use this example. There are other examples out there. But what I want to call attention to is you can always use instead of invoke, you can use functions, Colen create. And what the net Lafi gives you the ability to do is it gives you a ton of boilerplate options of serverless function that you can that you can just invoke that commands and it will create for you. You want you want total crud operations you can use functions in and you can select. Hey, I want to create a new set of current operations, but something done. It's going to add it to your function folder and you're done. You want to integrate strike payments, something that handles payments. There's a there's a boilerplate for that. You want to you want to have a sample graph. You all call to your fona db database. Done. You can just invoke the net lefi functions preacherman and those options are already available to you out of the gate, which is super helpful. You don't have to memorize how these are built. It's helping you to select the disintegration directly. OK, so how do we use our functions in our application? We saw how we could invoke and test the functions locally through the command line using the necklace I see like using the actual functions that are out. This is fairly straightforward. We can leverage whatever each targeted library we prefer. We can use access. This example uses that right. And we can we can reference in a very programmatic way exactly what the relative of our our functions will be. And this is, again, the exact same way locally as it would when it is deployed on Mathlouthi, because it's actually literally leveraging the network environment at that point in time. So in this case, we have a util method, util HIMSS helped create and it accessed a data object. Right. And all we're doing is we're we're paying that each employee for our server function and we're in the body of that request. We are. We're just posting that data. That's it. So if you're using Hooke's, if you're using traditional class based components, it doesn't matter. You can leverage these HIMSS however you want, how your app, whatever your app calls for was and that concludes this Topfer. So June and Google, this is not about politics. So OK, so please, please reach out to me if you want my Twitter handle. If you're a sluff, you can probably find me in many, many other ways, but I'll leave it at that. Thank you for your time and thank you again for the opportunity to speak and to learn. Appreciate it.