Back to blog home page

Integrating Backand with JQuery

Posted by on Mar 28, 2017

JQuery is the most widely-deployed JavaScript library. It provides a comprehensive set of responsive tools for dynamically working with an HTML page’s DOM, and is responsible for establishing and guiding a lot of the patterns that are the standard in web development. In this article, we’ll look at how you can integrate the Back& Vanilla SDK with an app built with JQuery.

Note: The code for this article is available on CodePen.

Including and Initializing the SDK

The first step in connecting your JQuery-based web app to Backand is to include the JavaScript file containing the Backand SDK. You can either do this through a package manager, or via our CDN.

Creating the Service

Once you’ve included the SDK, you’ll have access to the functionality via the global object backand. To integrate Back& with a JQuery-based web app, we’ll make use of a global service variable that will wrap the SDK. This service will handle initialization of the sdk, and provide all of the tools necessary to work with a Backand application. We’ll start by declaring the service and initializing Backand with the following code:

This defines an object – dataService – that can be used to interact with the Backand SDK. In the data service, we define a method – init – that is used to initialize the SDK’s connection to a Backand application. Simply call dataService.init() at the approrpriate location in your app’s initialization code, and the SDK is ready to use (in the example, we do this in the $(document).ready handler, but this is not required).

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).

Fetching and Manipulating the Data

Now that our app is wired up to Backand, we’ll want to start writing code to work with our Backand application’s objects. We can retrieve a list of “todo” objects from the server by adding a property to the dataService object, getList, that calls the appropriate SDK method:

This function first defines a set of filter params using helper methods in the SDK (refer to our documentation for more information). It then calls backand.object.getList() to fetch the list of objects in the SDK. The result of this call – a promise – is then passed back to the calling code. The calling code can then create its own success and failure handlers, using .then and .catch, and update internal state appropriately.

From this point onward, working with the SDK is a matter of writing wrapper methods in the dataService object for each SDK method with which you wish to interact. Backand provides interfaces for all of the common database manipulation tasks. For example, the following call defines a method – create – that creates a new entry in the database:

You can use this technique to wrap every call in the Backand SDK, providing your JQuery code with full access to the server.

Handling Responses

All Backand SDK methods return a promise, performing the tasks requested asynchronously. To handle the responses, we simply need to write the appropriate handlers for the .then and .catch calls. In the code below, for example, we write a simple set of handlers for the getList call:

As JQuery is a very flexible framework, it is hard to provide concrete guidance on exactly where SDK should take place in terms of the program’s execution. The CodePen example demonstrates one method of creating this component, but you do not need to mimic the code structure there exactly. The key component is to ensure that backand.init() is called prior to any SDK calls taking place, otherwise the calls from the SDK will fail.

Conclusion

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

For more information, visit Backand  and check out our code samples, tutorials, and more.