We will cover the following tasks in 1 hour and 16 minutes:
Introduction to the workshop
In this chapter we’ll make an introduction to the workshop. We’ll explain how you can take most of Rhyme in order to follow along with the recording. After that we’ll run the application that we’re going to optimize and provide a high-level overview of the practices we’re going to focus on.
This chapter introduces all the tooling that we’re going to use during the workshop. We’ll get an idea about the directory structure, the text editor, and the terminal emulator that I’d recommend you to use.
In this chapter we’re going to play with the application that we’re going to optimize and look at it’s structure. Right after that, we’ll see some of the bottlenecks and discuss possible optimization strategies.
Profiling and Explaining OnPush with Immutable.js
In this chapter, we’re going to profile the application and see why entering new employees is so slow. We’re going to explain one potential optimization technique - using OnPush change detection strategy. Finally, we’ll briefly discuss how we can use OnPush with Immutable.js.
Using OnPush with Immutable.js
In this chapter, we’re going to explain how we can optimize the performace of our application by using OnPush change detection strategy with Immutable.js.
Why OnPush is not enough
In this chapter, we’ll explain why after all the optimizations we did our application is still slow. In the process, we’ll cover when exactly the change detection for a component with OnPush change detection strategy gets invoked. In the end, we’ll explain an optimization strategy.
Optimizing OnPush Change Detection Strategy
Now, we’re going to look at why our application is still slow, although we’re using OnPush change detection strategy. We’ll explain why the change detection still invokes unnecessary and refactor the component tree in order to make the application lightning fast! ⚡
Reducing the Redundant Computations
Although we did some decent optimizations by using OnPush and immutable data structures we can still do better! When we add a new employee to the list we still recompute the numeric values for each already existing employee, which is redundant and unnecessary. In this chapter, we’ll explore how to handle this issue by using pure pipes.
Using Pure Pipes for Faster Computations
In this chapter, we’re going to use pure pipes in order to optimize our template computations. We’re also briefly going to discuss when pure pipes are applicable and how they differ from impure pipes.
Memoization versus Pure Pipes
In this chapter, we’ll explain what the difference between memoization and pure pipes is.
Using Memoization with ECMAScript Decorators
Pure pipes work great for not performing the same computation all over again but we can do even better! In this chapter, we’re going to explain how by using memoization we can reduce the number of redundant computations minimum! We’re going to apply the
memo-decorator in order to preserve the results from the calculations in a in-memory cache.
Introducing a Real-Time Back-end Service
In this chapter, we’ll take a look at a server which sends commands to the front-end for updates of the data model. After that we’ll profile the application and make some of the bottlenecks, of the default message handling logic, obvious.
Optimizing the Real-Time Update Handler
In this chapter, we’ll see how we can optimize the real-time update handler. We’ll use the
buffer operator from rxjs in order to buffer commands and apply them at once. Once the buffer gets flushed, we’ll invoke the change detector manually so that we render the updates on the screen.
In this chapter, we’ll make a quick recap of the optimizations that we did over this hands-on workshop.