Mind the Gap - State of the Browser 2015


The Presentation inside:

Slide 0

MIND THE GAP CHRIS HEILMANN (﴾@CODEPO8)﴿, STATE OF THE BROWSER, LONDON, SEPTEMBER 2015


Slide 1

WEB DEVELOPMENT WAS A LOT ABOUT GAPS…


Slide 2

CONSIDER THIS SIMPLE, SENSIBLE MARKUP …


Slide 3

…AND THE MESS THAT INTERNET EXPLORER 6 AND 7 MADE OF IT.


Slide 4


Slide 5


Slide 6


Slide 7

FIXES WERE PLENTIFUL…


Slide 8

AND VERY SPECIFIC TO THE BROWSER’S ISSUES…


Slide 9

ALL OF THESE WERE SOLUTIONS. BUT THEY FELT BAD.


Slide 10

WRITE EXTRA MARKUP TO WORK AROUND THE ISSUES OF THE PARSER?


Slide 11

RELY ON HACKS THAT EXPLOIT KNOWN PROBLEMS IN THE CSS PARSER OF THE OFFENDING BROWSER?


Slide 12

RELY ON KNOWN BUGS IN THE CSS PARSER?


Slide 13

CREATE A DEDICATED STYLE SHEET WITH ALL THE QUIRKS IN THEM -‐ ONE FOR EACH OFFENDING BROWSER


Slide 14

FIND A SOLUTION AND ENSURE THAT ONLY THE PROBLEMATIC BROWSERS GET IT?


Slide 15

STOP TRYING TO SOLVE THE PROBLEM OF BROWSER CREATORS AND FEED BACK ISSUES SO THAT BROWSERS CAN IMPROVE?


Slide 16

EXCEPT, BACK THEN THERE WERE NO FEEDBACK CHANNELS.


Slide 17

SO WE DID THE NEXT BEST THING. WE WROTE ABSTRACTIONS TO FIX BROWSER ISSUES FOR US.


Slide 18

NO WAITING FOR BROWSERS -‐ LET’S INNOVATE AND BUILD THE THINGS WE WANT!


Slide 19

BROWSERS WILL CATCH UP AND WE CAN REMOVE OUR ABSTRACTIONS…


Slide 20

…EXCEPT, WE NEVER DO.


Slide 21

AT EVENTS, WE TALK ABOUT AMAZING SOLUTIONS BUT SOMEHOW, IT FEELS WE’RE NOT HAVING AN EFFECT…


Slide 22

A LOT IS NOT WORKING THE WAY IT SHOULD…


Slide 23


Slide 24

THE TIME THE MEDIAN ECOMMERCE SITE NEEDS TO FULLY LOAD…


Slide 25

THAT’S A PRETTY TERRIBLE STATE OF THE WEB. • The median page’s time to interact is 5.5 seconds, and fully loads in just over 15 seconds. • The median page is 2MB in size and contains 170 resources • Most sites fail to take advantage of core image optimisation techniques http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/


Slide 26

AND SO NOT UNCOMMON…


Slide 27

WELL, I AGREE…


Slide 28

HUGE, INDEED… http://www.apple.com/ipad-‐air/


Slide 29

HUGE, INDEED… http://www.apple.com/ipad-‐pro/


Slide 30

WHOSE FAULT IS THIS?


Slide 31

• Web development is still governed by looks alone PRETTY MUCH OURS… • Clients still expect web sites to work the same on every browser and platform • Quick delivery trumps quality and release processes • We’re asked to make things work and fix them later -‐ but there never is a later.


Slide 32

A LOT OF OUR INNOVATION AND EASY TO USE SOLUTIONS FEEL LIKE PURE ESCAPISM…


Slide 33

I’M NOT SAYING THERE SHOULD BE NO INNOVATION…


Slide 34

IT IS JUST NOT EVERYBODY’S RESPONSIBILITY. SOME OF US COULD CONCENTRATE ON KEEPING THE WEB A SOLID FOUNDATION.


Slide 35

WE GET HIGH ON TECHNICAL SOLUTIONS THAT GET INCREASINGLY COMPLEX. http://ashleynolan.co.uk/blog/frontend-‐tooling-‐survey-‐2015-‐results


Slide 36

