Fullstackcon 2016 London keynote.

1. Progressing JavaScript and Apps the Web way…
Chris Heilmann @codepo8, FullstackConf, London, July 2016

2. Of innovation and impatience
Chris Heilmann @codepo8, Future Decoded, London, Nov 2015
CHRIS HEILMANN
@CODEPO8

3. https://www.youtube.com/watch?v=1-WNA0vF2RQ
Bad Religion: Progress

4. Progress, 'til there's nothing left to gain, it's
Progress, it's a message that we send.
And progress is a debt we all must pay.
Its convenience we all cherish, its pollution
we disdain. And the cutting edge is dulling,
Too many folks to plow through.
“

5. Progress, 'til there's nothing left to gain…
“ We make all our code very generic,
extensible and want everything to scale in
every direction. Many times we clog up
the web that way and wonder why we
don’t get the millions of users we scaled
for…

6. Progress, it's a message that we send.
“
We make our solutions dependent on a lot
of build processes, conversion steps and
publication/packaging tools. This can be
discouraging for newcomers and repel
maintainers…

7. And progress is a debt we all must pay. Its
convenience we all cherish, its pollution we
disdain.
“
Technical debt has become pretty rampant
in our market. We solve a lot of developer
problems at the cost of our users and
maintainers…

8. And the cutting edge is dulling,
Too many folks to plow through.“
There is an unhealthy competition going
on about building great developer tools
and “best practices” that haven’t proven
themselves in production.

9. Let’s talk about rapid
progress for a bit…

10. http://mashable.com/2016/07/10/john-hanke-pokemon-go/

11. http://mashable.com/2016/07/10/john-hanke-pokemon-go/

12. COOL TECHNOLOGY AND PEDIGREE
https://en.wikipedia.org/wiki/Ingress_(video_game)https://www.google.com/earth/

13. CRITICISM IS EASY AND PLENTIFUL…

14. http://www.theverge.com/2016/7/11/12150468/pokemon-go-privacy-full-account-access-permission
Gotta catch them all?

15. https://www.engadget.com/2016/07/11/pokemon-go-on-ios-is-digging-deep-into-linked-google-accounts/
We recently discovered that the Pokémon Go account creation process on iOS erroneously
requests full access permission for the user's Google account. However, Pokémon Go only accesses
basic Google profile information (specifically, your User ID and email address) and no other Google
account information is or has been accessed or collected. Once we became aware of this error, we
began working on a client-side fix to request permission for only basic Google profile information,
in line with the data that we actually access. Google has verified that no other information has
been received or accessed by Pokémon Go or Niantic. Google will soon reduce Pokémon Go's
permission to only the basic profile data that Pokémon Go needs, and users do not need to take
any actions themselves.
https://www.nianticlabs.com/privacy/pokemongo/en
https://gist.github.com/arirubinstein/fd5453537436a8757266f908c3e41538

16. good progress = transparency + technology +
ethics + accessibility

17. good progress = transparency + technology +
ethics + accessibility
…which is, what the web is all about!

18. 🤖🍎🖼🐧
The web is independent of platform…

19. Independent of browser…

20. 🚲🏍🚗 🚜🚄✈
Independent of connectivity…

21. 🗺
Independent of location…

22. ♿👀./0
Independent of ability…

23. 🚪Independent of skill set
(anyone is invited to be a publisher…)

24. 😴😪😓😞
That’s nothing new, and for many it feels exhausting

25. 🚀
It feels like a burden, when it comes to innovating…

26. #WEBIP

27. #WEBIP
☠ There are too many foreign influences
interfering with your product
☠ The Web is too flexible to write
sensible solutions - it is too much
work to support everything
☠ Native environments give you better
tooling and more control
☠ People want and use apps. The web
is dead.

28. RELAX, THESE ARE ALL VALID POINTS

29. #WEBIP
😊 You can be a fan of native without
criticising the web - if you don’t want
to use it, don’t.
😊 Don’t try to reap the rewards of it
though without building with its
merits in mind.
😊 If your play is native, be aware that you
will have full parallel development for
each platform.
😊 You are also playing in a very fluent
market - the cool thing of today is
impossible to sell tomorrow.

30. #WEBIP
📉 One thing to be aware is that the app
gold rush is over
📉 People don’t download new apps, a
few keep their attention
📉 The OS comes with a lot of useful
features historically covered by apps.
📉 People get tired of the steps to go
through to use an app
📉 People are sick of constant updates
and the hefty data traffic this means
http://www.recode.net/2016/6/8/11883518/app-boom-over-snapchat-uber
http://qz.com/253618/most-smartphone-users-download-zero-apps-per-month/

31. CHAT BOTS ARE THE NEW APPS
https://dev.botframework.com/
https://developers.facebook.com/docs/messenger-platform

32. 😍🌎
Let’s talk about progressing the web…

33. The progress element
represents the completion
progress of a task.
http://www.w3.org/TR/html5-author/the-progress-element.html
“

34. JAVASCRIPT ACCESS AND INTERACTION
http://html5doctor.com/the-progress-element/

35. WHAT
<progress>
LOOKS LIKE…
Chrome / Android M
Chrome / Windows 10
Chrome/Safari/Firefox/Opera… / OSX
Edge / Windows 10
Firefox / Older OSX
Firefox / Windows 10
Firefox / Windows 7
Opera Mini / Android M
Opera / Windows 10

