Tech Blog

Alma APIs with Vue.js

We are in the age of single-page web applications (SPAs). A SPA loads in a user’s browser and sends requests to the server to bring or update data. Rather than returning to the server to receive new HTML, the user interface is updated dynamically based on the data retrieved.

The rise of frameworks for JavaScript development in recent years has made it easier to develop client-side apps. The three major frameworks used today are Angular, React, and Vue. There are many blogs which discuss the pros and cons of each framework and attempt to measure their relative popularity.

Vue.js was first released in 2014, and claims to have taken the best from the other frameworks. It is relatively lightweight and perhaps less opinionated than others. Vue.js is powerful enough to create entire single-page applications, but simple enough to easily get started. There are many good getting started guides on the web, including this one from the official site.

In this blog post, we’ll show how to use Vue.js with the Alma REST APIs by building a simple single-page app which allows us to update enum/chron information on items.

Data binding

All of the JS frameworks are based on data binding. Data binding synchronizes changes from a source object to a target. This method allows us to build a user interface where an object is represented in UI controls and changes are synchronized back to the underlying object.

In a typical JavaScript-based application, data is retrieved from the server in JSON format. The JSON support of the Alma APIs makes this painless. The data retrieved can be bound to HTML controls. In this example using Vue.js syntax, data from our model is displayed in a heading tag and is used as the value of an input textbox.

<h5 class="card-title">{{ item.bib_data.title }}</h5>

<input type="text" class="form-control" placeholder="Enum a" 
   v-model="item.item_data.enumeration_a">

Server side

Any server-side language can be used to create a backend for a JavaScript-based application. In our example, we’re using a simple Ruby on Rails application which leverages the alma_rest_api gem. Our item controller has two methods, one to retrieve the JSON for an item and one to update it.

def show
  item = AlmaRestApi.get "/items?item_barcode=#{params[:id]}"
  respond_to do |format|
    format.json { render json: item }
  end
end

def update
  item = AlmaRestApi.put params[:link], params.slice(:item_data)
  render json: item
end

Client-side

In a single-page app, the client side is a simple web page made up of HTML, CSS, and JavaScript. It can be hosted by any webserver. In our example, we’re hosting the web pages in the same app but note that there is no server-side processing happening. The client HTML includes the binding syntax we mentioned earlier to display data retrieved from the server on the page.

The client does require that we instantiate the Vue.js object. Once we do so and specify the model, Vue takes care of all of the DOM updates under the covers. The Vue syntax language offers conditionals, loops, composition, and many of the features you expect from a full-functioning language.

In our example, we instantiate the Vue object and specify the container div ID and the initial object (an empty “item” object). We also specify the methods used to retrieve and update the item, which call our Rails controller.

var app = new Vue({
  el: '#app',
  data: { item: { item_data: { barcode:""}}, messages: {}},
  methods: {
    retrieveItem: () => {
      $.getJSON( "/items/" + this.item.item_data.barcode)
      .done( ( data ) => this.item=data )
    }
  }
});  

Putting it together

The result of our simple items controller and trivial front-end is a single page which allows the user to retrieve an item based on the barcode, display the title, location, and enumeration and chronology information. The user can make changes and select “Update item,” which sends the JSON from the bound Vue object.

This brief introduction to using the Alma APIs with Vue.js just touches the surface of what’s possible using the power of today’s JavaScript frameworks with our library apps. The full source code for this sample is available in this Github repository.

Leave a Reply