SlideShare a Scribd company logo
Automating all the wrong things…
Chris Heilmann @codepo8, You got to love frontend, Tel Aviv, June 2016
Of innovation and impatience
Chris Heilmann @codepo8, Future Decoded, London, Nov 2015
CHRIS HEILMANN
@CODEPO8
https://twitter.com/MrMichaelShaw/status/746271419995140096/photo/1
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
Tooling and insights
A serious threat
Quite a mess
An old response
A new beginning
A great opportunity
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
The web is defined as independent of platform
🤖🍎🖼🐧
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
Independent of browser…
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
Independent of connectivity…
🚲🏍🚗🚜🚄✈
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
Independent of location…
🗺
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
Independent of ability…
♿👀./0
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
Independent of skill set - anyone can be a publisher
🚪
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
We constantly keep forgetting that.
🙄
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
To make it easier for us, we make our own perfect world…
🌏💰🍾🦄🌈
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
This is hurtful to the web and to our jobs.
☠
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
We deliver sub-optimal solutions that have a expiration
date whilst preaching that the web is better than native
environments because of its longevity.
🚧
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
①
②
③
④
⑤
⑥
⑦
Old and new issues of the web
①
②
③
④
⑤
⑥
⑦
Tooling and insights
We live right now in a beautiful world for web
development.
🎉🍻
①
②
③
④
⑤
⑥
⑦
Tooling and insights
Our browsers are evergreen, and we have incredibly exciting
APIs to create engaging solutions.
🎊🎈🎇
①
②
③
④
⑤
⑥
⑦
Tooling and insights
I’d go as far as saying that we have no excuses, seeing just
how far our tooling has advanced over the years.
🔧🔨🔩
①
②
③
④
⑤
⑥
⑦
Tooling and insights
We have insight into how browsers work and where our
solutions misbehave.
🔍
①
②
③
④
⑤
⑥
⑦
Tooling and insights
http://www.webpagetest.org
①
②
③
④
⑤
⑥
⑦
Tooling and insights
http://www.webpagetest.org
①
②
③
④
⑤
⑥
⑦
Tooling and insights
https://csstriggers.com/
①
②
③
④
⑤
⑥
⑦
Tooling and insights
Our browser developer tools allow for inspection and
creation at the same time.
🔦🖌
①
②
③
④
⑤
⑥
⑦
Tooling and insights
Almost all of our creation tools are extensible and we can
add functionality we want to them.
🔭
①
②
③
④
⑤
⑥
⑦
Tooling and insights
code.visualstudio.com
①
②
③
④
⑤
⑥
⑦
Tooling and insights
①
②
③
④
⑤
⑥
⑦
Tooling and insights
https://html.spec.whatwg.org/multipage/forms.html#inappropriate-for-the-control
①
②
③
④
⑤
⑥
⑦
Tooling and insights
https://github.com/Microsoft/vscode/pull/7152
①
②
③
④
⑤
⑥
⑦
Tooling and insights
Examining and altering code in a secure manner has never
been more accessible to us - we can contribute.
①
②
③
④
⑤
⑥
⑦
Tooling and insights
①
②
③
④
⑤
⑥
⑦
Tooling and insights
①
②
③
④
⑤
⑥
⑦
A serious threat
①
②
③
④
⑤
⑥
⑦
A serious threat
https://developer.microsoft.com/en-us/microsoft-edge/platform/catalog/
①
②
③
④
⑤
⑥
⑦
A serious threat
Mobile was the new hype - apps were the solutions to
everything.
📱
①
②
③
④
⑤
⑥
⑦
A serious threat
Our web technologies weren’t good enough to match it - by
design the mobile world was not web friendly.
💸🗑
①
②
③
④
⑤
⑥
⑦
A serious threat
We tried to beat native by playing by its own rules.
📦
①
②
③
④
⑤
⑥
⑦
A serious threat
Web solutions on the mobile playing field needed to be
nimble and fast.
👟🏁
①
②
③
④
⑤
⑥
⑦
Quite a mess
http://httparchive.org
①
②
③
④
⑤
⑥
⑦
Quite a mess
http://httparchive.org
①
②
③
④
⑤
⑥
⑦
Quite a mess
We rely on fixing cross-browser issues and differences in
form factors by adding more and more libraries.
😏🐌😩🐢
①
②
③
④
⑤
⑥
⑦
Quite a mess
Many of the things that clog up the web are not needed any
longer - the platform moved on and we should with it.
🚀
①
②
③
④
⑤
⑥
⑦
Quite a mess
①
②
③
④
⑤
⑥
⑦
An old response
Alas, every time the web got a new form factor, we consider
it a necessity to totally change our ways…
🔀
①
②
③
④
⑤
⑥
⑦
An old response
Taking a page from the book of application and service
design, we’re applying task runners and package
managers to optimise the outcome of our products.
①
②
③
④
⑤
⑥
⑦
An old response
Often this is to undo bad
practices after they’ve been
applied or feels like overkill.
①
②
③
④
⑤
⑥
⑦
An old response
Nothing says this is the wrong way of approaching the issue.
It may make our market more professional.
💼👓👔
①
②
③
④
⑤
⑥
⑦
An old response
It does, however, make it harder to start publishing on the
web and can be discouraging for new beginners…
😕
①
②
③
④
⑤
⑥
⑦
⏲
An old response
There is something to be said for being open to solutions
that do deliver good results right now…
①
②
③
④
⑤
⑥
⑦
An old response
①
②
③
④
⑤
⑥
⑦
An old response
①
②
③
④
⑤
⑥
⑦
A new beginning
Fact is though, that if you start fresh now, or you want to
refresh your knowledge, you’re in for a treat!
🍬
①
②
③
④
⑤
⑥
⑦
A new beginning
https://remysharp.com/2016/05/28/state-of-the-gap
We have parity with
native mobile platforms.
①
②
③
④
⑤
⑥
⑦
A new beginning
https://remysharp.com/2016/05/28/state-of-the-gap
We have parity with
native mobile platforms.
①
②
③
④
⑤
⑥
⑦
A new beginning
https://remysharp.com/2016/05/28/state-of-the-gap
We have parity with
native mobile platforms.
①
②
③
④
⑤
⑥
⑦
A new beginning
https://remysharp.com/2016/05/28/state-of-the-gap
We have parity with
native mobile platforms.
①
②
③
④
⑤
⑥
⑦
A new beginning
https://remysharp.com/2016/05/28/state-of-the-gap
We have parity with
native mobile platforms.
①
②
③
④
⑤
⑥
⑦
A new beginning
There is no shortage on up-to-date, free information in form
of articles, videos and even full online courses.
🗞
①
②
③
④
⑤
⑥
⑦
A new beginning
Time to reconsider how we tell people about our craft and
how to teach them new topics based on great old ideas
rather than a script or a tool to replace them.
🏫
①
②
③
④
⑤
⑥
⑦
A new beginning
①
②
③
④
⑤
⑥
⑦
A new beginning
①
②
③
④
⑤
⑥
⑦
A great opportunity
We are right now in a very short time frame to embrace an
incredibly exciting opportunity…
🌪
①
②
③
④
⑤
⑥
⑦
A great opportunity
The form factor of native apps and closed marketplaces is
rapidly falling apart.
💩
①
②
③
④
⑤
⑥
⑦
A great opportunity
People are tired of constant update requests and
notifications from apps they installed.
🛎
①
②
③
④
⑤
⑥
⑦
A great opportunity
Updates are too big and take too long to download.
🕰
①
②
③
④
⑤
⑥
⑦
A great opportunity
They also take up too much data on mobile contracts with
limited data access per month.
💸
①
②
③
④
⑤
⑥
⑦
A great opportunity
App download numbers tanked, on average in the US
every month no new apps get installed.
📉
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/
①
②
③
④
⑤
⑥
⑦
A great opportunity
The reason is the limited
distribution model of
market places.
(an issue the web can solve!)
①
②
③
④
⑤
⑥
⑦
A great opportunity
If you are savvy about the web and you want to move things
forward, look into Service Workers.
🔧
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
①
②
③
④
⑤
⑥
⑦
A great opportunity
Service Workers is a browser/JavaScript API that allows you
to cache and react to network requests. It also allows you
to send notifications to users about updates.
🛰
①
②
③
④
⑤
⑥
⑦
A great opportunity
If there is one thing to be part of right now, it is Progressive
Web Apps. We have a unique opportunity right now to
move the web front and centre in a declined closed
technology market.
🦄
①
②
③
④
⑤
⑥
⑦
A great opportunity
https://www.youtube.com/playlist?list=PLNYkxOF6rcIAWWNR_Q6eLPhsyx6VvYjVb
①
②
③
④
⑤
⑥
⑦
A great opportunity
①
②
③
④
⑤
⑥
⑦
A great opportunity
TODA!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM

More Related Content

PDF
Turning a community into evangelism helpers - Devrelconf 2016
PDF
Progressing JavaScript and Apps the Web way…
PDF
A New Hope – the web strikes back
PDF
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
PDF
NodeConfLondon - Making ES6 happen with ChakraCore and Node
PDF
Progressive Web Apps – the return of the web?
PDF
Turning huge ships - Open Source and Microsoft
PDF
The Progressive Web and its New Challenges - Confoo Montréal 2017
Turning a community into evangelism helpers - Devrelconf 2016
Progressing JavaScript and Apps the Web way…
A New Hope – the web strikes back
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
NodeConfLondon - Making ES6 happen with ChakraCore and Node
Progressive Web Apps – the return of the web?
Turning huge ships - Open Source and Microsoft
The Progressive Web and its New Challenges - Confoo Montréal 2017

What's hot (20)

PPTX
Advancing JavaScript without breaking the web - MunichJS
PDF
Progressive Web Apps – the return of the web? Goto Berlin 2016
PDF
Leveling up your JavaScipt - DrupalJam 2017
PDF
Innovating the other web - #wrocsharp keynote
PDF
Moore vs. May - everything is faster and better: we can fix that
PDF
Overboard.js - where are we going with with jsconfasia / devfestasia
PDF
Let’s learn how to use JavaScript responsibly and stay up-to-date.
PDF
The State of the Web - Helsinki meetup
PDF
JavaScript isn't evil.
PDF
Erase and Rewind - Open Web Camp 2015
PDF
JavaScript is a buffet - Scriptconf 2017 keynote
PDF
The wheel is spinning but the hamster is almost dead - Smartweb 2015
PDF
Hungarian Web Conference: HTML5 beyond the hype - let's make it work!
PDF
Bridging the future gap
PDF
No more excuses! Let's build beautiful things. #codemotion Rome
PDF
Mind the Gap - State of the Browser 2015
PDF
The Soul in The Machine - Developing for Humans (FrankenJS edition)
PDF
Fixing web and JS gaps
PDF
What's next? J and beyond keynote 2015
PDF
Making ES6 available to all with ChakraCore
Advancing JavaScript without breaking the web - MunichJS
Progressive Web Apps – the return of the web? Goto Berlin 2016
Leveling up your JavaScipt - DrupalJam 2017
Innovating the other web - #wrocsharp keynote
Moore vs. May - everything is faster and better: we can fix that
Overboard.js - where are we going with with jsconfasia / devfestasia
Let’s learn how to use JavaScript responsibly and stay up-to-date.
The State of the Web - Helsinki meetup
JavaScript isn't evil.
Erase and Rewind - Open Web Camp 2015
JavaScript is a buffet - Scriptconf 2017 keynote
The wheel is spinning but the hamster is almost dead - Smartweb 2015
Hungarian Web Conference: HTML5 beyond the hype - let's make it work!
Bridging the future gap
No more excuses! Let's build beautiful things. #codemotion Rome
Mind the Gap - State of the Browser 2015
The Soul in The Machine - Developing for Humans (FrankenJS edition)
Fixing web and JS gaps
What's next? J and beyond keynote 2015
Making ES6 available to all with ChakraCore
Ad

