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,084

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
1 Comment
8 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
4,084
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
35
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide
  • Has looked this way since 2004Desperately in need of a redesign
  • After some content/user behavior analysis, I determined that most of the most-used content is infrequently updated static content. We don’t need a CMS. We just need HTML.
  • California Digital Library has done a lot of work developing the microservices concept and is building a repository based on these concepts. Go to http://merritt.cdlib.org/ to read more about that.
  • Singular technologies that when combined, produce a single product (a database-driven website, in the case of LAMP)Same concept, but applied on a much more specific level in order to build a website
  • More or less broken up into four categories, content / visual design, integration / interaction, compilation and storage, and post-processing
  • 12 individual microservices
  • Our “data” is just text, anyway.Version control systems are work well with text
  • The site will have a couple templates (layouts without any content), and Mustache brings the JSON-stored content and the layouts together to produce content-filled webpages
  • Headline and body are going to get pulled from the JSON, you can see also how you can include other templates for the header, footer, and analytics.
  • A flavor of SASS designed to look more CSS-likeMuch easier to maintainVariables, nested definitions, mixins
  • Compass allows for mixins, nested definitions, variables
  • This gives URLs to pages that don’t actually exist.By doing this, you can go back and forth using the back button in a dynamic applicationFor this site, this will allow users to bookmark the dynamic portions of the site (such as the staff contact search)You’ll see the /!#/ convention in Twitter and Facebook URLs. Same thing.
  • Because some portions of the site are dynamic, it will require a custom sitemap generator to index all of the content
  • Has a very advanced forking and merging system which would allow us to work on parallel versions of the site (for, say, a redesign) and then merge these changes back with ease
  • In order to be incorporated, all of the microservices are essentially ‘plugins’ to the Bonsai build system.This could really be a set of nicely complex ‘ant’ scripts, but I like bonsai for now.
  • Compressor takes Javascript and CSS files and reduces their file size by removing comments and simplifying variable names
  • CSS definitions then define the boundaries of the sprite, showing the user only the part of the (larger) graphic that is appropriate for that space
  • Sitemaps tell search engines where specific resources are and how to index them
  • Want to support the latest touch device? Write a new template, hit ‘compile’ and upload the new website.Maybe Compass is getting stale and we want to take advantage of the latest and greatest CSS specifications? Just swap it out.
  • Hours is a huge one
  • Most of these microservices take in HTML and spit out HTML, so that’s easy.Or takes in CSS and spits out CSSSwapping in and out of services only becomes complex when it takes in one data type and spits out another.
  • Transcript of "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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×