Review on Angular Architecture workshop by Strongbrew
On September 7, 2019, I attended the Angular Architecture Workshop by Strongbrew in Laarne.
The purpose of this review is to share how I experienced the workshop as an attendee. It summarizes my personal thoughts only and is by no means influenced by the instructors.
Workshop details
- Date: September 7, 2019
- Location: Provinciebaan 120, Laarne, Belgium
- Instructors: Brecht Billiet and Kwinten Pisman
- Ticket price: 379 EUR (excl. VAT) for 1 day
- Number of attendees: limited to 10
The Instructors
Brecht is a software contractor, co-founder, and mentor at Strongbrew, and mentor at Thoughtram.
Kwinten is a software engineer at Stackblitz, Google Developer Expert for Angular and co-founder and coach at Strongbrew.
Workshop review
08:00 — Welcome
Upon arrival, we were personally welcomed by Brecht and Kwinten in their new super-cozy Strongbrew workshop location.
We got a chance to mingle until all attendees arrived while enjoying coffee and croissants that Brecht and Kwinten had kindly provided. ☕️🥐
08:30 — Introduction (Brecht)
The workshop started out with an introduction to monorepos. While the workshop focuses on Nx, it was great to first learn about the differences and similarities between Lerna and Nx.
We then learned how to create an Nx workspace, how to create an app and how to configure global schematics in angular.json to control the default settings that are used when generating applications and libraries.
Next, we had a look at libraries, lazy loading and micro-frontend libraries that include their own routing.
In the process, we learned how providedIn: 'root' no longer requires us to import libraries and how that positively impacts tree-shaking.
At the end of this section, we learned how to start an application.
09:15 — The anatomy of Nx (Kwinten)
While it's great to know the benefits of a piece of technology, I'm personally always interested in learning how something works and why.
As a result, I truly appreciated how section 2 of the workshop focused on how Nx works behind the scenes.
We learned how Nx is a thin layer on top of Angular CLI and how Nx uses typescript path mappings, custom schematics, tags, static code analysis and scripts as its secret sauce to provide extra functionality on top of Angular CLI.
Finally, we reviewed the upsides and downsides of using a monorepo and summarized the steps that are needed to create a solid architecture.
10:00 — Creating the architecture (Brecht)
In this section, we had a close look at route design.
We learned how multiple routes can be used to route different paths to the same component.
After the theory, we completed a few hands-on exercises.
11:25 — Component architecture (Kwinten)
In this section, we learned how components are core building blocks for building Angular applications.
We learned about the benefits of using smart components to interact with business logic and API access. In addition, we learned how to put generic functionality into dumb components that only rely on inputs and outputs.
Finally, we learned how ChangeDetectionStrategy.OnPush impacts change detection and UI rendering.
We finished the section by completing an exercise on how to share components between different modules in the monorepo.
12:05 — Lunch
13:05 — Component architecture continued (Kwinten)
After lunch, Kwinten continued by stating that smart and dumb components are just guidelines and that we should not force everything into smart and dumb components if it does not feel right.
Sometimes there are cases where other mechanism are more appropriate.
For example, what do we do if we want to communicate data or templates over router-outlets or when there is no parent-child relationship?
As a possible alternative, we looked at how to use an event bus service to communicate data across different parts of an application.
14:45 — State management recipes (Brecht)
In this section, Brecht explained different state management recipes.
We learned how complex state management mechanisms are not always needed and how they can often be replaced with lightweight services that expose one or more observables and a few public methods.
I personally always try to keep architectures and state management as simple as possible for the sake of maintenance and performance so it was very enlightening to hear how Brecht and Kwinten also recommend a similar strategy.
We finished this section with a hands-on exercise in which we had to create a service that exposed observable data and a few helper methods.
15:25 — Handling redundancy
In this section, we had a look at different strategies for dealing with redundancy and code duplication.
First, we learned how components can be split into smaller components to promote component reusability.
Next, we looked at how HTTP interceptors, custom RxJS operators, container helper services and pipes can be used as different mechanisms to centralize and reuse code in general.
16:40 — Migrate to Nx and publishing (Kwinten)
In this last section, Kwinten reviewed the benefits of a monorepo and how to explain them to your manager.
Finally, we wrapped up the workshop by looking at how libraries in a monorepo can be published to an npm registry to share code outside the monorepo.
Summary
While a workshop on Angular Architecture can easily span a full week, Brecht and Kwinten have done a great job of packing many of their greatest learnings in a one-day workshop.
I really enjoyed the parts where the entire group brainstormed about possible solutions for some of the challenges that attendees were faced with at work.
As a nice bonus, all participants received access to the Strongbrew platform so that all slides and exercises can be accessed after the workshop as well.
Would I recommend this workshop to others?
Absolutely, yes!
If you're an Angular Architect, this workshop provides you with many practical insights from the experiences that Brecht and Kwinten have gained when working as architects at real companies.
If you're not an Angular Architect, this workshop provides you with a high-level overview of the strategies, mechanisms, and decisions that go into building a solid architecture so that you can write better Angular code in general.
If you are interested in joining a Strongbrew workshop, you can find out more about their upcoming workshops at https://strongbrew.io.
Have a great one!