Tag Archives: JQuery

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.

Back to blog home page

Another Hybrid Framework Battle Begins – Ionic vs Kendo

Posted by on Apr 30, 2015

Overview

In the web development world, there are a number of different frameworks used to varying degrees by developers looking to save time in their application development efforts. These include frameworks like AngularJS, ReactJS, and even just plain JQuery. This division of frameworks has bled into the mobile realm, as JavaScript UI frameworks for mobile development have evolved into robust suites of functionality that make mobile app development quick and relatively painless. Below we’ll look at two different mobile UI frameworks: Kendo and Ionic. We’ll take a look at the ideas underpinning each one, and examine situations in which one or the other will serve best.

Continue reading

Back to blog home page

When is AngularJS Superior to jQuery?

Posted by on Dec 22, 2014

One of the most common questions asked by neophyte web developers is “Which framework should I use?” While there is no one ‘right’ answer to this question, a common subject of discussion is the differences between AngularJS and jQuery. While in some respects comparing the two is akin to comparing apples and oranges, there are undoubtedly reasons to choose one web framework over the other as the primary implementation target for a web application’s front-end. Below we will look at a few scenarios where AngularJS is a superior choice to jQuery.

Continue reading

Back to blog home page

Mockup a Web Application with Randomness

Posted by on Sep 25, 2014

Mockup

Often during a web development project, one has to create a mockup of a web application that consists of multiple screens and multiple related panels in each screen. This has to be done without a server-side. The intention is to give the project owner a good sense of the behavior of the app and to demonstrate the app to potential users.

Continue reading

Back to blog home page

Part I: ng-grid and a Simple REST API

Posted by on Sep 11, 2014

A Quick Note – with version 3, NG Grid changed its name to UI Grid. As such, we will refer to the library as UI Grid in the following text.

UI Grid is pure AngularJS and it comes with excellent documentation. It has pagination, sorting, filtering, and local data model binding/editing built-in, allowing for quick and easy integration with any AngularJS application. In this post we will demonstrate how to perform each of these tasks in an Angular application by using a RESTful API to interact with a remote data model over HTTP.

Before we get started, you will need the following packages installed:

Client side:

  • angular.js, version 1.4.3
  • angular-touch.js, version 1.4.3
  • angular-animate.js, version 1.4.3
  • ui-grid.js, latest version
  • ui-grid.css, latest version

Server side:

  • A REST API for a data model. This API must have the following actions:
    • a GET action with paging, filtering, and sorting
    • a PUT action for updating an object

In this article, we’ll be using Backand’s back end service. This provides a quick-and-easy REST API for any data model you desire, and meets all the requirements for server-side interactions.

There are 6 steps in this project, each with a jsFiddle example:

  1. Basic grid bonded to a local data model – edit in jsFiddle
  2. Connect to REST API – edit in jsFiddle
  3. Add paging – edit in jsFiddle
  4. Add sorting – edit in jsFiddle
  5. Add filtering – edit in jsFiddle
  6. Add editing – edit in jsFiddle

We will cover each step in more detail below.

Basic grid   edit in jsFiddle

This section details how to bind UI Grid to a local data model. It should be fairly straight-forward, and will allow us to bind the model to the REST API quickly. To set up the basic UI Grid, add the following into the indicated portions of your application:

HTML (for rendering the grid):

JavaScript (for binding the grid to your data model):

Connect to REST API   edit in jsFiddle

Next, we’ll build an Angular data service that performs all of the relevant REST API work. This allows us to have a clean controller that handles the display of the data. Add the following JavaScript code to your application to create the data service:

The above service provides full CRUD capability for your data model, but in this example we will primarily focus on the ‘readAll’ and ‘update’ functions. This functionality is handled through Backand’s REST API service, and ties directly into a Backand application.

Now that we have the data service, let’s change the controller to integrate the service with our local data model. Add the following JavaScript into your application:

Notice that the above code service uses Angular’s asynchronous $http, which returns a promise to sync the response. Building off this patterning, we use the promise callback to bind the response data. And with that, we have a controller that pulls its data from our ProductsService, and ties it to the variable gridOptions in $scope. From here on out, we will be using the gridOptions property for grid binding and display, we will be able to quickly update the UI Grid with the latest server data.

Paging   edit in jsFiddle

UI Grid’s built in pagination works with a local object. Since we are using a remote data model, we need to provide the pagination parameters to the REST API. To do so we will build our own simple pagination object and UI, and we will set the UI Grid’s enablePaginationControls property to false. By doing this, we will override UI Grid’s local pagination in favor of our server-based approach.

