So you want to take CS3216?

To be perfectly frank, you probably shouldn’t. Specifically, don’t take this if you:

  • value your grades - your grades for CS3216 itself will probably be fine, but this module will affect your grades for all other modules taken in the same semester.
  • have no web development experience, if you’re looking to sign up as a developer. This module teaches you very little, and you’re expected to start on the first project immediately. Even if you’re looking at the designer position, try getting some experience working with web design first - skip to after the break.
  • want to have free time - free time during CS3216? Hahahaha.

Let’s start with the good. You will learn a lot - some of it through the lectures, but more on your own and working in your team, because you are going to be building applications using cutting edge technology and APIs, than anything from the lectures. At the end of the module you will almost certainly have something nice to show for your portfolio. You will step outside your comfort zone and do something you’ve never done before, be it talking to customers, doing marketing, or working in a multidisciplinary team. These are all good things to take away from the module.

Now for the bad. As far as being the School of Computing’s flagship module go, this module is surprisingly poorly run. Assignment rubrics are not provided before the assignments are due, so for some assignments I found myself working blind. The amount of feedback for your assignments is abysmal compared to the amount of work you put in, and the marking feels lazy. Whoever assessed our assignment 1 app - a game - did not even finish a single round of the game (which would involve no more than four button clicks). We got about a paragraph of feedback in total for an assignment that took three weeks to complete.

Your experience in the module depends greatly on your classmates. Although the vetting is tight, sometimes it doesn’t feel tight enough. In any team based module there’s always a chance the rest of the team won’t pull their weight - this is true even in CS3216. The “multidisciplinary” part I mentioned above also dependent on the applicants; 90% of our class came from the School of Computing, which means many of the teams are composed entirely of developers. There are final semester students who are trying to squeeze seven modules and an internship, who can’t contribute because there’s literally not enough hours in a day to do 3216 together with everything else they have.

The module tries to push its student to use the latest in technology and emphasize that the final product should be cool, yet at the same time build products that are actually viable in the real world. There’s an inherent conflict between these two goals, and most CS3216 project leans towards the ‘cool but impractical’ end of the spectrum. Fundamentally, the combination of tight deadline and an emphasis on coolness leads to most project being flashy tech demo that are unsustainable due to poor validation, or take on heavy technical debt that makes further development difficult.

Still want to join 3216? Let’s go through some things you might want to learn before taking the module. You don’t need to know all of these, but if you want to work in a particular role it would be a good idea to have at least a working knowledge of each the topics for that role.

The Basics: HTML + CSS

Doesn’t matter if you’re a designer with no coding experience, or a backend developer with no desire to touch frontend code - you need to know how HTML + CSS works. If you’re building web applications, you can’t run away from these.

Resource

Exercise

  • Learn how to code a simple static page from scratch. Recreate a page from your favourite website without looking at the page’s source.
  • Understand the separation of concern between HTML and CSS, and explain why outdated techniques such as table-based layout are incorrect using the concept of semantics.
  • Explain how responsive design works, and make any page you’ve previously built responsive.

Extension

  • Explore preprocessors such as Pug for HTML, and SASS for CSS, and alternative markup languages like Markdown, which help you write HTML and CSS faster and more efficiently.
  • Learn to use a CSS framework - see Bootstrap, which help to remove a lot of the grunt work, giving you a set of easy-to-customize base to work on.
  • Explore naming systems for larger projects such as Object Oriented CSS.

Backend: Sysadmin and deployment

Sysadmin and devops are traditionally very demanding roles. Fortunately, CS3216 doesn’t require that much - scaling is very unlikely to be your concern, and using modern platforms like Digital Ocean you can get a VPS instance up in a few minutes. Still, it’s still good to get some experience so you can get your server up as quickly as possible. Automatic deployment and Continuous Integration (CI) tools can also help reduce the workload on your team by automating as much of the process as possible.

Resource

