Client-side Development

CSCI-232 Client-side Development

This course covers the design and development of rich reactive web UI's using front-end JavaScript frameworks such as Bootstrap, Angular.js, React.js and Vue.js.

Assignments

Students are expected to demonstrate their software solution to the homework assignments to the class at the beginning of lecture on the dates specified below.

Date	Assignment Due	Lecture	Required Reading
01/08		Introduction to Vue and the Toolchain Vite	Introduction Quickstart (up to Using Vue from CDN) Creating an Application
01/13	A1. Live Demo A1. Create a New Vue SPA A1. Create and Test a Production Build A1. Create a GitHub Distribution Repo A1. Hosting an App on Digital Ocean	Component Basics Demo Component Basics Demo Code Component Basics Demo Code (Github) Props, Fallthrough Attr, Class & Styles Demo Props, Fallthrough Attr, Class & Styles Demo Code (Github)	Single File Component SFC Syntax Specification Component Registration Component Basics Props Fallthrough Attributes Class and Style Bindings
01/20	A2. Live Demo A2. Description and Grading Rubric Setting Up A New Clean Vue Project Deploying a New App	Slots Demo Slots Demo Code (Github) <component> Demo <component> Demo Code (Github) Reactivity Reactivity Demo Code (Github)	Slots <component> <KeepAlive> Reactivity Fundamentals ref() reactive() Computed Properties computed() Watchers watch()
01/27	A3. Description and Grading Rubric	🌨 ️ 🌨 ️ 🌨 ️ A2 student demos
02/03	A4. Description and Grading Rubric	A3 student demos Template syntax, lists, events, forms Demo Demo Code (Github) Component v-model Demo Demo Code (Github) Provide & Inject Demo Demo Code (Github)	Template Syntax Event Handling Events Conditional Rendering List Rendering Form Input Bindings Component v-model Provide/Inject
02/10	A5. Description and Grading Rubric	A4 student demos Template refs Demo Demo Code (Github) Pinia Demo Demo Code (Github)	Template Refs State Management Defining a Pinia Store Storage (localStorage, sessionStorage)
02/17		A5 student demos Routing From Scratch Demo Demo Code (Github) Vue Router Demo Demo Code (Github)	Routing Vue Router - Getting Started Dynamic Matching Programmatic Navigation
02/24	A6. Live Demo A6. Description and Grading Rubric	Vue Router Demo 2 Demo Code (Github)	Named Routes Nested Routes Programmatic Navigation
03/03 Spring Break
03/10	A7. Root, Create Account, Login & Home Views	Vue Router Demo 3 Demo Code (Github) Vue Router Demo 4 Demo Code (Github)	Named Views Redirect and Alias Passing Props Route Meta Fields Active Links Navigation Guards Composition API
03/17		A7 demos
03/24	A8. Create Account & Login Functionality	Fetch Demo Fetch Demo Code (Github) Messages API Specification Document	Fetch API fetch() Navigation Failures
03/31	A9. Friends Functionality	A8 demos
04/07 Founders Day	A10. Group Chat Functionality	A9 demos
04/14		A10 demo Transitions and Animations	Transition TransitionGroup Animation Techniques
04/21	A12:	A11 demos Best Practices	SFC CSS Features Suspense Teleport Async Components Composables Custom Directives Plugins Vue and Web Components Production Deployment Performance Accessibility Security

CSCI-232 Client-side Development

Course Administration

Resources

Live sites

Assignments