Developing for WeBWorK3

#Developing for WeBWorK 3

This document discusses how to get started developing for WeBWorK 3. This document assumes that you've had some programming experience and you're not afraid to read documents and get your hands dirty with some code. Primarily WeBWorK is written in perl and HTML, and the newer UI requires knowledge of javascript. This will explain the overview of WeBWorK 3 with specifics linked.

##What is WeBWorK 3?

The current (June 2014) stable version of WeBWorK is version 2.8 with 2.9 scheduled to release over the summer of 2014. WeBWorK 3 (WW3) is the next generation of WeBWorK, which features a more dynamic user interface. This new version has been in the works since the summer of 2012, but plans are to release the new UI in version 3.0 in the fall of 2014.

There are two new pieces of the webwork code that constitutes WW3: perl dancer (the server side code) and the UI (various JavaScript libraries). WW3 is nearly independent of WW2. Next, we will describe in general these technologies.

##Perl Dancer and a RESTful API

According to perldancer.org Dancer is a simple but powerful web application framework for Perl. There are many features in perl dancer, but WeBWorK uses the powerful routing capabilities.

RESTful API

When building a web application, it is important to communicate the client with the server (basically to read and write data). A standard way to do this is with a RESTful API in that the URL is in the form of an object in webwork. For a WeBWorK example, a user with name jdoe will have the URL /users/jdoe The problem set named HW1 in course math1 is /courses/math1/sets/HW1

In addition, each routes has one or more verbs associated with the http requests. The verbs are write (POST), read (GET), update (PUT), and delete (DEL).

If you want to create, read, update or delete the user HW1 in the course math1, the routes are

POST /courses/math1/sets/HW1
GET /courses/math1/sets/HW1
PUT /courses/math1/sets/HW1
DELETE /courses/math1/sets/HW1

And it is quite easy to create these routes in perl dancer. For more specifics of Perl Dancer in WeBWorK 3, read this page.

##The WeBWorK 3 User Interface

WeBWorK 3 uses javascript to provide a dynamic webpage experience and uses libraries to provide that rich experience with simpler code. The following gives an overview of the javascript libraries used.

###Backbone.js library

Backbone.js provides a structure for models, collections, views and synching to a server. Although built-in javascript has the ability to store data in the form of objects and arrays of objects, the models and collections in Backbone give a common structure to these as well as a simple way of synching to the server. Both models and collections handle events associated with them including saving, synching, changes, additions, removals.

In addition, Backbone has a View object, which is useful for providing a way of rendering a model or collection as well as handling any HTML events that occur on the page.

There are further examples about the use of Backbone.js in WebWorK3 here.

###Backbone.Stickit

Although Backbone.js provides a convention to rendering models and collections, it doesn't have an automatic way of handling any binding between models and the HTML. That is if a user makes changes in a form, the model isn't updated automatically, or if a model changes the HTML doesn't update automatically. That does happen with Backbone.Stickit. This provides further documentation specific to Backbone.Stickit in WeBWorK 3.

###Backbone Validation

Backbonejs has a number of helpful plugins as well. Backbone Validation is one that handles the validation of data in a nice manner in that the programming can think about the error handling and the UI. Here is more information about Backbone Validation in WeBWorK 3.