Manifesto

Manifesto is a new open source project to consolidate all of the Universal Viewer's IIIF Presentation API-related functionality into a separate library.

If you are not acquainted with the Universal Viewer project, here is a short history.

The idea for a IIIF Presentation API SDK had been floating around the community for a while. It was decided at a technical session in May in Washington to pursue this idea under the name "Manifesto" (hat tip to @sdellis for the great name). This would make it easier for developers to get started creating their own IIIF viewing experiences, and existing viewers would benefit from a shared independently testable library.

Manifesto is a Universal JavaScript library. This means (thanks to Browserify) that the same code can be used on the client and server (examples to follow).

It also (like the UV) uses TypeScript to enable static typing and to access ES6 language features.

Getting Started

I have created a few simple JavaScript applications to demonstrate how to use Manifesto:

https://github.com/viewdir/manifesto-express-demo
A web server that loads a manifest and writes its label to the response.

https://github.com/viewdir/manifesto-react-demo
A web site using the react rendering engine.

https://github.com/viewdir/manifesto-handlebars-demo
A web site using the handlebars rendering engine.

Both web site examples will give you the option of entering the URL of a IIIF manifest, then either clicking Load (Client) to use the client-side version of Manifesto, or Load (Server) to use the server side version to load the manifest and display its label property.

website

Simple example

These applications may be useful for web developers with experience in the technologies used (git, node, express, react, handlebars). But, for the sake of simplicity, let's create a simple web page with a script tag pointing to manifesto.js that loads up a manifest and displays its label property.

The code for this example is also available here https://github.com/viewdir/manifesto-simple-demo

Here is our simple index.html page:

<html>
<head>
</head>
<body>
</body>
</html>

Save this in a folder named manifesto-simple-demo.

Now, download the latest release of Manifesto.

Extract the .zip or .tar.gz file, then copy dist/client/manifesto.bundle.js into your manifesto-simple-demo folder.

We should now have this file structure:

manifesto-simple-demo
├── index.html
└── manifesto.bundle.js

Add a script tag to your page with a src attribute pointing to manifesto.js

<html>  
<head>  
  <script src="manifesto.bundle.js"></script>
</head>  
<body>  
</body>  
</html>  

Now add the following script to your index.html underneath the existing script tag:

<script>  
manifesto.loadManifest('').then(function(manifest){  
  var m = manifesto.create(manifest);
  document.body.innerHTML = m.getLabel();
});
</script>  

This JavaScript code is calling Manifesto's manifesto.loadManifest method, then creating a Manifest object from the returned JSONLD using manifesto.create and assigning it to a variable named m.

It then writes the manifest object's label property to the page body using m.getLabel().

You'll notice, however, that the manifesto.loadManifest method is currently being passed an empty string. Let's find a IIIF manifest to load. The UV demo site has a collection of these. If you scroll down to where it says Manifest there is a drop down box with a text field underneath it. The drop down box is a convenient means for trying different manifest URLs in the UV. Copy the contents of the text field.

manifest

Now paste the url into the manifesto.loadManifest method call:

manifesto.loadManifest('http://wellcomelibrary.org/iiif/b18035723/manifest')  

You'll notice that following this method it says .then. This is using a syntax known as Promises. Promises are used to wait for an asynchronous operation to finish (such as loading some JSONLD data in this case) and then optionally doing something with the returned data. If you have a modern web browser such as Chrome or Firefox, this syntax should work without any errors. If not, I suggest adding another script tag to your page above manifesto.js pointing to a Promises 'shim' such as https://github.com/jakearchibald/es6-promise

Nearly there..! Now we just need a way to serve our web page in a browser. If you are using a Mac you can set up localhost like this: https://www.youtube.com/watch?v=jeerWDYEAIU

This is my preferred method to quickly test web pages on Windows: http://www.jhh.me/blog/2012/12/24/setting-up-http-server-on-windows-with-node-js/

Once you have a simple web server set up you should see the manifest's label being written to the page like this:

localhost

This is obviously just a really simple contrived example and Manifesto is capable of more complicated functionality. It is still a very new library and at present unfortunately has no documentation :-)

This will change, however. If you wish to stay up to date with developments I advise joining the IIIF-Discuss and Universal Viewer Google groups. There is also a UV Twitter account which will post relevant updates.

Thanks for reading!