Move Fast, Don't Break Things: Trends in Modern Web Development

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