Memorial Sloan Kettering• Evan Liebman - Director of MSK Digital• Jacob Rockowitz - Drupal/CMS consultant

Phase2• Molly Byrnes - Account Director• Jonathan Hedstrom - Software Architect• Brad Wade - Senior Front-End Developer

DigitasLBi• Jill Baker - Principal Creative Engineer

Meet the Team

”“

Researchers at MSK regularly push boundaries to innovate… We are inspired by their relentless efforts and are driven to do the same in our space.

Evan Liebman, MSK

Creating meaningful digital experiences• Opportunities for deeper engagement is

increasingly important in cancer and healthcare overall

• Delivering the desired digital experiences to MSK constituents will require an institution-wide holistic vision, strategy and roadmap

The Adventure Begins

Digital Roadmap• A multi-year investment plan and define

strategies that bring MSK’s brand promise to life through digital experiences

• A holistic digital strategy with unified assets

The Adventure Begins

Journeys and Personas

Why Choose Drupal 8? Innovation• Inspired by the innovative work done at MSK

Sustainability• Saw a longer-term future with D8 than D7

Talent Recruitment• Symfony and Object-Oriented Programming

means Drupal will be more accessible to developers

The Adventure Begins

DON’T BE LATEFIND US AT: 1pm Th ROOM: Petree C

”“Drupal 8 -

Don’t be Late

Jacob Rockowitz, Developer

Moving from D6 to D8 Prototype & Core Realities• Proof-of-conceptMigration Magic• Pushing from D6 to D8YAML Forms• There is no module for that

Migration Adventures

Prototype & Core Prototype containing 30000 nodes• Bartik with Admin UIChasing Head• Began with Alpha3 (September 2013)Symfony & OO• Build, Learn, and Throw-awayTesting• SimpleTest with some Functional Testing

Migration Adventures

Pushing from D6 to D8 Import using BULK INSERT• This is super fastWrite YAML config files • Also super fastSerialize nodes (D6) & import (D8)• Not so fast but still the fastest solution

Migration Adventures

”“That module

is now in Drupal Core

”“There is

no module for that.

YAML Forms Backend• FormAPI (FAPI) + CRUD API + Send MailFrontend• Easy to understand• Easy to editMigration• Built webform render array in D6• Generated YAML for D8

Migration Adventures

YAML Form Example

Migration Adventures

Core & Community ● Chasing Head

○ Since Alpha 3 (September 2013)!

● Working the Issue Queues

● Working with the Community

An Adventure in Beta

Contrib space● Porting contrib modules

• Redirect, Global Redirect, Login Security, Node Order, Diff, Honeypot, Libraries API, Masquerade, Memcache (and Redis, later removed)

● Total of 9 contrib modules● Do more with less code

An Adventure in Beta

”“

57 patches have been directly contributed and committed and 100s of issues reviewed.

Jonathan Hedstrom, Phase2

Agile Design & Front-End Build • Simultaneous cycles of:

UX → Visual Design → Front-end Development

• Iterative development on a standalone Yeoman-based front-end ‘prototype’ site

• Living reference guides within the site build updated as the work progressed

• Collaborative prototyping between all teams

Integration Adventures

Build Process

• Custom Yeoman generator (Starterkit)• NPM & Bower for dependency management• Grunt for build tasks• Assemble.io for static site generation

(Handlebars compilation & helpers)• Libsass for Sass compilation

Integration Adventures

Third-Party Libraries & Tools• jQuery & jQuery UI

• Bootstrap Sass

• Owl Carousel (v2)

• Video.js

• Picturefill

• jPushMenu

• Sticky.js

• Chosen

• Enquire

• Icomoon

Integration Adventures

Browser Compatibility

• IE conditional comments to serve different HTML element with distinct class

• StripMQ for query-less legacy CSS

• Modernizr for feature detection

• BlessCSS for avoiding IE selector & rule limits

• Autoprefixer Grunt task

Integration Adventures

”“

A component, for our purposes here, is a small package of front-end software that does one thing well.

A component should include all the appropriate pieces it needs to do its job, no more and no less.

Starterkit Readme

Component-based Architecture• multiple reusable (and nestable) layouts

• each comprised of .hbs, .scss, .js, .json files

• BEM nomenclature (.component__subitem--variant)

• built to be independent but context-aware

• recorded in the component library

• data feed via parseJSON, JSON objects; often with conditional/overridable default content

Integration Adventures

Getting Off the IslandIntegrating Code into Drupal• Grunt automation to build prototype and

copy assets into Drupal theme• Including assets and declaring

dependencies in Drupal theme• Drupal compatibility layer for JS/CSS

Integration Adventures

Getting Off the IslandMatching the Markup• Overriding Twig templates - Custom

Handlebar to Drupal Twig templates• Sending Digitas sample markup• Filter and transform body markup

Integration Adventures

Integration Adventures

Integration Adventures

Integration Adventures

Integration Adventures

Integration Adventures

TILE TEMPLATE DISCUSSION

Forms & more BOF AT: 2:15 ROOM: 504 - Just Digital

QUESTIONS?

STAY IN TOUCHEvan LiebmanLiebmane@mskcc.org

THANK YOU

Sub Header Talking Point• P1• P2• P3

Header

”“Quote

Attribution