Getting React apps on the web quickly - without setting up testing, transpilers, or development servers.
React Chicago July 2020 Meetup sponsored by TEKsystems
"Lex DevOps Tool" by Giraldo Rosales
Getting your React app on the web quickly without having to setup testing, transpilers, or development servers.
Giraldo has been developing professionally for over 20 years. Working with companies such as GrubHub, NorthernTrust, ADP and currently Hitch—creating cutting edge platforms.
Good afternoon. I'm rather all the results, and today I'll be giving you a little walk through lacks an execution tool. As we all know, one of the best aspects of react is its reusability. But before it can be usable, it first has to be usable. So we've gone to meet ups, watched YouTube videos and learned everything we can about react, react, react, hooke's, the life cycles, some components, our components. And we found our deal match for that that idea or Ed, that we fallen in love with. What's next? I know that's a lot of. Questions like it, that's on a lot of people's minds that are learning react and once a lot. One second. Yeah, OK, so. After we learn, react and how to develop and react, we're only halfway there, so the next part of it is figuring out whether rewon static types or not. So with that, we have to choose between normally what is on. A. TypeScript or flow. Personally, I enjoy using typescript, but you may have your own preference after that, we all want to throw in the latest and greatest features of JavaScript like object chaining. So we want to add in Babille. And then tree shaking and bundling and compressing the code. Want to add in Watpac and finally, we want to test our code. Testing our code usually prevents a lot of those nasty little bugs from creeping back into our code. So we want to add in just about each of these libraries need to be configured individually, and most of them require a lot of additional plugins to get what we really want out of them. So, for example, we need react plug ins for Babille and just to run smoothly, hodd module reloading within Web hack to get or debug within our environment. And how are we going to bundle everything together to throw it on, let's say, as three bucket so we can host our app once we create that masterpiece? So this is where Lex comes in. Legs or an execution tool is a Seelie utility that combines all these tools into one and taking care of a lot of the hard work for you, constructing your debt environment and using the most common settings, but still allowing you to configure as needed. But it makes your code now usable. So let's say I'm starting from scratch and jumping to. Terminal. All right, so I want to create a new app, if you have an app already developed, that's great. If you wanted to pull down a skeleton app, you can do that as well. So we just pull down a fresh one for this demo or use a typescript. And so we'll initialize a new app or call it my app. OK, and then. Install it. I want. Oh, I just ran. But hold on. To continue where we left off getting a simple skeleton apple, I just initialise a new ad. So let's say we act out on a typescript and we'll pull it down if we go into it. I'm. We can see we have a simple structure that's set up for us to get us started pretty quickly, it has all the source files. I'm not going to get into it to too much in detail. But just to give you a quick overview of what it's actually doing, it's just loading in in our view, which has. Let's see a whole new. It's going to load in an image with some dynamic text and then input to update that text in the submit button. So if we usually we kind of get to this point before we have to start adding in a lot of those libraries that I had mentioned earlier. But in here, you see that we don't need any of those configurations, like just Watpac Babille legs does Adenhart as config because if it has to be in the directory, but any configurations can be overwritten or customized. If you had some plugins for Watpac that you would want to add in, those can be added in config right now, adds in a lot of the plugins that are needed. So environment variables, you dev environment, all the posts are added inside of here. So what we'll do is install the packages. So the packages, if you take a look at that too, if you look to see we just have state management here O Dash, and then just some react that we're using and says we're using the high reloader on the environment through X ruled that on the front end here as well. If you wanted to see our app in action, we can run this. And some of the other plugins as well are compress image files for you as well as Nathan and use us for any access files. So. Here we have our app just to see if running is running. From this point, what we most likely do is let's say you want to start testing our components, if we can say we have a couple unit tests, just basic unit tests that are running through our views. So if you want to test those, we just just do a test and that goes ahead and. Testori as well. And the last part is once we're done and everything's looking good, we can then build it for production. So this would bundle it up with what? And and get it ready so we can then we should add to production and then distributed everything, the distribution model that it wants to be customized. And you can see it as well. And let's see, the other part of it, too, is if we are in the Warm Weather Act, if this is, let's say, a node module that we're developing and we just want to transport all those those files instead of bundling them. Into JavaScript files, what we can do is, let's say the actual files so we can extend this and remove the distribution folder and. This is one without battle and in our case, TypeScript, otherwise is a slow or so technical. So it's. Actions are things to inspire them to come. Oh, I'm sorry, use. So. That was all I had. So what it does is it allows us to focus more and less on building up that environment and spending a lot of time on it. It's become very useful for me using it on multiple projects to globally. I could just write code and and deploy it. Projects can have it as a dependency as well. The reason I don't have it as a dependency on those projects is because of it's all of Lexy's dependencies, all the babble plugins and plug ins. But usually I have those Pulman on the pipeline. And installed before deployment, but, yeah, that is Lex.