Getting Started With TDD and Vue.js

Getting Started With TDD and Vue.js

Oftentimes, the hardest part of using test-driven development, or TDD, is getting started. You’ve got to download packages with weird dependencies, get your test suite working with your build system, and then you have to figure out how to write a test! It’s no wonder that so many developers start running away when you bring it up.

But, you’re no ordinary developer. You’re ready to start using TDD with Vue so you can be confident that your code is working exactly as intended. Together, we’ll get tests working in a new Vue project, walk through the default tests, and then add some of our own.

The Set Up

The easiest way to get up and running with TDD is to use the vue-cli tool. If you haven’t used it already, the vue-cli tool scaffolds a new Vue project for you from the command line.

When you use the vue-cli to scaffold a project, all you have to do is follow the prompts and then tests will automatically be set up for you. How easy is that? Let’s walk through the process so we can see exactly how to do it.

The first step is to install the vue-cli tool if you haven’t already. Using NPM, you can open up your terminal and run npm install -g vue-cli to install it.

Before we create our project, we need to pick a template. The vue-cli gives us a couple of different template options such as webpack, browserify, pwa, and simple. Each of them has their own unique setups, and I’ll leave it to you to choose the one that suits you best. Do note that the “simple” versions do not include testing. For this tutorial, I’m going to use the webpack template.

Now, navigate to the directory where you want to create your new Vue project. Here you can run vue init <template-name> <project-name> to scaffold your project. The vue-cli tool will now prompt you with a series of questions about your project, like this:

As you can see, I’ve accepted most of the default scaffolding settings, but I turned off vue-router because we won’t need it. What you pick is up to you, but make sure you enable unit tests!

read more

How To Not Screw Up UX In A Single-Page Application

How To Not Screw Up UX In A Single-Page Application

If there were a Hippocratic oath for web developers, it would surely include a promise that any modification to a web page will provide a net improvement to User Experience.

And yet, there are many sites that have multi-megabyte code bundles, break native browser features like page history or make users wait too long before showing page content. Most often the root cause of these infractions is a poor or unnecessary implementation of the single-page application (SPA) architecture.

In this article, we’ll look at how SPAs are designed and the common pitfalls that detract from user experience.

Single-page application architecture

Most websites are broken up into pages in order to make the information they contain easier to consume. The traditional architecture is to give each page a unique URL. To navigate to a page, the browser sends a GET request to the page’s URL. The server will send back the page and the browser will unload the existing page and load the new one.

For the average internet connection, the navigation process will likely take a few seconds, during which the user must wait for the new page to load.

Diagram showing the loading pattern of a traditional page

read more

Vue.js Server-Side Rendering With Vue Router: Step-By-Step Guide

Vue.js Server-Side Rendering With Vue Router: Step-By-Step Guide

When I started collecting information about SSR (server-side rendering) with Vue, I had to get pieces from different articles as well as the official documentation to get a complete understanding of the subject.

Here are some problems I found in these sources:

  • A lot of assumptions about information that you should have, like Webpack configuration, the proper way to hook up Vue Router etc.
  • Lacking certain important information and leaving some gaps for the reader to fill in.
  • In the examples given, most don’t follow the standards and best practices provided by the official documentation.

The objective of this article is to provide all the information you may need to get SSR working with Vue Router, making an extra effort to avoid any gaps that may give you a headache later. I also try to respect all the Vue team’s recommendations.

Approach

Before jumping into the actual implementation, there are some main concepts that you need to understand:

  • SSR involves creating a fully-loaded version of the app for the requested route on the server. Once that page is rendered on the client side, the client-side code takes ownership.
  • You are going to need two entry building points for your app, one for the server and one for the client.

With that in mind, here’s what we will accomplish in this article:

  1. Install the needed dependencies
  2. Webpack configuration
  3. NPM build scripts
  4. Folder structure
  5. App configuration
  6. Setting up Vue Router
  7. Client entry point
  8. Server entry point
  9. Server configuration

Let’s hope this example brings some clarity to the subject!

Dependencies

Let’s go through the dependencies that we are going to have to install:

read more

Jargon-Free Webpack Intro For VueJS Users

Jargon-Free Webpack Intro For VueJS Users

For many developers, Vue.js is the first front-end JavaScript framework they’ve learnt. If that’s true for you, you probably haven’t had a reason to learn Webpack yet. But as you continue with Vue, you’ll see Webpack popping up over and over again in the documentation, example projects and in relation to tools like Vue CLI.

Webpack promises great things for Vue users:

  • An automated development process that makes coding a breeze
  • A world of handy development features like Vue’s beloved Single-File Components
  • Optimizations for your code to make it fast and lean

But the range of possibilities of Webpack is also why it’s so intimidating at first. It appears to do so many things that it’s hard to grasp what it really is.

The Webpack guides have become increasingly better at explaining Webpack, but a certain amount of background knowledge is still assumed. In this article, I’ll attempt to give you that background without the jargon that may otherwise leave you confused.

Example project

Webpack helps you develop JavaScript applications, so to discuss it we should have a simple example project in mind. The following is what I’ll be referring to throughout this article:

app.js

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }  
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue.js Project</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="vue.js"></script>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

Dependencies

read more

Advanced Server-Side Rendering With Laravel & Vue: Multi-Page App

Advanced Server-Side Rendering With Laravel & Vue: Multi-Page App

A few weeks ago I wrote a tutorial on the new Vue server-side rendering capabilities for Laravel. That tutorial mostly focused on the set up of SSR in a Laravel environment and so I only had time to demonstrate a simple “Hello World” app with no significant features.

Now I want to build on that previous tutorial and demonstrate how to server render a Vue app that includes multiple pages with Vue Router, since most of your Laravel projects will have more than one page.

Multi-page SSR with Laravel

You can get the completed code for this tutorial here on Github.

Installation

This tutorial will extend the app I built in the previous article, Server-Side Rendering With Laravel & Vue.js 2.5. Make sure you’re familiar with how it works and have a suitable development environment set up i.e. with the php-v8js extension installed.

If you don’t have that code, clone it and set it up:

$ git clone https://github.com/anthonygore/vue-js-laravel-ssr
$ cd vue-js-laravel-ssr
$ cp .env.example .env
$ composer install
$ npm i

Then install Vue Router:

$ npm i --save-dev vue-router

Router module

We’ll begin by creating a file for our router configuration that exports an instance of the router for use in the app.

read more