It's one thing to build an app that runs well on your test system, but it's quite another to build an app that still performs well when it's live with thousands of users. This course will help you take your apps to the next professional level, while making sure they remain performant at scale. There are many aspects to optimizing your React applications, some that you can apply later, and others that need to be designed in from the beginning. This course will give you tips and advice for both.
About The Author
Ben Fhala discovered his passion for data visualization six years ago while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, and an Adobe ACP. He enjoys spending most of his time learning and teaching and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world. He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.
As a React.js developer, in this first video, we will be building our application setup using NPM.
While browsers are not fully integrated with ES6 we need to transcribe our code down to ES5 to enable the support of these browsers. There are many ways to do so but as we are using webpack to package up our files our best move is to transcribe them as the server is starting up.
In this video, we will continue setting up Webpack to accept our React UI samples files.
Every variable or const you create has an effect on memory usage. Although most of the time these values are negligible when running on a server or on a client with a large usage of memory this can tally up. Generally speaking when you create elements you want to balance between performance and usability. Let's take a look at it in further detail.
When working with variables both from a performance perspective and from a code readability perspective, it is best to cluster all your variables delineations into one big definition. In this video, we will continue setting up our React components as we enhance their performance.
Generally speaking using methods is more taxing on memory then interacting directly with variables. As such, whenever the development time is not hurt by directly typing, companies would prefer that over methods/functions. Strings are the perfect sample for this type of performance enhancements. In this video, we will learn how to use the string template as a great alternative to methods.
One of the biggest bottle necks in programming, mainly inside of loops, is conditions. Generally speaking, if you can remove the condition out of a loop you will enhance you performance of your application. In this video, we will walk you through the different things you should be thinking about when creating loops that have conditions within them.
The biggest time consuming client performance tasks are related to interacting with the DOM. The biggest shift that improved your performance of your application is the fact that you're not interacting direction with the DOM. Let's check that out in this video.
Most often you wouldn't worry much about that level of optimization but in some situations when you need to slice off performance issues, you might want to use ES5. In this video we will talk about how you should focus your energy when improving performance issues of your application.
The biggest feature of arrays is that it can be updated and grown. Let's optimize arrays for this modern web development world, in this video.
The process of creating an array is more taxing then accessing an array that already exists. As such a great place for enhancing performance is to reuse arrays and objects. Let's take a look at just that.
While most of the world is hot and bothered about making things as dynamic as they can, including references to objects when talking about performance anytime we have a variable, we are hitting on performance. Immutable objects have many advantages that we will cover in this video.
Besides optimizing an application to make it perform better, one of the biggest and most dangerous performance hitting elements of any application are its events. In this video we will see how to deal with events within the context of React.
In this video we will learn how to create a Node Server using Express.
For us to inject React into our site on the server we can't use static HTML, instead we need to convert our HTML into a template that we can inject into it the dynamic values. In this video we will set up our Layout system EJS that will be used to render out our dynamic HTML pages.
All of our client side files that we used so far have been using JSX/ES6 and as such would not work on our server. In this video, we will setup our server to handle these files.
Now that we created our server, it's time for us to wrap up our code into a module so we can share it between our production and development servers. In this video, we'll create all the shared assets that will be used both on production and development environments preparing us for our next focus that would be production/development configurations.
Now that we have server-side code on our project, our original webpack can't work without gaining access to this server. In this video, we will set up the capability to perform hot refreshes.
In this video, we continue from the last one and get our server up and running.
At this stage we will have a small conflict between our Webpack development files and our output application. To fix this problem we will fix our priorities when integrating Webpack into our express server.
To get our code to be production ready we really should clean out our CSS from duplicates and condense it down. This in return will increase our application performance and reduces load time of our CSS files. In this video, we will reduce our CSS app file by over 80%.
We are almost done, but we still need to cache and compress the files that are being sent from the server. That is exactly what we will do in this video, as we wrap up the build of our application.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.