THIS IS NOT AN OLD MAN OF THE WEB RANTING… (﴾WELL, NOT EXCLUSIVELY)﴿


Slide 37

LATELY I WORKED EXCLUSIVELY IN FIXING ONE MASSIVE ISSUE OF THE WEB…


Slide 38

✘ ✘ WE REMOVED ALL THE THINGS THE WEB SUFFERED FROM… VML attachEvent(﴾)﴿ ✘ currentStyle ✘ X-‐UA-‐Compatible (﴾render modes)﴿ ✘ IE Layout Quirks ✘ VBScript ✘ Conditional Comments ✘ MS-‐Prefixed Events


Slide 39

WE REALISED YOU CAN’T BREAK THE WEB OVER NIGHT… :(﴾


Slide 40

WE LEARNED THAT THERE ARE MANY WEBS…


Slide 41

…AND THAT EXPERIMENTAL FEATURES DON’T DIE before after -webkit-appearance: none before after -webkit-gradient


Slide 42

EDUCATING IS A TOUGH JOB… http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-‐code-‐scan


Slide 43

✘ ✘ THE BIGGEST CULPRITS WE FOUND… Aggressive browser sniffing independent of version number Outdated libraries and polyfills -‐ some of them clashing with new language features ✘ A lack of packaging and dependency loading solutions -‐ dozens of JS files = no inlining possible ✘ If it works on Safari iOS, that’s what matters -‐ no matter what the spec says…


Slide 44

FIXING THE BROWSER SHOWED US HOW BROKEN THE WEB IS


Slide 45

WE HAVE WORKING COMMUNICATION CHANNELS BETWEEN BROWSER MAKERS AND DEVELOPERS…


Slide 46

✓ It is a constant race not to break the web -‐ every mistake web developers make needs to get catered for. LET’S USE THEM PROPERLY. ✓ The pressure is immense. Instead of pushing for an interoperable web, browsers are constantly compared and expected to be different. HERE’S WHAT I LEARNED WORKING FOR BROWSER CREATORS ✓ When implementing standards, we find a lot of problems and feed them back. That’s why a score of 100% in feature tests makes no sense. ✓ Most speed increases are based on analysing and fixing developer mistakes/sloppiness.


Slide 47

SO HERE IS MY PLEA TO HELP WITH BETTER SOLUTIONS FOR EVERYONE…


Slide 48

STOP TELLING PEOPLE ON THE WEB THAT THERE ARE DOZENS OF SOLUTIONS THAT MAGICALLY FIX ALL THEIR ISSUES…


Slide 49

STOP CATERING TO OLD BROWSERS. GIVE THEM BASIC, WORKING SOLUTIONS AND ENHANCE USING FEATURE DETECTION.


Slide 50

EXPLAIN, DON’T MAKE IT FASTER AND EASIER!


Slide 51

SHOW THE DANGERS OF QUICK SOLUTIONS.


Slide 52

KEEP THINGS ACCESSIBLE FOR EVERYONE. THERE IS NO TECHNICAL BASELINE!


Slide 53

SIMPLY BECAUSE YOU CAN FIX ANYTHING WITH JAVASCRIPT DOES NOT MEAN YOU SHOULD!


Slide 54

LET’S COLLECTIVELY CALM DOWN!


Slide 55

✘ WE’RE NOT IN A HEALTHY STATE RIGHT NOW AS A COMMUNITY… We build to impress each other -‐ the people who need our solutions never see them. ✘ We feel rushed and not good enough -‐ all the time. ✘ We feel innovation is going too slow whilst not recognising when something got fixed we wanted oh so much when it was the hot thing to demand.


Slide 56

THE FIRST STEP TO HAPPINESS IS TO MAKE IT HAPPEN…


Slide 57

✓ ✓ THE FIRST STEP TO HAPPINESS IS TO MAKE IT HAPPEN… Improve your basic skills, catch up on what’s possible. caniuse.com is a riveting read! Start helping people who are not here and don’t follow hackernews. You start teaching and you end up learning. ✓ Report problems, demand support for basic features, not only for the hot, new (﴾half-‐baked)﴿ ones. ✓ Reach out beyond our echo chamber if you want to reach people who need the knowledge you have.


Slide 58

THANK YOU! CHRIS HEILMANN @CODEPO8


Slide 59


×

HTML:





Ссылка: