A Year ago Aava wanted to rebuild Aava.fi

Goals:

1. Make Aava brand more visible

2. Grow the amount of reservations made online

3. Bring services provided by Aava more visible

4. Improve the UX of the website

???

Retheming or rebuilding 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

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

After few weeks everyone agreed:

Let's build it on Drupal 8

Migration module for Drupal 8 was not ready yet

That had to be built by ourselves..

Migration

Custom 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

Migration

• 14 node types was converted into 11 node types
• 4000 nodes
• 200 taxonomy terms

Sitebuilding

The contributed modules used

• Display Suite
• Form Block
• Inline Entity Form
• Metatag
• Pathauto
• Token (Required by Pathauto)
• Views field view

7 vs 101 contributed modules

Tabs 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

Backend

Custom 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

Testing

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                                   

Open Sourced Code

https://github.com/lauriii/contact_form_formatter

https://github.com/lauriii/subpathauto

https://www.drupal.org/project/block_node_type_negate

Multiple bug fixes to:

Drupal Core

Display Suite

Pathauto

xmlsitemap

Inline Entity Form

Being 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

Front end

Front end

• No contributed themes available
  • Built on top of Classy
• Used SASS, SMACSS, and BEM

CSS / SASS

base/

blocks/

components/

_dependencies.scss

maintenance-page.scss

print.scss

partials/

styles.scss

Templates

52 template overrides

We are using Twig extend functionality everywhere

 {% extends "page.html.twig" %}
 {% block title %}
 {% endblock %}

page--node--article.html.twig

How to test if something is empty?

Open core issue: https://www.drupal.org/node/953034

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.

Performance

Caching 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

Front 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