-
-
Notifications
You must be signed in to change notification settings - Fork 165
Developing for WeBWorK3
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 and there is a vuejs framework. This will explain the overview of WeBWorK 3 with specifics linked.
WeBWorK 3 (WW3) is the next generation of WeBWorK, which features a more dynamic user interface. There are two new pieces of the webwork code that constitutes WW3: perl dancer (the server side code) and the UI (using vuejs and other JavaScript libraries). WW3 is nearly independent of WW2. Next, we will describe in general these technologies.
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.
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.
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.
Vue.js provides a structure for creating a Single-Page Application. For Webwork 3, all of the various views are simply a single HTML page with different renderings for each view. This allows for the page to load once with all assets (images/css/js libraries) and fetch and update to the server dynamically as needed.
The model for writing Vuejs pages is to create components that are self contained in terms of an HTML template, needed javascript and CSS. Such a programming model makes it easy to write and maintain pieces of a large-complicated interface.
In addition, we use the Vuex library to handle the state of the application. In short, this is the users, problem sets and settings of a particular webwork class.
There are details about vuejs and webwork3 in this page