Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rocket packs on escalators - stop messing with progressive enhancement

4,233 views

Published on

One of the never-ending debates of web development surrounds the concept of progressive enhancement vs. graceful degradation. With our increased complexity of technology the excuse “but we build apps” keeps thrown around to make our products dependent on many technology layers. The other side of the argument keeps accusing others of breaking the web. Fact is, progressive enhancement is your friend, and it is not that hard to apply it sensibly. In this talk Chris Heilmann of Microsoft will try to ease our confusion and un-block some loggerhead debates. We build things for people and developer convenience should never trump user experience.

Published in: Education
  • The video: https://www.youtube.com/watch?v=k9uK1FdEBfY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Rocket packs on escalators - stop messing with progressive enhancement

  1. 1. ROCKET PACKS ON ESCALATORS CHRIS HEILMANN (@CODEPO8), AT THE FRONTEND 2015, COPENHAGEN Stop messing with Progressive Enhancement
  2. 2. 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.”
  3. 3. A PERFECT SIMILE FOR PROGRESSIVE ENHANCEMENT ON THE WEB. christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
  4. 4. PROGRESSIVE ENHANCEMENT IS A HOT TOPIC AGAIN… Crippling the Web http://timkadlec.com/2013/07/crippling- the-web/ The True Cost of Progressive Enhancement https://medium.com/@AaronGustafson/ the-true-cost-of-progressive- enhancement-d395b6502979 The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement http://www.sitepoint.com/javascript- dependency-backlash-myth-busting- progressive-enhancement/ Progressive enhancement is still important http://jakearchibald.com/2013/ progressive-enhancement-still-important/
  5. 5. 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?”
  6. 6. ALL OF THIS IS IMPORTANT… …AND ISN’T ABOUT PROGRESSIVE ENHANCEMENT
  7. 7. PROGRESSIVE ENHANCEMENT IN A NUTSHELL: USE TECHNOLOGY TO ENHANCE WORKING SOLUTIONS WHEN AND IF THE ENHANCEMENTS CAN BE APPLIED.
  8. 8. IN OTHER WORDS… • Build on a solid foundation • Jump into the lake after checking it is deep enough • Enhance to add convenience
  9. 9. OMG! SELF-DRIVING CAR!
  10. 10. WHY THE WHEEL?
  11. 11. CREEPY TECHNOLOGY
  12. 12. AS DEVELOPERS, WE ALWAYS WANT TO LEAP-FROG AHEAD AND INNOVATE. Photo by BiblioArchives / LibraryArchives https://www.flickr.com/photos/28853433@N02/6347652875/
  13. 13. 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!
  14. 14. ALL OF THIS IS TRUE AND THERE IS NOTHING YOU CAN DO ABOUT IT.
  15. 15. USERS DON’T HAVE OUTDATED ENVIRONMENTS OR TURNED OFF SCRIPTING BECAUSE THEY HATE YOU.
  16. 16. WHAT WE SEE A GIVEN AS DEVELOPERS, IS NOT AS RELIABLE AS WE CONSIDER IT TO BE.
  17. 17. http://kryogenix.org/code/browser/everyonehasjs.html
  18. 18. WHEN YOU WORK ON THE WEB, YOU ARE WORKING IN THE UNKNOWN… "The Web is the most hostile software engineering environment imaginable." - Douglas Crockford
  19. 19. SO, CAN WE PLEASE JUST DEAL WITH THE FACT THAT WE CAN’T AND SHOULDN’T CONTROL OUR AUDIENCE’S ENVIRONMENTS?
  20. 20. PROGRESSIVE ENHANCEMENT IS NOT ABOUT… • Catering to old browsers • JavaScript in/dependence • Apps vs. Web • Us developers
  21. 21. PROGRESSIVE ENHANCEMENT IS ABOUT DELIVERING A GREAT SERVICE TO THE USERS OF NOW AND TOMORROW
  22. 22. 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/
  23. 23. WHAT YOU TAKES TO FLY • Ticket confirmation number • Origin airport • Destination airport • Proof that you are you
  24. 24. WHAT YOU WANT IS A BOARDING PASS! Photo by mroach https://www.flickr.com/photos/mroach/4659815616/
  25. 25. CHECK-IN COUNTERS Photo by Daniel Incandela https://www.flickr.com/photos/50378660@N00/3788243443/
  26. 26. + — 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
  27. 27. WHAT YOU WANT TO AVOID IS QUEUES! Photo by James Emery https://www.flickr.com/photos/emeryjl/520109861/
  28. 28. http://fr.wikipedia.org/wiki/Air_France#/media/File:Air_France_E-Checkin.jpg SELF-SERVICE TICKET MACHINES
  29. 29. + — 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
  30. 30. ONLINE CHECK-IN & MOBILE APPS
  31. 31. + — 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…
  32. 32. GREAT AIRLINES OFFER FALLBACKS AND REWARD YOU FOR USING THE APP.
  33. 33. SELFISH AIRLINES DEMAND YOU TO USE THE APP, OR CHARGE FOR BOARDING PASS PRINTOUTS.
  34. 34. DON’T BE A SELFISH AIRLINE!
  35. 35. HOW PROGRESSIVE ENHANCEMENT WORKS FOR YOU!
  36. 36. PROGRESSIVE ENHANCEMENT PROTECTS THE BASIC BUSINESS CASE OF YOUR PRODUCT…
  37. 37. THIS IS GOOGLE WITHOUT CSS…
  38. 38. THIS IS GOOGLE WITHOUT CSS…
  39. 39. IT WORKS, AND IT EVEN GETS BETTER!
  40. 40. USING PROGRESSIVE ENHANCEMENT IS WRITING TRULY WEB-NATIVE CODE!
  41. 41. XHTML WAS CONSIDERED EVIL, AS ONE MISTAKE OF THE DEVELOPER MEANS THE SITE WOULDN’T RENDER. HTML5 FIXED THAT.
  42. 42. HTML AND CSS ARE DESIGNED TO BE FAULT TOLERANT. https://adactio.com/journal/4272
  43. 43. JAVASCRIPT IS NOT FAULT TOLERANT.
  44. 44. CAPABILITY TESTING MEANS YOU NEVER DELIVER BROKEN EXPERIENCES.
  45. 45. “CUTTING THE MUSTARD” https://justmarkup.com/log/2015/02/26/cut-the-mustard-revisited/
  46. 46. SETTING YOUR BASELINE…
  47. 47. EXTENDING THE BASELINE
  48. 48. TESTING FEATURES, DELIVERING WIN. https://featuretests.io/
  49. 49. LET’S GET READY FOR THE NEXT NEW THING
  50. 50. FRANKLY, I AM GETTING TIRED OF THIS… LET’S LIBERATE US FROM BROWSER SUPPORT ISSUES
  51. 51. LET’S STOP THE RAT-RACE AND CONCENTRATE ON BUILDING WORKING, STURDY SOLUTIONS.
  52. 52. ENJOY WHAT BROWSERS CAN DO WHEN YOU TEST FOR CAPABILITIES… http://caniuse.com
  53. 53. BROWSERS CAN’T GET BETTER IF WE NEED TO CATER TO OLD MISTAKES…
  54. 54. BUT WE CAN GET BETTER IF WE FOCUS ON DELIVERING WORKING SOLUTIONS TO OUR USERS…
  55. 55. 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?
  56. 56. AS WE LIVE IN A VIRTUAL ENVIRONMENT, WE HAVE NO HARDWARE COST LIKE AIRPORTS DO.
  57. 57. ALL WE NEED TO PUT IN IS UNDERSTANDING THE BASICS OF THE WEB AND ITS TECHNOLOGIES. https://developer.mozilla.org/
  58. 58. ALL YOU NEED IS HONESTY…
  59. 59. “We crave for new sensations but soon become indifferent to them. The wonders of yesterday are today common occurrences.” ― Nikola Tesla, My Inventions
  60. 60. Chris Heilmann christianheilmann.com @codepo8 THANKS!

×