We Built This City (On Drupal 8)
August 6, 2019
Decoupling Drupal for a Unified Platform
| 2
Speakers
Zack Hawkins
Senior Director of
Front End Development,
Mediacurrent
Jason Green
Visual Communications
Manager, The City of
Sandy Springs
About Mediacurrent
Mediacurrent is a full-service digital agency that
implements world class open source software
development, strategy, and design to achieve
defined goals for enterprise organizations
seeking a better return on investment.
| 4
About the City of Sandy Springs
The city of Sandy Springs incorporated in 2005.
With more than 106 thousand residents, it is the sixth
largest city in Georgia and the second largest city in the
metropolitan Atlanta area.
| 5
Agenda
I. Intro to Mediacurrent and Sandy Springs
II. Project Challenges
III. Create Once. Publish Anywhere.
IV. Inside Sandy Springs’ Decoupled CMS
V. Advantages of GatsbyJS + Drupal
VI. Integrating Digital Signage and Distributing Content
VII. Key Takeaways
| 6
Reaching People
Where People are Looking
Hi!
| 7
Digital Information Systems
● Websites
● Social Media
● Digital Signage
● Applications
● 3rd Party Platforms
(event calendars, listing sites etc.)
| 8
It used to be so simple.
Could you
post this?
The
“Webmaster”
| 9
The
“Webmaster”
I have an
update. Could you
post this?
| 10
The
“Webmaster”
Change it
today.
I have an
update. Could you
post this?
| 11
Content Management Systems
CMS
Content
Creators
Customers
Web
Developer
| 12
Social Media
Social Media
Specialist
Customers
| 13
“They have a website….
We want one too!”
Digital
Sign
Errr... CMS
CMS
CMS CMS
CMS
CMS
CMSWeb Developer
CMS CMS
CMSCMSCMS
CMS
CMS
| 14
| 15
Create Once.
Publish Anywhere.
Digital
Sign
</> </> </> </> </>
CMS
Web
Developer
Front-end
Templates
| 16
| 17
Sandy Springs Unified Platform
CitySprings.com
Website
| 18
XML integration
40+ Digital Signs, 2 Video Walls, Marquee
| 19
SandySpringsGA.gov Inside Sandy Springs Facebook
</>
Website
</>
Website Integration
2019-2020
| 21
What Made it Possible?
Decoupled Content Management
Systems
</>
Back-End
Interface
Website
Front-End
Database
Server-side Language
Traditional CMS
Template Code
| 22
</>
JSON
{ i }
Back-end
Interface
Website
Front-end
Database
Server-side
Language
Front-end
Language
Decoupled CMS
Template code
| 23
</>
</>
</>
Server-side
Language
JSON
{ i }
Back-end
Interface
Database
Decoupled CMS
| 24
Unified Platform - CitySprings.com
Template
(React)
GatsbyJS
Framework
(GraphQL)
Website
Front-end
Drupal 8 hosted on Pantheon.io GatsbyJS hosted on Netlify.com
JSON
{ i }
Back-end
Interface
Database
Template
(React)
GatsbyJS
Framework
(GraphQL)
Website
Front-end
GatsbyJS hosted on Netlify.com webserver{ i} Unified
Platform
Drupal
Data
APIs, DBs, YAML, JSON, CSV, etc.
Other CMSs
WordPress, Contenful
Markdown
Documentation, Posts, etc.
GatsbyJS
| 26
| 27
Performance
● Gatsby is a web compiler — it takes
your site components and compiles
the fastest site possible
● With most frameworks, it’s hard to
build fast websites; with Gatsby, it’s
hard to build a slow website
| 28
Benefits of Gatsby to Sandy Springs
● Fast, reliable site
● Latest front end best practices
● Ease of development for the team
● $$$ saved on hosting
| 29
Integrating
Digital
Signage
citysprings.com
Unified Platform
Digital signs
| 30
Distributing Content
| 31
Front-End Content Type Spectrum
Promotional Informational
Homepage Slider News ArticleFeatured News
| 32
Content Distribution Methods
Creator AutomatedEditor Curated
| 33
Back-End Content Creator Interface: Distribution
● Destination
○ Creators select front-ends
● Tags
○ Creators select from a searchable
dropdown list of tags.
○ Content-type specific tags:
Events are tagged by genre, news
is tagged by category
| 34
Digital Signage
● Powers RSS feeds utilized by signage
templates
● RSS feeds can be customized easily by
the client to create new content
display logic
Website Front-End
● Content is automatically displayed
based on content type, then tags
● Powers front-end user filtering
Utilizing Tags
| 35
Back-End Content Creator Interface: Promotion
● Promotion
○ Creators select from hierarchical
drop-down menus
○ Creators can add as many
promotions as they wish
○ More Information Link field
allows for external promotions
| 36
Managing Promotions
● By default, promotions are displayed
based on date logic
● Promotion queues can be managed
and reordered by an editor
| 37
Processing Images
| 38
Image Processor
● Upload and single image and
select the focal point
● Cropped images are
generated
● All Unified Platformed
front-ends are designed using
three aspect ratios for images
“This all seems complicated….
I’m sure there’s a vendor that
already has a product we can use.”
| 40
Software as a Service
● One Size Fits All
● Illusion of Customizability
● Rarely Up to Date
● Rarely act on feedback
Organizations need to develop
their own software
Developing Software: Maximizing your Chance of Success
Partner with a strong engineering firm
Build on top of open source platforms
Ensure the project has a champion
Establish project management application workflows from the top-down
Infuse your organization with technically oriented employees
| 42
| 43
Summary of Benefits to Sandy Springs
● Content only has to be created once
● Content reaches more information systems and
more people
● Customizable and Extensible
● Reliable
● Simpler to manage
● Better user experiences
● Zero Complaints
@Mediacurrent Mediacurrent.comFacebook.com/mediacurrent @Mediacurrent
Contact Mediacurrent

We Built This City (On Drupal 8)