Switching From React To Vue.js

Switching From React To Vue.js

So you’re a React developer and you’ve decided to try out Vue.js. Welcome to the party!

React and Vue are kind of like Coke and Pepsi, so much of what you can do in React you can also do in Vue. There are some important conceptual differences though, some of which reflect Angular’s influence on Vue.

I’ll focus on the differences in this article so you’re ready to jump into Vue and be productive straight away.

How much difference is there between React and Vue?

React and Vue have more similarities than differences:

  • Both are JavaScript libraries for creating UIs
  • Both are fast and lightweight
  • Both have a component-based architecture
  • Both use a virtual DOM
  • Both can be dropped into a single HTML file or be a module in a more sophisticated Webpack setup
  • Both have separate, but commonly used, router and state management libraries

The big differences are that Vue typically uses an HTML template file where as React is fully JavaScript. Vue also has mutable state and an automatic system for re-rendering called “reactivity”.

We’ll break it all down below.

Components

With Vue.js, components are declared with an API method .component which takes arguments for an id and a definition object. You’ll probably notice familiar aspects of Vue’s components, and not-so-familiar aspects:

read more

How To (Safely) Use A jQuery Plugin With Vue.js

How To (Safely) Use A jQuery Plugin With Vue.js

It’s not a great idea to use jQuery and Vue.js in the same UI. Don’t do it if you can avoid it.

But you’re probably reading this not because you want to use jQuery and Vue together, but because you have to. Perhaps a client is insisting on using a particular jQuery plugin that you won’t have time to rewrite for Vue.

If you’re careful about how you do it, you can use jQuery and Vue together safely. In this article I’m going to demonstrate how to add the jQuery UI Datepicker plugin to a Vue project.

And just to show off a bit, I’m even going to send data between this jQuery plugin and Vue!

See it working in this JS Bin.

jQuery UI Datepicker

jQuery UI Datepicker

The problem with using jQuery and Vue together

Why is doing this potentially hazardous?

Vue is a jealous library in the sense that you must let it completely own the patch of DOM that you give it (defined by what you pass to el). If jQuery makes a change to an element that Vue is managing, say, adds a class to something, Vue won’t be aware of the change and is going to go right ahead and overwrite it in the next update cycle.

Solution: use a component as a wrapper

Knowing that Vue and jQuery are never going to share part of the DOM, we have to tell Vue to cordon off an area and give it over to jQuery.

read more

WTF is Vuex? A Beginner's Guide To Vue's Application Data Store

WTF is Vuex? A Beginner's Guide To Vue's Application Data Store

This article was originally posted here on Medium on 2016/11/30


Vuex. Is it pronounced “vewks”, or “veweks”? Or maybe it’s meant to be “vew”, pronounced with a French-style silent “x”?

My trouble with understanding Vuex only began with the name.

Being an eager Vue developer I’d heard enough about Vuex to suspect that it must be an important part of the Vue ecosystem, even if I didn’t know what it actually was.

I eventually had enough of wondering, so I went to the documentation with plans of a brief skim through; just enough to get the idea.

To my chagrin I was greeted with unfamiliar terms like “state management pattern”, “global singleton” and “source of truth”. These terms may make sense to anyone already familiar with the concept, but for me they didn’t gel at all.

The one thing I did get, though, was that Vuex had something to do with Flux and Redux. I didn’t know what those were either, but I figured it may help if I investigated them first.

After a bit of research and persistence the concepts behind the jargon finally started to materialise in my mind. I was getting it. I went back to the Vuex documentation and it finally hit me…Vuex is freaking awesome!

I’m still not quite sure how to pronounce it, but Vuex has become an essential piece in my Vue.js toolbelt. I think it’s totally worth your time to check it out too, so I’ve written this primer on Vuex to give you the background that I wish I’d had.

Understanding The Problem That Vuex Solves

To understand Vuex it’s much easier if you first understand the problem that it’s designed to solve.

read more

What I Learned About VueJS From Building A Chrome Extension

What I Learned About VueJS From Building A Chrome Extension

I wanted to experiment with building a Google Chrome extension with Vue.js so I decided to take the Vue TodoMVC and try to make it accessible from my browser toolbar:

Building a browser extension with Vue is a very similar process to building a regular web page with Vue, but there are a few key differences which I’ll discuss in this article.

No templates

One thing we love about Vue is the ability to use templates either in a file:

<body>
  <div id="app">
    <div>{{ message }}</div>
  </div>
</body>

Or in a string:

new Vue({
  template: `<div>{{ message }}</div>`
});

One small problem: you can’t use templates like this in Chrome extensions!

But before you give up and go back to jQuery, it’s worth understanding why this limitation exists and how Vue can help you work around it.

read more

When VueJS Can't Help You

When VueJS Can't Help You

If you want to build a web page with JavaScript, VueJS can do one helluva job on it. But there’s a condition: it only works on parts of the page where it has unhampered control. Any part that might be interfered with by other scripts or plugins is a no-go for Vue.

This means the head and body tags are Vue-free zones. It’s a real bummer if you wanted Vue to manage a class on the body, to take one example.

But while Vue can’t directly manage the head or body tags, it can still help you to manage them through other means.

Vue’s beef with the head and body tags

Why is Vue picky about where it works?

Vue optimises page rendering through use of a virtual DOM. This is a JavaScript representation of the “real” DOM that Vue keeps in memory. DOM updates are often slow, so changes are made first to the virtual DOM, allowing Vue to optimise how it updates the real DOM through batching etc.

This system would be undermined if some third party were to make changes to the DOM without Vue’s knowledge causing a mismatch between the real DOM and the virtual DOM.

For this reason Vue will not attempt to control the whole page, but only a part of the page where it knows it will have unhampered control.

The mount element

The first thing we usually do in a Vue project is to give Vue a mount element in the configuration object via the el property:

new Vue({
  el: '#app'
});

read more