Background

As a consultant, I was recently brought into a project to develop a web browser application using Vue.js. Having been primarily a PHP & jQuery developer for the last 10 years, it's been an awesome experience to be contractually brought into one of the most recent, advanced and growingly popular new frameworks for advanced website or application development.

I joined the project after the decision was already made to use Vue.js along with a supporting responsive component framework, Vuetify.   Though others already on the project were newbies to the framework as well, I have to say, the research that led to the decision to use these tools was spot on!  Developing with these two tools has been extremely efficient.  It didn't take much research for me to quickly learn and become effective in developing with these tools.

In doing some initial discovery to learn the frameworks, I quickly discovered the need for the Vuex centralized state management component (ie global variables & functions for the application) and integrated it into the project.

A Project I've Been Sitting On

Working on this project got me to thinking about another project that's been on the backburner for me as I just couldn't find the time to get started on it, mostly because of the enormous amount of work it would take to complete.

Barriers to Completing

I have mostly been developing in the PHP framework Symfony, and while using it has increased my efficiency and performance in more rapidly developing  and completing projects, there was still the barrier that it primarily runs on a PHP enabled Apache server which does not handle real-time applications very easily or very well (ie. the need for server push / websocket connections).

The Doctrine ORM component coupled with most installations of Symfony makes dealing with a database much easier than having to directly write SQL, but you still have to work with a traditional database structure, which is cumbersome if you are not an expert on databases.

New Life

So when I finally took the time to look into Google's Firebase Cloud Suite and saw its power and simplicity (especially in the NoSQL database), I knew it was time for me to start working on that database project that's been on my backburner for so long because many of the barriers have now been removed.

So I have started building a real-time database using Vue.js, Vuex, Vuetify and Firebase's Authentication and Firestore components.  Using these components together I was able to quickly and easily (for the most part) put together a prototype of the project.

Documentation

I wanted to document my progress so I started recording some screen capture videos.    The videos are my quick thoughts and are not going to be extremely helpful for anything more than to just help solidify that these tools can be used together to rapidly develop something pretty amazing!

Reasoning

My intention when recording the videos was to give a brief overview of the project but it quickly developed into a project in itself (I'm just completing eight hours of effort as I write this).

Most of the videos are off-the-cuff and are stream-of-consciousness.  I ramble and often stutter as I try to find the right words and sometimes get too far off the main topic.  I try to come up with examples on the fly and some of them don't pan out to show what I was intending.  Looking back and briefly reviewing the videos, I also realize that I make a lot of mistakes where I’m thinking one technical term but I say the wrong technical term.

The videos are a good start, but they obviously need lots of work that I'm just too busy to complete at this time (especially if I want to move forward on completing the database project I discuss in them).

As a professional, I’m fighting with myself as to whether or not I should even publish the videos.   Per this article, I have ultimately decided to publish my work with the reasoning that if I don't do so, the videos will sit in my archives, never to be seen, and all time I spent on them will be wasted.

One of my goals with publishing this work in its draft form is simply to show that Dedicated Managers is working on the forefront of web technologies.

My other goal is to attempt to give back to the community a bit such that I may expose someone that comes across this post to the overall pieces being used together, such that you have a reference source to branch out from to learn more in-depth on each piece.  For anyone that does watch all the videos, I think you'll get a few pearls of wisdom here and there throughout them.  And please do leave comments and questions, so that if I do decide to go back and rerecord the videos, I can be sure to be more clear on those points that were not readily understood.

Source Code

I have also made the project available on GitHub (https://github.com/DedicatedManagers/vue.vuex.vuetify.firebase-realtime-database).

Videos

Below is the video playlist of the original 9 screen share videos, and subsequent updates I have recorded: