4. Further Discussion of Vue.js
I start by showing the source code of a traditional HTML website. I discuss that when clicking on a navigation link on a traditional HTML type website, a call is made to the webserver to get a whole new set of code to render the next page. In doing so, a lot of work is put on the webserver, especially in the the case I show as it is running Wordpress, a dynamic website. The server has to make a call to a database and render the output (if it's not cached) before sending the HTML to the user's browser.
I give a quick confusing point that Vue.js can be used as just a single component in a webpage, then talk about how in this project it's acting on the entire webpage.
I show the simple source code of the project that the original webpage loaded from the server is just a few lines of html with a single javascript file call.
I briefly discuss that Webpack is what wraps up all the code in the development environment and puts it into a single source file (the app.js file).
I show where Vue is imported into the project and instantiated. Then I show how the instantiation shows Vue where it's supposed to do its work in the DOM (Document Object Model) of the webpage.
I show the toolbar from Vuetify, the main content area that contains the router component, and the footer.
I briefly explain a Vue v-if statement.
Then I try to explain again that when Vue changes the view (what most people would think of changing web pages) it's not contacting the server but just updating the layout (then calling for the data that gets populated from the Firestore database).
This video is part of a playlist:
• Real Time Database with Vue.js + Vuex...
It is also part of a blog post on DedicatedManagers.com:
http://www.dedicatedmanagers.com/real...
The source code for this project is available publicly on the Dedicated Managers Github account:
https://github.com/DedicatedManagers/...
