Client-side Development

CSCI-432 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 Fetch API fetch()
03/03 Spring Break
03/10	A7.	A6 demos Loading Screens & Modals Async Components	Named Views
03/17	A8:	A7 demos Reusibility	SFC CSS Features Suspense Teleport Async Components Composables Custom Directives Plugins
03/24	A9:	A8 demos Transition, TransitionGroup and other Animation techniques	Transition TransitionGroup Animation Techniques
03/31	A10:	A9 demos Vue and Web Components	Vue and Web Components
04/07 Founders Day	A11:	A10 demos
04/14	A12:	A11 demos Reactivity and Rendering (how Vue does it)	Reactivity in Depth Reactive API Rendering Mechanism Render Functions & JSX
04/21	A13:	A12 demos Best Practices	Production Deployment Performance Accessibility Security

CSCI-432 Client-side Development

Course Administration

Resources

Live sites

Assignments