Optimizing an Angular Application ⚡

In this session we’ll demonstrate how we can optimize the runtime performance of an Angular application. We’ll go through:

  • Optimization of the change detection strategy
  • Explaining common gotchas with OnPush
  • Refactoring for better performance and stronger separation of concerns
  • Using pure pipes for referentially transparent computations
  • Using memoization for pure functions
  • Buffering running time updates from the server and applying them at once

Unavailable
Optimizing an Angular Application ⚡

Duration (mins)

Learners

5.0 / 5

Rating

Task List


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.


Preinstalled Tooling

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.


Application Structure

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.


Conclusion

In this chapter, we’ll make a quick recap of the optimizations that we did over this hands-on workshop.

Watch Preview

Preview the instructions that you will follow along in a hands on session in your browser.

Minko Gechev

About the Host


Minko Gechev



Frequently Asked Questions


In Rhyme, all sessions are completely hands on. You don't just passively watch someone else. You use the software directly while following the host's (Minko Gechev) instructions. Using the software is the only way to achieve mastery. With the "Live Guide" option, you can ask for help and get immediate response.
Nothing! Just join through your web browser. Your host (Minko Gechev) has already installed all required software and configured all data.
You can go to https://rhyme.com/for-companies, sign up for free, and follow this visual guide How to use Rhyme to create your own sessions. If you have custom needs or company-specific environment, please email us at help@rhyme.com
Absolutely. We offer Rhyme for workgroups as well larger departments and companies. Universities, academies, and bootcamps can also buy Rhyme for their settings. You can select sessions and trainings that are mission critical for you and, as well, author your own that reflect your own needs and tech environments. Please email us at help@rhyme.com
Please email us at help@rhyme.com and we'll respond to you within one business day.

No sessions available