Review of Angular 2 Workshop by Brecht Billiet

Review of Angular 2 Workshop by Brecht Billiet

On June 29 and June 30, 2016 I attended Brecht Billiet's Angular 2 Workshop at Holiday Inn Ghent Expo.

The purpose of this review is to share how I experienced the class as an attendee. It summarizes my personal thoughts only and is by no means influenced by the instructor.

Class details

Ticket ordering was handled via email directly with Brecht.

The instructor

Brecht Billiet is a Front-end Architect who helps companies build large-scale web applications. He is also a trainer and a coach and regularly speaks at meetups about JavaScript related topics.

Find out more about Brecht on http://brecht.io.

Day 1

08:15 — Breakfast

All attendees were welcomed with coffee and breakfast upon arrival. This was a great way to get to know each other before entering the classroom.

08:45 — Introduction

Once everyone was settled in the classroom, Brecht introduced himself and we all had the opportunity to quickly introduce ourselves as well. There were 8 attendees in total and most of them already had extensive knowledge of JavaScript and Angular.

09:00 — Tooling

In this first lession we learned about Webpack, NPM, TypeScript, TSLint and Typings.

10:00 — Trip down memory lane

In this lession we talked about AngularJS 1.x, the introduction of components and the difference between smart and dumb components.

10:30 — Break with coffee and snacks

11:00 — Trip down memory lane

We picked up where we left off and learned about the introduction of one-way data flow in AngularJS 1.x.

11:20 — Hello Angular 2

In this lession we set up the boilerplate for our Angular 2 Winecellar application and learned how to bootstrap it. We also talked about basic routing, component lifecycle hooks and content projection.

12:30 — Lunch

Lunch was really nice with lots of fresh foods and veggies.

13:20 — Hello Angular 2

After lunch we continued where we left off and had a look at @Input() and @Output() decorators.

13:30 — Exercises

15:00 — Reducers and immutable state

In this lesson we learned about reducers and how to use them to handle immutable state.

We saw how Immutable.js can cause typing information to be lost (myObj.get('foo') => loses type information) and learned how to retain type information by creating new Objects and Arrays ourselves.

15:30 — Break with coffee and snacks

16:00 — Wallaby.js

In this lession we had a look at Wallaby.js, an awesome test runner for JavaScript that continuously runs your tests. I had never used Wallaby.js before but immediately fell in love with it and purchased a license after only 10 minutes of using it.

17:00 — End of day 1

Day 2

08:15 — Breakfast

Again all attendees were welcomed with a nice breakfast and drinks in the hotel restaurant. Having breakfast together as a group really provided a nice cosy atmosphere.

09:00 — RxJS

In this lesson we learned about Observables in Angular 2 and Hot versus Cold observables. We also learned how to use the ngOnDestroy lifecycle hook to clean up subscriptions and how the async pipe comfortably cleans up after itself.

09:20 — @ngrx

In this lesson we learned about Reactive Extensions for Angular 2, also called @ngrx. We learned how dispatch actions with a type and payload using @ngrx and how to subscribe to state changes.

09:45 — Authentication

In this lesson we learned about JWT Authentication in Angular 2 and discussed how Angular 2 does not have HTTP interceptors as AngularJS 1.x has.

10:30 — Break with coffee and snacks

11:00 — Busy handler

In this lesson we learned how to show a loader using an Observable subject when the HTTP service is busy.

We also learned how to add a debounce time to a search input to prevent unnecessary HTTP calls while the user is typing.

12:30 — Lunch

We enjoyed another great lunch with fresh foods and lots of veggies.

13:30 — Exercises

After lunch we finished some practical exercises.

14:00 — Change detection

In this lesson we have a look at Zones and the different change detection strategies such as CheckOnce, Checked, CheckAlways, Detached, OnPush and Default.

14:40 — Forms

In this lession we learned about the difference between template driven and model driven forms in Angular 2.

15:30 — Break with coffee and snacks

16:00 — Scalable architecture

In this lesson we learned how Brecht uses Sandboxing and ActionCreators to create a scalable architecture. We learned how to use Sandboxes as bridges between business logic and presentation (view) to make it possible to develop view layer and business logic separately so that if one is refactored, it should not impact the other. Finally we learned how to use ActionCreators to centralize the logic of dispatchable actions.

17:00 — End of day 2

Conclusion

I really loved Brecht's workshop.

Brecht was very knowledgeable and friendly and shared a lot of practical tips from his prior experiences building large web applications.

The other attendees were great, the venue was nice and the food was delicious.

The workshop was laid out well, alternating between theory and practical coding exercises.

Brecht limited the workshop to a maximum of 8 attendees, which resulted in a cosy atmosphere and enough time for everyone to ask questions during the sessions.

As a Front-end Architect I especially enjoyed the architectural topics.

Would I recommend this workshop to others?

Yes, absolutely!

Beware though that this workshop is NOT for unexperienced front-end developers.

If you already have extensive knowledge of JavaScript and you want to take your knowledge to the next level by learning how to build a well-structured and scalable Angular 2 application, then this workshop is perfect for you.

It is a 2-day rollercoaster of best-practices and architectural advice from a great teacher with a lot of experience.

If that sounds good to you, then don't hesitate to sign up: it's worth every penny!