Conf42 JavaScript 2022 - Online

Teaching JavaScript to the uninterested

Video size:

Abstract

For a couple of years, I taught beginner programming to high school and university students who did not intend to be developers. The members of these classes did not have an engineering background and only applied for fun — or because the curriculum forced them to. During these times I went through multiple iterations of my course materials and changed many of its details including the language being taught, the editor being used, and the storage of the resulting programs. I kept the parts that worked well in the previous semester and threw out the ones that did not. I had some very positive feedback along the way, along with some total failures. In this talk, I am sharing my learnings from these classes and invite the audience to help me improve the material even further with their feedback.

Summary

  • Jamaica real time feedback into the behavior of your distributed systems. In the fall of 2016, I had the interesting challenge of teaching beginner programming to a class of university students. My basic goal was to give them a sneak peek into the world of coding and an experience and feeling of success.
  • The course was designed to teach programming to hungarian students. It was based on a port of processing which was written in Java and p five js written in JavaScript. Javascript is much more concise and expressive than Java. Curly found that understanding variable scope was a big hurdle.
  • I fired up JS being, which is an online coding sandbox, like JS fiddle and some others. This was the one that fit the purpose the best. It's stupid easy and stupid streamlined. I am somewhat sorry of using a floppy icon for saving.

Transcript

