Pre-Render A Vue.js App (With Node Or Laravel)

Pre-Render A Vue.js App (With Node Or Laravel)

Server-side rendering is all the rage right now. But it’s not without its downsides. Pre-rendering is an alternative approach that may even be better in some circumstances.

In this article we’ll explore how pre-rendering works with Vue.js and look at two examples; one with a Node.js project, one with a Laravel project.

Server-side rendering

One of the downsides to Javascript-based apps is that the browser receives an essentially empty page from the server. The DOM cannot be built until the Javascript has been downloaded and run.

This means that the user has to wait a bit longer to see anything. It can also have an impact on SEO if crawlers can’t see content of the page quickly.

Server-side rendering (SSR) overcomes this issue by rendering the app on the server so that the client receives the complete DOM content when the page is loaded, before Javascript is even run.

So instead of the browser receiving this from the server:

<head> ... </head>
<body>
<div id="app">
  <!--This is empty, Javascript will populate it later-->
</app>
</body>

With SSR it receives a page with complete content:

<head> ... </head>
<body>
<div id="app">
  <div class="container">
    <h1>Your Server-Side Rendered App</h1>
    <div class="component-1">
      <p>Hello World</p>
      <!--etc etc. This was all rendered on the server-->
</app>
</body>

Server-side rendering cons

  • Your app will need to be executable on the server, so you’ll need to design your code to be “universal” i.e. it works in both the browser and a Node server.

    read more

7 Ways To Define A Component Template in Vue.js

7 Ways To Define A Component Template in Vue.js

There’s plenty of choice when it comes to defining component templates in Vue. By my count there are at least seven different ways:

  • String
  • Template literal
  • X-Templates
  • Inline
  • Render functions
  • JSX
  • Single page components

And maybe more!

In this article we’ll go through examples of each and address the pros and cons so you know which one is the best to use in any particular situation.

1. Strings

By default a template will be defined as a string in your JS file. I think we can all agree that templates in a string are quite incomprehensible. This method doesn’t have much going for it other than the wide browser support.

Vue.component('my-checkbox', {
	template: `<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title"></div></div>`,
	data() {
		return { checked: false, title: 'Check me' }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});

2. Template literals

ES6 template literals (“backticks”) allow you to define your template across multiple lines, something you can’t do in a regular Javascript string. These are much easier to read and are supported now in many new browsers, though you should probably still transpile down to ES5 to be safe.

read more

Reactivity In Vue.js (And Its Pitfalls)

Reactivity In Vue.js (And Its Pitfalls)

One thing we love about Vue is the reactivity system. If we change a data value it triggers an update of the page to reflect that change.

For example:

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

setTimeout(function() {
  app.message = "Goodbye World";
}, 2000)
<div id="app">
  <!--Renders as "Hello World"...-->
  <!--Then after 2 seconds re-renders as "Goodbye World"-->
  {{ message }}
</div>

Data properties, like message in this example, are reactive, meaning they will trigger a re-render if changed.

Pitfalls of automatic reactivity configuration

Vue configures reactivity automatically whenever you create a data property, computed property, bind a prop etc. This automatic setup is great when coding an app because it:

read more

Using JSX with Vue.js

Using JSX with Vue.js

Love it or hate it, JSX is a popular extension to Javascript that allows XML tokens in your scripts.

If you want to create templates in your script files and you find Vue’s render() function to be difficult to work with, JSX may be just what you need.

To demonstrate, here’s a render function without JSX:

render (h) {
  return h(
    'div',
    { attrs: { id: 'my-id' },
    [ this.msg ]
  );
}

And with JSX:

render (h) {
  return (
    <div id='my-id'>,
      { this.msg } 
    </div>
  );
}

If nothing else, it’s much easier to read!

Of course, JSX cannot be interpreted by the browser. It must be first transpiled into standard Javascript, similar to how SASS first needs to be transpiled to CSS. More on this later.

Why use JSX with Vue?

There are many ways to specify a template in Vue:

read more

What's The Deal With Vue's Virtual DOM?

What's The Deal With Vue's Virtual DOM?

Many Javascript frameworks like Vue, React and Ember implement a “virtual DOM”.

While it sounds like something from a sci-fi, its main purpose is to increase the speed and efficiency of DOM updates. It offers some additional benefits as well.

Reminding ourselves what the DOM actually is

We tend think of the DOM as the HTML document it represents. But actually the DOM is a tree-like data structure that comes into existence once an HTML document has been parsed by the browser.

The browser paints the DOM to the screen and will repaint it in response to user actions (e.g. mouse clicks) and updates via its API from your Javascript scripts e.g. document.createElement.

It’s expensive to update the DOM

When we use Javascript to make a change to our page, the browser has to do some work to find the required DOM nodes and make the change e.g.

// #myId could be anywhere in the document, which may have thousands of nodes!
document.getElementById('myId').appendChild(myNewNode);

In modern apps there can be thousands of nodes in the DOM, and so updates can be computationally expensive. It’s inevitable that small, frequent updates will slow the page down.

What is a virtual DOM?

The DOM can be represented as a data structure in Javascript, too. Here is pseudo-code of how a DOM node could be represented:

read more