Lauri Eskola from Druid explains how they build Aava.fi Drupal 8 site and what are the key learnings

1. Our experience withOur experience with
building Drupal 8building Drupal 8
SitesSites
Twitter: @laurii1Twitter: @laurii1

2. Lauri EskolaLauri Eskola
Drupal Theme System Co-
Maintainer
Working for Druid
I love kittens (and my hobby is to
keep adding them to Drupal Core)
Twitter: @laurii1Twitter: @laurii1

3. Case:Case:
Lääkärikeskus AavaLääkärikeskus Aava

4. Lääkärikeskus AavaLääkärikeskus Aava
One of the largest privately own healthOne of the largest privately own health
care provider in Finland, revenue > 40M€care provider in Finland, revenue > 40M€
Runs multiple sites on various DrupalRuns multiple sites on various Drupal
versionsversions
22 content authors on Aava.fi22 content authors on Aava.fi

5. A Year ago Aava wanted toA Year ago Aava wanted to
rebuild Aava.firebuild Aava.fi
Goals:Goals:
1. Make Aava brand more visible1. Make Aava brand more visible
2. Grow the amount of reservations made2. Grow the amount of reservations made
onlineonline
3. Bring services provided by Aava more visible3. Bring services provided by Aava more visible
4. Improve the UX of the website4. Improve the UX of the website

10. ??????

17. Consensus to startConsensus to start
using Drupal 8using Drupal 8

18. Retheming or rebuildingRetheming or rebuilding
the site?the site?
We started testing some of the new features on the
old site and we got to see how the old site was built
Soon we realized that the data structure needs to be
improved
New site and data migration is needed

19. Why Drupal 8?Why Drupal 8?
Pros:
Long life cycle
Has many of the features built in core - some of
them not available for Drupal 7
Lower cost of development in long run
Cool factor
Cons:
Stability
Contributed modules

20. After few weeks everyone agreed:After few weeks everyone agreed:
Let's build it on Drupal 8Let's build it on Drupal 8

21. How did we actually do it?How did we actually do it?
MigrationMigration
SitebuildSitebuild
BackendBackend
Front endFront end
PerformancePerformance
HEAD to HEADHEAD to HEAD

22. Migration module for DrupalMigration module for Drupal
8 was not ready yet8 was not ready yet

23. That had to be built byThat had to be built by
ourselves..ourselves..

24. MigrationMigration
Custom Built MigrationCustom Built Migration
Drupal 7 Services module (JSON)
Drupal 8 custom importer inspired by Migration
Code was open sourced:
https://github.com/lauriii/lka_content_import

25. MigrationMigration
14 node types was converted into 11 node types
4000 nodes
200 taxonomy terms

26. SitebuildingSitebuilding

27. The contributed modules usedThe contributed modules used
Display Suite
Form Block
Inline Entity Form
Metatag
Pathauto
Token (Required by Pathauto)
Views field view
7 vs 101 contributed modules

33. Tabs on the node page are local tasksTabs on the node page are local tasks
Local tasks didn't support caching at all -
actually they broke the whole caching
Local tasks in core was converted into
blocks and sufficient cacheable metadata
was added

35. BackendBackend

37. Custom codeCustom code
7 / 29 modules are supporting / extending
cores or contributed modules functionality
Most of the modules contains site specific
business logic
In Drupal 8 you don't need Drupalist
anymore to write this logic - it can be
generic PHP devleoper

38. TestingTesting
In Drupal 8 we are mostly using Unit tests
Pros
Fast to run
Can be used as a helper during
development
Easy to maintain
Points out bad code
Allows test coverage reporting
Cons
Expensive to create

39. Open Sourced CodeOpen Sourced Code
Multiple bug fixes to:
Drupal Core
Display Suite
Pathauto
xmlsitemap
Inline Entity Form
https://github.com/lauriii/contact_form_formatter
https://github.com/lauriii/subpathauto
https://www.drupal.org/project/block_node_type_negate

40. Being early adopterBeing early adopter
In Drupal 7 fixing many of the bugs
would have been nearly impossible
We would have been forced to find
workarounds
Most of the time slower than actually
fixing the bug properly
On the other hand some time had to
be used for fixing bugs that doesn't
exist in Drupal 7

41. Front endFront end

42. Front endFront end
No contributed themes available
Built on top of Classy
Used SASS, SMACSS, and BEM

43. CSS / SASSCSS / SASS
base/
blocks/
components/
_dependencies.scss
maintenance-page.scss
print.scss
partials/
styles.scss

44. TemplatesTemplates
52 template overrides
We are using Twig extend functionality
everywhere
{% extends "page.html.twig" %}
{% block title %}
{% endblock %}
page--node--article.html.twig

45. How to test ifHow to test if
something is empty?something is empty?
Open core issue:
Problem is that everything is loaded lazily, so we don't
know even at the template level if something is going to
be empty.
When this was needee we used CSS and in one use case
we had to fall back to early rendering.
https://www.drupal.org/node/953034

46. PerformancePerformance

47. Caching strategyCaching strategy
Using Drupal internal page cache and internal dynamic
page cache
Easy and fast configure
No reason to use Varnish
Good for small and medium sized websites
Default cache max-age is 1 day
Cache contexts and tags are being used everywhere
Goal in Aava.fi is to show always up to date information
-> in Drupal 7 no caching at all

49. Front end performanceFront end performance
Minimal Javascript
jQuery not loaded by default
Javascript and CSS in libraries and
attached to render arrays in preprocess
functions
Internal goal was to be able to serve the website in
under 5s on any device
Without further optimization we can serve old phones
(tested with Lumia 630) in 7s
Modern phones (Tested with iPhone 6s Plus) 2s

50. This is a good example of a site that is buildable on Drupal 8
What to not build on DrupalWhat to not build on Drupal
8?8?
https://contribkanban.com/board/contrib_tracker

51. Questions?Questions?
Twitter: @laurii1Twitter: @laurii1