Creating an online interactive ES2015 classroom

Recently I was asked to run a workshop on ES6 at CodeHub Bristol, a great meetup you should definitely check out if you’re ever in the south west. Having done a few workshops in person I wanted to try something different in order to see if I could fix some of the problems I’d come across in previous workshops, such as attendee’s computers not playing with the software. To do this I built an online environment for the attendees to work with. If you’re eager to try it out or explore the code, it’s all on GitHub.

Problems with Workshops

From experience running some workshops in the past, there’s some issues that tend to surface pretty consistently:

• there’s always at least one person who has an issue with their environment on the day. This isn’t their fault, but nearly always we lose time to a weird npm install issue or something that just won’t play ball.
• It can be difficult to distribute the workshop materials ahead of time; despite all your emails about what to do ahead of time you can be certain not everyone will.
• when you’ve assigned the students a project to work on it’s difficult to know when they are all finished, or when you should move on. I’m always worried about moving too quickly, or not spotting someone who needs an extra hand.

How the app works

To solve those above problems I created a web app that I would use for the workshop. This app gets the students to solve a number of challenges in their browser. It’s written in ES6 and React using jspm as the package manager and build tool. The code for each challenge is editable thanks to CodeMirror, a fully featured JavaScript editor. To execute the code, which is written in ES6, it’s first passed through Babel which converts the code into ES5. All of that functionality is packaged up into ECMAScript Evaluator, a small module I created to transpile JS and make assertions against the results. The user is able to see the results of executing their code and make changes to pass the challenge.

I’m currently working on adding service worker support, which would enable users to continue to go through the workshop even if the WiFi drops (a common issue at workshops which I’m sure many of you have come across!). Service workers were a huge feature of the 2015 Chrome Dev Summit and you can check out an introduction to Service Workers on HTML5 Rocks. Service works run in the background of your browser and enable access to features including caching, push notifications and more. We are able to intercept network requests and respond with cached assets, meaning the user doesn’t need to be constantly online. If they visit the page once with WiFi, but come back later when they are offline, the service worker will serve up the cache and the site will still work.

Real-Time Dashboard

To solve the problem of not knowing when a student has completed a task, and allowing a student to make a request for help I reached for the Pusher JS library. Every time the user runs a challenge, the results are sent using client events over a Pusher channel. There’s then a dashboard view that logs every user’s progress as they make their way through the challenges.

Additionally, the student can hit the “help me” button to send a request for help, which includes the last challenge they ran and the state of their code. This isn’t anonymous, such that the person running the workshop can then go and help them.

What’s next

There’s loads of potential improvements that could be made to the web app, and if you’ve ever run or attended a workshop, I’d love to hear your pain points. I’m keen to continue working on this app to make it a viable alternative to the traditional set up of running code on each person’s machine.