Vuejs

Vuejs

Vuejs Training Materials

Copyright Notice

Copyright © 2004-2023 by NobleProg Limited All rights reserved.

This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise.

Introduction

• JavaScript framework for building UI (user interfaces)
• What do we need?
  • HTML, CSS, and JavaScript
• Declarative, component-based programming model
  • Declarative rendering
  • Reactivity
• Progressive framework
• Single-file components (SFC)
• API Styles - options VS composition

Not That

BUT still - we'll have a lot to see! (-'

Framework

Progressive Framework - "framework that can grow with you and adapt to your needs"

• framework and ecosystem
• designed to be flexible and incrementally adoptable
• can be used in
  • enhancing static HTML without a build step
  • embedding as Web Components on any page
  • Single-Page Application (SPA)
  • Fullstack / Server-Side Rendering (SSR)
  • Jamstack / Static Site Generation (SSG)
  • targeting desktop, mobile, WebGL, and even the terminal

Overview of Vue JS

• Declarative rendering
• Component composition

Declarative rendering

• Declaring Reactive State
  • data(), reserved prefixes ( $, _ )
  • strong use of JavaScript Proxies
    • ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy )
• Declaring Methods - methods()
  • this is bind automatically (no arrows here!)
  • accessible in template (mostly as event listeners)
• Deep Reactivity - by default
  • detects even mutation of nested obj or array
• DOM Update Timing - not synchronous, buffered until the nextTick(), fixable with async..await
  • in the update cycle - ensures each component updates only once (with all the state changes)
• Stateful Methods - dynamically created methods
  • in reused components - to avoid interference use created() lifecycle hook

Component composition

• SFC - Single-File Components
• Options API vs Compositions API - two styles

SFC

• HTML-like file format (*.vue)
  • logic (JS), template (HTML), and styles (CSS) - together
  • for build-tool-enabled projects
    • recommended way
• Example

<script>
export default {
  data() {
    return {
      coursesInCart: 0
    }
  }
}
</script>

<template>
  <button @click="coursesInCart + 1">You have: {{ coursesInCart }} courses in your bucket!</button>
</template>

<style scoped>
button {
  font-size: 48px;
}
</style>

Setting up a development environment

• Nodejs, nvm
• IDEs - VSC + official Vue ext
  • Useful plugin - es6-string-html
    • https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html
• Alternatives with some LSP/LSIF support: WebStorm, Sublime, vim, emacs
• git
• Vite vs VueCLI (migratable)
• ??

vue itself

npm create vue@latest

Creating your first application

Build game "Find the jewel".
The objective of the game is to find a random computer-chosen jewel in as few tries as possible.

Approach:
* First think about the functionality we want to offer
* Second think about the data and behavior that can support the functionality
* Third think about how to build a user interface for it

Test it with 'live-server' (if not yet installed in the training machine, run 'sudo npm i -g live-server')
* in command line go to application's root folder and execute the command 'live-server --cors'

1. Designing the component
   • Detailing the features that we want the app to support
     • Choosing random jewel (origJewel)
     • Providing input for a user to find the jewel (findJewel)
     • Tracking the number of tries already made (howManyTries)
     • Giving the user hints to improve their try based on their input (hinting)
     • Giving a success message if the user found the proper jewel (hinting)
   • Determining what we need to display to the user and what data we need to track
     • Names in round brackets above are the properties that will support those features
     • We need to include these properties in our component

Working with Templates

• Vue uses an HTML-based template syntax
  • declaratively binds
    • the rendered DOM to the underlying component instance's data
• syntactically valid HTML
  • parseable by spec-compliant browsers and HTML parsers
• compiled into highly-optimized JS - when the app state changes
  • intelligently re-renders the minimal no of components
  • applies the minimal amount of DOM manipulations
• can be written directly as render functions instead
  • JSX is optionally supported
  • but not the same level of compile-time optimizations

Dividing the application into smaller, self-contained components

• Component Pattern instead of MVC
• Constructs
  • expressions, data binding syntax
• Change detection
• Web components

Component pattern

In web applications

• No messes of spaghetti code in applications
• Reasoning about specific parts of the application in isolation from the other parts
• Maintenance costs are less
  • Each component's internal logic can be managed separately
  • No affecting the other parts of the application
• Self-describing components
  • Makes the application easier to understand at a higher level of abstraction

Constructs

• Usually they live in the HTML template
• They are linking the view HTML and component code
• Similar to standard HTML with new symbols:

  : property bindings (v-bind)
  @ event bindings (v-on)
  {{ }} expressions (interpolation)
  

Supporting libraries and packages

• Routing
• State management
• Build tooling

Deploying your application to production Vue-CLI

• Vite as a replacement for Vue-CLI
  • npm run dev
  • npm run build
  • interactive CLI commands:

press r + enter to restart the server
press u + enter to show server url
press o + enter to open in browser
press c + enter to clear console
press q + enter to quit

Scaling your application

• Lighter-weight way (no-build-step usage)
  • https://github.com/vuejs/petite-vue
• TS - vue-tsc instead of just tsc
• Testing - Vitest rather then Jest; Cypress is preferred
• More here
  • https://vuejs.org/guide/scaling-up/tooling

Helpers

• Official devtools
  • https://github.com/vuejs/devtools
• Testing
  • https://test-utils.vuejs.org/
• Awesome
  • https://github.com/vuejs/awesome-vue