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.
Progressive web and the problem of JavaScript
Chris Heilmann @codepo8, SmashingConf Jam Session, September 2016
Of innovation and impatience
Chris Heilmann @codepo8, Future Decoded, London, Nov 2015
CHRIS HEILMANN
@CODEPO8
We all know this
character, right?
https://en.wikipedia.org/wiki/Mario#Concept_and_creation
But do you know
why it looks like it
does?
https://en.wikipedia.org/wiki/Mario#Concept_and_creation
Red and Blue offered the
best contrast to the skin,
boots and the game
background.
https://en.wikipedia.org/wiki/Mario#Con...
The cap meant there was
no need to worry about
hair style, eyebrows and
forehead.
(There were also not enough
pixels for w...
The large nose and
moustache made it
possible to avoid a mouth
and facial expressions.
Design by limitations.
!
Design by lack of definition.
🌎🕸
Flexibility and forgiveness…
💧 HTML and CSS are fault tolerant…
Knives, bees and footguns…
🦂 JavaScript is not fault tolerant
With HTML and CSS you’re
relying on the user agent to
do the right thing…🙁
Using JavaScript, you have a
means to test if what you’re
trying to do succeeded…✅
Predicting things is tough…
🔮
That’s why progressive
enhancement was a great
idea to solve this issue…
But is it still enough?
🔬
And what does it mean?
🤔
JavaScript can’t be trusted and
can be turned off.
💣
Everybody has JavaScript, and
we can do everything with it?
🔨
!
Story time…🐷*3🐺+🏠+🌳
https://a-k-apart.com/
Excellent, let’s do this!
https://codepo8.github.io/10kb-CSS-colour-game/
That was fun…
😎 Written on a plane, offline and in
roughly two hours
😎 Works on desktop and mobile,
independent of input a...
Well done, Chris!
https://www.google.com/patents/US4608967
Here’s the source… …Luke?
The structure was not hard…
😎 Have an array of all the possible colours.
😎 Get a random cut of n elements, display them as...
Computers and smartphones are
powerful.
Browsers can do a lot and are open to
feedback.
JavaScript is flexible and has evo...
The beauty of HTML, CSS and JS…
😍 All is contained in one package
😍 Everything is running on the end users
environments
😍 ...
Then I read the contest
guidelines…
😟
https://a-k-apart.com/faq http://stateofjs.com/
I FAQed up…
😭
Should I try to make this
a NodeJS, universal,
functional, gluten-free…🤔
Sod it, I know PHP…
🤓
New, more sturdy structure…
😎 Write a PHP API with the named colours as the content
😎 Use array_rand() to get a cut of tha...
As we don’t keep the
state of the game in the
browser, I need to
maintain the random
array in between
reloads…
👜
The amount is not much,
but you better make sure
that there is no way to
inject code to the server.
🚨
Constant vigilance,
Harry…
Now it works without JS, let’s add some…
😎 Load the API content with Francis, err… AJAX
🤔 Repeat the rest of the functiona...
The better, sturdier, more webby version
🤔 Almost same amount of
JavaScript content
🤔 Doesn’t work offline, unless
we also...
How about some heresy?
😯
The “JavaScript not available”
argument is largely bogus
and is holding back the web!
➡
🎤
The “JavaScript is flaky and
will break” argument is very
much alive and will always be
that way…
🚧
We call this “programming”
B
🖥→💻→📱
Evolution is happening around us…
…and user numbers are shifting.
This means that new error
cases become much more
important than “JavaScript is
not available”
⚠
✏ Small initial payload
✏ Form factor supporting content
✏ Form factor supporting interfaces
✏ Offline/Flaky connection su...
This is achievable using
HTML, JavaScript and CSS,
but it is much harder - if
not impossible - without
client side scripti...
Which is annoying, as the
HTML5 revolution
promised a move from
documents to apps…
The problem is that eight
years after the proposal
and five years after
HTML5’s “last call”, there
are still many basic su...
https://vimeo.com/176453149
Monica Dinculescu < INPUT >
HTML Special, CSS Day
https://www.filamentgroup.com/lab/type-number.html
And the bad people of the
internet don’t stop abusing
old technology either…💀
In UGC, we can’t have nice things…
https://mathiasbynens.github.io/rel-noopener/
https://medium.com/@jitbit/target-blank-t...
Keep users on this page…
https://mathiasbynens.github.io/rel-noopener/
https://medium.com/@jitbit/target-blank-the-most-un...
Fix for newer browsers…
https://mathiasbynens.github.io/rel-noopener/
https://medium.com/@jitbit/target-blank-the-most-und...
Fix for all browsers…
https://mathiasbynens.github.io/rel-noopener/
https://medium.com/@jitbit/target-blank-the-most-under...
Almost…
Listen for the click event and prevent the default
browser behavior of opening a new tab. Inject a
hidden iframe t...
Our solutions should have
excellent error handling
instead of automatic
tolerance.
👌
And they should be great
solutions and not just
“good enough without
breaking”.
https://twitter.com/dieni/status/767589581...
Non-defensive coding is a problem…
We all make mistakes and errors happen…
There is a culture of “let’s
use whatever until it works”
😐
Standing on the shoulders of… …people?
http://status.npmjs.org/incidents/dw8cr1lwxkcr
http://status.npmjs.org/incidents/dw8cr1lwxkcr
http://status.npmjs.org/incidents/dw8cr1lwxkcr
Better be safe and require()…
More detail: the "fs" package is a non-functi...
https://www.npmjs.com/package/groot
Passive Event Listeners
https://www.npmjs.com/package/groot
Passive Event Listeners
This is not a JavaScript thing…
We have a lot of messy
solutions, and we keep
building more tools to undo
what clogs up the web.
Best practices can help with
that, but only when they
apply to the people who
build things and when they
solve current iss...
What about older browsers?
What about extreme
environment browsers?
These are valid concerns,
but edge cases. And
shouldn’t be used as a
punishment scenario.
🗞
What about accessibility, eh?
♿
Used sensibly, JavaScript is an
accessibility benefit.
Sometimes the only way to
make things accessible. ARIA
is not magic...
https://codepo8.github.io/gridnav/
It is more important for us
to get a grip on the overall
quality of the web and our
code…
🏅
Using
instead of a URL or using a
button is not JavaScript’s fault.
It is a bad idea and practice -
probably copy & paste....
Instead of bashing bad use
of JavaScript, let’s embrace
and scrutinise new ideas like
components and paradigms
like functi...
There is a very cool thing
happening right now…
😃
A lot of the next
improvements of the web are
progressive enhancements of
existing JavaScript solutions.
🍾
https://www.youtube.com/watch?v=NPM6172J22g
Passive Event Listeners
true: apply on capture
false: apply on bubble
false enables
event delegation 😊
Passive Event Listeners
Service Worker & PWAs
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
🔧 🦄
✅ Create and publish as much content
independent of JavaScript as you can
✅ JavaScript can make things much more
enjoyable...
🙂 You don’t rely on automatic fixes.
JavaScript breaks and it is painful. It
allows us to analyse what went wrong.
🙂 Tooli...
⚠ We shouldn’t hide functionality in
magical abstractions. A product that
relies on the availability and maintenance
of a ...
Important
considerations
independent of
technology used…
💣 Shit happens! Spend more time in
creating sensible error messag...
We have to stop thinking in
binaries, and consider writing
great, secure and failure-
aware solutions using each
technolog...
Mario evolved - so can the web…
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM
THANKS!
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScript
Upcoming SlideShare
Loading in …5
×

Progressive web and the problem of JavaScript

5,087 views

Published on

bla

Published in: Automotive
  • Be the first to comment

  • Be the first to like this

Progressive web and the problem of JavaScript

  1. 1. Progressive web and the problem of JavaScript Chris Heilmann @codepo8, SmashingConf Jam Session, September 2016
  2. 2. Of innovation and impatience Chris Heilmann @codepo8, Future Decoded, London, Nov 2015 CHRIS HEILMANN @CODEPO8
  3. 3. We all know this character, right? https://en.wikipedia.org/wiki/Mario#Concept_and_creation
  4. 4. But do you know why it looks like it does? https://en.wikipedia.org/wiki/Mario#Concept_and_creation
  5. 5. Red and Blue offered the best contrast to the skin, boots and the game background. https://en.wikipedia.org/wiki/Mario#Concept_and_creation
  6. 6. The cap meant there was no need to worry about hair style, eyebrows and forehead. (There were also not enough pixels for waving hair when falling down a hole)
  7. 7. The large nose and moustache made it possible to avoid a mouth and facial expressions.
  8. 8. Design by limitations. !
  9. 9. Design by lack of definition. 🌎🕸
  10. 10. Flexibility and forgiveness… 💧 HTML and CSS are fault tolerant…
  11. 11. Knives, bees and footguns… 🦂 JavaScript is not fault tolerant
  12. 12. With HTML and CSS you’re relying on the user agent to do the right thing…🙁
  13. 13. Using JavaScript, you have a means to test if what you’re trying to do succeeded…✅
  14. 14. Predicting things is tough… 🔮
  15. 15. That’s why progressive enhancement was a great idea to solve this issue…
  16. 16. But is it still enough? 🔬
  17. 17. And what does it mean? 🤔
  18. 18. JavaScript can’t be trusted and can be turned off. 💣
  19. 19. Everybody has JavaScript, and we can do everything with it? 🔨
  20. 20. !
  21. 21. Story time…🐷*3🐺+🏠+🌳
  22. 22. https://a-k-apart.com/
  23. 23. Excellent, let’s do this! https://codepo8.github.io/10kb-CSS-colour-game/
  24. 24. That was fun… 😎 Written on a plane, offline and in roughly two hours 😎 Works on desktop and mobile, independent of input and is responsive 😎 Using ServiceWorker caches content locally and can be played offline 😎 All in all < 8 kb with the biggest part being iconshttps://codepo8.github.io/10kb-CSS-colour-game/
  25. 25. Well done, Chris! https://www.google.com/patents/US4608967
  26. 26. Here’s the source… …Luke?
  27. 27. The structure was not hard… 😎 Have an array of all the possible colours. 😎 Get a random cut of n elements, display them as a list; store the name of the colour as a data attribute 😎 Get one item of the list as the colour to match, show its name. 😎 Use event delegation on the list to add one click handler (also allows for keyboard) 😎 Compare the data attribute of the target of the event with the colour to match 😎 If true, display a new random list 😎 If false, decrease the possible moves counter 😎 If no more moves left, show game over 💩 Only issue: there is no array_rand()
  28. 28. Computers and smartphones are powerful. Browsers can do a lot and are open to feedback. JavaScript is flexible and has evolved. CSS has become amazing. Developer tools in browsers give us great debugging and even design capabilities 😍 🦄 🎉
  29. 29. The beauty of HTML, CSS and JS… 😍 All is contained in one package 😍 Everything is running on the end users environments 😍 You wouldn’t even need ServiceWorker to make this work offline - inlining everything would be enough 📦
  30. 30. Then I read the contest guidelines… 😟
  31. 31. https://a-k-apart.com/faq http://stateofjs.com/
  32. 32. I FAQed up… 😭
  33. 33. Should I try to make this a NodeJS, universal, functional, gluten-free…🤔
  34. 34. Sod it, I know PHP… 🤓
  35. 35. New, more sturdy structure… 😎 Write a PHP API with the named colours as the content 😎 Use array_rand() to get a cut of that, pick one as the one to match 😎 Write out a list of buttons with the same name and the colour as the value. 😎 If the colour matches the button that was clicked, get a new list 😎 If the colour doesn’t match, decrease the amount of moves and show the list again. 😠 Oh, crap…
  36. 36. As we don’t keep the state of the game in the browser, I need to maintain the random array in between reloads… 👜
  37. 37. The amount is not much, but you better make sure that there is no way to inject code to the server. 🚨
  38. 38. Constant vigilance, Harry…
  39. 39. Now it works without JS, let’s add some… 😎 Load the API content with Francis, err… AJAX 🤔 Repeat the rest of the functionality client-side, or do a lot of unnecessary server roundtrips… 🍕
  40. 40. The better, sturdier, more webby version 🤔 Almost same amount of JavaScript content 🤔 Doesn’t work offline, unless we also create a different API 🤔 But it does work with JavaScript disabled. 😨 It also allows bad people to inject code unless we are very vigilant in keeping our backend secure.
  41. 41. How about some heresy? 😯
  42. 42. The “JavaScript not available” argument is largely bogus and is holding back the web! ➡ 🎤
  43. 43. The “JavaScript is flaky and will break” argument is very much alive and will always be that way… 🚧
  44. 44. We call this “programming” B
  45. 45. 🖥→💻→📱 Evolution is happening around us… …and user numbers are shifting.
  46. 46. This means that new error cases become much more important than “JavaScript is not available” ⚠
  47. 47. ✏ Small initial payload ✏ Form factor supporting content ✏ Form factor supporting interfaces ✏ Offline/Flaky connection support ✏ Taking advantage of the power of the end user device ✏ Avoiding interaction latency ❤📲
  48. 48. This is achievable using HTML, JavaScript and CSS, but it is much harder - if not impossible - without client side scripting. 👷
  49. 49. Which is annoying, as the HTML5 revolution promised a move from documents to apps…
  50. 50. The problem is that eight years after the proposal and five years after HTML5’s “last call”, there are still many basic support issues… 😦
  51. 51. https://vimeo.com/176453149 Monica Dinculescu < INPUT > HTML Special, CSS Day
  52. 52. https://www.filamentgroup.com/lab/type-number.html
  53. 53. And the bad people of the internet don’t stop abusing old technology either…💀
  54. 54. In UGC, we can’t have nice things… https://mathiasbynens.github.io/rel-noopener/ https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf
  55. 55. Keep users on this page… https://mathiasbynens.github.io/rel-noopener/ https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf 🔓💩
  56. 56. Fix for newer browsers… https://mathiasbynens.github.io/rel-noopener/ https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf
  57. 57. Fix for all browsers… https://mathiasbynens.github.io/rel-noopener/ https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf
  58. 58. Almost… Listen for the click event and prevent the default browser behavior of opening a new tab. Inject a hidden iframe that opens the new tab, then immediately remove the iframe.“ https://github.com/danielstjules/blankshield
  59. 59. Our solutions should have excellent error handling instead of automatic tolerance. 👌
  60. 60. And they should be great solutions and not just “good enough without breaking”. https://twitter.com/dieni/status/767589581046841344
  61. 61. Non-defensive coding is a problem…
  62. 62. We all make mistakes and errors happen…
  63. 63. There is a culture of “let’s use whatever until it works” 😐
  64. 64. Standing on the shoulders of… …people?
  65. 65. http://status.npmjs.org/incidents/dw8cr1lwxkcr
  66. 66. http://status.npmjs.org/incidents/dw8cr1lwxkcr
  67. 67. http://status.npmjs.org/incidents/dw8cr1lwxkcr Better be safe and require()… More detail: the "fs" package is a non-functional package. It simply logs the word "I am fs" and exits. There is no reason it should be included in any modules. However, something like 1000 packages *do* mistakenly depend on "fs", probably because they were trying to use a built-in node module called "fs".
  68. 68. https://www.npmjs.com/package/groot Passive Event Listeners
  69. 69. https://www.npmjs.com/package/groot Passive Event Listeners
  70. 70. This is not a JavaScript thing…
  71. 71. We have a lot of messy solutions, and we keep building more tools to undo what clogs up the web.
  72. 72. Best practices can help with that, but only when they apply to the people who build things and when they solve current issues and needs…
  73. 73. What about older browsers?
  74. 74. What about extreme environment browsers?
  75. 75. These are valid concerns, but edge cases. And shouldn’t be used as a punishment scenario. 🗞
  76. 76. What about accessibility, eh? ♿
  77. 77. Used sensibly, JavaScript is an accessibility benefit. Sometimes the only way to make things accessible. ARIA is not magic. 🕹
  78. 78. https://codepo8.github.io/gridnav/
  79. 79. It is more important for us to get a grip on the overall quality of the web and our code… 🏅
  80. 80. Using instead of a URL or using a button is not JavaScript’s fault. It is a bad idea and practice - probably copy & paste. 💩 <a href="javascript:void(0)">
  81. 81. Instead of bashing bad use of JavaScript, let’s embrace and scrutinise new ideas like components and paradigms like functional programming. 🔎
  82. 82. There is a very cool thing happening right now… 😃
  83. 83. A lot of the next improvements of the web are progressive enhancements of existing JavaScript solutions. 🍾
  84. 84. https://www.youtube.com/watch?v=NPM6172J22g Passive Event Listeners
  85. 85. true: apply on capture false: apply on bubble false enables event delegation 😊
  86. 86. Passive Event Listeners
  87. 87. Service Worker & PWAs https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API 🔧 🦄
  88. 88. ✅ Create and publish as much content independent of JavaScript as you can ✅ JavaScript can make things much more enjoyable and some things are just not worth while to implement without. ✅ Use JavaScript to benefit from the user’s hardware ✅ Spend more time building great interfaces, less time relying on what is there and can’t break - in many cases it is disappointing. It is time to re- think our best practice for the web approach…
  89. 89. 🙂 You don’t rely on automatic fixes. JavaScript breaks and it is painful. It allows us to analyse what went wrong. 🙂 Tooling is much better and we get much more insights into what happened than with, for example, CSS 🙂 We take responsibility of the interface. It is our job to make it happen - not browser makers to agree and find a consensus 🙂 We have full control over what gets loaded when, cached where and rendered when. Benefits of an “It’s OK to rely on JS for this” approach…
  90. 90. ⚠ We shouldn’t hide functionality in magical abstractions. A product that relies on the availability and maintenance of a framework is not a script dependency - it is a support issue. ⚠ Just because we can do everything in JavaScript, doesn’t mean we have to. Use it when HTML is not good enough or too broken to rely on. ⚠ While the client is powerful, it is also unknown. A lot more can be done on the server - and in JavaScript. Dangers to be aware of…
  91. 91. Important considerations independent of technology used… 💣 Shit happens! Spend more time in creating sensible error messaging and fallbacks, spend less time in trying to predict every possible error 💣 Slowness kills - our solutions must load fast what is needed and enhance when they can. They also need to be snappy. 💣 Offline and flaky is the norm - avoid network dependency as much as you can 💣 Security is paramount. A hacked server sending out malware or spam is worse than an app that needs a restart…
  92. 92. We have to stop thinking in binaries, and consider writing great, secure and failure- aware solutions using each technology to its strengths. 🐝
  93. 93. Mario evolved - so can the web…
  94. 94. CHRIS HEILMANN @CODEPO8 CHRISTIANHEILMANN.COM THANKS!

×