Note (2021): The concepts are still very valid, even though the version Angular v7 is outdated today.
This week an intense month of planning, preparing & developing an Advanced Angular Workshop ended with the workshop itself. Over three days, 15 developers listened to six chapters, each with a theory and a challenge. Every theory part (~1h) is accompanied by a challenge (~2h ) to implement a full card game application. I chose Skip-Bo as it's a well-known game, and the rules are easy to grasp.
The workshop was a huge success. I'm so proud of every single participant. They were so focused during my theory part and successfully completed all six chapters 💪 I can tell you those challenges were pretty tricky. I planted nifty bugs to fix. There were RxJS streams to create and animations to build.
Below a gif preview. Additionally, I have prepared a short video of the gameplay part on YouTube.
The workshop is Open Source, because we don't want to lock away valuable information — it's about teaching Angular to the community.
We decided to put the workshop on GitHub and make it Open Source. That way, many more people can go through the workshop on their own. Other fellow developers can even take the workshop and create their own ones too!
We hope you enjoy it.
Please check the linked GitHub project for all details. I will only give a brief summary of the content.
Inside the project, you will find a git submodule
skipbo-angular — that's the actual Angular project. This project includes around 50 branches in the following structure.
Those branches help struggling participants to quickly catch up. In addition, by creating mandatory branches to check out, I can fast-forward to specific milestones (chapters) without leaving people behind.
The following content lists the chapter introductions for the participants, so you can feel how we proceeded through the workshop.
We start slowly with a recap of what Modules are and their special role in Angular. The Injection System is tightly bound to the module world, so it's a good moment to revise them in this chapter.
Create our GameService
Provide expected interface (TDD)
Inject the GameService
Break the Injection and fix it
Answer a quick question
Learn about Directive vs. Components, things you can do in templates, ChangeDetection, and the difference between presentational and smart components. In the challenge, we will create our first components and fix a component bug.
Selectors on existing elements
Smart & Dumb Components
Use Gameplay Component
Use CardPile Component
Fix Bug in the CardPile
Inject parent component
We will get serious by providing a bunch of new pages like the rulebook, welcome and game over page. In the challenge, you will map routes, introduce lazy loading and routing guards.
Manual Loading a Module
Route to the new pages
Make GameModule lazy load
Routing Guards: CanActivate
Routing Guards: CanDeactivate with prompt
Learn the difference between cold & hot, some important rxjs operators and how to test. In the challenge, we will build Oscar 🐙 a card playing AI with the power of RxJS.
About Dollar Signs
Cold vs Hot Observables
Make Cold Observables Hot
RxJS in the wild
Redirect to the Gameover Page
AI 🐙 Autoplay V1
AI 🐙 Autoplay V2
AI 🐙 Autoplay V3
Stop the AI after game is over
This is all about testing. How to enable headless browsers, use hosting/wrapper components and learn important details of the change detection system and how it impacts your testing (tick, fakeSync, micro, macro tasks). In the challenge we will fix a nasty component bug and test Oscar's 🐙 async rxjs stream.
Micro & Macro Tasks (Theory)
Testing Async Code
Stock Bug (Investigate) 🐛
Stock Bug — Part 1, 2, 3
Test RxJS w/ Oscar 🐙 — CPUs
Test RxJS w/ Oscar 🐙 — Humans
Can Oscar play multiple cards ?
Learn about animations in Angular, how to apply and control them. In the challenge, we will flip some cards 🙌
Appear & Disappear
First Flip - Part 1 & 2
Flip with Style
Make the Hand Cards flip
Animate Stock Flip
Preparing a new workshop is time-consuming, especially if you want to craft a unique and challenging experience beyond the typical tutorials. After endless hours of preparations, we were able to deliver and fulfill the expectations. We did not repeat the workshop since then, as we focused on our project-based business, but we are happy to talk about any future possibility if you would like to enjoy a similar experience.