Vue Workflow: Creating the Frontend

Vue

Vue is a JavaScript framework for building websites. Like other frameworks it uses a virtual DOM enabling the page to update dynamically without having to reload. In our project, each page is built with a Vue file. Each Vue file integrates html, css, and javascript:

<template>
   <h1>HTML</h1>
</template>

<script>
   var name = "JavaScript"
</script>

<style>
   .CSS{
   }
</style>

Our main pages are contained within .vue files in our views folder, routing between pages is handled by an index.js file in our router folder, and any components that may show up in multiple pages are contained within .vue files in our components folder.

Main Pages vs. Components

Both main pages and components are built with .vue files so what is the difference? Our main pages included things like the home page, the host room, the join room, and the join code page. We had one component and that was the Navbar. A component is different from a page as components are used within pages. So the navbar was built into the home, about, contact, and join code page. Its relatively simple to include the components into different pages:

//HomeView.vue

<template>
   </Navbar>
</template>

<script>
import NavbarComponent from '../components/NavbarComponent.vue';
export default {
   components: {
    NavbarComponent
  },
}
</script>

HTML

Created by computer scientist Tim Berners-Lee in 1993, HTML or Hypertext Markup Language became the standard markup language for creating a displaying documents on a website. Throughout the last couple of decades, HTML has evolved through multiple versions and has ended up at HTML version 5, which is what we have used in our project. HTML is like the skeleton of the webpage as it is where you put all of the text of the webpage. It allows you to create lists with bullet points, forms, hyperlinks. In HTML, all of your elements are contained within tags (<></>). For example if i wanted to create a form, I could do:

<form>
    <label></label>
    <input></input>
</form>

And while its not necessarily the best option for styling, you can change fonts, text sizes, or even colors with it. You can also create script tags if you want to implement JavaScript within your HTML file or if you want to link a JavaScript file within your HTML. In Vue, we have script tags separate from our HTML to deploy our JavaScript.

CSS

CSS or Cascading Style Sheets is a style sheet language used to design a webpage given the HTML outline. While CSS is very often used with HTML, it wasn't until a few years after HTML was introduced that CSS was created by Norwegian web pioneer Hã¥kon Wium Lie. Lie first proposed the idea in 1994 and it was not finished until 1996.

In our project we use it to change certain colors, sizes of text, positions of elements, and even hover animations for buttons. The HTML elements in a project can be styled according to their tag:

<h1><h1/>

class:

<h1 class = "case2"></h1>

or id:

<h1 id = "case3"></h1>

These different methods of styling would be done like this, in their respective order:

h1 {
   font-size: 12px;
}

.case2 {
   font-size: 12px;
}

#case3 {
   font-size: 12px;
}

JavaScript

JavaScript is a programming language that can be used in web development in order to make your webpages more dynamic and interactive. With this tool you are able to create variables and functions that can perform more complex tasks. JavaScript was created in 1995 by computer programmer Brenden Eich, also known as the former Chief Executive Officer of Mozilla Corporation. JavaScript was formerly called Mocha, and it then became LiveScript, before finally being called JavaScript. It was created for Netscape's web browser 'Netscape Navigator', and Netscape changed the name to JavaScript so that they could market it as a 'companion' for the Java language, a product of their partner company. However, JavaScript is in no way related to Java. After its release, JavaScript was implemented in more and more browsers until all modern browsers now support it.

In the scope of our project, it will be used to make API calls, and manage room passcodes. All of the JavaScript code is contained with script tags:

<script>
   var name = "JavaScript"
</script>

References

https://www.washington.edu/accesscomputing/webd2/student/unit1/module3/html_history.html#:~:text=The%20first%20version%20of%20HTML,official%20standard%20in%20December%201999.

https://www.bu.edu/lernet/artemis/years/2020/projects/FinalPresentations/HTML/historyofcss.html#:~:text=1994%2D%20H%C3%83%C2%A5kon%20Wium,separate%20documents%20known%20as%20modules.

https://www.geeksforgeeks.org/history-of-javascript/#

https://launchschool.com/books/javascript/read/introduction

Bryan Lecza