Module 3 - Reactive Web Pages: the Vue Framework

This learning module is scheduled for February 17, 2021 through March 2, 2021.

Readings

These readings/videos are suggested to help give you an overview of the important concepts for this learning module.

• Background
  • The deepest reason why modern JavaScript frameworks exist by Alberto Gimeno
  • Vue.js, a JS framework for humans by George Mavrommatis
  • Beginner’s Guide to CSS Front End Frameworks by Rishabh Saxena
  • What is a CDN? from Cloudflare (a leading CDN provider), includes a video as well
• Technical
  • Vue.js Guide, the official one but also probably the best one out there
  • VueJs: The Basics in 4 Minutes by James Samuel
  • Intro to Vue 2, a set of 11 5-10 minute lessons by VueMastery
  • Everything You Need to Know About Vue v-model by Matt Maribojoc
  • Error Handling with async/await and Promises with an advertisement for CatchJS :)
  • A Complete Vue.js Application by Matthias Hager
• History
  • Podcast with Brendan Eich (creator of JavaScript) - a positive look at JavaScript and interesting stories about its development (first hour) as well as ideas about the future of the web (last hour)
  • Vue.js: Seeking the Balance in Framework Design - Evan You (creator of Vue) at JSConf.Asia 2019
    

Schedule

You can work at your own pace, but here are the important deadline requirements for this module.

• by Thursday, February 25
  • Install Extensions
  • Post Quiz Project on Gitlab Pages
• Sunday, February 28
  • Take practice Quiz
• Monday, March 1
  • Take Quiz
• Coming Soon

We strongly discourage waiting until the last minute since working with the web can range from awkward to tricky to downright frustrating — please leave yourself plenty of time for unforeseen complications!

Examples

These examples are provided to help you see our expectations for your code to get you started.

• Source code for you to clone
• Live web sites so you can see the expected results

We strongly encourage you to experiment with these examples interactively to see how changes affect the results.

Exercises

If you want extra practice, consider converting any of the old exercises or examples to use Vue: such as Tag Cloud, ISS display, or an image editor.

Quizzes

This is intended to be similar to the content of the quiz for this module and should help you understand our expectations for its scope.

• Practice Quiz

Install Extensions

While it is not required, these plugins will help warn you of coding issues within your editor so there are fewer surprises when working with your code.

• Chrome: Vue Developer Tool
• VS Code: ESLint using these instructions

When installing these programs, unless otherwise noted, we suggest following the default options.