progressing javascript and apps the web way…

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

Upload: christian-heilmann

Post on 19-Mar-2017

1.146 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Progressing JavaScript and Apps the Web way…

Progressing JavaScript and Apps the Web way…

Chris Heilmann @codepo8, FullstackConf, London, July 2016

Page 2: Progressing JavaScript and Apps the Web way…

Of innovation and impatience

Chris Heilmann @codepo8, Future Decoded, London, Nov 2015

CHRIS HEILMANN @CODEPO8

Page 3: Progressing JavaScript and Apps the Web way…

https://www.youtube.com/watch?v=1-WNA0vF2RQ

Bad Religion: Progress

Page 4: Progressing JavaScript and Apps the Web way…

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.

Page 5: Progressing JavaScript and Apps the Web way…

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…

Page 6: Progressing JavaScript and Apps the Web way…

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…

Page 7: Progressing JavaScript and Apps the Web way…

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…

Page 8: Progressing JavaScript and Apps the Web way…

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.

Page 9: Progressing JavaScript and Apps the Web way…

Let’s talk about rapid progress for a bit…

Page 10: Progressing JavaScript and Apps the Web way…

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

Page 11: Progressing JavaScript and Apps the Web way…

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

Page 12: Progressing JavaScript and Apps the Web way…

COOL TECHNOLOGY AND PEDIGREE

https://en.wikipedia.org/wiki/Ingress_(video_game)https://www.google.com/earth/

Page 13: Progressing JavaScript and Apps the Web way…

CRITICISM IS EASY AND PLENTIFUL…

Page 14: Progressing JavaScript and Apps the Web way…

http://www.theverge.com/2016/7/11/12150468/pokemon-go-privacy-full-account-access-permission

Gotta catch them all?

Page 15: Progressing JavaScript and Apps the Web way…

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

Page 16: Progressing JavaScript and Apps the Web way…

good progress = transparency + technology + ethics + accessibility

Page 17: Progressing JavaScript and Apps the Web way…

good progress = transparency + technology + ethics + accessibility

…which is, what the web is all about!

Page 18: Progressing JavaScript and Apps the Web way…

🤖🍎🖼🐧The web is independent of platform…

Page 19: Progressing JavaScript and Apps the Web way…

Independent of browser…

Page 20: Progressing JavaScript and Apps the Web way…

🚲🏍🚗🚜🚄✈Independent of connectivity…

Page 21: Progressing JavaScript and Apps the Web way…

🗺Independent of location…

Page 22: Progressing JavaScript and Apps the Web way…

♿👀./0Independent of ability…

Page 23: Progressing JavaScript and Apps the Web way…

🚪Independent of skill set

(anyone is invited to be a publisher…)

Page 24: Progressing JavaScript and Apps the Web way…

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

Page 25: Progressing JavaScript and Apps the Web way…

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

Page 26: Progressing JavaScript and Apps the Web way…

#WEBIP

Page 27: Progressing JavaScript and Apps the Web way…

#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.

Page 28: Progressing JavaScript and Apps the Web way…

RELAX, THESE ARE ALL VALID POINTS

Page 29: Progressing JavaScript and Apps the Web way…

#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.

Page 30: Progressing JavaScript and Apps the Web way…

#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/

Page 31: Progressing JavaScript and Apps the Web way…

CHAT BOTS ARE THE NEW APPS

https://dev.botframework.com/https://developers.facebook.com/docs/messenger-platform

Page 32: Progressing JavaScript and Apps the Web way…

😍🌎Let’s talk about progressing the web…

Page 33: Progressing JavaScript and Apps the Web way…

The progress element represents the completion progress of a task.

http://www.w3.org/TR/html5-author/the-progress-element.html

Page 34: Progressing JavaScript and Apps the Web way…

JAVASCRIPT ACCESS AND INTERACTION

http://html5doctor.com/the-progress-element/

Page 35: Progressing JavaScript and Apps the Web way…

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

Page 36: Progressing JavaScript and Apps the Web way…

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

STYLING?

Page 37: Progressing JavaScript and Apps the Web way…

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

PEEKING UNDER THE HOOD…

Page 38: Progressing JavaScript and Apps the Web way…

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

Page 39: Progressing JavaScript and Apps the Web way…

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

Page 40: Progressing JavaScript and Apps the Web way…

#BROWXIT

Page 41: Progressing JavaScript and Apps the Web way…

#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.

Page 42: Progressing JavaScript and Apps the Web way…

NOPE, THESE AREN’T VALID POINTS

brandsvig https://www.flickr.com/photos/27376974@N02/5047305345

Page 43: Progressing JavaScript and Apps the Web way…

#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

Page 44: Progressing JavaScript and Apps the Web way…

#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

Page 45: Progressing JavaScript and Apps the Web way…

#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

Page 46: Progressing JavaScript and Apps the Web way…

#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…

Page 47: Progressing JavaScript and Apps the Web way…

RELAX, THE WEB IS BEAUTIFUL

Page 48: Progressing JavaScript and Apps the Web way…

#REMAIN

Page 49: Progressing JavaScript and Apps the Web way…

#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.

Page 50: Progressing JavaScript and Apps the Web way…

EXCITING ACCESS OPPORTUNITIES…

https://remysharp.com/2016/05/28/state-of-the-gap

Page 51: Progressing JavaScript and Apps the Web way…

EXCITING ACCESS OPPORTUNITIES…

Page 52: Progressing JavaScript and Apps the Web way…

EXCITING ACCESS OPPORTUNITIES…

Page 53: Progressing JavaScript and Apps the Web way…

EXCITING ACCESS OPPORTUNITIES…

Page 54: Progressing JavaScript and Apps the Web way…

EXCITING ACCESS OPPORTUNITIES…

Page 55: Progressing JavaScript and Apps the Web way…

STAY ON TARGET

Page 56: Progressing JavaScript and Apps the Web way…

http://caniuse.com/

Page 57: Progressing JavaScript and Apps the Web way…

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.

Page 58: Progressing JavaScript and Apps the Web way…

PROGRESSIVE WEB APPS

Page 59: Progressing JavaScript and Apps the Web way…

🔧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

Page 60: Progressing JavaScript and Apps the Web way…

🔧 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

Page 61: Progressing JavaScript and Apps the Web way…
Page 62: Progressing JavaScript and Apps the Web way…

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

Page 63: Progressing JavaScript and Apps the Web way…

IN SUMMARY…

Page 64: Progressing JavaScript and Apps the Web way…

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)

Page 65: Progressing JavaScript and Apps the Web way…

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.

Page 66: Progressing JavaScript and Apps the Web way…

AND IF ALL FAILS…

Page 67: Progressing JavaScript and Apps the Web way…

THANKS! CHRIS HEILMANN

@CODEPO8

CHRISTIANHEILMANN.COM