Angular Workshop

Angular Advanced Workshop

This week an intense month of planning, preparing & developing an Advanced Angular Workshop ended with the workshop itself. Over the course of three days, 15 developers listened to six chapters each with a theory and a challenge part. Every theory part (~1h) is accompanied by a challenge (~2h ) with the goal 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 you successfully completed all six chapters 💪 I can tell you those challenges were pretty difficult. I planted nifty bugs to fix, there were RxJS streams to create and animations to build.

You can play with the final project online. https://skipbo-angular-workshop.netlify.com

Here a quick video of the gameplay part.



It's open source 🎉

Open source? What? Why?

Yes, 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!

Here is the project on github. I hope you enjoy it! https://github.com/georgiee/angular-workshop-skipbo

Workshop Content

You will find a git submodule — that's the actual Angular project. This project includes around 50 branches like the following ones.

  • 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
  • ...

With the power of those branches struggling participants can easily catch up. In addition, by creating mandatory branches to checkout I can help forwarding the implementation of the overall project to reach the final project while recognizing your own code contributions.

Here a quick summary of all chapters.

Chapters

The workshop project gives you access to all six chapters (theory & challenge).

Here you can see all chapters to jump either in the theory or challenge part. The preview link shows the progress of the overall game we build together — and can be a black screen in the beginning too.

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

Slides

Here the slides from the workshop.


Do you have questions? Approach me on Twitter.

Aktualisiert: 02.Jan. 2019,  Erstellt: 08.Dez. 2018