Learning ReactJs Scalable and High-Performance Apps
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
18 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning ReactJs Scalable and High-Performance Apps to your Wishlist.

Add to Wishlist

Learning ReactJs Scalable and High-Performance Apps

Optimize and enhance your web sites and applications with React
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
18 students enrolled
Created by Packt Publishing
Last updated 2/2017
Current price: $12 Original price: $125 Discount: 90% off
3 days left at this price!
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Understand the process of creating and working with Webpack and NPM to enhance the performance of your applications
  • Know how to choose between performance options and the overall object strategy
  • Reduce code complexity through improving our loops/conditions and overall enhancements to your React components
  • Create production-ready apps that perform at scale
  • Take advantage of the newest performance enhancements in ES6
View Curriculum
  • This very carefully modulated course will take you every step of the way through building modern, scalable web applications using React. A thorough and methodical course, it excludes no relevant technologies and assumes no prior knowledge. It is also a very practical course, with full examples of technologies used along the way.

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.

Covering JavaScript, CSS, and React-specific tips and advanced techniques, this course will make sure that you can build highly optimized, production-ready applications. The course begins by looking at important considerations you should build in to the planning stage of your apps: making sure options are set correctly, getting the most from Webpack, and optimizing your application's dependencies. We then go on to look in detail at some of the new performance enhancements that ES6 brings, such as using let and const instead of vars and advanced memory management for strings. Next, we cover more general JavaScript performance optimizations, and using ExpressJS for fast server-side rendering. Finally, we examine how best to package up all of the individual parts of your application to achieve the smallest file sizes and smoothest caching.

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.

Who is the target audience?
  • In order to take this course, you should have some familiarity with React, Node.js, and NPM. You should also have a good knowledge of JavaScript.
Compare to Other React Courses
Curriculum For This Course
27 Lectures
Thinking about Performance
3 Lectures 34:33

As a React.js developer, in this first video, we will be building our application setup using NPM.

Preview 10:20

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.

Setting Up Babel 6 in the High Performing Way

In this video, we will continue setting up Webpack to accept our React UI samples files.

Enhancing Performance with ES6 const
ES6 Performance Enhancements in React
7 Lectures 01:00:59

One of the bigger performance eaters are variables. To address this problem ES6 added two main new ways into JavaScript to work with variables so you can use them instead of vars. In this video, we will understand when to use let and const and where to place them in our React components.

Preview 12:44

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.

Create a const Only When You Need It

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.

Variables Perform Better Together

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.

ES6 String Performance Tips

Every time you call variables and objects that live outside of the current scope you are in, you create a more complex task for JavaScript renders. Instead if you're interacting more than once with a variable that isn't local to your current scope, create a local const at instead. Let's take a look at that.

Localizing lets and consts

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. 

Avoiding Conditions When Possible

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.

Overall Benefit of Working with React on Performance of the Client
General JavaScript Performance Enhancements
5 Lectures 37:13

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. 

Preview 09:35

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. 

Improving Arrays

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. 

Reusing Instead of Creating

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.

Make Them Immutable

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.

Events as Main Cause of Memory Leaks
Server Rendering React (Isomorphic JavaScript)
6 Lectures 43:00

In this video we will learn how to create a Node Server using Express.

Preview 08:24

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.

Setting up EJS as Our Layout System

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.

Adding ES6/JSX Support on the Server

When you are thinking about performance, there is a difference between client-side and server-side performance. While users have stronger and stronger devices, if we can cache an operation on the server and by that reduce the need of the browser to render out our JavaScript when it's first loaded – that is a win. In this video, we will learn how to create server side rendering.

Server-Side Rendering

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.

Node Module Exports

In an ideal world, our JavaScript code would just work perfectly as it is on both environments. But in reality, we need to add a patch to it to get it to not do some things on the server.

Universal JavaScript Patching
Packing Things Up with Webpack
6 Lectures 45:00

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.

Preview 07:54

In this video, we continue from the last one and get our server up and running.

Getting Webpack Middleware to Run with Our Real

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.

Fixing Our Priorities

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%.

Optimizing CSS with CSS-Nano

In this video, we will get our JavaScript to be production ready as well by sending to React (and other packages) that we are running a production build and by minifying our code.

Getting Webpack JavaScript to be Production Ready

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.

Caching and Compressing
About the Instructor
Packt Publishing
3.9 Average rating
8,274 Reviews
59,248 Students
687 Courses
Tech Knowledge in Motion

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.