moving our company site to drupal 8: break the ice!

GAJAH ANNUAL REPORT 2015 | 1

How we moved our Company site to Drupal 8by Pierre Legrand, Dave Vasilevsky & Jorge Diaz

@djvasi@jorgediazhav

INTRO

DRUPAL CONSULTING, DEVELOPMENT AND TRAINING.

FOUNDED IN 2007 BY SUZANNE KENNEDY & ALEX DERGACHEV.

HELP ORGANIZATIONS BUILD AWESOME DRUPAL WEBSITES WITH CUSTOM FUNCTIONALITY.

WHO WE AREA passionate team of Drupal Developers based in Montreal, QC.


INTRO

I’M DAVE, AND I’VE BEEN WORKING WITH EVOLVINGWEB FOR OVER FIVE YEARS

WHO WILL STAND HERE?And will try to do their best in the next 60 minutes…

BACK-END DEVELOPMENT AND DEVOPS, SINCE DRUPAL 6


INTRO

MY NAME IS JORGE DIAZ AND I’VE BEEN WORKING WITH DRUPAL FOR MORE THAN 8 YEARS.

I WORK AS A DRUPAL THEMER & FRONT-END DEVELOPER AT EVOLVINGWEB.

WHO WILL STAND HERE?And will try to do their best in the next 60 minutes…


INTRO

I WAS BORN IN THE MAGICAL CITY OF HAVANA, 30 YEARS AGO BUT DRUPAL TOOK ME TO MONTREAL

WHO WILL STAND HERE?And will try to do its best in the next 60 minutes…


INTRO

WE SPECIALIZE IN DRUPALFrom standard websites to advanced content management tools.


INTROSOME BIG FISH HAVE HIRED USMostly in North America, we have a huge variety of clients.


INTROTHEN WE GOT A NEW CUSTOMEROn December 2015, we got a fresh new customer.


INTROIN THE NEXT 45 MINUTESWe will describe the entire process

THE CURRENT STATE OF OUR COMPANY DRUPAL 7 SITE


OUR CURRENT SITE

DRUPAL 7 SITE BUILT IN 2011Trainings & Blog Posts mostly.

INITIALLY CREATED IN D6 ON 2009And then migrated from D6 to D7

AN ACCEPTABLE VOLUME OF TRAFFIC Mostly from Blog Posts and the Trainings.

THE CORE OF OUR TRAINING PROGRAMTraining Schedule, Courses Info and the gateway to EventBrite

NOT READY FOR MOBILE DEVICESAs it was built when it wasn’t that trending…

THE SITESetup, status and function in the Business.


A NEW REDESIGN WAS READYAnd it is so tempting…

OUR CURRENT SITE


AND MORE TEMPTING DESIGN…And more, and more…

OUR CURRENT SITE

LET’S GO AGILE


AGILE

1 – A PROJECT MANAGEMENT TOOLTo keep track of all issues, logs and progress.

THE TOOLS WE USEDTo push the Process forward

2 – ANOTHER PROJECT MANAGEMENT TOOLTo Micromanage tasks, keep an overall tracking of Sprints and team brainstorming.

3 – …?


AGILE

A LIVING PROJECT MANAGERAnd it is extremely important that it is alive.

THE TOOLS WE USEDTo push the Process forward


AGILE

PIERRE LEGRAND IS A PROJECT MANAGER THAT COMES FROM A MULTINATIONAL FRENCH COMPANY NAMED ”KIABI”.

HE HAS EXPERIENCE MANAGING WEB DEVELOPMENT AND ONLINE COMMERCE PROJECTS.

WHO ELSE WAS PART OF THISBut couldn’t come along with us to the Camp this time.


AGILE

WEEKLY SPRINTSSpecific milestones every week.

1 - PLANNINGFragmentation and estimation

are vital factors. 2 - PRIORITIZINGCritical paths, client interests and Development interests.

3 - DEVELOPINGSite Building, Back End, Front End…

4 - TESTINGTo check everything is OK.

5 - DEPLOYINGFor clients to play with.


AGILE ESTIMATED 4 SPRINTS TO GO LIVEAnd then continue improving it…

THE DEV ENVIRONMENT


THE DEV ENVIRONMENT

BUILDING CONTAINERSIs so damn good!

GAJAH ANNUAL REPORT 2015 | 25@djvasi@jorgediazhav

SITE BUILDER👤

CONTENT MANAGER👤 FRONT-END

DEVELOPER👤

BACKENDDEVELOPER👤

THE DEV ENVIRONMENT


THE DEV ENVIRONMENT

CONTENT FLOW

STRATEGY


CONTENT FLOW STRATEGY

OldDrupal7Site

CONTENT TYPES & TAXONOMIESTrainings, Tags & Blog Posts mostly.

FEATURESContact Webforms, DISQUS Integration, Multilingual Support…

USERSRelated to Blog Posts and additional registered users.

NEW CONTENT EVERY WEEKContent editing doesn’t have a freeze stage.


NEW CONTENTTestimonials & Team Member Info.

NEW MARKETING BLOCKSTo be used in the whole site redesign.

FULL MULTILINGUAL SUPPORTThe UI and every new content needs to be in EN & FR.

NEW CONTENT STRATEGY3 New Menus (Navigation, Footer & Subsections)

