DGMD E-28 Single-Page Applications & Interfaces with Vue.js

Single-Page Applications & Interfaces with Vue.js

DGMD E-28   Instructor: Susan Buck (susanbuck@fas.harvard.edu)


Spring 2021

View this course in the Harvard Extension School course catalog (CRN 25694)

Registered students: I sent a course welcome email on Tue Jan 19. If you did not receive this email, please contact me at susanbuck@fas.harvard.edu.

Description

In this course, students will learn how to build reactive, single-page applications and interfaces for the web using Vue.js, an open-source JavaScript framework.

What is a single page application (SPA)?

In a traditional website, much of the processing is done on the server, where content is loaded and then delivered to the browser for rendering. For example, imagine a site like Wikipedia.org - you click a link and you're led to a page where all the content is loaded and displayed. If you click on another link, the same process happens again, reloading all the content you see in the browser. We can categorize this approach as a multiple-page application as new content is delivered via a new page request for every action.

Now compare this experience to using a more robust web applications like Gmail where the actions we take (e.g., applying a label to a message) create an almost immediate response in the browser, changing just the content relevant to the action we took. This latter approach falls under the umbrella of a single-page application because the majority of the experience happens within a single page, without the need to entirely reload the page from the server.

Single-page applications are built with HTML/CSS and powered by JavaScript-based SPA frameworks such React, Angular, Ember, or Vue.js. In this course, we'll learn about SPA development via the lens of Vue.js but we'll also take a broad look at SPA frameworks and understand the aspects common to each such as data-binding, components, templates, routing, and more. By comparing/contrasting the various framework options, students can make informed decisions about which tool/framework is most appropriate for their next project or area of study.

Note: This course pairs well with CSCI E-15 Web Server Frameworks with Laravel/PHP where you can learn how to build a web service to act as a data source for your single-page applications.

Structure

This course is available online and delivered asynchronously.

Every Tuesday by 8pm Eastern, materials for that week will be posted via a link on the schedule and will include the following content:

This course does not have sections; supplemental help is available via the course forum and optional one-on-one Zoom meetings with the instructor.

Prerequisites

Go here to read about this course’s prerequisites...

Other courses by Susan Buck

I teach three courses at the Extension School:

In the following “mini-class” I explain what each of these courses cover and how they relate to one another: