KEMBAR78
Progressing JavaScript and Apps the Web way… | PDF
Progressing JavaScript and Apps the Web way…
Chris Heilmann @codepo8, FullstackConf, London, July 2016
Of innovation and impatience
Chris Heilmann @codepo8, Future Decoded, London, Nov 2015
CHRIS HEILMANN
@CODEPO8
https://www.youtube.com/watch?v=1-WNA0vF2RQ
Bad Religion: Progress
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.
“
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…
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…
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…
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.
Let’s talk about rapid
progress for a bit…
http://mashable.com/2016/07/10/john-hanke-pokemon-go/
http://mashable.com/2016/07/10/john-hanke-pokemon-go/
COOL TECHNOLOGY AND PEDIGREE
https://en.wikipedia.org/wiki/Ingress_(video_game)https://www.google.com/earth/
CRITICISM IS EASY AND PLENTIFUL…
http://www.theverge.com/2016/7/11/12150468/pokemon-go-privacy-full-account-access-permission
Gotta catch them all?
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
good progress = transparency + technology +
ethics + accessibility
good progress = transparency + technology +
ethics + accessibility
…which is, what the web is all about!
🤖🍎🖼🐧
The web is independent of platform…
Independent of browser…
🚲🏍🚗 🚜🚄✈
Independent of connectivity…
🗺
Independent of location…
♿👀./0
Independent of ability…
🚪Independent of skill set
(anyone is invited to be a publisher…)
😴😪😓😞
That’s nothing new, and for many it feels exhausting
🚀
It feels like a burden, when it comes to innovating…
#WEBIP
#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.
RELAX, THESE ARE ALL VALID POINTS
#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.
#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/
CHAT BOTS ARE THE NEW APPS
https://dev.botframework.com/
https://developers.facebook.com/docs/messenger-platform
😍🌎
Let’s talk about progressing the web…
The progress element
represents the completion
progress of a task.
http://www.w3.org/TR/html5-author/the-progress-element.html
“
JAVASCRIPT ACCESS AND INTERACTION
http://html5doctor.com/the-progress-element/
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
https://css-tricks.com/html5-progress-element/
STYLING?
PEEKING UNDER THE
HOOD…
http://lea.verou.me/2011/07/a-polyfill-for-html5-progress-element-the-obsessive-perfectionist-way/
WHAT IT WILL MOST
LIKELY END UP AS… + JavaScript to make it do things…
#BROWXIT
#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.
NOPE, THESE AREN’T VALID POINTS
brandsvig https://www.flickr.com/photos/27376974@N02/5047305345
#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
#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
#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
#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…
RELAX, THE WEB IS BEAUTIFUL
#REMAIN
#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.
EXCITING ACCESS
OPPORTUNITIES…
https://remysharp.com/2016/05/28/state-of-the-gap
EXCITING ACCESS
OPPORTUNITIES…
EXCITING ACCESS
OPPORTUNITIES…
EXCITING ACCESS
OPPORTUNITIES…
EXCITING ACCESS
OPPORTUNITIES…
STAY ON TARGET
http://caniuse.com/
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.
PROGRESSIVE
WEB
APPS
🔧 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
🔧 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
https://www.youtube.com/playlist?list=PLNYkxOF6rcIAWWNR_Q6eLPhsyx6VvYjVb
IN SUMMARY…
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)
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.
AND IF ALL FAILS…
THANKS!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM

Progressing JavaScript and Apps the Web way…

  • 1.
    Progressing JavaScript andApps the Web way… Chris Heilmann @codepo8, FullstackConf, London, July 2016
  • 2.
    Of innovation andimpatience Chris Heilmann @codepo8, Future Decoded, London, Nov 2015 CHRIS HEILMANN @CODEPO8
  • 3.
  • 4.
    Progress, 'til there'snothing 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'snothing 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 amessage 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 isa 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 cuttingedge 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 aboutrapid progress for a bit…
  • 10.
  • 11.
  • 12.
    COOL TECHNOLOGY ANDPEDIGREE https://en.wikipedia.org/wiki/Ingress_(video_game)https://www.google.com/earth/
  • 13.
    CRITICISM IS EASYAND PLENTIFUL…
  • 14.
  • 15.
    https://www.engadget.com/2016/07/11/pokemon-go-on-ios-is-digging-deep-into-linked-google-accounts/ We recently discoveredthat 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 isindependent of platform…
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
    🚪Independent of skillset (anyone is invited to be a publisher…)
  • 24.
    😴😪😓😞 That’s nothing new,and for many it feels exhausting
  • 25.
    🚀 It feels likea burden, when it comes to innovating…
  • 26.
  • 27.
    #WEBIP ☠ There aretoo 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 AREALL VALID POINTS
  • 29.
    #WEBIP 😊 You canbe 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 thingto 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 ARETHE NEW APPS https://dev.botframework.com/ https://developers.facebook.com/docs/messenger-platform
  • 32.
    😍🌎 Let’s talk aboutprogressing the web…
  • 33.
    The progress element representsthe completion progress of a task. http://www.w3.org/TR/html5-author/the-progress-element.html “
  • 34.
    JAVASCRIPT ACCESS ANDINTERACTION 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.
  • 37.
  • 38.
  • 39.
    WHAT IT WILLMOST LIKELY END UP AS… + JavaScript to make it do things…
  • 40.
  • 41.
    #BROWXIT ☠ Browser differencesand 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’TVALID POINTS brandsvig https://www.flickr.com/photos/27376974@N02/5047305345
  • 43.
    #BROWXIT 😊 Browser differencesare 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 😊 JavaScriptis 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 😊 Weare 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’thave 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 WEBIS BEAUTIFUL
  • 48.
  • 49.
    #REMAIN 😊 Web technologyand 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.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
    Your father's ServiceWorker. This is the weapon of a Jedi Knight. Not as clumsy or random as AppCache; an elegant weapon for a more civilised age.
  • 58.
  • 59.
    🔧 Working offlineusing Service Worker 🔧 Can hibernate and notify on change 🔧 Possible progressive enhancement of a working, standard web site 🔧 More functionality with subsequent visits
  • 60.
    🔧 The linkis 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.
  • 63.
  • 64.
    IN SUMMARY… 😊 Itis 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… 😊 Youare 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 ALLFAILS…
  • 67.