1 Introduction to full stack web development

1.1 Objectives, and Learning Outcomes

Warning: This is a programming course that uses current industry standard tools that you must install and use. The assignments will seem very simple/easy at the start but expand and build on each other to become quite complex.

Full stack web development includes development for the front end (browser or mobile platform), the backend (servers of content and/or data), and the network (protocols and architectures).

Front-end learning objectives/outcomes: student will be able create styled web pages, Graphical User Interfaces (GUIs), multi-page static web sites, and front-end only applications using:

  • HTML5 and its Document Object Model (DOM)
  • Cascading Style Sheets (CSS)
  • JavaScript (ES 6)
  • A modern front end framework (library) such as React or Vue.

The student will understand, apply, be able to evaluate various techniques for creating large and maintainable “static” websites including Templates and Static Site Generators.

The student will learn Server side (back-end) fundamentals and apply them to the creation of dynamic websites and web apps. Key learning objectives/outcomes include:

  • Understanding and applying Web Networking basics including TCP/IP, HTTP(S), URLs, and DNS. These are important for configuring websites and servers, but also in the debugging of web applications.
  • Understanding the role and functions of Web servers and server frameworks. The student will abe able to create custom web servers using Node.js, Express.js and the No-SQL database NEDB.
  • Understanding basic Security concepts, threats and mitigation techniques for web developers. The student will be able to create a multi-user website/app utilizing password based authentication with role based access control for authorization and understand the security issues associated with such a website.

The student will gain experience with and understanding of a set of modern software development tools and techniques including:

  • Procedural, object oriented, and functional programming techniques applied to the client and server in JavaScript. This will include at least two asynchronous programming techniques: callbacks and promises.
  • Markdown, Git/GitHub (remote repositories, branches), Node.js, NPM (the largest open source software repository), and modern browser development tools.
  • Software integration and debugging. Web development requires integration of potentially many different file types CSS, HTML, and JavaScript that may have interdependencies. This presents new challenges when debugging a website or app, i.e., which file or combination of files is leading to the bug. For full stack applications the debugging complexity is further increased by the fact that we now have to deal with multiple software systems interacting over a network.

2 Required Readings and Software

2.1 Required Readings

Students are required to review the course slides for each module taught in class and to read the supplemental material indicated in the slides. These form the course readings.

Readings for each course module will be assigned weekly from the following free sources:

  1. Mozilla Developer Network will be our main source for learning materials and we will follow the following learning tracks:
  2. CSS-Tricks: Great CSS resources. We will use them as primary reference material for CSS Flexbox and CSS Grid.

Other recommended references: Smashing Magazine and W3Schools.

2.2 Required Software

This course uses modern industry standard development tools and techniques. You are responsible for installing these tools on the computer that you will be using for this course. All these tools are free and Open Source.

Note that your development environment is your responsibility! I cannot configure your computer for you. I will encourage students working on similar systems (Mac, Windows, Linux) to share information concerning any issues in setting up development environments. Problems encountered with computers, software, or networks do not excuse late submissions of assignments or exams.

2.2.1 Web Browsers

You will need an up to date version of either Chrome or Firefox. I use both.

The desktop/laptop versions of Chrome and Firefox contain debugging and development tools that are amazing compared to anything we had in the past. These tools are not present in mobile versions of these browsers.

2.2.2 Version Control

Every programmer should be using version control for all but the smallest projects. In this class we will use git.

We also need a way to privately share many files between student and teacher/grader. For this we will use GitHub classroom. We’ll learn enough about git to aid you in dealing with your assignments and personal projects on your local machine and with a remote repository. Use is required for all homework assignments.

2.2.3 Code editors

You will need a good code editor for use in this course. Features such as syntax highlighting, auto-indent, and some form of “auto-completion” should be present in even the most basic code editor.

Better editors provide (or have plugins that provide) code beautification (formatting), “linting”, extensive “auto-completion”, graphical git tools, etc. There are a number of extremely good free code editors. I use actually use several. I’d recommend looking at:

  • Brackets – Much smaller footprint than VSC, but with a good set of features.
  • Visual Studio Code – Full featured, free,integrated development environment with many useful extensions for web work.
  • Notepad++. Windows only. It comes up very fast and has a small footprint.
  • Atom

2.2.4 Server Side JavaScript and Package Management

We’ll use (and you’ll need to install) node.js for the following tasks:

  • Package management for 3rd party libraries and development tools via its companion program NPM
  • For running templates, Markdown processors, static site generators, JavaScript bundlers, etc…
  • Running our backend web server and application.