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

A presentation at Gatsby Days in December 2018 in Mountain View, CA, USA by Ben Robertson

Slide 1

Slide 1

Move Fast, Don’t Break Things Trends in Modern Web Development December 7, 2018

Slide 2

Slide 2

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

Slide 3

Slide 3

I: About Me and Mediacurrent |3

Slide 4

Slide 4

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

Slide 5

Slide 5

II: CMS + Front End Through the Years |5

Slide 6

Slide 6

Template Overrides ● Very specifically named files (views-view-unformatted--articles-attachment-1.tpl.php) ● Unfamiliar terminology ○ Blocks? ○ Views? ○ regions? |6

Slide 7

Slide 7

Template Overrides ● What are these preprocess functions? ● Where are they? ● Where are the classes defined? |7

Slide 8

Slide 8

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

Slide 9

Slide 9

Component Driven Approaches ● SMACSS ● BEM - Block Element Modifier CSS ● React ● Style guides / pattern libraries (KSS, Pattern Lab) |9

Slide 10

Slide 10

Drupal + KSS Node Mediacurrent Theme generator: https://github.com/mediacurrent/theme_generator_8 | 10

Slide 11

Slide 11

Drupal + KSS = Synergy | 11

Slide 12

Slide 12

Problems. | 12

Slide 13

Slide 13

Drupal + KSS Node | 13

Slide 14

Slide 14

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

Slide 15

Slide 15

III: Industry Trends + Decoupling | 15

Slide 16

Slide 16

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

Slide 17

Slide 17

More specialization = more teamwork | 17

Slide 18

Slide 18

Why decouple? To unleash the full potential of the front end and back end. | 18

Slide 19

Slide 19

IV: Case Study City of Sandy Springs, GA | 19

Slide 20

Slide 20

The Ask Unified Platform Digital signs citysprings.com | 20

Slide 21

Slide 21

| 21

Slide 22

Slide 22

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

Slide 23

Slide 23

Recap Unified Platform Digital signs citysprings.com | 23

Slide 24

Slide 24

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

Slide 25

Slide 25

Benefits of Gatsby to Sandy Springs ● Fast reliable site ● Latest front end best practices ● Ease of development for their team ● $$$ saved on hosting | 25

Slide 26

Slide 26

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

Slide 27

Slide 27

V: Decoupling changes the dev process | 27

Slide 28

Slide 28

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

Slide 29

Slide 29

CMS | 29

Slide 30

Slide 30

VI: Decoupling the organization | 30

Slide 31

Slide 31

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

Slide 32

Slide 32

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