IMPROVE EXISTING CONTENTTraining Courses, Projects and Services.

A RESPONSIVE WEBSITECompletely redesigned.




NEW CONTENT

NEW FEATURES

EXISTING CONTENTAND USERS



NEW CONTENT

NEW FEATURES

EXISTING CONTENTAND USER BASE


HOW TO HANDLE THIS?

SITE BUILDER👤


DEVELOPER👤

BACKENDDEVELOPER👤




A MAIN DB TO KEEP EVERYONE IN SYNC?



EACH CONTAINER WITH IT’S OWN DB



FIRST IDEAOne initial migration



A BETTER OPTIONMigrate every time we build

MIGRATIONS


MIGRATIONS

LETS JUST PULL ALL DATA IN

CONTENT STAGING

ENVIRONMENT


MIGRATIONS

drush mi –group=d7


MIGRATIONS

drush mi –group=staging

CONTENT STAGING

ENVIRONMENT


MIGRATIONS

GOING BACK TO THE QUESTION:WHEN IT IS THE RIGHT MOMENT?


MIGRATIONS

WHEN IT IS THE RIGHT MOMENT?


MIGRATIONS

drush mi –group=staging


MIGRATIONS

WHY DO WE NEED CONTENT STAGING?

INFORMATION ARCHITECTURE CHANGES

ARE PAINFUL

THE FINAL SITE SHOULD HAVE A CLEAN DB STAGING

CLIENT CAN WORK ON CONTENT WITHOUT

INTERFERING WITH DEV


MIGRATIONS

MIGRATIONS CUSTOMIZATIONS

MIGRATIONS ARE MULTILINGUALWe migrate Entities and their translations

PATHS & REDIRECTSTo avoid affecting SEO

MENU LINKS IMPORT/EXPORTKeeping hierarchy

REFERENCED FILESCopying only the files we need

HTTP AUTH IN MIGRATETo keep staging secret

UI TRANSLATIONS EXPORTUsing .po files with only the new custom translations

STAGING


MIGRATIONS

CHECKING MIGRATIONS

SITEDIFFCheck that no

links are missing

=

THE DEVELOPMENT

WORKFLOW


THE DEVELOPMENT WORKFLOW

DEPLOY REPO DRUPAL SITE


THE DEVELOPMENT WORKFLOW DEPLOY REPO


THE DEVELOPMENT WORKFLOW DRUPAL SITE



LETS JUST PULL ALL DATA IN

CONTENT STAGING

ENVIRONMENT

DRUPAL SITE



drush configuration-export [NAME]

CONTENT STAGING

ENVIRONMENT

DRUPAL SITE

THE DRUPAL 8 SITE BUILDING COMPONENTS


THE DRUPAL 8 SITE BUILDINGCOMPONENTS

AVAILABLE THEMESReady and almost ready to go.

BASIC

ZURB FOUNDATION

BOOTSTRAP

NEATO

OMEGA


THE DRUPAL 8 SITE BUILDINGCOMPONENTS PRESENTATION LAYER

Right into the Browser…

DEVELOPMENT LAYERCoding and wireframing

BASE THEMEThe most advanced contrib D8 Theme



AVAILABLE MODULESReady and almost ready to go.

DISPLAY SUITE

TOKEN & PATHAUTO

VIEWS SLIDESHOW

IMCE

ADMIN MENU



AVAILABLE MODULESReady and almost ready to go.

FIELD GROUPMETATAGINLINE ENTITY FORMSIMPLE XML SITEMAPCOLORBOXRECAPTCHAGEOLOCATION FIELD



CORE MODULESViews, Contact Forms, Block

Management, Multilingual support…

CONTRIB COMPONENTSBootstrap 3 Theme, Contact Storage,

Contact Block, DISQUS, Redirect, Google Analytics, Images Effects…



Bootstrap3Theme

CreatednewContentTypes

Createdall

Views

BlocksPositioning

MultilingualConfiguration

Views,ContentTypesandFieldsTranslations

ModulesConfiguration

EnabledModules


Bootstrap3Theme


Createdall

Views

BlocksPositioning




EnabledModules


BlocksPositioning


Bootstrap3Theme


Createdall

Views

BlocksPositioning




EnabledModules


BlocksPositioning

DRUPAL SITE

RESULTS


RESULTSTHE SITE100% Multilingual, all content pulled from both sides…


AND MORE TEMPTING DESIGN…And more, and more…RESULTS


RESULTS

DOCKER APPROACHIs so damn good! (AGAIN!)


SITE BUILDER👤


DEVELOPER👤

BACKENDDEVELOPER👤RESULTS

DOCKER APPROACH


RESULTSCONTENT STAGING

ENVIRONMENT

CONTENT STAGING



ENVIRONMENT

CONTENT STAGING PHASES



ENVIRONMENT

CONTENT STAGING LEVELS

For Your Precious Time and Attention.

THANKS!!!

Allimagesusedinthispresentationarepropertyoftheirrespectiveownersandarenotintendedforcommercialpurpose.Wereallobtainedfromhttp://unsplash.com

DrupalisaregisteredtrademarkofDriesBuytaert.

Alllogosusedinthispresentationarepropertyoftheirrespectiveowners.

Please Don’t Hesitate.

QUESTIONS?

�?

moving our company site to drupal 8: break the ice!

Software