70.000 Blocks later

I became a lecturer at my university for the 5.th semester's bachelor module "Webengineering". This is a blog post about experiences and insights I got.

The goal was to convey knowledge about current "state of the art" web engineering, which is in fact a really hard task. Current state of the art web engineering in 2019 is too broad and therefore hard to define. (Especially when you look inside the Web Developer Roadmap 2019)

However, the limitation that there is only one semester (about 15 sessions) forced me to focus on "the important things". So I decided to deal with React and the current applied concepts in web development. By this is meant: Routing, State, Flux, Consuming APIs, Async/Await.

For grading purposes I wrote a blockchain server the "pokecoin-server". It's a web server written in Fastify (Node.JS). The students had to write a React application which consumes the pokecoin-server. The React application had to provide a registration and login. After login, the user could "farm" pokecoins, which is nothing else than a block in a blockchain with the Proof-of-Work of 6 leading zeros for the hash (similiar to bitcoin). If a user farms 25 pokecoins, he is able to buy a "booster pack" with virtual pokemon cards. To gamify the whole implementation process there was a leaderboard, where everyone could see the current farmed pokecoins and bought cards of every user.

As I started the course, I assumed that everyone can code in Javascript. That was wrong, next time I will give an introduction in Javascript. 🤦‍♂️

So the first lesson was about React itself. What is React? How to initiate it? How do components look like? I prepared lecture slides, which I created with reveal.md. With reveal-md one writes Markdown and seperates slides with three dashes --- and sub-slides with four dashes ----. In my opinion a really nice tool to create slides because I don't care about styling (at least not for each page), I don't want to move things from a to b (like in Powerpoint) and I don't want to loose a lot of time. I just need information displayed on slides properly and generated as HTML and PDF, which was delivered by reveal.md.

All in all it was a bad decision. I realised that I cannot just write down my knowledge on a slide and expect that this knowledge gets injected in the same structure and fullness into student's heads.

From not coding in javascript up to a create-react-app my-app call there are so many obstacles for students to understand this huge and complicated world of node and js.

So I threw away all my prepared slides and started with Mob-Programming. After we had already some sessions together the students had a rough overview about the topics like: how to create a react app, write a functional or class component, pass in some props and define some state variables. We started a Mob-Programming session where I was "the driver". The task was to implement a Todo-App. The students had to explain me exactly what to write in the source code. They started to work collaboratively, solve the task and finally to raise the right questions while we encouter different parts of the exmaple application:

  • When do we use functional components, when class-based?
  • When do we pass props into componenets, when to use state?
  • Why we have to .bind(this) methods in class components and not in functional?
  • Why there is useState() and this.state and why I can't use useState() in functional components?
  • ...

I mean, there is a simple answer for each of these questions but those questions are essential to understand the React ecosystem. To raise those questions indicates to deal with basic problems and also to gather knowledge what you can't get through a tutorial on the web or reveal-js slides. And that knowledge is created in a common manner of the course.

This kind of teaching reminds me of flipped classroom which is just a strategy. Mob Programming promotes an actual method to execute flipped classroom.

Note: The Mob-Programming session could only work because we were a class of 15 students. In my opinion mob programming with 15 students is also not the right size but somehow it's close to the border.

There are two different categories of knowledge. The first one is the theoretical knowledge the second one the practical (also called tacit and explicit knowledge). Theoretical knowledge is a preserved knowledge. It's without any context, it's black on white, it's just rememberable words which can be transfered the context of the reader. Practical knowledge can't be preserved. It can be only trained by actually doing the theoretical knowledge. And by actually doing things one can hit on problems and gain unique know-how.

The flipped classroom strategy allows students to read the theoretical material within the time frame which is best for students and then discuss the material together in the course. If it comes to such a practical university subject like Webengineering than practicing flipped classroom with Mob-Programming is the best choice. Students can really learn practical knowledge, which is essential for programming Web stuff.

In the end the students farmed over 70.000 blocks, created 53 users and bought 290 cards and I hope the most important thing: that they had a lot of fun and learnt a lot.