Quick Prototyping (Building realtime apps with Vue and Laravel) part1

Quick prototyping with Laravel and Vue

Okay so people are still arguing about angular and react, its remarkable how much power those two have amassed over the course of time. Its certainly non-negligent, but more usual than not, there are better options out there and psst ** Vue is one of them.

Vue is a lightweight framework which I’m pretty sure everyone of us already know, all intended, but Its a beautiful one at that, encompassing the best of both frameworks and giving the user the quick flow so as to building great apps and quickly prototype, when combined with Laravel its usually a clean flow of beauty and well architect-ed application development and a deep concern for the developer’s rest of mind.

In order to really describe this, what better way is there than building an app, as the most common use of frontend frameworks like Vue, React and the rest is, lets build an spa, a single page application powered by vue and laravel on the backend handling all things api calls, so lets get to work.

This process assumes you already have due familiarity with Javascript and understand the intricacies of how these frontend frameworks work.

If not, then you might want to check up the following.

Vue.js

React - A JavaScript library for building user interfaces

So, we are going to be a realtime collaborative note app, this is going to be fun, and we are going to do this over the course of 3 articles.

we are going to figure in the following,

• Component Structure (first piece, this piece)
• api authentication and api calls (second piece)
• realtime support using pusher (third piece)
• state management using vuex(fourth and bonus piece)

The Tools

Well we pretty much understand what we are about to use in the project, its gonna be clean clear and straight-forward

• Laravel — Handling the backend and api connections and all auth stuff.
• Vue — Frontend Component framework handling all things on ….frontend
• Vuex — A single source of truth. a single source(explanation starts later)
• Pusher — realtime socker api thingy, handling realtime communications.

Pusher | Leader In Realtime Technologies

First we are going to build with just vue and laravel, at this level ui’s gonna be quite basic, dont wanna stress the small stuff.

Our progress would go as follows

• In part one, we’ll be building the vue applications and setting it up with laravel-mix. we’ll see how the application structure works in general.
• In part two, we are going to set up the application with api calls and authentication using laravel passport and axios.
• In part three, we are going to integrate pusher’s api to add realtime functionality.
• In part four, we are going to refactor our statemanagement to use the flux architecture using vuex.

If you are not really interested in the explanations and love to dive down deep into code here’s the repo for this part.

Mozartted/RealNotes

Setting Up

The fun thing about Laravel is that it already has about half, if not all of the features you need already set up, all you need to do is piece things together and don’t worry you can alway use your favourite technologies.

So first and foremost fire up a laravel app

laravel new NoteApp

If you don’t have the laravel cli installed check out the Laravel docs

Installation - Laravel - The PHP Framework For Web Artisans

its pretty much a no-brainer,

After that, open you project in your favourite text-editor preferably sublime and lets see what we’ve got.

Open the webpack.mix.js file

usually this is what you get, its a simple file that instructs webpack under the directives of laravel-mix to build your resources files according to the pattern you so desire.

the resources folder contains three major folders

• assets
• views
• lang

Our business is in the assets folder which contains the js and scss folders, in both these folders is the app.js and app.scss respectively.

The app.js is the usual entry point for our js files and the app.scss is the entry point for our scss,

so these guys import the rest.

In order to fully set up vue to do some damage, we have to import it, but first lets see what laravel has given us to work with .

Checking the package.json file

We can see we already have vue as a devDependency and some other package, including lodash , Batman’s utility belt for javascript developers.

So its all good and If we check the resources/js folder we see the app.js imports all needed aspects including a vue component an Example component. So running the commands to install the packages

yarn install

or

npm install

Personally speaking I like using yarn, its cleaner (for me). With the installation we’ve installed all needed to play with vue, so lets get rolling.

First we need to understand our application structure. Taking into account multiple users sharing notes, we are not working with permissions for now. So architecture is pretty simple.

Application structure

As you can see the spa itself is pretty simple, the NoteApp Component encompasses everything and the NoteSidebar Component and the NoteEditor Components are children.

