A Microservices Approach to Library Websites

Sean HannanSheridan Libraries

Johns Hopkins University

Sheridan Libraries Website

Sheridan Libraries Website

What Are Microservices?

• What are microservices?– They are programmatic building blocks– Each has a single purpose and focuses on that

single purpose– If new technology comes along or we need to

replace some functionality, the functional definitions allow us to add, subtract, or swap out these blocks

CDL’s DefinitionDevolve function into a granular set of independent, but interoperable micro-services

– Since each is small and self-contained, they are collectively easier to develop, maintain, and deploy

– Since the level of investment in any given service is small, they are easier to replace when they have outlived their usefulness

– The scope of each service is limited, but complex behavior can emerge from the strategic composition of individual atomistic services

– All service interactions through public interfaces

A Brief History of Microservices

• In computing, you have a ‘technology stack’ (i.e. the LAMP stack: Linux, Apache, MySQL, and PHP)

• California Digital Library has been working on creating individual services for each of the functions of a repository (deposit, retrieval, storage, index, etc.) (Merritt)

Website Microservices• These are the microservices that will make up the construction of the

MSEL Library Website:– JSON flat files (Content Storage)– Mustache (Templating)– Compass (Style & Layout)– JQuery UI (UI Elements)– JQuery BBQ (State Handling)– Google (Site Search)– git (Version Control)– Bonsai (Compiler/Static Output)– YUI Compressor (Compression)– Lemonade (Image Processing)– PHP-Typography (Document Formatting)– Custom Sitemap Generator (Indexing)

JSON Flat Files

• Instead of keeping content in a database, we’ll be keeping it in individual files

• JSON keeps it structured• Works well with version control systems

Mustache

• http://mustache.github.com• Templating library• Available for 20 programming languages{

JSON looks like this:

Mustache looks like this:

Mustache-processed JSON:

Compass

• http://compass-style.org• CSS can be very difficult to maintain• Compass allows you to write rules and logic

that are not possible in CSS• These compass files are then compiled into

CSS that works on every web browser

CSS Syntax Example

Compass Syntax Example

JQuery UI

• http://jqueryui.com• A convenient set of user interface widgets

(buttons, dialog boxes, etc.) and interaction effects (animation, show/hide functions, etc.)

• Themable

JQuery UI Themes

JQuery BBQ

• http://github.com/cowboy/jquery-bbq• State-handling Javascript library• This allows for bookmarking of dynamic

websites• Doesn’t break the back button

Google

• We’ll be leveraging Google’s site search to allow users to search website content

• It’s free, why not use it?

git

• Version control system• Allows us to “roll back” to previous versions of

content, or indeed, previous versions of site functionality

Bonsai

• http://tinytree.info• A set of scripts that ‘compiles’ the website

from these disparate microservices into directories and HTML that can be uploaded to any web server

Bonsai Example

YUI Compressor

• http://developer.yahoo.com/yui/compressor• Saves on bandwidth and improves

performance from caching

Lemonade

• http://github.com/hagenburger/lemonade• Automatically generates CSS Sprites• CSS Sprites are a way to reduce website load

times by compiling all of the images on to a page into a single image

• This image is then loaded once and cached

CSS Sprites

*Courtesy css-tricks.com

PHP-Typography

• http://kingdesk.com/projects/php-typography• Greatly improves web typography

automatically• End-of-line hyphenation• Automatic replacement of smart quotes, em

and en dashes, ellipses, math symbols, etc.

Custom Sitemap Generator

• In order to help out Google, we need a custom sitemap

• For our case, we want to make sure that Google indexes all of our dynamically-built URLs

Benefits of the Microservices Approach

• More feature-rich, but ultimately smaller and easier to maintain website

• Adaptability• Content mobility

Content Mobility

• With the number of websites and presences we are a part of, we need a standard way to serve information from one place

• We can serve up the hours content as standard JSON, and use the Javascript version of Mustache to embed that data anywhere we need to. Website, JHU Portal, Blog, wherever.

• Write once, update everywhere

Next Steps

• Documentation of interfaces

Questions?