Viewers also liked (17)

PPTX
Vat and cross border retailing ukti external nov 14 (2)
DOC
KARTHIK_RESUME(1)
PPT
Arnason images captions. chapter 10 -18
PPTX
All about me emerging tech.
PDF
Adam Ratchford CV
PDF
Marriage and Kingdom Humility
PDF
Microsoft und die Open Source Community - Leaving the death star behind
DOCX
Surat izin keramaian
DOCX
Surat pernyataan nusantara sehat fajar
PDF
Suit up, bring extra oxygen Internet space explorers needed.
PDF
The Global Risks 2015 Report
PPTX
Boggle Hole
PPTX
PPTX
CAD Research & Technology
PDF
E.abendua
DOCX
Riesgos por puesto de trabajo
Vat and cross border retailing ukti external nov 14 (2)
KARTHIK_RESUME(1)
Arnason images captions. chapter 10 -18
All about me emerging tech.
Adam Ratchford CV
Marriage and Kingdom Humility
Microsoft und die Open Source Community - Leaving the death star behind
Surat izin keramaian
Surat pernyataan nusantara sehat fajar
Suit up, bring extra oxygen Internet space explorers needed.
The Global Risks 2015 Report
Boggle Hole
CAD Research & Technology
E.abendua
Riesgos por puesto de trabajo
Ad