Database structure

Notes table and Users table

As I like to play, the hard stuffs before the easy stuffs so lets build our vue components. Pretty sure we all remember how to serve with artisan

php artisan serve

to build our js files we simply run

npm install dev

to serve the app with BrowserSync, imitating hot-reload functionality we simply check for the line

mix.browserSync({
 proxy:’localhost:8000'
})

This allows us to run browsersync.

Setting up Components

With the base in place, lets get the components in place, we’ll create a component folder in the resources/js folder and set up the individual components in them.

In our app we have three basic components constituting the apps spa, these we’ll call them the following

• NoteApp
• NoteEditor
• NoteList

The Note List is the side bar listing the notes, while the NoteEditor is (you guessed it) the text editor, while the NoteApp encompasses everything.

All these are imported into the app.js with the NoteApp being the entry point.

As you can see we import a bootstrap file, this file sets up stuff we’ll likely use in this app.

The bootstrap file here sets up axios with the infamous CSRF token of laravel, check for this in you views and make sure its declared, as you can see, we use it on the meta tag named crsf-token, on the view you can do a check for it, and if its not there, then in you main extended blade file add the meta tag.

<meta name="csrf-token" content="{{ csrf_token()}}">

The app.js imports vue, NoteApp, vue apps are always initialized on the vue instance

new Vue({
  el:'#app' //the element being watched out for
  components:{
     //where components are imported
  }
})

The NoteApp Component

NoteApp imports the others

In the template we describe the HTML structure of the page since our default configuration installs and sets up bootstrap sass, then its a bliss.

<template>
  <div class="col-md-12 contain nopadding">
   <note-sidebar :initialnotes="notes"      @noteCreated="noteSelected"></note-sidebar>
   <note-editor :note="firstNote"/>
  </div>
</template>

So we basically set up two base components note-sidebar and note-editor, the sidebar displays the collection of notes and the note-editor is the editor.

The template always starts with the template tag and all javascript goes into the script tag.

You can still do styling in the style tag but I ignored it, all styles in this application are declared in the note.scss file

All stylings

The NoteSidebar and NoteEditor components are imported into the NoteApp components, alongside lodash.

import NoteEditor from './NoteEditor.vue';
import NoteSidebar from './NoteSidebar';
import _ from 'lodash';

Then inserted into the components options in the exported object.

components:{
   NoteEditor,
   NoteSidebar
 },

We’ll be creating these components soon enough. We defined the initial state of the application using the data function,

Note: in vue components the data option is always a function when created in the es6 format the this operator does not reference the vue instance but somthing else entirely, so always declare it as a normal function.

Our data function returns an object. in this case the initial state of the system.

here we keep the structure simple.

data(){
notes:[
   {
    'title':'The base',
    'content':'base Stuffs'
   },
   {
    'title':'The House',
    'content':'base Stuffs'
   },
   {
    'title':'The Action',
    'content':'base Stuffs'
   }
   ],
    currentNote:null
}

The state is simple, with the api, on creation we would be making a call to collect the initial state, the note attribute is iterated over on the NoteSidebar component.

This is passed as a prop

<note-sidebar :initialnotes="notes" @noteChosen="noteSelected"></note-sidebar>

the : syntax there is a short hand for v-bind while the @ is short for v-on,

So initialnotes is a prop while noteChosen is an event happening in the NoteSidebar component, this is emitted when a note in the list is clicked and the method function noteSelected handles the event.

methods:{
   noteSelected: function(value){
    this.firstNote = value;
   }
  },

It assigns the value to the firstNote variable, as we can see firstNote is not described in the data function, but rather in the computed object.

computed: {
      firstNote:{
        get:function(){
          if(this.currentNote == null){
            return _.first(this.notes);
          }
          return this.currentNote;
        },
        set: function(value) {
          this.currentNote = value;
        }
      }
  },

It defines a setter set and a getter get, the get function checks the currentNote and see if its null if it is, then the first of the notes is returned, else the currentNote is returned.

