Course Overview
This course introduces students to the principles of software design and programming paradigms using JavaScript as the unifying language, given its ubiquity and usefulness. While traditional object-oriented programming (OOP) is traditionally the overriding theme of this course, a complete understanding of software design should explore procedural, functional, and declarative approaches as well.
Upon completion of the course, students will gain insight into the trade-offs and strengths of each paradigm. The practical application of these ideas will take the form of examples and a small project, demonstrating how good design and engineering practices can contribute to the development of robust, maintainable, and user-focused software applications.
Programming Paradigms
Explore different approaches to solving problems through code and realizing that there are many ways to do the same thing.
Procedural
Step-by-step instructions using functions and control flow.
→Object-Oriented
Encapsulation, inheritance, and polymorphism with classes.
→Functional
Pure functions, immutability, and function composition.
→Declarative
Describe what you want, not how to get it.
→Architectural Patterns
Large-scale structural patterns for organizing entire applications and systems.
Client-Server
Separation of concerns between frontend and backend.
→SPA
Single Page Application - Fat client with no page reloads.
→MPA
Multi-Page Application - Thin client with full page reloads.
→Layered/N-Tier
Horizontal layers with clear responsibilities.
→Progressive Enhancement
Build baseline first, layer enhanced experiences on top.
→Graceful Degradation
Start with full features, provide fallbacks for older browsers.
→Component-Based
Composable, reusable UI components.
→Event-Driven
Loosely coupled event-based communication.
→CRUD
Create, Read, Update and Delete activities on content is the core of most applications.
→REST
Representational State Transfer for APIs. Roughly maps the CRUD actions to HTTP methods.
→MVC
Model-View-Controller separation for web applications.
→ETL
Extract-Transform-Load pattern for data integration.
→Offline First
Design web & or other client-server applications as if the network is something to be progressively enhanced.
→Design Patterns
Classic Gang of Four and modern patterns for solving common code-level problems.
Creational Patterns
Singleton
Single instance with global access point.
→Factory Method
Delegate object creation to subclasses.
→Abstract Factory
Create families of related objects.
→Builder
Construct complex objects step by step.
→Prototype
Clone existing objects for new instances.
→Structural Patterns
Adapter
Make incompatible interfaces work together.
→Decorator
Add features without changing structure.
→Facade
Simplified interface to complex subsystem.
→Proxy
Placeholder or surrogate for another object.
→Composite
Tree structure of objects treated uniformly.
→Behavioral Patterns
Observer
One-to-many dependency notifications.
→Strategy
Interchangeable algorithm families.
→Command
Encapsulate requests as objects.
→Iterator
Sequential access without exposing structure.
→Template Method
Algorithm skeleton with subclass steps.
→Chain of Responsibility
Pass requests along a handler chain.
→Technologies
Introduction to technologies used in the course including Markdown, HTML, CSS, and JavaScript.
Markdown
Learn the broadly used, but unstandardized way we document things in development.
→HTML
Learn semantic HTML and how it structures content. →CSS
Explore declarative style coding with CSS and note its reliance on HTML. →JavaScript
Discover the power and sharp edges of JavaScript before exploring frameworks. →Development Tools
Essential tools for modern web focused software engineering.
Git
Version control fundamentals and workflow.
→GitHub
Collaboration, issues, and pull requests.
→IDE (aka Editor)
Your editor is something you must master so make sure you have it set up well armed with useful extensions and shortcuts.
→Browsers
You'll need access to the same browser(s) your users are likely to use for development and testing purposes.
→Browser DevTools
Debugging, profiling, and network analysis.
→npm/Node.js
Package management and build tools for the JavaScript and webdev world.
→Terminal/CLI
Mastering some command line basics will pay off big for developer productivity.
→Design Principles
Fundamental principles for writing clean, maintainable, and scalable code.
SOLID
Five principles for object-oriented design.
→DRY
Don't Repeat Yourself - avoiding duplication.
→KISS
Keep It Simple, Stupid - favoring simplicity.
→YAGNI
You Aren't Gonna Need It - avoid premature optimization.
→Clean Code
Writing readable, understandable code.
→Separation of Concerns
Organizing code into distinct sections.
→Composition over Inheritance
Favoring object composition over class inheritance.
→Law of Demeter
Principle of least knowledge between objects.
→Single Source of Truth
Each piece of data has one authoritative source.
→Fail Fast
Report errors as soon as possible.
→Engineering Practices
Professional software development practices and methodologies.
UCD
User Centered Design - all decisions are filtered through users from requirements to implementation to validation.
→TDD
Test-Driven Development - write tests first. Narrowly may use test near code where you put down tests as close to coding as possible.
→Test In-Depth
Testing should cover the entire aspect of software from code to user. Testing might be automatic or manual and could include unit, integration, end-to-end testing, and user acceptance.
→Debugging
Systematic approaches to finding and fixing bugs.
→Documentation
Code comments, README files, and API docs.
→Code Review
Peer review process and best practices.
→Refactoring
Improving code without changing behavior.
→Pair Programming
Two developers working on one computer.
→CI/CD
Continuous integration and deployment pipelines.
→Agile
Iterative development and team collaboration.
→Version Control
Branching strategies and commit best practices.
→Logistics
Course resources, communication channels, and helpful links for students.
Canvas
Course page with assignments and grades. Announcements in Slack only!
→Slack
Class communication channel for questions and discussions.
→Useful Sites
Curated resources for web development and software engineering.
→