A presentation at Gatsby Days in in Mountain View, CA, USA by Ben Robertson
Move Fast, Don’t Break Things Trends in Modern Web Development December 7, 2018
Today’s Agenda I. II. About Me / Mediacurrent CMS + Front End III. Industry Trends: Decoupling IV. Case Study: City of Sandy Springs, GA V. VI. Decoupling + Dev Process Decoupling + Organizations |2
I: About Me and Mediacurrent |3
Mediacurrent is a full-service digital agency that implements world class open source software development, Ben Robertson Front End Developer strategy and design to achieve defined goals for enterprise organizations seeking a better return on investment. benrobertson.io @banquos_ghost |4
II: CMS + Front End Through the Years |5
Template Overrides ● Very specifically named files (views-view-unformatted--articles-attachment-1.tpl.php) ● Unfamiliar terminology ○ Blocks? ○ Views? ○ regions? |6
Template Overrides ● What are these preprocess functions? ● Where are they? ● Where are the classes defined? |7
Template Overrides ● Where are the styles? ● How do you maintain CSS when the markup is split up and reused over dozens or hundreds of files? ● Where is the JavaScript? ○ How does it hook into these templates? |8
Component Driven Approaches ● SMACSS ● BEM - Block Element Modifier CSS ● React ● Style guides / pattern libraries (KSS, Pattern Lab) |9
Drupal + KSS Node Mediacurrent Theme generator: https://github.com/mediacurrent/theme_generator_8 | 10
Drupal + KSS = Synergy | 11
Problems. | 12
Drupal + KSS Node | 13
Problems ● Integration ○ ● Drupalisms / Domain specific problems ○ ● Where does the logic go? PHP? Twig templates? How much drupal knowledge do front enders need? Performance ○ How can we avoid breaking caching? | 14
III: Industry Trends + Decoupling | 15
Front end complexity ● Accessibility, performance ● Responsive design ● Web applications rivaling native app functionality ● Push notifications ● Serviceworkers + offline functionality ● Web workers, Web assembly, future stuff | 16
More specialization = more teamwork | 17
Why decouple? To unleash the full potential of the front end and back end. | 18
IV: Case Study City of Sandy Springs, GA | 19
The Ask Unified Platform Digital signs citysprings.com | 20
| 21
Promotion / Tagging ● Destination ○ ● ● What site the content should live on Tagging ○ Filtering events on citysprings.com ○ Custom RSS feed for each city sign Promotion ○ Embedding iframes on other sites ○ Promoting content to menus / sidebars | 22
Recap Unified Platform Digital signs citysprings.com | 23
Benefits to Sandy Springs ● Manage any amount of signs throughout the city ● Manage the content for a single web property ● Eventually manage the content for any number of other web properties ● Manage content that is embeddable on any web property ● On time ● On budget | 24
Benefits of Gatsby to Sandy Springs ● Fast reliable site ● Latest front end best practices ● Ease of development for their team ● $$$ saved on hosting | 25
Benefits of Gatsby to Mediacurrent ● Money saved on hosting === more revenue ● Project delivery: ● ○ On time ○ Right on budget ○ To spec ○ Minimal bugs ;) Streamlined workflow for the future | 26
V: Decoupling changes the dev process | 27
Outcomes of Decoupling the CMS ● A front end that does exactly what we want and nothing more ● Free to adopt latest best practices ● Performance ● ○ More resilient ○ Easier to troubleshoot Asynchronous Development ○ Don’t need the backend to start development ○ Integration logic -> GraphQL | 28
CMS | 29
VI: Decoupling the organization | 30
Decoupling the Organization ● ● Hiring ○ Larger pool of more advanced developers ○ More modern, experienced team Client Diversity ○ Take on smaller projects, keep them profitable ○ Leverage experience with Gatsby / React into new kinds of work as an agency (other React, JS projects) | 31
Next Steps Learn more about us on mediacurrent.com Email Me at ben.robertson@mediacurrent.com with questions Come by and talk to me during the rest of the event | 32
I'm going to be talking about how to Move fast without breaking things. Because at the end of the day, that's what every body really wants, right? We want our web projects:
Wouldn't that be great? It's the magical formula for developer, project manager and client happiness.
And while hitting all these things 100% may be a pipe dream, I think new development practices enabled by technology like Gatsby and others can really help get us closer to this pipe dream.
First I'll just give a little background on me, who I am, the kind of work I do, etc.
Then I want to go over the ways working with content management systems on the front end has changed for me over the past few years.
I'll share a case study from a decoupled Drupal and Gatsby project we took on earlier this year and our experience from that.
And based on that experience, I want to discuss the different ways decoupling can change things at an organization, including the development process, but even beyond into hiring and client diversity.
for free. You
can too.