Exercise

  • Start an instance on any cloud hosting platform, and set up your preferred server-side framework from scratch, including a relational database and a server to serve the pages.
  • Explore automating the deployment process using Fabric. You should be possible to deploy from your version control system to production with a single command.

Extensions

Backend: Database

Every application you’ll build will need some form of persistent data storage. A working knowledge of database design is important because a poorly designed database can cause significant problems down the line. You should learn how to design a normalized database schema, how relations are expressed in schema, when to use index, and how to work with your preferred database system (I would recommend Postgres) from the command line.

Resource

Exercise

  • Design a normalized schema for a simple data driven app such as a blog or a Stack Overflow clone.
  • Write some raw queries for your hypothetical app using joins and sub-queries.
  • Explain in what situation might it be necessary to denormalize the table, and explore the tradeoffs involved.

Extension

  • Investigate NoSQL databases such as MongoDB or Firebase, and compare them to traditional relational databases.

Backend: Server-side Frameworks

Server-side frameworks allows rapid prototyping and abstract away common server-side tasks so that you can focus on code that actually matters. Most of the business logic of your app will be written here, so take your time to familiarize yourself with one or more frameworks. My personal recommendation is Django (Python), because of automatic migration generation and because Python is a really nice language. Other alternatives include Rails (Ruby) and Laravel (PHP).

Exercise

Build a simple app such as a blog or a RSS reader. Exercise as much of the framework’s capabilities as possible - not just the basics like the ORM and components of the MVC, but also file uploads, emails, authentication and permission systems, because chances are you’ll find yourself needing them.

Extension

Frontend: JavaScript

JavaScript is the browser’s scripting language. Web applications today use significant amount of JavaScript to build complex and highly interactive user interfaces. However, for beginners it would be better to learn the fundamentals of the language and use it to simply enhance static web pages before learning about how to build web applications.

You should also familiarize yourself with the Document Object Model, or DOM, which is how browsers expose the structure of the HTML document as a programmatic API.

Resource

Exercise

  • Build something cool with your newfound power over browsers. You can try sprucing up the website you built previously, building a userscript to change the behaviour of websites you use everyday, or anything you fancy, really.
  • Play around with and get use to using the developer console and script debugger in your preferred development browser.
  • Explore build tools like Gulp for managing the asset pipeline for a website.

Frontend: Web Applications

Modern web apps start from two simple ideas:

  1. Asynchronous JavaScript and XML (Ajax) - web applications do not need a full page reload to exchange state information with the server.
  2. Reactive programming - instead of fiddling around trying to dictate how your app should respond to state changes, simply declare how the app should look given the state, and the underlying framework would take care of the rest for you.

These concepts, combined with the proliferation of HTML5 APIs means that the browser is a full-fledged application development platform. Pick a modern client-side framework - I recommend Vue, but you can also use React or even Angular. Along the way you should also learn ES6, the modern incarnation of JavaScript, and how you can write ES6 and 7 while still maintaining backward compatibility using a transpiler like Babel.

Resource

Exercise

Build a simple client-side app using your framework of choice. A chat app or a todo list are good examples of apps that will benefit from being client heavy. Same as server-side framework, try to exercise as much of the framework as possible, although in this case you’ll be much more concerned about client side routing, backend communication and clean separation of concerns between view and view-model or controllers.

Security

Security is a fundamental, yet oft ignored part of web development. Using a modern framework like Django takes care of a lot of the common security issues, but does not absolves the developer from actually understanding security principles and common vulnerabilities. If you have not taken CS2107, now would be a good time to get a working knowledge of web security.

Resource

Exercise

  • Explain common vulnerabilities like SQL injection, CSRF, XSS and clickjacking, and how to prevent them.
  • Construct a secure login (authentication) and permission (authorization) system from scratch within your framework of choice, without looking at the code of any existing implementation. Pay especial attention to how passwords are stored and the security concerns for the password recovery (forget password) and email verification functionality.
  • Explore and compare the different options for authenticating users, from traditional session (cookie) based authentication to token and JWT based options.