A Microservices Approach to Library Websites<br />Sean Hannan<br />Sheridan Libraries<br />Johns Hopkins University<br />
Sheridan Libraries Website<br />
Sheridan Libraries Website<br />
What Are Microservices?<br />What are microservices?<br />They are programmaticbuilding blocks<br />Each has a single purp...
CDL’s Definition<br />Devolve function into a granular set of independent, but interoperable micro-services<br />Since eac...
A Brief History of Microservices<br />In computing, you have a ‘technology stack’ (i.e. the LAMP stack: Linux, Apache, MyS...
WebsiteMicroservices<br />These are the microservices that will make up the construction of the MSEL Library Website:<br /...
JSON Flat Files<br />Instead of keeping content in a database, we’ll be keeping it in individual files<br />JSON keeps it ...
Mustache<br />http://mustache.github.com<br />Templating library<br />Available for 20 programming languages<br />{<br />
JSON looks like this:<br />
Mustache looks like this:<br />
Mustache-processed JSON:<br />
Compass<br />http://compass-style.org<br />CSS can be very difficult to maintain<br />Compass allows you to write rules an...
CSS Syntax Example<br />
Compass Syntax Example<br />
JQuery UI<br />http://jqueryui.com<br />A convenient set of user interface widgets (buttons, dialog boxes, etc.) and inter...
JQuery UI Themes<br />
JQuery BBQ<br />http://github.com/cowboy/jquery-bbq<br />State-handling Javascript library<br />This allows for bookmarkin...
Google<br />We’ll be leveraging Google’s site search to allow users to search website content<br />It’s free, why not use ...
git<br />Version control system<br />Allows us to “roll back” to previous versions of content, or indeed, previous version...
Bonsai<br />http://tinytree.info<br />A set of scripts that ‘compiles’ the website from these disparate microservices into...
Bonsai Example<br />
YUI Compressor<br />http://developer.yahoo.com/yui/compressor<br />Saves on bandwidth and improves performance from cachin...
Lemonade<br />http://github.com/hagenburger/lemonade<br />Automatically generates CSS Sprites<br />CSS Sprites are a way t...
CSS Sprites<br />*Courtesy css-tricks.com<br />
PHP-Typography<br />http://kingdesk.com/projects/php-typography<br />Greatly improves web typography automatically<br />En...
Custom Sitemap Generator<br />In order to help out Google, we need a custom sitemap<br />For our case, we want to make sur...
Benefits of the Microservices Approach<br />More feature-rich, but ultimately smaller and easier to maintain website<br />...
Content Mobility<br />With the number of websites and presences we are a part of, we need a standard way to serve informat...
Next Steps<br />Documentation of interfaces<br />
Questions?<br />
Upcoming SlideShare
Loading in …5
×

Let's Get Small: A Microservices Approach to Library Websites

4,597 views

Published on

Taking the CMS out of library websites, and replacing it with a set of modular tools for greater adaptability and mobility.

Published in: Technology
  • Video of the talk can be viewed here: http://www.indiana.edu/~video/stream/launchflash.html?format=MP4&folder=vic&filename=C4L2011_session_3b_20110209.mp4

    It starts 47 minutes in.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Let's Get Small: A Microservices Approach to Library Websites

  1. 1. A Microservices Approach to Library Websites<br />Sean Hannan<br />Sheridan Libraries<br />Johns Hopkins University<br />
  2. 2. Sheridan Libraries Website<br />
  3. 3. Sheridan Libraries Website<br />
  4. 4. What Are Microservices?<br />What are microservices?<br />They are programmaticbuilding blocks<br />Each has a single purpose and focuses on that single purpose<br />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<br />
  5. 5. CDL’s Definition<br />Devolve function into a granular set of independent, but interoperable micro-services<br />Since each is small and self-contained, they are collectively easier to develop, maintain, and deploy<br />Since the level of investment in any given service is small, they are easier to replace when they have outlived their usefulness<br />The scope of each service is limited, but complex behavior can emerge from the strategic composition of individual atomistic services<br />All service interactions through public interfaces<br />
  6. 6. A Brief History of Microservices<br />In computing, you have a ‘technology stack’ (i.e. the LAMP stack: Linux, Apache, MySQL, and PHP)<br />California Digital Library has been working on creating individual services for each of the functions of a repository (deposit, retrieval, storage, index, etc.) (Merritt)<br />
  7. 7.
  8. 8. WebsiteMicroservices<br />These are the microservices that will make up the construction of the MSEL Library Website:<br />JSON flat files (Content Storage)<br />Mustache (Templating)<br />Compass (Style & Layout)<br />JQuery UI (UI Elements)<br />JQuery BBQ (State Handling)<br />Google (Site Search)<br />git (Version Control)<br />Bonsai (Compiler/Static Output)<br />YUI Compressor (Compression)<br />Lemonade (Image Processing)<br />PHP-Typography (Document Formatting)<br />Custom Sitemap Generator (Indexing)<br />
  9. 9. JSON Flat Files<br />Instead of keeping content in a database, we’ll be keeping it in individual files<br />JSON keeps it structured<br />Works well with version control systems<br />
  10. 10. Mustache<br />http://mustache.github.com<br />Templating library<br />Available for 20 programming languages<br />{<br />
  11. 11. JSON looks like this:<br />
  12. 12. Mustache looks like this:<br />
  13. 13. Mustache-processed JSON:<br />
  14. 14. Compass<br />http://compass-style.org<br />CSS can be very difficult to maintain<br />Compass allows you to write rules and logic that are not possible in CSS<br />These compass files are then compiled into CSS that works on every web browser<br />
  15. 15. CSS Syntax Example<br />
  16. 16. Compass Syntax Example<br />
  17. 17. JQuery UI<br />http://jqueryui.com<br />A convenient set of user interface widgets (buttons, dialog boxes, etc.) and interaction effects (animation, show/hide functions, etc.)<br />Themable<br />
  18. 18. JQuery UI Themes<br />
  19. 19. JQuery BBQ<br />http://github.com/cowboy/jquery-bbq<br />State-handling Javascript library<br />This allows for bookmarking of dynamic websites<br />Doesn’t break the back button<br />
  20. 20. Google<br />We’ll be leveraging Google’s site search to allow users to search website content<br />It’s free, why not use it?<br />
  21. 21. git<br />Version control system<br />Allows us to “roll back” to previous versions of content, or indeed, previous versions of site functionality<br />
  22. 22. Bonsai<br />http://tinytree.info<br />A set of scripts that ‘compiles’ the website from these disparate microservices into directories and HTML that can be uploaded to any web server<br />
  23. 23. Bonsai Example<br />
  24. 24. YUI Compressor<br />http://developer.yahoo.com/yui/compressor<br />Saves on bandwidth and improves performance from caching<br />
  25. 25. Lemonade<br />http://github.com/hagenburger/lemonade<br />Automatically generates CSS Sprites<br />CSS Sprites are a way to reduce website load times by compiling all of the images on to a page into a single image<br />This image is then loaded once and cached<br />
  26. 26. CSS Sprites<br />*Courtesy css-tricks.com<br />
  27. 27. PHP-Typography<br />http://kingdesk.com/projects/php-typography<br />Greatly improves web typography automatically<br />End-of-line hyphenation<br />Automatic replacement of smart quotes, em and en dashes, ellipses, math symbols, etc.<br />
  28. 28. Custom Sitemap Generator<br />In order to help out Google, we need a custom sitemap<br />For our case, we want to make sure that Google indexes all of our dynamically-built URLs<br />
  29. 29. Benefits of the Microservices Approach<br />More feature-rich, but ultimately smaller and easier to maintain website<br />Adaptability<br />Content mobility<br />
  30. 30. Content Mobility<br />With the number of websites and presences we are a part of, we need a standard way to serve information from one place<br />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.<br />Write once, update everywhere<br />
  31. 31. Next Steps<br />Documentation of interfaces<br />
  32. 32. Questions?<br />

×