1
Decoupled & Uprooted Case Study, Government of Flanders Tomas Fülöpp (Vacilando) 2
Decoupled & Uprooted Building a Challenging Web Platform at the Flemish Government Tomas Fülöpp (Vacilando) Builder Track: Case Study 3
Your Speaker What to Expect 4
Tomas Fülöpp a.k.a. Vacilando ICT architect at the Flanders Information Agency Working for the Government of Flanders in Belgium since 2012 Drupal aficionado since 2006 „Vacilando“ on drupal.org Born in Czechoslovakia, Belgian by choice, European at heart https://www.drupal.org/u/vacilando https://www.linkedin.com/in/vacilando/ 5
The Next ½ Hour Your speaker Government of Flanders 8 years of Drupal 7 Time to Reinvent Context Building Blocks Development Takeaways Thanks Pages Questions? 6
Government of Flanders Belgium, Europe 7
Belgium Europe That speck on the map Federal constitutional monarchy divided into three highly autonomous regions: Flanders, • Wallonia, • and Brussels. • Famous for: Beer • Chocolate • French fries • Dries Buytaert • 8
Flanders Belgium Tiny by any standards 6.6 million inhabitants • 13.5 thousand km² • Or to put it in U.S. context: about the size of Puerto Rico and • with the population of Indiana • 9
Flemish Public Administration a.k.a. Government of Flanders … or Flemish Government Prepares and executes policies of the Flemish Region and the Flemish Community. Main organs Flemish Parliament • Flemish Government • Main public portal https://www.vlaanderen.be Responsibility of the Flanders Information Agency That’s what we’re talking about here! 10
8 Years of Drupal 7 www.vlaanderen.be 11
Early Adopter of Drupal 7 Drupal 7 was released in 2011 The Flemish Government embraced it as CMS of choice still in the same year Main citizen portal www.vlaanderen.be in D7 was a great success after the previous CMS (FatWire). Modern, comfortable and fast editing • Separate interfaces thanks to Domain Access • Plenty of data source integrations • Lots of custom code but reasonably clean • Several redesigns over the years • Inspirational for great many websites around the Government (also as open source) • Some 80k pages, permanent editing team keeping the information current and accurate • 2 million sessions per month (3.5 million page views) • 12
Vlaanderen.be in 2011 13
Vlaanderen.be in 2018 14
8 Years of Drupal 7 Time for a Next Step Usual Dru rupal 7 pain ins , especially: Rigid; one large monoli lith Editing environment + front-end + data synchronized from external sources • Clumsy and risky deployment (manual configuration -> Features); limited speed of • development / time to production Diffic ifficult lt performance sc scalin ling Non-cached performance dismal = particularly frustrating for the Editorial Team (front • blazing fast thanks to Varnish and smart invalidation of all related pages) Simply old ld After 8 long years time to retire • 15
Time to Reinvent From Portal to a Web Platform 16
From Portal to a Web Platform www.vlaanderen.be Much more th than yet another re redesi sign . Transition from a simple portal to a Web Pla latf tform able to maintain and publish information from any and all Government • departments (API-First, No Wrong Door) for citizens and professionals. • 17
Requirements Scalabil ility: front-end, editi ting envi vironment . Be able to grow to an information platform for • any and all government entities. Accommodate many diverse Editorial Team. Fle lexib ible content model el . Editors must be able to use a wide variety of content structures. • Main intain inabili ility . Microservices over monoliths. Continuous integration and deployment. • Accessib ibili lity . Everybody needs to be able to get the information they need. • Per erformance . Best practically attainable. • Se Security . Uncompromising. • Reuse . Avoid duplication of content, code, systems. Use the open source alternative • wherever possible – starting with Drupal. Inte In tegrate . Respect existing integrations. • Sustainabil ilit ity . Emanate stability, reliability, trustworthiness to the citizens. Not a short-term • product or campaign site. St Standards . Commitment to industry as well as organizational standards. • 18
Fundamental Questions 1. Is Drupal - still - the best CMS? After 8 years Drupal perceived as “old technology” . • Appetite for something radically different, for the cutting edge. • Drupal 8 seemed nice, but not convincing (for non-Drupalers!) • 2. Go decoupled (API-first)? Or is it perhaps just a hype? 3. Can we decouple (uproot) the content as well? Can we use Drupal for editing but not store the data in its database? 19
Fundamental Decisions Beginning of 2018 1. CMS: We continue to trust Drupal (8) Review of competitors (Adobe Experience Manager, Contentful, GraphCMS, Prismic , WP, etc.) • Drupal still the most feature-complete and mature • Lots of expertise and enthusiasm in-house • 2. Front-end: Go decoupled, using data from Drupal API Added complexity, risk of hype but attraction of modularity / freedom; more than one front-end • Huge enthusiasm from the front-end team • 3. Remote / uprooted data sources We concluded we could not detach all content; it would make little if any sense to use Drupal • (decided with contribution of Wim Leers) We can however use remote sources of data and manipulate them just as if they were stored in • Drupal. Not well documented but D8 can do this! Use an asset library (DAM) instead of Drupal for storing images, videos, PDFs, etc. • 4. Set up and move to a new, scalable hosting system. 20
Context Integrate & Reuse 21
Existing Integrations Context Even a green field (project) is part of a wider ecosystem. A.k.a. “brown field” . 1. Dependent on a number of data sources Organizations • Publications • Press releases • Vacancies • Assets (DAM) • ... • 2. Data source for several existing applications Call Center Knowledge Base • Catalogue of Government Products • Reporting • … • 22
Library of Web Components Lib ibra rary of of Web eb Componen ents (specific for the Flemish Government) CSS SS & JS JS snippets (and also VueJS) • Conform to the corporate id iden entit ity of the Government • Mobile ile-fir first • Tested for acces essi sibili ility • Bes est design pra ractic ices • Ava vaila ilable le fo for use se by other Flemish Government entities Documentatio ion at https://overheid.vlaanderen.be/webuniversum/v3/ 23
Global Header & Footer Widgets Not Web Components as such but “ wid idget ets ” Highly configurable JS JS applications Conform to the corporate id iden entit ity of the Government Easy sy in inte tegration (embed script or SSI) Gateway to to a growing se secured area where each citizen can find personalized and private information related to the Government (family information, degrees obtained, status of subsidy requests, etc.) 24
Global Header & Footer 25
Global Header & Footer 26
Building Blocks CMS, Front, Content API 27
I. Heart of Gold Drupal 8 as the CMS Conten ent st stru ructure : heavy use of Paragraphs Much more flexible than just using plain content types • Alternatives: Bricks (underdeveloped), or within WYSIWYG • In Inte ternal se searc rch : Search API with Solr backend Alternative: Elasticsearch, but the integration seemed to still lag behind • API : GraphQL (https://www.drupal.org/project/graphql). Could as well have been REST or JSON. POST requests, yet cached by Varnish → very little load on Drupal. Site te API : Decoupled Router (https://www.drupal.org/project/decoupled_router) provides an endpoint that will help you resolve path aliases and redirects for entity related routes. In Inte ternal l cachin ing : Redis Proven slower than DB caching on HA infrastructure (network latency). Switched off to • increase performance! 28
Remote / Uprooted Data Sources External Entities Module External Enti titi ties es allows you to seamlessly integrate datasets from external databases: https://www.drupal.org/project/external_entities While the content lives external, Drupal sees those remote entiti ties as as internal . This makes it possible to alter the field displays, add references, comments, path aliases, share buttons, and more. New ew , significantly rew eworked branch 8.x-2.x by Raf @rp7, with contributions from Wim Leers. See https://www.drupal.org/project/external_entities/issues/2995140 Featured in a presentation at at Drupal Europe in in Darmstadt in September 2018, check https://www.drupaleurope.org/session/how-cope-external-entities 29
Drupal Contributions By Our Team External enti titi ties es — improved and refactored branch 8.x-2.x by Raf @rp7, with contributions from Wim Leers https://www.drupal.org/project/external_entities • Entit tity Usa sage In Inte tegrit ity — new module by Maciej @gugalamaciek https://www.drupal.org/project/entity_usage_integrity • Protects integrity of references based on entity usage, preventing • inaccessible references Is Issu suu Vie iewer er – new module by Tamar @tamarpe https://www.drupal.org/project/issuu_viewer • 30
Recommend
More recommend