Similar to Automating all the wrong things - You Gotta Love Frontend Keynote (20)

PDF
Breaking out of the Tetris mind set #btconf
PDF
Stapling and patching the web of now - ForwardJS3, San Francisco
PDF
Advancing the web without breaking it - #btconf
PDF
Sacrificing the golden calf of "coding"
PDF
Smashingconf 150319145648-conversion-gate01
PDF
Smashingconf 150319145648-conversion-gate01
PDF
Welcome to planet Fintlewoodlewix - SmashingConf Oxford 2014
PDF
Keynote- We're going wrong: Choosing the web's future. Peter Paul Koch
PDF
Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote
PDF
Sacrificing the golden calf of "coding"
PDF
Progressive Web Apps - Goto Chicago 2017
PDF
Front Porch Keynote 2014
PDF
Write less, achieve meh - HTML5DevConf 2014
PDF
Finding harmony in web development
PDF
No more excuses left - let's build great things - Christian Heilmann - Codemo...
PDF
Smashingconf nyc-final
PDF
A call to JS Developers - Let’s stop trying to impress each other and start b...
PDF
A year with progressive web apps! #webinale
PDF
Hinting at a better web
PDF
Rapid Evolution of Web Dev? aka Talking About The Web
Breaking out of the Tetris mind set #btconf
Stapling and patching the web of now - ForwardJS3, San Francisco
Advancing the web without breaking it - #btconf
Sacrificing the golden calf of "coding"
Smashingconf 150319145648-conversion-gate01
Smashingconf 150319145648-conversion-gate01
Welcome to planet Fintlewoodlewix - SmashingConf Oxford 2014
Keynote- We're going wrong: Choosing the web's future. Peter Paul Koch
Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote
Sacrificing the golden calf of "coding"
Progressive Web Apps - Goto Chicago 2017
Front Porch Keynote 2014
Write less, achieve meh - HTML5DevConf 2014
Finding harmony in web development
No more excuses left - let's build great things - Christian Heilmann - Codemo...
Smashingconf nyc-final
A call to JS Developers - Let’s stop trying to impress each other and start b...
A year with progressive web apps! #webinale
Hinting at a better web
Rapid Evolution of Web Dev? aka Talking About The Web

More from Christian Heilmann (17)