36. https://css-tricks.com/html5-progress-element/
STYLING?

37. PEEKING UNDER THE
HOOD…

38. http://lea.verou.me/2011/07/a-polyfill-for-html5-progress-element-the-obsessive-perfectionist-way/

39. WHAT IT WILL MOST
LIKELY END UP AS… + JavaScript to make it do things…

40. #BROWXIT

41. #BROWXIT
☠ Browser differences and stupid laws by
browser makers are stopping us from
using cool new technology
☠ We can and should use JavaScript to
work around these issues
☠ We should be allowed to expect a
certain browser from the end user
☠ We don’t have 100% control over the
interface, using JavaScript, we can
have that.

42. NOPE, THESE AREN’T VALID POINTS
brandsvig https://www.flickr.com/photos/27376974@N02/5047305345

43. #BROWXIT
😊 Browser differences are what enable cool
new technology.
😊 Browser makers publicly announce and
discuss their decisions these days.
😊 Instead of concentrating on browsers, we
should concentrate on capabilities. Use
them only when the user agent supports
them - this way we never deliver a broken
experience.
😊 If it is experimental, don’t rely on it. And
let the experiment take its course, don’t
force it into production with polyfills and
libraries that will be unmaintained.
☠ Browser differences and
stupid laws by browser
makers are stopping us
from using cool new
technology

44. #BROWXIT 😊 JavaScript is powerful and can enable us to
do beautiful things when we can control
the environment (Node, Electron, editors
f.e. @code)
😊 JavaScript on the web is brittle and will
break. And there is nothing you can do
about it. So, calm down and use the power
of if().
😊 Working around differences and relying on
JS results in browsers never fixing them.
😊 The web needs less code and leaner
solutions, not more fixes.
☠ We can and should use
JavaScript to work around
these issues

45. #BROWXIT 😊 We are a delivery service. Our job is to
deliver working products to the end user.
Our setup isn’t theirs, and our problems
shouldn’t become theirs.
😊 The amazing browser of today is the digital
landfill of tomorrow.
😊 By limiting ourselves to a certain browser,
we might as well build native solutions.
End users will not install a browser for our
sake.
☠ We should be allowed to
expect a certain browser
from the end user

46. #BROWXIT
☠ We don’t have 100%
control over the interface,
using JavaScript, we can
have that.
😊 The web isn’t having 100% control over
the interface. You reach a lot more users
and cater for their needs as they can
customise the interface to their needs.
😊 You may have control over the interface,
but the end user is very likely to end up
with no interface at all. Any error that can
happen will break your solution. JavaScript
isn’t forgiving.
😊 You forfeit a lot of useful features of
browsers and the web. Caching, linking,
history, open in new tab…

47. RELAX, THE WEB IS BEAUTIFUL

48. #REMAIN

49. #REMAIN
😊 Web technology and browsers evolved
and keep doing so.
😊 (almost) All browsers are evergreen and
disconnected from hardware and OS
updates.
😊 There are no black holes left - every
browser maker has open channels to
communicate and bug trackers
😊 Standardisation is on the rise - we all
realised that browser prefixes are a bad
plan when people use them in production
😊 Writing JavaScript has gone far beyond
using it in a browser - go wild.

50. EXCITING ACCESS
OPPORTUNITIES…
https://remysharp.com/2016/05/28/state-of-the-gap

51. EXCITING ACCESS
OPPORTUNITIES…

52. EXCITING ACCESS
OPPORTUNITIES…

53. EXCITING ACCESS
OPPORTUNITIES…

54. EXCITING ACCESS
OPPORTUNITIES…

55. STAY ON TARGET

56. http://caniuse.com/

57. Your father's Service Worker. This is
the weapon of a Jedi Knight. Not as
clumsy or random as AppCache; an
elegant weapon for a more civilised
age.

58. PROGRESSIVE
WEB
APPS

59. 🔧 Working offline using
Service Worker
🔧 Can hibernate and notify on
change
🔧 Possible progressive
enhancement of a working,
standard web site
🔧 More functionality with
subsequent visits

60. 🔧 The link is the distribution
model
🔧 All the benefits of native apps
- none of the sluggish
distribution issues
🔧 Natural evolution of web
content into the mobile form
factor
🔧 A big opportunity to crack
the closed distribution model

62. https://www.youtube.com/playlist?list=PLNYkxOF6rcIAWWNR_Q6eLPhsyx6VvYjVb

63. IN SUMMARY…

64. IN SUMMARY…
😊 It is not your job to control the web. You
can reap its rewards by being open to
change and giving up control.
😊 Progressive Web Apps are here and ready
to fix the broken mobile app space.
😊 The browser is but one environment
JavaScript runs in. We can innovate the
language much better outside of it in
controlled spaces (Node, dev environments,
Electron, developer tools of browsers)

65. IN SUMMARY…
😊 You are free to use whatever makes you
most effective. You have no right though
to disrepute what others use. The web
strives on diversity, not on monopoly.
😊 The web can be a platform to build on, or
a compilation target. Both work on
different premises and we gain nothing
from telling one another what “best
practice” is.
😊 The web isn’t going away. The fault
tolerance of its building blocks makes it a
great start to enhance from. Embrace this
opportunity.

66. AND IF ALL FAILS…

67. THANKS!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM