Progressing JavaScript and Apps the Web way…

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/enhttps://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…

♿👀./0Independent 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-uberhttp://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?

https://css-tricks.com/html5-progress-element/

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