memorial sloan kettering: adventures in drupal 8
TRANSCRIPT
![Page 1: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/1.jpg)
![Page 2: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/2.jpg)
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
![Page 3: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/3.jpg)
”“
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
![Page 4: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/4.jpg)
![Page 5: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/5.jpg)
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
![Page 6: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/6.jpg)
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
![Page 7: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/7.jpg)
Journeys and Personas
![Page 8: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/8.jpg)
![Page 9: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/9.jpg)
![Page 10: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/10.jpg)
![Page 11: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/11.jpg)
![Page 12: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/12.jpg)
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
![Page 13: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/13.jpg)
DON’T BE LATEFIND US AT: 1pm Th ROOM: Petree C
![Page 14: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/14.jpg)
”“Drupal 8 -
Don’t be Late
Jacob Rockowitz, Developer
![Page 15: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/15.jpg)
![Page 16: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/16.jpg)
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
![Page 17: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/17.jpg)
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
![Page 18: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/18.jpg)
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
![Page 19: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/19.jpg)
”“That module
is now in Drupal Core
![Page 20: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/20.jpg)
”“There is
no module for that.
![Page 21: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/21.jpg)
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
![Page 22: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/22.jpg)
YAML Form Example
Migration Adventures
![Page 23: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/23.jpg)
![Page 24: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/24.jpg)
Core & Community ● Chasing Head
○ Since Alpha 3 (September 2013)!
● Working the Issue Queues
● Working with the Community
An Adventure in Beta
![Page 25: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/25.jpg)
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
![Page 26: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/26.jpg)
”“
57 patches have been directly contributed and committed and 100s of issues reviewed.
Jonathan Hedstrom, Phase2
![Page 27: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/27.jpg)
![Page 28: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/28.jpg)
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
![Page 29: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/29.jpg)
![Page 30: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/30.jpg)
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
![Page 31: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/31.jpg)
Third-Party Libraries & Tools• jQuery & jQuery UI
• Bootstrap Sass
• Owl Carousel (v2)
• Video.js
• Picturefill
• jPushMenu
• Sticky.js
• Chosen
• Enquire
• Icomoon
Integration Adventures
![Page 32: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/32.jpg)
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
![Page 33: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/33.jpg)
”“
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
![Page 34: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/34.jpg)
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
![Page 35: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/35.jpg)
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
![Page 36: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/36.jpg)
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
![Page 37: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/37.jpg)
Integration Adventures
![Page 38: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/38.jpg)
Integration Adventures
![Page 39: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/39.jpg)
Integration Adventures
![Page 40: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/40.jpg)
Integration Adventures
![Page 41: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/41.jpg)
Integration Adventures
![Page 42: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/42.jpg)
TILE TEMPLATE DISCUSSION
![Page 43: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/43.jpg)
Forms & more BOF AT: 2:15 ROOM: 504 - Just Digital
![Page 44: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/44.jpg)
QUESTIONS?
![Page 46: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/46.jpg)
![Page 47: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/47.jpg)
Sub Header Talking Point• P1• P2• P3
Header
![Page 48: Memorial Sloan Kettering: Adventures in Drupal 8](https://reader034.vdocuments.net/reader034/viewer/2022042716/55ac5d6f1a28ab77108b45f7/html5/thumbnails/48.jpg)
”“Quote
Attribution