don’t break things move fast, · move fast, don’t break things trends in modern web development...

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

Upload: others

Post on 24-May-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

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

Move Fast, Don’t Break Things

Trends in Modern Web Development

December 7, 2018

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

| 2

Today’s Agenda

I. About Me / Mediacurrent

II. CMS + Front End

III. Industry Trends: Decoupling

IV. Case Study: City of Sandy Springs, GA

V. Decoupling + Dev Process

VI. Decoupling + Organizations

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

| 3

I: About Me and Mediacurrent

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

| 4

Ben RobertsonFront End Developer

benrobertson.io

@banquos_ghost

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.

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

| 5

II: CMS + Front EndThrough the Years

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

| 6

Template Overrides

● Very specifically named files (views-view-unformatted--articles--attachment-1.tpl.php)

● Unfamiliar terminology

○ Blocks?

○ Views?

○ regions?

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

| 7

Template Overrides

● What are these preprocess functions?

● Where are they?

● Where are the classes defined?

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

| 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?

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

| 9

Component Driven Approaches

● SMACSS

● BEM - Block Element Modifier CSS

● React

● Style guides / pattern libraries (KSS, Pattern Lab)

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

| 10

Drupal + KSS Node

Mediacurrent Theme generator:

https://github.com/mediacurrent/theme_generator_8

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

| 11

Drupal + KSS =Synergy

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

| 12

Problems.

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

| 13

Drupal + KSS Node

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

| 14

Problems

● Integration

○ Where does the logic go? PHP? Twig templates?

● Drupalisms / Domain specific problems

○ How much drupal knowledge do front enders need?

● Performance

○ How can we avoid breaking caching?

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

| 15

III:Industry Trends +Decoupling

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

| 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

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

| 17

More specialization = more teamwork

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

| 18

Why decouple?

To unleash the full potential of the front end

and back end.

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

| 19

IV:Case StudyCity of Sandy Springs, GA

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

| 20

The Ask

citysprings.com

Unified Platform

Digital signs

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

| 21

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

| 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

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

| 23

Recap

citysprings.com

Unified Platform

Digital signs

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

| 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

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

| 25

Benefits of Gatsby to Sandy Springs

● Fast reliable site

● Latest front end best practices

● Ease of development for their team

● $$$ saved on hosting

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

| 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

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

| 27

V:Decoupling changesthe dev process

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

| 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

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

| 29

CMS

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

| 30

VI:Decoupling the organization

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

| 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)

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

| 32

Next Steps

Learn more about us on mediacurrent.com

Email Me at [email protected] with questions

Come by and talk to me during the rest of the event