This transcript was autogenerated. To make changes, submit a PR.
Jamaica real time feedback into the behavior of your distributed systems and observing changes exceptions. Errors in real time allows you to not only experiment with confidence, but respond instantly to get things working again. Close in the fall of 2016, I had the interesting challenge of teaching beginner programming to a class of university students who never actually intended to do any coding in their lives. Let me give you a little bit of context of how I got there, lay out my goals, and tell you about how that all went. So for context, originally it was actually not me, but a friend and colleague of mine who was invited to the university to do this course of beginner programming to art students. And I accompanied her to help out as a mentor, that is, mentoring the students, which means when they are all doing exercises and multiple students have questions at the same time, it's useful to have multiple people there. So she was going to be the teacher, I was going to be a mentor to help out at the end of the semester. She said she wasn't interested in teaching another course as a teacher, but she would be happy to come along as a mentor. I, on the other hand, got very excited about teaching. So I stepped up and said I would be happy to lead these next semester. I got very excited because I love thinking about how to explain difficult concepts in a way that is easy to understand. And by that time, not only had I participated in this semester, I also took part in multiple one day workshops of like crash courses of teaching beginner programming to non programmers. So I had seen a lot of examples and ideas and patterns and great teachers. But I also had my own ideas, and I saw some opportunities for improvement. Now, at the end, I ended up teaching three semesters to university students and also ones for high schoolers. And during that time, I was able to iterate on the curriculum every year, keep the things that were working well, drop the things that were not working that well, and get feedback from the students at the end of each semester. And now, that was a time of varying success, but also a lot of learnings. And I'm here to tell you about those learnings in order to understand why we did some of the things that we did. First, let's look at the goals. What were we trying to achieve? What would we have considered success at the end of the semester? Where did we want to get? And the bottom line is that these were people who are not programmers. They were not going to be programmers. They never intended to be programmers. And so my basic goal was just to give them a sneak peek into the world of coding and an experience and feeling of success, because I feel like this world feels like something unachievable for most people and I wanted to be inclusive, invite them in and give them a feeling of being capable of achieving success in this world. This kind of influenced the general format, which was no exam at the end of the semester. Thankfully, the university gave me almost complete freedom in how I was going to shape the requirements. The one thing that they set out was attendance was mandatory. But other than that, it was all up to me. And so even though I gave up homeworks from week to week, and I also gave them a task, at the end of the semester, there was no specific exam and there was no specific point where we had to get like, there was no problem if by the end of the semester we missed learning something that I was originally planning to do, because the idea was to introduce these to this world. This also very heavily shaped the mindset of how we were teaching. We were repeatedly telling them that there is no stupid question. These only stupid question is the one that you don't ask, because if you don't ask it, you stay stupid. And so we were trying to be very open and very safe and make everyone feel comfortable with them not knowing stuff and not understanding stuff, and make them understand that trying was more important than getting it right the first time. It was perfectly okay to poke around, even if you didn't have a very specific idea of what you wanted to achieve. And I made sure to tell them that I myself, as a software engineer who did coding for a living, I also often do that by trial and error, and I don't get it right the first time. And I told them that software engineering, when you write code, you don't write it from the top all the way to the bottom. You put something out there and then you massage it until it starts doing what you want it to do. This massaging comes from a deck lead of mine. And one other very important thing was how I needed to make some decisions around which specific examples and techniques and patterns to teach. And there was a trade off between patterns that were easy to understand and patterns that were widely applicable, as in applicable outside of the context of this course. To be a bit more specific, if there was a function that I wanted them to call, but it had a too complicated of a signature and I could easily wrap it in a helper function that was just much easier to understand than call, I had to make a choice of do I give them a helper function, in which case they will understand these easier, but then if they ever look up the documentation for the framework of what we are learning, they are not going to see that helper function. These, if they ever look up languages outside of my course, these are not going to see the patterns that I'm teaching. So I'm kind of closing them in a little bubble of my patterns and conventions and syntaxes and helper functions. So there is a bit of trade off there. And I made these decision that because these course was not about putting them on a certain level and to a certain curriculum and to a certain knowledge and skill level, this was more about making it click for them and making them experience, success and ability. I decided to go the way of putting them in a bubble. And I thought it's more important that they walk away with the feeling of being able to get into programming if they ever need to, than if they will see the exact patterns that also exist outside of this course. Even if the specific syntax or the specific helper function is not applicable in a different context, the skills are certainly applicable, the concepts are certainly applicable, and more than anything, what is applicable is that they have the understanding that they are able to do this and they are able to get into this. And so with this in mind, what did we end up actually teaching? Well, I wasn't coming up with this curriculum from scratch. I had examples and patterns in front of me from these circle of friends and colleagues who were already teaching such courses or workshops. And the programming language and framework that everyone used was one called processing. Now this framework was specifically created to teach programming to beginner. It is supposed to be very visual, very easy to understand, and very easy and quick to get to programs that are actually nice and enjoyable and do stuff. And so that was going to be my baseline. However, I did decide to go on a duvet. There existed a port of processing which was written in Java, and the port was written in JavaScript. It ran by the name of p five js, and I decided to use that ones instead of the original processing. And there were a number of reasons for that. Processing was already very well established, it was popular, it had a community and good tooling around it, and p five JS was not as well known as not as well supported. And still I decided that it was just these better choice for this particular course. One of the reasons why I went with that is the fact that processing was using Java and p five js was using JavaScript. Now why does this matter in this particular context? First of all, we all know that Java tends to be a little bit verbose and it's also pretty strict compared to JavaScript, which of course is a dynamically typed language, and it's also one that was born as a scripting language, and so it can be much more concise and expressive. And I thought that was very important at this point. Keep in mind that these were hungarian students who of course spoke English, but words such as void or string or integer, these are not part of your everyday vocabulary when you're just talking English as an art student. And so that was going to be a little bit difficult. And additionally, Javascript was flexible enough to let me do some custom conventions and modifications that would have been impossible to do with Java. Let me show you what I mean. On the left had side you can see an example with Java, and of course when you're creating variables, you have to tell the type. And now you need to remember these words. You need to remember to spell string with an uppercase, s and int with a lowercase. You need to remember that if you create a variable you need to write out the type, but if you modify it later you don't. You need to let's not even talk about arrays, that's way too much. And on the right hand side you see the Javascript equivalent. You'll notice that I just dropped VAR. Let const didn't do any of that, which is certainly not a good practice if you're actually writing production code. But if you just went to introduce the concept of variables to students, it's very handy because it's just so much easier. You write a name, an equal sign and a value, it doesn't even matter if the variable exists already or you're creating it right now, just works. It also had the added benefit of putting all of these variables in the global scope, which once again you wouldn't do that in production code. But when teaching, I found that understanding variable scope was just too big of a hurdle. It wasn't worth it to try to explain that. So it's just easier to say if you create a variable, it's there for you to use, and you don't need to worry about it. You will also notice that I'm not using any semicolons. Javascript lets you do that with automatic semicolon insertion. And yes, we all know that there are a handful of corner cases where you cannot rely on automatic semicolon insertion, and then your code does something else than what you intended it to do or just doesn't work. But I knew that we were never going to write that type of code, so it was just easier to drop it. And it might be second nature for you to hit the semicolon key on your keyboard. But keep in mind that these were hungarian art students, so they are not writing so many semicolons or special characters. Curly braces were also a big problem because it especially counts that on the hungarian keyboard we need to have more letters because the hungarian Alphabet has more letters than the Latin. And so many of the special characters that are just simple keys on an english keyboard, they need to be accessed via modifier keys. On a hungarian keyboard, you need to press altgr to access certain keys. I don't know when you use that. The last time, of course, I'm talking about Windows machines. And so it just proved to be very useful to be able to drop that. You wouldn't believe how much time people were wasting just looking for characters. And it's just not the useful type of time to spend when you're trying to learn programming. You could also say that, well, the code on the right hand side, that just looks like Python. So why didn't I just go with Python? And you would kind of be right, it does look like Python. I think Python is an amazing language to teach for beginner, and I believe there was some kind of port of processing to Python, but there are other aspects that I needed to keep in mind. And so let me talk to you about these as well. One of these considerations was that for P five js, I also had an extension developed by someone, which is that one of these considerations was that for P five js there was an open source extension called P five Play, which wasn't available. One of those considerations was that for P five js there existed this open source extension called P five Play. To understand why that matters, let me first show you what processing looks like. This is the example program that the website gives you. It creates a canvas a given size. Let me not get into the function name choice of size when what you want to do is create a canvas. But what you will notice is that this very minimal, very simple example that they give you on the web page, it already has more numbers than letters. And it's really difficult to sell when one of your bottom line messages is that you don't have to like mathematics in order to get into programming, because this is coordinate geometry. And let me tell you, not a lot of people like coordinate geometry. It's extremely useful, and at the same time, it's just not intuitive. This is not how people think about the world and about where things are and what they do. And so what p five play let me do is it gave me sprites. These sprites are some kind of actors in the program. You can create a sprite, you can put it somewhere on the canvas and then you can move it around, you can rotate it, you can change its appearance, you can make it move, and you can create multiple sprites, and you can make them meet and collide and behave differently. And this is just so much closer to our intuitive world of having actors which exist in a space and interact with each other rather than getting a canvas and then providing a bunch of numbers to have something show up on the canvas. And these, okay, what do you do with it now? I put that little turtle there because I got a lot of inspiration from a logo language, namely communist logo. That actually was the first language that I ever learned. Logo languages feature turtle graphics. They give you a canvas and they put a little turtle in the middle, and these turtle has a pen, and you can tell the turtle to move forward or backward or rotate, and as the turtle moves around, it draws a line with the pen and you can use this to create drawings. These is a very intuitive concept to grasp even as a kid, because if you can control a remote controlled car, toy car, you can control the turtle. It makes a lot of sense. And so I got a lot of inspiration from logo and P five play. Let me do something very, very similar with these sprites. Another thing is that if you take a look at this so called processing development environment, it's nice that it's a standalone executable that you download and run on your machine, but then you get the impression that code or program is what you type into this box. It lives in this box, that's the code that lives in its own bubble. That's all it can do. But with JavaScript it was very easy to just open up a browser, open the JavaScript console, and then change something on the web page that we were looking at. And that gives you an instant experience of just how close this programming language is to your everyday life and that it's right there under the hood. And of course you could argue that Java is right there under the hood of processing, but you cannot open that hood, whereas with the browser that you use every day, you can just open up the hood and start interacting with the web page using JavaScript, which is a very powerful experience and concept. So that's also why I did that. Not to mention that very helpfully, browsers have a JavaScript console which is a repl, read, evaluate, print loop, or if you prefer read, evaluate, execute loop. The processing development environment doesn't have that. It had an area where you write your program and then you can execute the entire programs from top to bottom, and then you can modify something and re execute it again, which is a bit of a more difficult concept to get familiar with than when your actor is there on the screen and you have command line, which is, as its name shows, is the place where you give commands or instructions. And so if you instruct your actor to do something, it just does it, and there you are, and then it stays in that place, and then you can continue giving it instructions and it will interact with you, it will react to your instructions, which is once again I think a really good introduction to programming to start with a repl, rather than writing entire programs at the very beginner. By the way, this is also something that logo languages do. And if you went another example, the official Python tutorial also starts out with opening these Python interpreter and using it as a calculator, which is not super useful per se, but once again a very easy to understand concept. You type something in, you get something back while you're doing Python, and then you can move into more complicated things then. Here's another thing where I changed how previous curses were run, which is that saving and distributing our code. I had seen cases of saving your code on a pen drive. I had seen cases of trying to save your code to GitHub via GitHub desktop. This was especially important because people were not always using their own machines. VV provided machines, and so they needed to be able to access their code even if they were using a different machine than on the class before. Not to mention if they wrote some code during the class and then they went home and wanted to write homework, they would have had to access their code. So previous teachers used pendrives and did GitHub desktop. But to be honest, GitHub, the git usage is just not something that you want to start your beginner course with. And even with a GuI like GitHub desktop, it just gave us a lot of struggle and a lot of problems and a lot of time wasted, and it's just not worth it. And so instead, what I did was I fired up JS being, which is an online coding sandbox, like JS fiddle and some others. This was the one that fit the purpose the best. And it's really great because once you are registered, you just need to log in and all of your programs are there, and then you go home, you log in, and all of your programs are there, it version controls them, so you don't need to worry about that. And it has a bunch of other nice features, such as if you get stuck with something, with your homework and you need to message your teacher, all you need to do is send over the URL. And sharing your code is as easy as that. It's just about sending a URL, or if you want to show it to someone else, you just send a URL. And if you want to run your code on a mobile device rather than your desktop, you just open the URL. Whereas with processing, these are all problems that you would have had to solve, as in how do you distribute, how do you share, how do you run it on a phone? And there are solutions for some of these problems, but all of them require extra work, extra setup, extra thinking. And with JS being, I mean, you don't even need to install anything on your computer, just like you do with processing development environment, or some kind of code editor or whatsoever, you just open up your browser and there it is. It's stupid easy and stupid streamlined. And it worked very well for us. I am somewhat sorry of using a floppy icon for saving. I know it's very outdated, but it gives me very nice nostalgia vibes. And so I had taught for three semesters, I had been teaching university students, and then one more semester for high schoolers, and at the end of each semester I asked for their feedback. And sometimes it was good, sometimes it was had. One of the main learnings was that when I was teaching a class of students who not only did not intend to do programming for a living, they also did not intend to do any programming during my course. They were totally uninterested and not willing to put any work into it. That course just failed. Like I wasn't going to force them to do work that they weren't interested in doing. I might not be a good teacher, but I basically gave up on them because they also gave up on the entire thing. And so we basically let that one go. But on other courses with a class of students who had no previous knowledge whatsoever, but they were interested and willing to get into the topic, we had really, really nice successes and experiences based on the feedback, the students really liked it. And the nicest feedback that I ever got was that at the end of one of these university semesters where students have to fill out a teacher evaluation form for the university itself, those forms are these evaluated by the university. And it turns out that for courses between ten and 15 students, so like small groups, I got the highest teacher status faction score in that semester, for which I got a nice prize. And that gave me some really strong feedback that I'm going in the right direction. This was all that I had for you today. I hope you find this useful. Have a good one.
...

Marcell Endrey

Frontend Developer @ Wise

Marcell Endrey's LinkedIn account



Awesome tech events for

Priority access to all content

Video hallway track

Community chat

Exclusive promotions and giveaways