rocket packs on escalators - stop messing with progressive enhancement

64
ROCKET PACKS ON ESCALATORS CHRIS HEILMANN (@CODEPO8), AT THE FRONTEND 2015, COPENHAGEN Stop messing with Progressive Enhancement

Upload: christian-heilmann

Post on 23-Jul-2015

2.475 views

Category:

Education


1 download

TRANSCRIPT

ROCKET PACKS ON ESCALATORS

CHRIS HEILMANN (@CODEPO8), AT THE FRONTEND 2015, COPENHAGEN

Stop messing with Progressive Enhancement

MITCH HEDBERG

An escalator can never break – it can only become stairs. You would never see an “Escalator Temporarily Out Of Order” sign, just “Escalator Temporarily Stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.”

A PERFECT SIMILE FOR PROGRESSIVE ENHANCEMENT ON THE WEB.

christianheilmann.com/2012/02/16/stumbling-on-the-escalator/

PROGRESSIVE ENHANCEMENT IS A HOT TOPIC AGAIN…

Crippling the Webhttp://timkadlec.com/2013/07/crippling-the-web/ The True Cost of Progressive Enhancementhttps://medium.com/@AaronGustafson/the-true-cost-of-progressive-enhancement-d395b6502979 The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancementhttp://www.sitepoint.com/javascript-dependency-backlash-myth-busting-progressive-enhancement/ Progressive enhancement is still importanthttp://jakearchibald.com/2013/progressive-enhancement-still-important/

THE DISCUSSION RAGES ON ABOUT ALL KIND OF THINGS…

• Frameworks and their dependency on scripting (Angular)

• “Aren’t all our users using modern browsers?”

• “Do we still have to care about old browsers in a mobile age?”

• “Shouldn’t we be able to build things faster?”

ALL OF THIS IS IMPORTANT…

…AND ISN’T ABOUT PROGRESSIVE

ENHANCEMENT

PROGRESSIVE ENHANCEMENT IN A NUTSHELL:

USE TECHNOLOGY TO ENHANCE WORKING SOLUTIONS WHEN AND IF THE ENHANCEMENTS CAN BE APPLIED.

IN OTHER WORDS…

• Build on a solid foundation • Jump into the lake after

checking it is deep enough • Enhance to add convenience

OMG! SELF-DRIVING CAR!

WHY THE WHEEL?

CREEPY TECHNOLOGY

AS DEVELOPERS, WE ALWAYS WANT TO LEAP-FROG AHEAD AND INNOVATE.

Photo by BiblioArchives / LibraryArchives https://www.flickr.com/photos/28853433@N02/6347652875/

AND WHEN WE CAN’T, WE FIND SCAPEGOATS.

• Browsers don’t give us what we need

• Users have outdated environments

• Standards take too long • The languages of the web aren’t

good enough • Framework $x makes me much

more effective and it needs JavaScript!

ALL OF THIS IS TRUEAND THERE IS

NOTHING YOU CAN DO ABOUT IT.

USERS DON’T HAVE OUTDATED ENVIRONMENTS OR TURNED OFF SCRIPTING BECAUSE THEY HATE YOU.

WHAT WE SEE A GIVEN AS DEVELOPERS, IS NOT AS RELIABLE AS WE CONSIDER IT TO BE.

http://kryogenix.org/code/browser/everyonehasjs.html

WHEN YOU WORK ON THE WEB, YOU ARE WORKING IN THE UNKNOWN…

"The Web is the most hostile software engineering environment imaginable." - Douglas Crockford

SO, CAN WE PLEASE JUST DEAL WITH THE FACT THAT WE CAN’T AND SHOULDN’T CONTROL OUR AUDIENCE’S ENVIRONMENTS?

PROGRESSIVE ENHANCEMENT IS NOT ABOUT…

• Catering to old browsers • JavaScript in/dependence • Apps vs. Web • Us developers

PROGRESSIVE ENHANCEMENT IS ABOUT DELIVERING A

GREAT SERVICE TO THE USERS OF NOW AND TOMORROW

LET’S LOOK AT ANOTHER REAL-LIFE EXAMPLE.

People at airports are stressed, confused, don’t pay attention to things, eat badly and are not always feeling good. They are tired, they feel rushed and they want just to get things over with and get where they want to go. Others – those new to travel – are overly excited about everything and want to things right, making mistakes because they are too eager. Exactly what users on the web are like.

http://christianheilmann.com/2015/05/24/the-ryanair-approach-to-progressive-enhancement/

WHAT YOU TAKES TO FLY

• Ticket confirmation number • Origin airport • Destination airport • Proof that you are you

WHAT YOU WANT IS A BOARDING PASS!

Photo by mroach https://www.flickr.com/photos/mroach/4659815616/

CHECK-IN COUNTERS

Photo by Daniel Incandela https://www.flickr.com/photos/50378660@N00/3788243443/

+ —CHECK-IN COUNTERS…

• Need staffing • Are time-consuming • Are expensive for the company

(need trained staff) • Don’t scale well (causing

queues)

• Provide a knowledgable human being to talk to

• Have up-to-date information • Allows for dropping luggage • Gives a human interaction (no

need to feel stupid) • Offer flexibility on error

WHAT YOU WANT TO AVOID IS QUEUES!

Photo by James Emery https://www.flickr.com/photos/emeryjl/520109861/

http://fr.wikipedia.org/wiki/Air_France#/media/File:Air_France_E-Checkin.jpg

SELF-SERVICE TICKET MACHINES

+ —SELF-SERVICE TICKET MACHINES

• Not fault tolerant • No up-to-date information • Can appear intimidating • Lack a sense of

accompllishment

• Prevent queues • Great offer for power users • Allow for multi-airline use • Prevent unneccessary

printouts

ONLINE CHECK-IN & MOBILE APPS

+ —ONLINE CHECK-IN & MOBILE APPS

• Needs a turned on phone with full battery (no charger on flights, phone needs turning off)

• Needs a reader at the airport gate

• Might clash with TSA regulations (need to carry boarding pass whilst X-Ray of phone)

• No need to queue at all • Up-to-date information • Easy to track past and future

travels • Reminders, notifications, etc…

GREAT AIRLINES OFFER FALLBACKS AND REWARD YOU FOR USING THE APP.

SELFISH AIRLINES DEMAND YOU TO USE THE APP, OR CHARGE FOR BOARDING PASS PRINTOUTS.

DON’T BE A SELFISH AIRLINE!

HOW PROGRESSIVE ENHANCEMENT WORKS FOR YOU!

PROGRESSIVE ENHANCEMENT PROTECTS THE BASIC BUSINESS CASE OF YOUR PRODUCT…

THIS IS GOOGLE WITHOUT CSS…

THIS IS GOOGLE WITHOUT CSS…

IT WORKS, AND IT EVEN GETS BETTER!

USING PROGRESSIVE ENHANCEMENT IS WRITING TRULY WEB-NATIVE CODE!

XHTML WAS CONSIDERED EVIL, AS ONE MISTAKE OF THE DEVELOPER MEANS THE SITE WOULDN’T RENDER.HTML5 FIXED THAT.

HTML AND CSS ARE DESIGNED TO BE FAULT TOLERANT.

https://adactio.com/journal/4272

JAVASCRIPT IS NOT FAULT TOLERANT.

CAPABILITY TESTING MEANS YOU NEVER DELIVER BROKEN EXPERIENCES.

“CUTTING THE MUSTARD”

https://justmarkup.com/log/2015/02/26/cut-the-mustard-revisited/

SETTING YOUR BASELINE…

EXTENDING THE BASELINE

TESTING FEATURES, DELIVERING WIN.

https://featuretests.io/

LET’S GET READY FOR THE NEXT NEW THING

FRANKLY, I AM GETTING TIRED OF THIS…

LET’S LIBERATE US FROM BROWSER SUPPORT ISSUES

LET’S STOP THE RAT-RACE AND CONCENTRATE ON BUILDING WORKING, STURDY SOLUTIONS.

ENJOY WHAT BROWSERS CAN DO WHEN YOU TEST FOR CAPABILITIES…

http://caniuse.com

BROWSERS CAN’T GET BETTER IF WE NEED TO CATER TO OLD MISTAKES…

BUT WE CAN GET BETTER IF WE FOCUS ON DELIVERING WORKING SOLUTIONS TO OUR USERS…

CHECK-IN COUNTERS

SELF-SERVICE TICKET MACHINE MOBILE APP

STATIC VERSION OF THE PRODUCT USING HTML+CSS

(TOTALLY FINE TO CREATE WITH NODE.JS)

PROGRESSIVELY ENHANCED WITH JS AND CAPABILITY TESTING

HIGH END SOLUTION FOR MOST CAPABLE ENVIRONMENTS.

HYBRID APP, USING MANIFOLD.JS / PHONEGAP?

AS WE LIVE IN A VIRTUAL ENVIRONMENT, WE HAVE NO HARDWARE COST LIKE AIRPORTS DO.

ALL WE NEED TO PUT IN IS UNDERSTANDING THE BASICS OF THE WEB AND ITS TECHNOLOGIES.

https://developer.mozilla.org/

ALL YOU NEED IS HONESTY…

“We crave for new sensations but soon become indifferent to them. The wonders of yesterday are today common occurrences.”

― Nikola Tesla, My Inventions

Chris Heilmannchristianheilmann.com

@codepo8

THANKS!