Memorial Sloan Kettering is preparing to launch two websites in Drupal 8. As one of the first organizations to migrate its Drupal 6 content management system onto an enterprise Drupal 8 platform, Memorial Sloan Kettering has learned first hand the major challenges and advantages of building in Drupal 8. In this session, project members from MSK, Phase2, and Digitas will explore the decision to take the leap to Drupal 8 and the reality of building in D8 while it is still a beta. Get details on the brute force migration process, front-end integrations and wiring up with twig in practice, and community contributions to accelerate Drupal 8 in the process of a flagship redesign for one of the leaders in the healthcare space. We’ll elaborate on the challenges we faced and strategies we used to build on Drupal 8 and how you can learn from them! Finally, we’ll answer some of your most burning questions: How did you accomplish moving an existing Drupal 6 site with 25,000 plus pages of content to Drupal 8 while redesigning at the same time? Should other organizations consider building in Drupal 8? What tools and best practices were used by developers/sys admins? What contrib modules are being used? How difficult was it for the team to learn Drupal 8? What is being used for layout and webforms?What external libraries and APIs are being used?

2. 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

3. ”
“
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

5. 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

6. 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

7. Journeys and Personas

12. 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

13. DON’T BE LATE
FIND US AT: 1pm Th
ROOM: Petree C

14. ”
“
Drupal 8 -
Don’t be Late
Jacob Rockowitz, Developer

16. Moving from D6 to D8
Prototype & Core Realities
• Proof-of-concept
Migration Magic
• Pushing from D6 to D8
YAML Forms
• There is no module for that
Migration Adventures

17. Prototype & Core
Prototype containing 30000 nodes
• Bartik with Admin UI
Chasing Head
• Began with Alpha3 (September 2013)
Symfony & OO
• Build, Learn, and Throw-away
Testing
• SimpleTest with some Functional Testing
Migration Adventures

18. Pushing from D6 to D8
Import using BULK INSERT
• This is super fast
Write YAML config files
• Also super fast
Serialize nodes (D6) & import (D8)
• Not so fast but still the fastest solution
Migration Adventures

19. ”
“That module
is now in
Drupal Core

20. ”
“There is
no module
for that.

21. YAML Forms
Backend
• FormAPI (FAPI) + CRUD API + Send Mail
Frontend
• Easy to understand
• Easy to edit
Migration
• Built webform render array in D6
• Generated YAML for D8
Migration Adventures

22. YAML Form Example
Migration Adventures

24. Core & Community
● Chasing Head
○ Since Alpha 3 (September 2013)!
● Working the Issue Queues
● Working with the Community
An Adventure in Beta

25. 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

26. ”
“
57 patches have been
directly contributed and
committed and 100s of
issues reviewed.
Jonathan Hedstrom, Phase2

28. 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

30. 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

31. Third-Party Libraries & Tools
• jQuery & jQuery UI
• Bootstrap Sass
• Owl Carousel (v2)
• Video.js
• Picturefill
• jPushMenu
• Sticky.js
• Chosen
• Enquire
• Icomoon
Integration Adventures

32. 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

33. ”
“
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

34. 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

35. Getting Off the Island
Integrating 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

36. Getting Off the Island
Matching the Markup
• Overriding Twig templates - Custom
Handlebar to Drupal Twig templates
• Sending Digitas sample markup
• Filter and transform body markup
Integration Adventures

37. Integration Adventures

38. Integration Adventures

39. Integration Adventures

40. Integration Adventures

41. Integration Adventures

42. TILE TEMPLATE DISCUSSION

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

44. QUESTIONS?

45. STAY IN TOUCH
Evan Liebman
Liebmane@mskcc.org
THANK YOU

47. Sub Header
Talking Point
• P1
• P2
• P3
Header

48. ”
“
Quote
Attribution