Skip to content

Development

Angular: @ViewChild() and @ContentChildren() decorators

With the release of OctoPerf's new UI we wanted to create a component that would allow our users to easily edit HTTP request actions.

The new UI being heavily inspired by IDEs such as Eclipse or Visual Studio we decided to create a component that behaves likes the project settings panel of IntelliJ:

IntelliJ Settings

This panel displays a tree on its left part with a search input on top. The content of the left part changes depending on the current selection.

While our simplified version will only display a list on the left panel, the idea is to create a composite component :

A visual component made of disparate or separate parts or elements, here a parent settings component and children settings panel components.

Angular: How to Use Multiple Themes with Material?

This blog post is a tutorial on how to use multiple themes for an Angular11+ application with Material Design.

We start from scratch by creating a new project and configuring the themes. Then we add a sample Card component to see what the themes look like and create a button to switch between Light and Dark themes.

Finally, we discuss two solutions in order to apply a theme to the application body and to a custom component:

Angular: How to use Virtual Scroll with a Flat Tree?

While developing OctoPerf's frontend I quickly stumbled upon performance issues with Angular Material tree when too many nodes where opened. OctoPerf is a load testing solution. As such, it displays a tree of actions and containers used to script the load testing scenarios:

Actions tree

With hundreds of directories expanded, the frontend quickly became slow to the point of being unusable. By default, even nodes outside of the visible part of the tree are rendered in the DOM. Since this feature is not directly available yet, I had to switch from a classic CSS scrollbar to a Virtual Scroll manually. This blog post lists all the steps I had to follow in order to use a Virtual Scroll on a complex Material Tree.

Note:

The actions tree in octoPerf uses a FlatTreeControl to manage the data. It is probably quite harder (or even impossible) to use a Virtual Scroll with a NestedTreeControl!

Fullstack Reactive Server Sent Events

Reactive programming is a programming paradigm aimed at maintaining overall coherence by propagating changes from a reactive source (modification of a variable, user input, etc.) to elements dependent on this source.

Reactive applications are more and more important today as they are:

  • Highly Available: the system must respond quickly no matter what,
  • Resilient: the system must always remain available, even in case of error or even if it is overloaded,
  • Message Oriented: the system uses asynchronous messages.

Which meets the requirements of today's users.