{"id":484,"date":"2018-09-12T17:08:17","date_gmt":"2018-09-12T17:08:17","guid":{"rendered":"https:\/\/www.embl.org\/about\/info\/communications\/?p=484"},"modified":"2021-10-11T11:54:10","modified_gmt":"2021-10-11T11:54:10","slug":"faster-scientific-websites-through-reusability","status":"publish","type":"post","link":"https:\/\/www.embl.org\/about\/info\/communications\/blog\/2018\/09\/faster-scientific-websites-through-reusability\/","title":{"rendered":"Faster scientific websites through reusability"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Growing an EMBL-EBI solution into a Visual Framework for the life sciences<\/h2>\n\n\n\n<p>Building a website is easy. Building a good website is trickier. Building that good site <em>quickly<\/em> is <a href=\"https:\/\/xkcd.com\/1425\/\">hard<\/a>. And if you want a beyond-hard challenge, also match your organisation\u2019s look, feel and brand requirements.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Fortunately there are many tools out there to help solve some of these problems.<\/p>\n\n\n\n<p>Take the popular frontend toolkit of <a href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a>: in <a href=\"https:\/\/getbootstrap.com\/docs\/3.3\/about\/#history\">2010 Twitter saw<\/a> that many web developers were solving the same problems when building website \u2014 tabs, nice looking forms, menus and so on \u2014 and provided a drop in solution with sane defaults.<\/p>\n\n\n\n<p>Bootstrap continues to be a huge success on the general web,&nbsp;including for life science websites.<\/p>\n\n\n\n<p>So it\u2019s not much of a surprise that <a href=\"https:\/\/github.com\/ebiwd\/EBI-Framework\/tree\/v1.1#about-the-framework\">in 2015 at EMBL-EBI<\/a> we decided to mirror the Bootstrap approach to make a reusable \u201c<a href=\"https:\/\/www.ebi.ac.uk\/style-lab\/websites\/\">EBI Visual Framework<\/a>\u201d to power&nbsp;<a href=\"https:\/\/www.ebi.ac.uk\">EMBL-EBI sites<\/a>&nbsp;and life science <a href=\"https:\/\/www.ebi.ac.uk\/services\">services<\/a>, <a href=\"https:\/\/www.ebi.ac.uk\/interpro\">such as InterPro<\/a>.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Reusable, structured CSS, JS? \u2705<\/li><li>An attached pattern library? \u2705<\/li><li>Sane defaults for new websites? \u2705<\/li><li>Make the EMBL-EBI look and feel more consistent? \u2705<\/li><li>Provide versioned upgrades to the tools, EMBL-EBI look? \u2705<\/li><li>Job done?&nbsp;<em>Almost<\/em>.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Problem (not quite) solved<\/h2>\n\n\n\n<p>The EBI Visual Framework in many ways did what it set out to do and those success came from mirroring the philosophy behind Bootstrap and similar tools. But there are some challenges which are a little unique to our environment where the Bootstrap-style philosophy breaks down:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>\u274cRun everywhere, with everything?<\/strong>Within EMBL scientific teams are free to bring their own technical solutions to their problems \u2014 that means the EBI Visual Framework has to run across a variety of front ends (Angular, React, vanilla HTML) and it also needs to run alongside other solutions, like Bootstrap. All of this is possible, but it is often messy; example: which framework should style your <code>.button<\/code> elements?<\/li><\/ul>\n\n\n\n<figure class=\"vf-figure wp-block-image alignnone size-large wp-image-751 is-style-default\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/www.embl.org\/about\/info\/communications\/wp-content\/uploads\/2018\/09\/Screen-Shot-2018-09-07-at-15.19.41-1024x753.png\" alt=\"\" class=\"wp-image-751\"\/><figcaption class=\"vf-figure__caption\"><span style=\"font-weight: 400;\">The default EBI Visual Framework settings clash with Bootstrap and other frameworks, so we offer&nbsp;<a href=\"https:\/\/www.ebi.ac.uk\/style-lab\/websites\/sample-site\/integrations\/lite.html\">a \u201clite\u201d variant<\/a>&nbsp;(right side) that comments out many non-core feature of the full framework (left side). The lite version offers better compatibility, but an unpredictable developer experience, particularly when using the Visual Framework&#8217;s design patterns.<\/span><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>\u274c&nbsp;Easily add your own patterns, tweak existing patterns?<br>We provide a wide set of default patterns for tabs, buttons, tables, dynamic lists \u2014 but when a team wants to bring their own pattern (or not use a pattern) there is no seamless way to do so.<\/strong><\/li><li><strong>\u274c&nbsp;Use the functions, without the EMBL-EBI look?<\/strong><br>Much like Bootstrap, the EBI Visual Framework looks a lot like its parent organisation. From an evolutionary perspective, this makes sense. But we have internal teams that want to reuse our tools but due to good reasons can\u2019t look too much like EMBL-EBI, or they do not need large chunks of JavaScript that implements EMBL-EBI specific features.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Take 2.0<\/h2>\n\n\n\n<p>Now in 2018 we\u2019re improving the Visual Framework by learning from those lessons.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>\u2705 Run everywhere with everything<\/strong>There\u2019s an ever-increasing diversity of frameworks in use by teams across the organisation, so we\u2019re building with compatibility in mind. CSS styles aren\u2019t bound to HTML elements (<code>&lt;p&gt;<\/code>, <code>&lt;h1&gt;<\/code>), instead they\u2019re namespaced (<code>.vf-header<\/code>). This means the framework is fully opt-in and is designed to not \u201ccross-contaminate\u201d Bootstrap, or other popular options.<br><\/li><\/ul>\n\n\n\n<figure class=\"vf-figure wp-block-image alignnone wp-image-750 size-large is-style-default\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/www.embl.org\/about\/info\/communications\/wp-content\/uploads\/2018\/09\/Screen-Shot-2018-09-07-at-15.18.40-1024x549.png\" alt=\"\" class=\"wp-image-750\"\/><figcaption class=\"vf-figure__caption\"><span style=\"font-weight: 400;\">A little codepen that illustrates the we-won\u2019t-break your-other-code compatibility; <a href=\"https:\/\/codepen.io\/khawkins98\/pen\/oPwjZO?editors=1100\">try it here<\/a>.<\/span><\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>\u2705 Add your own patterns, and tweak existing patterns<br>We\u2019ll use the Visual Framework to create drop-in styling for EMBL websites, but the Visual Framework itself isn\u2019t a finished product, rather it\u2019s a tool in an npm project \u2014 and that makes allows for easy control over versions and mixing in or removing patterns.<\/strong><\/li><li><strong>\u2705 Bring your own look, functions<\/strong><br>Building on the above, out of the box the Visual Framework 2.0 will give you a bare bones look. You can then add your own <a href=\"https:\/\/uxdesign.cc\/design-tokens-for-dummies-8acebf010d71\">design tokens<\/a>&nbsp;to style the look and customise your build process to bring in your custom functions and patterns \u2014 that\u2019s what EMBL will be doing, implementing its own visual identity<em>*<\/em> atop the Visual Framework.<br><br><em>* We\u2019re expecting to have a few layers to the EMBL look, tied specifically around portions of the organisation and needs of the content, such as a more white-space driven look for information about EMBL and a more dense, meaty look for scientific information.<\/em><\/li><\/ul>\n\n\n\n<p>This also means the Visual Framework will be able to go from an EMBL-EBI solution to a pan-EMBL solution. That\u2019s because the Visual Framework is not only more compatible, it\u2019s more flexible.<\/p>\n\n\n\n<p>Instead of a quick way to implement one look and feel, the Visual Framework is a way to quickly implement the look and feel needed for your content, data, users and organisation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What\u2019s next?<\/h2>\n\n\n\n<p>This post is big on philosophy but short on technical details. That\u2019s partly because we\u2019re still evaluating options and are heavily developing the fundamentals. However, I did mention a few key concepts: design tokens, npm-based patterns, namespaced styles that aren\u2019t bound to HTML elements, and we\u2019ll also be supporting React, Angular.<\/p>\n\n\n\n<p>Again, more on that to come soon. If you\u2019re particularly interested in helping, curious or just concerned, drop an email ken.hawkins@embl.de.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Growing an EMBL-EBI solution into a Visual Framework for the life sciences Building a website is easy. Building a good website is trickier. Building that good site quickly is hard. And if you want a beyond-hard challenge, also match your organisation\u2019s look, feel and brand requirements.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1832,1],"tags":[476,459,460],"embl_taxonomy":[],"class_list":["post-484","post","type-post","status-publish","format-standard","hentry","category-digital","category-general","tag-corporate-design","tag-digital","tag-websites"],"acf":[],"embl_taxonomy_terms":[],"featured_image_src":"https:\/\/www.embl.org\/about\/info\/communications\/wp-includes\/images\/media\/default.svg","_links":{"self":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/comments?post=484"}],"version-history":[{"count":1,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/484\/revisions"}],"predecessor-version":[{"id":485,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/484\/revisions\/485"}],"wp:attachment":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/media?parent=484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/categories?post=484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/tags?post=484"},{"taxonomy":"embl_taxonomy","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/embl_taxonomy?post=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}