Angular Advanced Workshop (2018)
This is about the technical project of our 3-day Angular Advanced Workshop we gave for KaiserX (Allianz) to teach advanced topics of Angular v7 in a unique & playful way by implementing a card game called Skip-Bo. The workshop covered the six chapters, Modules, Components, Routing, RxJS, Testing & Animations, split into theory & challenges.
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.
Try it
You can play with the final project online under skipbo-angular-workshop.netlify.com and access the complete source & challenges under github.com/georgiee/angular-workshop-skipbo
Below a gif preview. Additionally, I have prepared a short video of the gameplay part on YouTube.
It's Open Source 🎉
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.
Workshop Content
Please check the linked GitHub project for all details. I will only give a brief summary of the content.
The workshop project gives you access to all six chapters (theory & challenge). Here the slides from the workshop.
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.
workshop/04-rxjs-start
workshop/04-rxjs-progress-01
workshop/04-rxjs-progress-02
workshop/04-rxjs-progress-03
workshop/04-rxjs-end
workshop/05-testing-start
...
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.
Chapter I - Modules
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.
Theory
Providers
Declarations
Imports/Exports
EntryComponents
Bootstrap
Schema
Challenge
Create our GameService
Provide expected interface (TDD)
Inject the GameService
Break the Injection and fix it
Answer a quick question
Chapter II: Components
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.
Theory
Introduction
preserveWhitespaces
Selectors on existing elements
View Encapsulation
Smart & Dumb Components
OnPush
Template References
Challenge
Create Components
Use Gameplay Component
Use CardPile Component
Fix Bug in the CardPile
Inject parent component
Chapter III: Routing
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.
Theory
Router Outlet
Lazy Load
Manual Loading a Module
Guards
Resolver
Challenge
Route to the new pages
Make GameModule lazy load
Routing Guards: CanActivate
Routing Guards: CanDeactivate with prompt
Chapter IV: RxJS
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.
Theory
Introduction
Debugging
About Dollar Signs
Cold vs Hot Observables
Make Cold Observables Hot
RxJS in the wild
Testing
Challenge
Redirect to the Gameover Page
AI 🐙 Autoplay V1
AI 🐙 Autoplay V2
AI 🐙 Autoplay V3
Stop the AI after game is over
Chapter V: Testing
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.
Theory
Setup
Component Testing
Micro & Macro Tasks (Theory)
Testing Async Code
Change Detection
Testing Routing
Challenge
Stock Bug (Investigate) 🐛
Stock Bug — Part 1, 2, 3
Test RxJS w/ Oscar 🐙 — CPUs
Test RxJS w/ Oscar 🐙 — Humans
Can Oscar play multiple cards ?
Chapter VI: Animation
Learn about animations in Angular, how to apply and control them. In the challenge, we will flip some cards 🙌
Theory
Animation Basics
Appear & Disappear
Numeric Triggers
Disable
Router Animations
Animate Children
Challenge
First Flip - Part 1 & 2
Flip Party
Flip with Style
Make the Hand Cards flip
Animate Stock Flip
Conclusion
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.