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

Attend for FREE
Optimizing an Angular Application ⚡

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.

Introduction to the workshop

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.

Preinstalled Tooling

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.

Application Structure

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.

Profiling and Explaining 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.

Using OnPush 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.

Why OnPush is not enough

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! ⚡

Optimizing OnPush Change Detection Strategy

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.

Reducing the Redundant Computations

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.

Using Pure Pipes for Faster Computations

Memoization versus Pure Pipes

In this chapter, we’ll explain what the difference between memoization and pure pipes is.

Memoization versus Pure Pipes

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.

Using Memoization with ECMAScript Decorators

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.

Introducing a Real-Time Back-end Service

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.

Optimizing the Real-Time Update Handler

Conclusion

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

Conclusion

Watch Preview

Note: The actual session is completely hands-on where you interact with the software while watching the host's (Minko Gechev) instructions. You can preview the instructions here

Host: Minko Gechev


Minko Gechev

Ready to join this 1 hour and 16 minutes session for FREE?

Frequently Asked Questions


In Rhyme, all sessions are completely hands-on. You don't just passively watch someone else use the software. You use the software directly. While following the host's (Minko Gechev) instructions. Using the software is the only way to understand a software!
Nothing! Your host (Minko Gechev) has already installed all required software and configured all data in a virtual machine. You just join the session from a web-browser and start using the software immediately!
Absolutely! We are strong believers in "Information wants to be free."
Please go to https://rhyme.com, sign up for FREE, and get cracking! If you let us know about your session, we will even help you promote it! Email us at help@rhyme.com
Please email us at help@rhyme.com and we'll respond to you within a day!