You may be wondering why are we not manipulating the data attributes directly in the getter, well that’s because vue doesnt allow it, or rather the principle behind state management doesnt.

So this first object is passed into the note-editor component so as to display the current note.

<note-editor :note="firstNote"/>

So for now we have an initial set up of the NoteApp component, so lets have a look at the imported components starting with

The NoteSidebar Component

Starting with the template we have the list iterating on the notes data field, this field collects the initialnotes set in prop. vue sets up props as attributes in components, just like the data, created, computed and the rest.

export default{
 props:['prop here'], //props are defined here
 data: function(){    // you already know this, the data guy
  return {
  }
 },
 methods:{    // extra methods we call allover the application

 }
}

In our implementation we reassign initialnotes to the notes attribute, this is done in order to manipulated the prop’s value, as we cant do so directly.

So we define an iteration in the template

<div class="notes-items" v-for="(note,index) in notes" @click="selectNotes(note)">
    {{note.title}} 
    <span @click="remove(note,index)">remove</span>
</div>

In the iteration we use the v-for directive taking the notes and index values in notes displaying the notes title in the handlebars

{{note.title}} //handlebars, they call them handlebars

We also added a span element with a click listener for removing the note element.

When we select a note, we want the noteEditor component to know about this, but there’s no connection between them so how do we get these guys to cooperate. 😕

Well we have a solution, using the $emit function, vue components are able to emit events on actions being performed, in a large scale application its much more effective using the flux patterned state management system, for vue we have vuex to help out with this.

Introduction · Vuex

So we are gonna emit an event and you guessed it, we are emitting the noteChosen event and alongside it, goes the value

selectNotes:function(note){
   this.$emit('noteChosen',note);
  },

The select note function being called emits the noteChosen event and sends the note as a payload.

These are being handled in the parent component NoteApp in using the noteSelected method which sets the firstNote using its setter method

noteSelected: function(value){
    this.firstNote = value;
}

The firstNote setter method.

set: function(value) {
   this.currentNote = value;
}

In this process the getter method

get:function(){
  if(this.currentNote == null){
      return _.first(this.notes);
   }
   return this.currentNote;
},

has a new value for currentNote set to the value payload, Therefore its no more a null value and as that it gets returned on get, thus this is passed into noteEditor component as a prop.

<note-editor :note="firstNote"/>

So lets have a look at the NoteEditor Component

The NoteEditor Component

So here we have two interesting elements in the template, the input and the textarea. and the both use the v-model attribute to do a two-way binding with the values they update this makes sure the values get updated everywhere, both in the parent and in the child as this update affects the prop. 😀

//the input
<input class="top-input" type="" name="" :value="note.title" v-model="note.title">
//and the textarea
<textarea class="main-text" v-model="note.content">
 </textarea>

With these in place the base of our application is set, now lets link it with the appropriate view.

the welcome view is the default view so we use it, its set on the default route in the routes/web.php file.

Route::get('/',function(){
  return view('welcome');
})

So we do some clean up setting up our meta token, and referencing our built js and css files. app.js and app.css.

note, we called the app,js at the bottom of the file as the vue application would need its el attributed dom element present.

In the body tag we create the div tag with the id app, this is the root of the vue influenced dom, and in it we define the NoteApp component (note-app)

pls note components are referenced in templates using the dash in place of the CamelCase structure all lowercase.

the app.css file is being built from the resources/sass/app.scss file from which we call the notes.scss

running our build

yarn production #incomparism to dev, this minifies 
#or
npm run production

Our app is served and we’ll mostlikely have this flow.

Quite simple and clean.

Conclusion

In our next we are going to add authentication to this application and review how we secure api routes using laravel passport, also we are going to making api calls to populate our notes using axios, a http client library closely mimicking the flows of Angular’s Http package, it uses promises( pretty lit).

mzabriskie/axios

Thanks for sticking with us this far, if this really helped, then feel free to give a clap or a high-five, not really sure what that is.