memorial sloan kettering: adventures in drupal 8
TRANSCRIPT
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?
Sub Header Talking Point• P1• P2• P3
Header
”“Quote
Attribution