Tag Archives: vue.js

Back to blog home page

Integrating Backand with Vue.js

Posted by on Mar 07, 2017

Vue.js is a progressive framework designed to provide an intuitive means by which a front-end developer can build their application. It is designed to be incrementally adaptable, allowing you to use it as often as you like, and provides a lightweight set of tools for adding dynamic functionality to a web app. By providing dynamic backing to the view model, you can easily make a Vue.js-based application into a large and feature-rich web app. In this post, we’ll look at how we can use Backand’s Vanilla SDK in a Vue.js-based application to provide the backing for that data service.

Note: This example is also available on Codepen. If you don’t yet have a Backand account, you can get on for free, here.

Including and Initializing the SDK

The first step in connecting your Vue.js app to Backand is to import the JavaScript file containing the Backand SDK. You can either do this through a package manager, or via our CDN.

Once you’ve included the SDK, you’ll have access to the functionality via the global object backand. You’ll next use this to initialize our connection to Backand in the constructor for your app’s Vue instance. We recommend putting the initialization in the beforeMount lifecycle hook, but any location or hook that initializes the SDK before it is used should be sufficient:

 

With that, the Backand SDK is initialized. This post uses a pre-built demo app, reactnativetodoexample, and its associated keys. If you wish to connect this demo to your own Backand application, simply replace appName, signUpToken, and anonymousToken with the correct values from your Backand application’s dashboard. Aside from updating the data model to include the ToDo object, the only thing you will need to do to ensure your app operates in the same way is to add the relevant custom actions when editing a ToDo item (see below).

Loading the object data

Next, you need to define a global method that knows how to load the object data from your Backand application. To do this, first define an empty data member to store the future results from the API:

This data member will hold the list of ToDo items obtained from the server. Next, we’ll define a global method to populate this data member:

This function first clears out the todos data member, then defines a set of filter params using helper methods in the SDK (refer to our documentation for more information). Then, it calls backand.user.getUserDetails() to determine if the list should be restricted to the currently logged-in user. Finally, the method calls backand.object.getList() to fetch the list of objects in the SDK, and then updates the todos data container in the promise resolution block.

Now, you simply need to call fetchTodos() in the appropriate location in the Vue lifecycle. To load the data when mounting is complete, you can add it to the “mounted” handler like so:

Creating, Editing, and Deleting Objects

Once you’ve got the basic display up and running, you’ll want to add methods to create, update, and delete the ToDo items based on user actions. The following code is a handler for an x-template component titled todo-form, which is used to create a new ToDo entry in the application:

Following a similar pattern to the initial load, this code first checks for a user context. If a user is not logged in, this call will have a value of null. Otherwise, we can use the userId of the active user to assign ownership of the new ToDo item. The code then calls backand.object.create() to create the record in your Backand application.

You can follow a similar pattern when updating an object:

This function demonstrates how to update a ToDo item’s completion date using backand.object.update() – simply provide the object name, the object ID, and the collection of changes to be made. The above method also provides deletion functionality with the remove method. Simply provide the object name and the ID of the ToDo item to delete the entry from your database.

Keeping the app up-to-date

While you now have a fully-functional CRUD interface for the “todo” object, you have not yet built a way for your application to receive – and respond to – updates. You can accomplish this using Backand’s Realtime Communications capability. First, create the appropriate Custom JavaScript actions in your Backand app’s dashboard, and have them emit an event titled “update_todos” as follows:

Once that’s done, we need to set the SDK to enable socket mode:

Finally, you need to add an event handler. Update your mounted handler to include the event handler function as follows:

This function handles all update_todos events the same way – by reloading the entire list from the server. You can use a similar technique to write different handlers for each database operation, or to perform other types of logic based on your application’s needs.

Conclusion

With the above code, you now have a simple data service that you can use to update your Vue.js app’s user interface with results from a Backand application. You can create, update, and delete records at will in a responsive manner, no server code required. With Backand, you can accelerate your Vue.js development, focusing on what makes your app unique, and leave the server side to us.