PPTX
Develop, Debug, Learn? - Dotjs2019
PDF
Taking the "vile" out of privilege
PDF
Seven ways to be a happier JavaScript developer - NDC Oslo
PDF
Artificial intelligence for humans… #AIDC2018 keynote
PDF
Killing the golden calf of coding - We are Developers keynote
PDF
Progressive Web Apps - Techdays Finland
PDF
Taking the "vile" out of privilege
PDF
Five ways to be a happier JavaScript developer
PDF
Taking the P out of PWA
PDF
You learned JavaScript - now what?
PDF
Progressive Web Apps - Covering the best of both worlds - DevReach
PDF
Progressive Web Apps - Covering the best of both worlds
PPTX
Non-trivial pursuits: Learning machines and forgetful humans
PDF
Progressive Web Apps - Bringing the web front and center
PDF
CSS vs. JavaScript - Trust vs. Control
PDF
Supercharging Public Speaking
PDF
The Soul in The Machine - Developing for Humans
Develop, Debug, Learn? - Dotjs2019
Taking the "vile" out of privilege
Seven ways to be a happier JavaScript developer - NDC Oslo
Artificial intelligence for humans… #AIDC2018 keynote
Killing the golden calf of coding - We are Developers keynote
Progressive Web Apps - Techdays Finland
Taking the "vile" out of privilege
Five ways to be a happier JavaScript developer
Taking the P out of PWA
You learned JavaScript - now what?
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds
Non-trivial pursuits: Learning machines and forgetful humans
Progressive Web Apps - Bringing the web front and center
CSS vs. JavaScript - Trust vs. Control
Supercharging Public Speaking
The Soul in The Machine - Developing for Humans

Recently uploaded (20)

PDF
IFRS Notes in your pocket for study all the time
PDF
Deliverable file - Regulatory guideline analysis.pdf
PDF
SBI Securities Weekly Wrap 08-08-2025_250808_205045.pdf
PPTX
DMT - Profile Brief About Business .pptx
PDF
Power and position in leadershipDOC-20250808-WA0011..pdf
PDF
Outsourced Audit & Assurance in USA Why Globus Finanza is Your Trusted Choice
PDF
Module 3 - Functions of the Supervisor - Part 1 - Student Resource (1).pdf
PDF
Digital Marketing & E-commerce Certificate Glossary.pdf.................
PDF
How to Get Funding for Your Trucking Business
PDF
BsN 7th Sem Course GridNNNNNNNN CCN.pdf
PDF
Nante Industrial Plug Factory: Engineering Quality for Modern Power Applications
PPTX
Belch_12e_PPT_Ch18_Accessible_university.pptx
PDF
Cours de Système d'information about ERP.pdf
PPTX
Business Ethics - An introduction and its overview.pptx
PPTX
Principles of Marketing, Industrial, Consumers,
PPT
Lecture 3344;;,,(,(((((((((((((((((((((((
PDF
Module 2 - Modern Supervison Challenges - Student Resource.pdf
PDF
Keppel_Proposed Divestment of M1 Limited
PDF
Family Law: The Role of Communication in Mediation (www.kiu.ac.ug)
PDF
Comments on Crystal Cloud and Energy Star.pdf
IFRS Notes in your pocket for study all the time
Deliverable file - Regulatory guideline analysis.pdf
SBI Securities Weekly Wrap 08-08-2025_250808_205045.pdf
DMT - Profile Brief About Business .pptx
Power and position in leadershipDOC-20250808-WA0011..pdf
Outsourced Audit & Assurance in USA Why Globus Finanza is Your Trusted Choice
Module 3 - Functions of the Supervisor - Part 1 - Student Resource (1).pdf
Digital Marketing & E-commerce Certificate Glossary.pdf.................
How to Get Funding for Your Trucking Business
BsN 7th Sem Course GridNNNNNNNN CCN.pdf
Nante Industrial Plug Factory: Engineering Quality for Modern Power Applications
Belch_12e_PPT_Ch18_Accessible_university.pptx
Cours de Système d'information about ERP.pdf
Business Ethics - An introduction and its overview.pptx
Principles of Marketing, Industrial, Consumers,
Lecture 3344;;,,(,(((((((((((((((((((((((
Module 2 - Modern Supervison Challenges - Student Resource.pdf
Keppel_Proposed Divestment of M1 Limited
Family Law: The Role of Communication in Mediation (www.kiu.ac.ug)
Comments on Crystal Cloud and Energy Star.pdf

Automating all the wrong things - You Gotta Love Frontend Keynote