Teaching Web Development
This fall, I’m teaching CS 3320, Internet Software Development. The class hasn’t been offered for a while, and students seem quite excited to take it (it’s currently maxed out with a full waitlist).
Since this is the first time in a while that this class has run, I’m recreating it from scratch. You can check out the course web site here, including the syllabus and list of resources; I expect that I’ll also be publishing assignments and lecture notes there as the semester progresses.
One of the big tasks in getting this ready has been selecting a tech stack. There’s just so many to choose from! Three primary goals have driven my decisions:
- Provide students with a full-stack experience, from storing data on the back end to interactive JavaScript and AJAX.
- Minimize the number of distinct technologies, particularly languages, that students have to learn in order to gain this experience.
- Don’t layer too much magic on top of the underlying infrastructure (e.g. HTTP and HTML), so that students can gain a good conceptual understanding of how things work.
On the front end, I’ll be teaching HTML5 and CSS3 directly; we won’t be spending time on HTML4 or XHTML except as a historical detour. We’ll be using raw JavaScript, not CoffeeScript or TypeScript. I do plan to use jQuery, as it makes a lot of things easier to write; however, the obsolescence of less-capable web browsers makes its compatibility features less important, and querySelectorAll builds its historical killer feature directly into the browser.
We’ll be writing raw CSS, using Pure as our base layer. I thought about the choice between Foundation, Bootstrap, Pure, and nothing; I’ve used Foundation for other projects and enjoyed it, but it’s quite heavy and has a lot of magic. I personally find Bootstrap’s pervasiveness to be a turn-off, because the results say ‘Hi! I’m a Bootstrap site’. That doesn’t make Bootstrap bad for teaching, but it does mean I don’t know it. Pure has the advantages of being simple, small, and built to work without a preprocessor. Preprocessors are wonderful — I use SASS for almost all my web work — but it’s one more moving piece to install and makes the syntax somewhat more complicated. Eugenia suggested Pure, and I’ve been sufficiently satisfied with it building the course site that I’ll go with it. It does require the HTML to be littered with quite a few appearance classes, but that seems useful for teaching anyway as it lets students see more of how everything works.
We’ll be using Python + Flask for server-side programming. They’re dependable, stable choices that are relatively easy to learn. Flask’s minimalist approach makes the underlying HTTP semantics quite visible, and it doesn’t come with near as many layers of magic as something more sophisticated like Django. And if they master the basics of routing URL s to view functions, those skills will transfer to most web platforms. Also, Flask has excellent documentation (Django’s isn’t bad, I just find Flask’s to be particularly good).
The one thing that I’m still uncertain about is storage. I will most likely use SQLAlchemy + Alembic + SQLite, so my students can store data without learning SQL (that’s another entire class). I am also considering MongoDB, as that will let us store and query data directly with the lists and dictionaries we’ll be making heavy use of elsewhere.
Finding learning resources has been difficult. Flask has great docs, and the Mozilla Developer Network has good reference material on HTML, CSS, and JavaScript constructs. However, there are a lot of moving pieces in the front end, and good resources that are current and provide an introductory perspective to how everything fits together have been difficult to find. Most of what I’ve seen, particularly in book form, has at least one of several problems:
- Out-of-date (HTML4, etc.)
- Focused on a single technology (I don’t want to ask my students to buy 7 books)
- Intended as a refresher (most of the HTML5-and-CSS3 books I found were aimed at experienced web devs looking to update their skills, not new programmers getting started)
After a bunch of searching of the usual suspects (O’Reilly, No Starch, Manning), I finally found HTML & CSS and JavaScript & JQuery by Jon Duckett, published by Wiley and conveniently sold as a bundle. I ordered them based on the currency of the material, table of contents, and being able to have one purchase unit to cover the entire front end; when I got them and started paging through, I was very impressed. They’re not your ordinary wall-of-text tomes, but are colorful, graphical depictions of how the pieces of front-end development fit together. I highly recommend them for people just starting out in learning front-end web development.
The class is going to be highly team-based; the second week we’ll be forming teams, and 5 of the 8 projects will be done in these teams. There will be a few solo assignments and quizzes to assess students’ individual understanding, but no major exams or final.
I’m excited to see how well it works out.
[HTML]: HyperText Markup Language [HTTP]: HyperText Transfer Protocol [CSS]: Cascading Style Sheets [CSS3]: Cascading Style Sheets Level 3 [HTML5]: HyperText Markup Language version 5 [HTML4]: HyperText Markup Language version 4 [XHTML]: eXtensible HyperText Markup Language [AJAX]: Asynchronous JavaScript and XML [SASS]: Syntactically Awesome Style Sheets [URL]: Uniform Resource Locator *[SQL]: Structured Query Language