CSE 331: Topics
The course is organized into 10 topics, and we cover one topic per week. Topics in the future are subject to change.
1. Intro to JavaScript
We start our journey to writing more complex, full-stack applications by learning a new programming language: JavaScript (JS). We will need JS to write code that runs in the browser (in Topic 2), but we can also use JS to write code that runs in the server.
We do not assume any prior knowledge JavaScript. We will cover all the parts we need in lecture. After learning the basics of the language, we will see how to write our own HTTP server in JS and then spend some time discussing how to debug the problems that we find in our code.
- Software Setup instructions (also see: Ed announcement on Day 1 Done)
- Knowledge Quiz (also see: Ed announcement on Day 1 Done)
- Lecture:
- Topic 1 Slides (PDF), Topic 1 Slides (PPTX)
- lecture 1: slides 1-44; lecture 2: slides 45-end
- Code:
- Topic 1 Slides (PDF), Topic 1 Slides (PPTX)
- Section 1 materials:
- Homework 1 worksheet (HW1 PDF or HW1 Webpage), due Wednesday, April 9th at 11 PM
- Changelog:
- Modified Riva's third class in
campus_schedules.csv
on line 47 to be the EEB instead of SIG. - Changed the expected output of the final manual test to reflect changes above.
- Modified Riva's third class in
- Changelog:
- James & Kevin's notes on debugging
2. Intro to the Browser
In this topic, we switch to writing code that runs in the browser, presenting a User Interface (UI) that the user can interact with. We will discuss how UIs are written in modern web apps versus other settings and see how the code of modern web apps gets split up into manageable pieces.
- Lecture:
- Topic 2 Slides (PDF), Topic 2 Slides (PPTX)
- lecture 3: slides 1-41; lecture 4: slides 42-62; lecture 5: slides 63-end
- Code:
- HTML example 1, HTML example 2, HTML example 2 (unsafe)
- hello1-starter (hello1-starter zipped), hello1-completed (hello1-completed zipped)
- hello2-starter (hello2-starter zipped), hello2-completed (hello2-completed zipped)
- todo1-starter source code (zipped), todo1-completed (todo1-completed source code, zipped), todo1-completed-with-extras (todo1-completed-with-extras source code, zipped)
- todo2-starter source code (zipped), todo2-with-types (todo2-with-types source code, zipped)
- hello3-starter (hello3-starter source code, zipped), hello3-multiple-components (hello3-multiple-components source code, zipped)
- (not discussed in class, but bonus): todo3-multiple-components (todo3-multiple-components source code, zipped)
- Topic 2 Slides (PDF), Topic 2 Slides (PPTX)
- Section 2 materials:
- Homework 2 worksheet (HW2 PDF or HW1 Webpage), due Wednesday, April 16th at 11 PM
- James & Kevin's notes on UI components
3. Client-Server Interaction
Having written already clients and servers separately, in this topic, we see how to connect them together into full stack applications. In this setting, the potential for difficult debuging is substantial. Bugs in the server can show up as failures in the client and vice versa, in both cases requiring us to debug across multple programs to find the bug.
- Lecture:
- Topic 3 Slides (PDF), Topic 3 Slides (PPTX)
- lecture 6: slides 1-28; lecture 7: slides 29-38; lecture 8: slides 39-end
- Code:
- todo client source code (starter), todo client source code (with GET /api/list; after 04/11), todo client source code (completed; after 04/14) (updated 04/17)
- todo server source code (updated 04/17)
- buggy todo apps: todo-buggy-1, todo-buggy-2, todo-buggy-3
- Topic 3 Slides (PDF), Topic 3 Slides (PPTX)
- Section 3 materials:
- Section Slides (Section 3 Slides PDF or Section 3 Slides Webpage)
- Section Worksheet (Section 3 Worksheet PDF or Section 3 Worksheet Webpage)
- Section Worksheet Solution (Section 3 Worksheet Solutions PDF or Section 3 Worksheet Solutions Webpage)
- Section Debugging Log Solution (Section 3 Debugging Log Solutions PDF)
- Homework 3 worksheet (HW3 PDF or HW3 Webpage), due Wednesday, April 23rd at 11 PM
- James & Kevin's notes on client-server interaction
4. Specifications
Before we can talk in detail about correctness of our code, we need a definition of what the code should do. This is called a “specification”. It is important that our specifications are precise. In addition, we would like our tools for writing specifications to work for any language, not just TypeScript. For those two reasons, we will use our own mathematical notation that is independent of programming language. (And we will find additional uses for this notation in subsequent topics.)
- Lecture:
- Topic 4 Slides (PDF), Topic 4 Slides (PPTX)
- lecture 9: slides 1-54; lecture 10: slides 55-98; lecture 11: slides 99-end
- Topic 4 Slides (PDF), Topic 4 Slides (PPTX)
- Section 4 materials:
- Section Slides (Section 4 Slides PDF or Section 4 Slides Webpage)
- Section Worksheet(Section 4 Worksheet PDF or Section 4 Worksheet Webpage)
- Section Worksheet Solution (Section 4 Worksheet Solutions PDF or Section 4 Worksheet Solutions Webpage)
- Homework 4 worksheet (HW4 PDF or HW4 Webpage), due Wednesday, April 30th at 11 PM
- Changelog:
- Updated Task 3 translation example to fix typo of
a
translating toz
- Updated Task 2a to call the non-zero natural numbers
- Updated Task 3 translation example to fix typo of
- Changelog:
- Matt's notes on using Mocha
- James & Kevin's:
5. Reasoning
Now that we have a better understanding of the work required to write and debug more realistic applications, we can see that being a productive programmer requires another tool, reasoning, which allows us to find the bugs missed by type checkers and unit tests. In this topic, we will see how we can reason formally and prove the correctness of code that does not involve any mutation. (Code with mutation is harder to reason about and will be examined in future topics.)
- Lecture:
- Topic 5 Slides (PDF), Topic 5 Slides (PPTX)
- lecture 12: slides 1-26; lecture 13: slides 27-64; lecture 14: slides 65-end
- Extra Reasoning (more structural induction) Slides (PDF), Extra Reasoning (more structural induction) Slides (PPTX) and Extra Reasoning (more structural induction) Slides video
- Topic 5 Slides (PDF), Topic 5 Slides (PPTX)
- Section 5 materials:
- Section Slides (Section 5 Slides PDF or Section 5 Slides Webpage)
- Section Worksheet(Section 5 Worksheet PDF or Section 5 Worksheet Webpage)
- Section Worksheet Solution (Section 5 Worksheet Solutions PDF or Section 5 Worksheet Solutions Webpage)
- Homework 5 worksheet (HW5 PDF or HW5 Webpage), due Wednesday, May 7th at 11 PM
- Changelog:
- Updated Task 1 to clarify part d could be used
- Changelog:
- James & Kevin's:
6. Floyd Logic
In this topic, we continue our study of reasoning, now moving to slightly more complex (and more common) types of code. Previously we considered code without mutation, in which complex calculations are performed via recursion. Here, we will look at code that mutates local variables. In particular, this allows us to write loops instead of recursion. However, it also makes reasoning more complicated, necessitating new reasoning tools.
- Lecture:
- Topic 6 Slides (PDF), Topic 6 Slides (PPTX)
- lecture 15: slides 1-51; lecture 16: slides 52-118; lecture 17: slides 119-153
- Topic 6 Slides (PDF), Topic 6 Slides (PPTX)
- Section 6 materials:
- Section Slides (Section 6 Slides PDF or Section 6 Slides Webpage)
- Section Worksheet(Section 6 Worksheet PDF or Section 6 Worksheet Webpage)
- Section Worksheet Solution (Section 6 Worksheet Solutions PDF or Section 6 Worksheet Solutions Webpage)
- Homework 6 worksheet (HW6 PDF or HW6 Webpage), due Wednesday, May 14th at 11 PM
- Changelog:
- Updated function name to even_zeros in even_zeros.ts to match the test function
- Changelog:
7. Tail Recursion
In prior topics, we have seen problems that can be solved either with recursion or with a loop, showing that these two are sometimes alternatives to one another. In this topic, we clear up the relationship between them by showing that loops are equivalent to “tail recursion”, a special case of general recursion, and demonstrate how to translate between the two, allowing us to use whichever is more convenient for the current setting.
- Lecture:
- Topic 7 Slides (PDF), Topic 7 Slides (PPTX)
- lecture 18: slides 1-30 (+ slides 154-162 of Topic 6); lecture 19: slides 31-73; lecture 20: slides 74-116
- note: last-updated after May 14 A lecture
- Topic 7 Slides (PDF), Topic 7 Slides (PPTX)
- James & Kevin's notes on bottom-up recursion with loops
- Section 7 materials:
- Section Slides (Section 7 Slides PDF or Section 7 Slides Webpage)
- Section Worksheet (Section 7 Worksheet PDF or Section 7 Worksheet Webpage)
- Section Worksheet Solution (Section 7 Worksheet Solutions PDF or Section 7 Worksheet Solutions Webpage)
- Homework 7 worksheet (HW7 PDF or HW7 Webpage or HW7 LaTeX Template), due Wednesday, May 21th at 11 PM
- Changelog:
- Fixed bug with Task 4's provided math definition for
bigint-to-string
, check out the newest copy of the homework spec to see the newest version - Fixed starter code bug in
app.css
to remove the quotes around red so that theclassName="error"
makes text red and changed the spec to sayclassName="error"
instead ofclassName=".error"
- If you want the newest updated starter code you can run
git clone
again somewhere that isn't the same directory and copy the changed files.
- If you want the newest updated starter code you can run
- Fixed bug with Task 4's provided math definition for
- Changelog:
8. Abstraction
Now that we have learned our full set of tools for ensuring correctness, we turn our attention to the other properties of high quality code: understability, changeability, and modularity. These properties are often provided by means of abstraction, which allows us to hide details of some parts of the code from other parts. This makes the code easier to understand and change, and allows multiple people to work on parts of the code simultaneously (modularity).
We will begin by studying how to hide the details of code via “procedural abstraction” and then see how to hide the details of data via “data abstraction”.
- Lecture:
- Topic 8 Slides (PDF), Topic 8 Slides (PPTX)
- lecture 21: slides 1-38; lecture 22: slides 39-74; lecture 23: slides 75-115
- Topic 8 Slides (PDF), Topic 8 Slides (PPTX)
- Section 8 materials:
- Section Slides (Section 8 Slides PDF or Section 8 Slides Webpage)
- Section Worksheet (Section 8 Worksheet PDF or Section 8 Worksheet Webpage)
- Section Worksheet Solution (Section 8 Worksheet Solutions PDF or Section 8 Worksheet Solutions Webpage)
- Homework 8 worksheet (HW8 PDF or HW8 Webpage or HW8 LaTeX Template), due Wednesday, May 28th at 11 PM
- Changelog:
- Fixed typo in Task 4 part 5, the proof is proving that the representation invariant is true when the new obj being returned is constructed.
- Changelog:
9. Arrays
In the previous topic, we looked at ADTs and saw that they describe the interfaces of many well-known data structures. However, the most commonly used data structure in imperative languages — arrays — was notably missing. In this topic, we rectify that omission.
As we will see, arrays create new reasoning difficulties that do not occur for alternatives like lists and basic trees. Their use of indexing gives us extra power but comes at a cost of more complex reasoning, requiring the use of “for any” facts to describe their known state. These are inherently more complex, but we can mitigate some of that complexity by turning to pictures as a simpler way of describing them.
- Lecture:
- Topic 9 Slides (PDF), Topic 9 Slides (PPTX)
- lecture 24: slides 1-52;
- Topic 9 Slides (PDF), Topic 9 Slides (PPTX)
10. Object-Oriented Programming
In our last topic of the quarter, we look at some difficulties that arise in object-oriented programming, especially when trying to create subtypes. We then look at solutions (in the form of design patterns) for working around some of the sharp corners of these languages.