Start by adding the following JavaScript to your application:

Next, add the following HTML elements for the pagination UI:

With the above entered, all that is left is to add pageSize and pageNumber to the data service class. The service will then add these values to the REST API via HTTP query string parameters. To accomplish this, we modify the readAll function in the data service as follows (note: the highlighted code represents changes from the original):

Sort   edit in jsFiddle

UI Grid’s sorting functionality, by default, works with the local app data model. As we are using custom pagination to load the data model, the sorting functionality will thus only sort the portion of the data that has been loaded locally, which is obviously not desirable. To fix this, we need to use a server side sort that ties in with our pagination, allowing us to return the correct data with respect to the entire data set. To do this, we’ll set UI Grid’s useExternalSorting property to true, then add an array of fields with a sort direction (either ascending or descending) to provide to the REST API as a query string parameter. Finally, to populate this array we will register for the sortChanged event on the grid, using the event to call our custom data service.

First, add the following JavaScript to your application:

Next, we modify the data service to accommodate the new ‘sort’ parameters. Once again, the highlighted code represents the changes to the existing data service code:

Filter edit in jsFiddle

UI Grid’s built-in filter functionality has the same restrictions as the Sort functionality above – it only operates on the local dataset, which is not particularly useful with our REST-based data service. To fix this, we’ll use the same general process – enable external filtering on UI Grid, then send the filter parameters through as URL query parameters from our data service. To do this, we set UI Grid’s useExternalFiltering property to true and the enableFiltering property to true. This allows us to use UI Grid’s filtering interface, but not the local filtering itself.

A quick note: Filtering can be very sophisticated, and highly app-dependent. Below, we intentionally use some very simple filtering in order to demonstrate the functionality. Our purpose is to build a basic remote filtering infrastructure, which you can later build upon to add additional complexity as necessary.

Similar to the Sort functionality above, we’ll subscribe to the filterChanged event of the UI Grid. We’ll use this handler to populate a set of filter fields, as well as the operators and the specific filter values. As this functionality is API-dependent, you’ll want to make sure you understand the filtering functionality available on your REST API service. You can find the full REST API documentation for Backand’s REST API Service here. To tie in with this functionality, we will set all of the text field operators to ‘contains,’ the id field’s operator to ‘equals,’ and the pricing field’s operator to ‘greaterThanOrEqualsTo’.

Use the following JavaScript to register for the filterChanged event:

Now, we modify the data service again with the highlighted code:

Edit   edit in jsFiddle

With pagination, sorting, and filtering added, it’s finally time to handle editing. Below we will implement basic cell editing, but you can easily add dialog-based and row-based editing on your own. First, enable editing of the individual cells by adding the ui-grid-edit attribute to the UI Grid element. Once this is completed we’ll register for the afterCellEdit event and use the event handler to call the update function of our data service. Finally, we reload the entire grid in the edit event’s callback promise. This is done in case editing the cell on the server results in additional changes to the data (such as those that might be triggered by a customer server-side action in your Backand application, or any calculated values that appear in the grid that might depend upon the cell). The code below also uses Backand’s __metadata.id field to obtain the ID needed for the update function. This is advised for cases when the ID field is changeable, and allows you to quickly reference the original row’s ID instead of having to save it off before modifying the existing value. You can leave this as-is, or choose to use rowEntityId and make the associated code changes in your project.

To make these changes, we perform all of the relevant tasks in UI Grid’s afterCellEdit event handler:

Summary

With the above completed, we now have a UI grid that has paging, sorting, filtering, and editing – all tied in to a remote database. While this operates on a fairly basic data set, you can quickly add new elements and functionality to handle more complex use-cases by following the same patterns used above. In any case, the above should serve as an excellent template for constructing a dynamic UI Grid based upon server-side REST APIs.

You can find more information on each of the components below at the provided URLs:

Back to blog home page

Time Saving AngularJS Tips

Posted by on Sep 04, 2014

AngularJS is a powerful tool for creating dynamic web pages, but as with any tool it can make things more complicated and unwieldy when used incorrectly. Below are some tips for those looking to improve the performance or the stability of their AngularJS website. Some of these tips will save memory for your application, resulting in a smaller footprint, while others will focus on the development process – allowing for quicker identification of errors that would otherwise emerge at the most inopportune time.

Continue reading