SlideShare ist ein Scribd-Unternehmen logo
1 von 65
Downloaden Sie, um offline zu lesen
STAPLING AND PATCHING THE WEB OF NOW
CHRIS HEILMANN (@CODEPO8), FORWARDJS, SF, 2015
WOW, WE LIVE IN SUCH GREAT
TIMES.
THE TECHNOLOGIES WE CAN PLAY
WITH ARE INCREDIBLE!
THE TECHNOLOGIES WE CAN PLAY
WITH ARE INCREDIBLE!
• Web Components
• Service Workers
• ECMAScript 2015/16…
• WebVR/WebGL/WebRTC
WE’VE COME A LONG WAY AS
PROFESSIONAL DEVELOPERS
• Version control
• Test-Driven Development
• Task runners
• Package management
• Pre/Post compilation
• Transpiling
OUR TOOLING HAS NEVER BEEN
BETTER…
• IDE Integration
• Watchers/Live Reloads
• In-browser debuggers and
development tools
• Remote debugging tools and
protocols
FRAMEWORKS, LIBRARIES AND
PACKAGING TOOLS MAKE OUR LIVES
MUCH EASIER…
• React
• Polymer
• Angular
• Bootstrap
• PhoneGap / Manifold.js
BROWSERS ARE OPENLY
INNOVATING AND EVERGREEN…
• Firefox
• Chrome/Opera
• Microsoft Edge
• Safari iOS
• Safari
OUR COMMUNICATION TOOLS ARE
SPLENDID
• We all ❤ GitHub
• We all talk on Slack
• We all can access hundreds of free
resources on learning our trade
• We all can take part in meetups or
conferences almost every day - or
on the web.
AND YET…
IT ALWAYS FEELS LIKE
SOMETHING IS MISSING…
Stapling and patching the web of now - ForwardJS3, San Francisco
EVERYTHING WE DO IS INCREDIBLE
INCREDIBLE
INCREDIBLE = LACKING CREDIBILITY
INCREDIBLE?
• Almost everything we release these
days is experimental
• Many things need non-standard code
or flags to be turned on
• Things work only in one browser,
sometimes even a special build
• After impressing one another with a
cool logo, grandiose statements and
a 3 line hello world demo there’s a
fine print stating “don’t use this in
production”
• To use any of the new standards, you
need to use an abstraction library
WHO DO WE
CODE FOR?
✘ Not our end users - they are not likely
to have the same computers,
connections and browsers we have
✘ Not companies who need to work
with products that work in large
teams or can be used in an
environment following certification
processes
✔ We code for ourselves, conference
participants, hacker news
commenters, the tech press and an
imaginary, perfect, future audience.
WHAT HAPPENED?
HOW DID WE END UP SO SELF-CENTERED?
WHAT IS THE MAIN THING
WE KEEP TRYING TO FIX
WITH ALL OUR INNOVATION
EFFORTS?
MOBILE HAS BEEN SOLD TO
US AND BY US AS
TOTALLY DIFFERENT
• The app is a much better form factor
than web sites with URLs
• Everything needs to work offline
• Speed is paramount and every byte
costs money.
• Everything needs to be much simpler
interfaces - people are busy and on
the road
• Every app should take full advantage
over what the operating system and
hardware offers
WELL, WE BOLLOCKSED THAT UP
PROPER…
✘
TROUBLE WITH THE MOBILE WEB…
www.theverge.com/2015/7/20/9002721/the-mobile-web-sucks
TROUBLE WITH THE MOBILE WEB…
www.theverge.com/2015/7/20/9002721/the-mobile-web-sucks
THE WEB IS DESIGNED TO WORK INDEPENDENT
OF HARDWARE, SOFTWARE, ABILITY OR LOCATION.
ON MOBILE, THE
DECK IS STACKED
AGAINST THE WEB…
ON MOBILE, THE
DECK IS STACKED
AGAINST THE WEB…
• Browsers are hard-wired and
update with operating systems
• Hardware creators, service
providers and even third party
vendors fork and release their
own unholy versions of the OS
and the browser.
• The more you control the
experience, the more
competitive you are.
DENIAL ANGER BARGAINING DEPRESSION ACCEPTANCE
THE FIVE STAGES OF MOURNING FOR THE OPEN
WEB IN A MOBILE WORLD.
DENIAL ANGER BARGAINING DEPRESSION ACCEPTANCE
THE FIVE STAGES OF MOURNING FOR THE OPEN
WEB IN A MOBILE WORLD.
• This is just a fad, it will go away.
• If we build our own operating system based on HTML5, the
others will learn from that and embrace it more.
• Surely the simplicity of web standards and the amazing
value of Microformats and properly structured HTML will
never cease to amaze new developers.
DENIAL ANGER BARGAINING DEPRESSION ACCEPTANCE
THE FIVE STAGES OF MOURNING FOR THE OPEN
WEB IN A MOBILE WORLD.
• It is all the fault of our users - they do all the things wrong
like using outdated browsers or turning off JavaScript!
• It is the fault of browser makers - they just don’t innovate
quickly enough to match what mobile can do!
• It is the fault of clients - they only want crap and nothing
exciting that pushes the envelope!
• It is the fault of tool creators - we need to match what native
has in terms of tooling and then we all can ride unicorns
and have ice cream!
DENIAL BARGAINING DEPRESSION ACCEPTANCE
THE FIVE STAGES OF MOURNING FOR THE OPEN
WEB IN A MOBILE WORLD.
• Let’s build a stop phone gap solution - one that is designed
to become redundant to show mobile OS makers that the
web is ready if only it had access to hardware capabilities.
• Let’s define lots of APIs and form expert groups - surely
these will be embraced an implemented by OS providers
instead of coming up with their own ones!
• Let’s inject browsers with our apps into the platform -
(crosswalk-project.org). This worked wonders with
Chromeframe and Internet Explorer.
ANGER
DENIAL BARGAINING DEPRESSION ACCEPTANCE
THE FIVE STAGES OF MOURNING FOR THE OPEN
WEB IN A MOBILE WORLD.
• Let’s concede defeat - we can never match what native
offers, and never innovate as fast.
• Let’s consider a new career - goat farming, for example,
sounds like a great investment.
• Let’s try to find recognition elsewhere - maybe in a smaller
group of people who care about what I do.
ANGER BARGAINING DEPRESSION
DENIAL BARGAINING DEPRESSION ACCEPTANCE
THE FIVE STAGES OF MOURNING FOR THE OPEN
WEB IN A MOBILE WORLD.
• Maybe this is just another form factor - and we could use
our time to care for the web that is instead.
• Maybe there is space for more than one form factor - just
maybe. I mean, crazier things have happened, like multiple
ways to use a road.
• Maybe this is a time to reflect and improve what we have -
after all, there is a lot that needs fixing?
ANGER BARGAINING DEPRESSION
IN OTHER WORDS…
THE WEB IS FULL OF
RUBBISH, TIME TO
CLEAN IT UP INSTEAD
OF ADDING MORE…
I JOINED MICROSOFT
TO HELP WITH ONE
VERY IMPORTANT FIX
THE WEB VERY MUCH
NEEDED…
THE IDEA WAS TO GET
RID OF ALL THE BAD
IDEAS OF THE PAST…
✘ VML
✘ attachEvent()
✘ currentStyle
✘ X-UA-Compatible (render modes)
✘ IE Layout Quirks
✘ VBScript
✘ Conditional Comments
✘ MS-Prefixed Events
AND REPLACE THEM WITH YUMMY GOODNESS.
IT SEEMS THE WEB IS SAFARI/IOS…
before
 after
 before
 after
-webkit-appearance: none -webkit-gradient
EXPERIMENTAL? PROBABLY SAFE TO USE…
COPY + PASTE BEATS VALIDATION?
https://github.com/search?l=html&q=charset+%22UTF8%22&ref=searchresults&type=Code&utf8=%E2%9C%93
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta charset="utf-8">
<meta charset=“utf8"> ✘
✔
> 600k times in use on GitHub!
THINGS YOU LEARN WHEN YOU WRITE A NEW JS
ENGINE
https://channel9.msdn.com/events/WebPlatformSummit/2015/Chakra-The-
JavaScript-Engine-that-powers-Microsoft-Edge
@BTERLSON
@GAURAVSETH
THINGS YOU LEARN
WHEN YOU WRITE A
NEW JS ENGINE
✘ Only a third of the top 3000 sites
can benefit from JS inlining.
Reason is lots of scripts instead
of concatenation.
✘ You need to optimise a lot of JS in
the engine (length reading on
every iteration of for loops!)
✘ Outdated libraries are still very
much in use and clash with new
JS features (mootools breaking
with array.contains(), zepto
disliking array constructors)
✓ Minification is used a lot on the
web and optimising for uglify.js
code is a big win
THE WEB IS A MESS!
PROMISES DON’T WORK
• Can we stop producing “not ready for
production” solutions?
• People are getting tired of “upcoming
amazing technology” we “need to use
now” and jump through hoops to
implement.
• Abstraction libraries end up in production,
become interoperability issues and fill up
the web.
• Experimental technology in use gets
included across browsers to ensure
backwards compatibility - making browsers
slow and fat.
WE SHOULD NEVER
PUNISH OUR USERS
• It isn’t their job to fix their working
environments to our needs
• There is no “everybody should use
this” - you publish on the web; you
knew what you signed up for.
• We’re wasting time re-evaluating
sensible concepts like progressive
enhancement. It works, it is future-
proof. Let’s not pretend we can
control things.
THE ONE THING THAT CAN HELP US IS LOVE…
✔ Let’s not repeated the same
mistakes we did with IE6
(checking for browsers, blocking
others)
✔ Let’s not write code “that works”
rather than “is correct”
✔ Let’s not optimise our work for a
platform that doesn’t appreciate
it and where it won’t flourish
(mobile)
LOVE FOR THE FORM
FACTOR THAT IS THE
WEB…
AND THIS IS WHERE
RIGHT NOW WE NEED
TO CONCENTRATE ON
GETTING ONE THING
RIGHT…
• Arrow functions as a short-hand version of an
anonymous function.
• Block-level scope using let instead of var makes
variables scoped to a block (if, for, while, etc.)
• Classes to encapsulate and extend code.
• Constants using the const keyword.
• Default parameters for functions like foo(bar = 3, baz =
2)
• Destructuring to assign values from arrays or objects
into variables.
• Generators that create iterators using function* and
the yield keyword.
• Map, a Dictionary type object that can be used to store
key/value pairs. and Set as a collection object to store
a list of data values.
• Modules as a way of organizing and loading code.
• Promises for async operations avoiding callback hell
• Rest parameters instead of using arguments to access
functions arguments.
• Template Strings to build up string values including
multi-line strings.
ES6 COMES WITH
SO MUCH
GOODNESS,
TECHNICALLY IT
HAS TO BE
FATTENING…
Library Builders
map, set & weakmap
__proto__
Proxies
Symbols
Sub7classable built7ins
Scalable Apps
let, const & block7
scoped bindings
Classes
Promises
Iterators
Generators
Typed arrays
Modules
Syntactic Sugar
Arrow functions
Enhanced object literals
Template strings
Destructuring
Rest, Spread, Default
String, Math, Number,
Object, RegExp APIs
ALL OF THESE PARTS HAVE DIFFERENT AUDIENCES
SUPPORT IS ENCOURAGING, BUT ALSO PATCHY
http://kangax.github.io/compat-table/es6/
THE PROBLEM: FOR
NON-SUPPORTING
BROWSERS, ES6
FEATURES ARE
SYNTAX ERRORS…
THE SOLUTION:
TRANSPILING INTO
ES5…
https://babeljs.io
✘ It adds an extra step in between
writing code and running it in the
browser - probably the thing that
made the web grow as fast as it
did.
✘ You don’t run or debug the code
you write.
✘ You’re at the mercy of the
transpiler to create efficient code
✘ You create probably much more
code than you need
✘ Browsers that support ES6 will
never get any.
THE PROBLEMS WITH
TRANSPILING:
http://www.w3.org/TR/html-design-principles/#priority-of-constituencies
In case of conflict, consider users over authors over
implementors over specifiers over theoretical purity.
In other words costs or difficulties to the user should
be given more weight than costs to authors; which in
turn should be given more weight than costs to
implementors; which should be given more weight
than costs to authors of the spec itself, which should
be given more weight than those proposing changes
for theoretical reasons alone. Of course, it is
preferred to make things better for multiple
constituencies at once.
“
PRIORITIES OF CONSTITUENCIES…
https://featuretests.io/
TURNS OUT, YOU CAN FEATURE TEST ES6…
HOW DOES ES6 PERFORM? http://kpdecker.github.io/six-speed/
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
http://kpdecker.github.io/six-speed/
THE ES6
CONUNDRUM:
• We can’t use it safely in the wild
• We can use TypeScript or transpile it
• We can feature test for it, but that
can get complex quickly
• Browsers that support it, will not get
any ES6 that way (but can use it
internally)
• The performance is bad right now
(which is a normal thing). To improve
this, we need ES6 to be used in the
wild…
HELP ES6 BY
LOOKING AT ITS
UNIT TESTS…
https://github.com/tc39/test262
http://test262.ecmascript.org/
YOU CAN LEARN
AND FIX ISSUES.
http://es6katas.org
WE NEED TO MOVE
FROM PATCHING
TO BUILDING
Stick and Carrot: Alan O’Rourke
https://www.flickr.com/photos/33524159@N00/17233999165
THANK YOU!
Stick, Carrot and heart: opensourceway
https://www.flickr.com/photos/47691521@N07/5537457133/
Selfie Stick group: j0sh (www.pixael.com)
https://www.flickr.com/photos/87690240@N03/16322726941/
Skip by Denna Jones
https://www.flickr.com/photos/95267793@N00/2336623192
CHRIS HEILMANN
@CODEPO8
Messy room: David, Bergin, Emmett and Elliott
https://www.flickr.com/photos/44925192@N00/183227976

Weitere ähnliche Inhalte

Was ist angesagt?

All the small things… - Awwwards 2016
All the small things… - Awwwards 2016All the small things… - Awwwards 2016
All the small things… - Awwwards 2016Christian Heilmann
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsRyan Roemer
 
Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015Christian Heilmann
 
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]Aaron Gustafson
 
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
Upgrading JavaScript to ES6 and using TypeScript as a shortcutUpgrading JavaScript to ES6 and using TypeScript as a shortcut
Upgrading JavaScript to ES6 and using TypeScript as a shortcutChristian Heilmann
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017Christian Heilmann
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Christian Heilmann
 
Automating all the wrong things - You Gotta Love Frontend Keynote
Automating all the wrong things - You Gotta Love Frontend KeynoteAutomating all the wrong things - You Gotta Love Frontend Keynote
Automating all the wrong things - You Gotta Love Frontend KeynoteChristian Heilmann
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
 
Meet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practiceMeet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practiceŁukasz Romanowicz
 
Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmetBrad Frost
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?Reto Meier
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App ChallengesJason Grigsby
 
Smarr Oscon 2007
Smarr Oscon 2007Smarr Oscon 2007
Smarr Oscon 2007briandemant
 
What Web Framework To Use?
What Web Framework To Use?What Web Framework To Use?
What Web Framework To Use?Kasra Khosravi
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Christian Heilmann
 
Nodevember 2017: AMP Primer
Nodevember 2017: AMP PrimerNodevember 2017: AMP Primer
Nodevember 2017: AMP PrimerLisa Huang
 

Was ist angesagt? (20)

All the small things… - Awwwards 2016
All the small things… - Awwwards 2016All the small things… - Awwwards 2016
All the small things… - Awwwards 2016
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
 
Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015
 
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
 
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
Upgrading JavaScript to ES6 and using TypeScript as a shortcutUpgrading JavaScript to ES6 and using TypeScript as a shortcut
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
 
Next Level Tech SEO | Dominik Wojcik | SEO Day 2017
Next Level Tech SEO | Dominik Wojcik | SEO Day 2017Next Level Tech SEO | Dominik Wojcik | SEO Day 2017
Next Level Tech SEO | Dominik Wojcik | SEO Day 2017
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017
 
Automating all the wrong things - You Gotta Love Frontend Keynote
Automating all the wrong things - You Gotta Love Frontend KeynoteAutomating all the wrong things - You Gotta Love Frontend Keynote
Automating all the wrong things - You Gotta Love Frontend Keynote
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Meet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practiceMeet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practice
 
Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Fixing web and JS gaps
Fixing web and JS gapsFixing web and JS gaps
Fixing web and JS gaps
 
Smarr Oscon 2007
Smarr Oscon 2007Smarr Oscon 2007
Smarr Oscon 2007
 
What Web Framework To Use?
What Web Framework To Use?What Web Framework To Use?
What Web Framework To Use?
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
Nodevember 2017: AMP Primer
Nodevember 2017: AMP PrimerNodevember 2017: AMP Primer
Nodevember 2017: AMP Primer
 

Ähnlich wie Stapling and patching the web of now - ForwardJS3, San Francisco

Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteChristian Heilmann
 
Overboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasiaOverboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasiaChristian Heilmann
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Christian Heilmann
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxchitrachauhan21
 
Responsive, adaptive and responsible - keynote at NebraskaJS
Responsive, adaptive and responsible - keynote at NebraskaJSResponsive, adaptive and responsible - keynote at NebraskaJS
Responsive, adaptive and responsible - keynote at NebraskaJSChristian Heilmann
 
Innovation vs. Impatience - keynote at JSOpenDay London 2015
Innovation vs. Impatience - keynote at JSOpenDay London 2015Innovation vs. Impatience - keynote at JSOpenDay London 2015
Innovation vs. Impatience - keynote at JSOpenDay London 2015Christian Heilmann
 
Tech Thursdays: Building Products
Tech Thursdays: Building ProductsTech Thursdays: Building Products
Tech Thursdays: Building ProductsHayden Bleasel
 
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Jeremy Johnson
 
The ES6 Conundrum - All Things Open 2015
The ES6 Conundrum - All Things Open 2015The ES6 Conundrum - All Things Open 2015
The ES6 Conundrum - All Things Open 2015Christian Heilmann
 
A call to JS Developers - Let’s stop trying to impress each other and start b...
A call to JS Developers - Let’s stop trying to impress each other and start b...A call to JS Developers - Let’s stop trying to impress each other and start b...
A call to JS Developers - Let’s stop trying to impress each other and start b...Christian Heilmann
 
The Spirit of Opensource - contribution as a strategy for growth and innova...
The Spirit of Opensource   - contribution as a strategy for growth and innova...The Spirit of Opensource   - contribution as a strategy for growth and innova...
The Spirit of Opensource - contribution as a strategy for growth and innova...Parth Lawate
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive WebMatt Carver
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Onely
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampChris Love
 
Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Christian Heilmann
 
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105 Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105 Christian Heilmann
 
Let’s learn how to use JavaScript responsibly and stay up-to-date.
Let’s learn how to use JavaScript responsibly and stay up-to-date. Let’s learn how to use JavaScript responsibly and stay up-to-date.
Let’s learn how to use JavaScript responsibly and stay up-to-date. Christian Heilmann
 
Creating a Responsive Website From Scratch
Creating a Responsive Website From ScratchCreating a Responsive Website From Scratch
Creating a Responsive Website From ScratchCorky Brown
 

Ähnlich wie Stapling and patching the web of now - ForwardJS3, San Francisco (20)

Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
Overboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasiaOverboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasia
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way…
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
Responsive, adaptive and responsible - keynote at NebraskaJS
Responsive, adaptive and responsible - keynote at NebraskaJSResponsive, adaptive and responsible - keynote at NebraskaJS
Responsive, adaptive and responsible - keynote at NebraskaJS
 
Innovation vs. Impatience - keynote at JSOpenDay London 2015
Innovation vs. Impatience - keynote at JSOpenDay London 2015Innovation vs. Impatience - keynote at JSOpenDay London 2015
Innovation vs. Impatience - keynote at JSOpenDay London 2015
 
Tech Thursdays: Building Products
Tech Thursdays: Building ProductsTech Thursdays: Building Products
Tech Thursdays: Building Products
 
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
 
The ES6 Conundrum - All Things Open 2015
The ES6 Conundrum - All Things Open 2015The ES6 Conundrum - All Things Open 2015
The ES6 Conundrum - All Things Open 2015
 
A call to JS Developers - Let’s stop trying to impress each other and start b...
A call to JS Developers - Let’s stop trying to impress each other and start b...A call to JS Developers - Let’s stop trying to impress each other and start b...
A call to JS Developers - Let’s stop trying to impress each other and start b...
 
The Spirit of Opensource - contribution as a strategy for growth and innova...
The Spirit of Opensource   - contribution as a strategy for growth and innova...The Spirit of Opensource   - contribution as a strategy for growth and innova...
The Spirit of Opensource - contribution as a strategy for growth and innova...
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 
Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015
 
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105 Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
 
Let’s learn how to use JavaScript responsibly and stay up-to-date.
Let’s learn how to use JavaScript responsibly and stay up-to-date. Let’s learn how to use JavaScript responsibly and stay up-to-date.
Let’s learn how to use JavaScript responsibly and stay up-to-date.
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Creating a Responsive Website From Scratch
Creating a Responsive Website From ScratchCreating a Responsive Website From Scratch
Creating a Responsive Website From Scratch
 
resume
resumeresume
resume
 

Mehr von Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteChristian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteChristian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandChristian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerChristian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachChristian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsChristian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansChristian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansChristian Heilmann
 
Suit up, bring extra oxygen Internet space explorers needed.
Suit up, bring extra oxygen Internet space explorers needed.Suit up, bring extra oxygen Internet space explorers needed.
Suit up, bring extra oxygen Internet space explorers needed.Christian Heilmann
 
JavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteJavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteChristian Heilmann
 

Mehr von Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 
Supercharging Public Speaking
Supercharging Public SpeakingSupercharging Public Speaking
Supercharging Public Speaking
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for Humans
 
Suit up, bring extra oxygen Internet space explorers needed.
Suit up, bring extra oxygen Internet space explorers needed.Suit up, bring extra oxygen Internet space explorers needed.
Suit up, bring extra oxygen Internet space explorers needed.
 
JavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteJavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynote
 

Kürzlich hochgeladen

ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Projectwajrcs
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9Jürgen Gutsch
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기Chiwon Song
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 

Kürzlich hochgeladen (20)

Sustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire ThornewillSustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire Thornewill
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Program with GUTs
Program with GUTsProgram with GUTs
Program with GUTs
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 

Stapling and patching the web of now - ForwardJS3, San Francisco

  • 1. STAPLING AND PATCHING THE WEB OF NOW CHRIS HEILMANN (@CODEPO8), FORWARDJS, SF, 2015
  • 2. WOW, WE LIVE IN SUCH GREAT TIMES.
  • 3. THE TECHNOLOGIES WE CAN PLAY WITH ARE INCREDIBLE!
  • 4. THE TECHNOLOGIES WE CAN PLAY WITH ARE INCREDIBLE! • Web Components • Service Workers • ECMAScript 2015/16… • WebVR/WebGL/WebRTC
  • 5. WE’VE COME A LONG WAY AS PROFESSIONAL DEVELOPERS • Version control • Test-Driven Development • Task runners • Package management • Pre/Post compilation • Transpiling
  • 6. OUR TOOLING HAS NEVER BEEN BETTER… • IDE Integration • Watchers/Live Reloads • In-browser debuggers and development tools • Remote debugging tools and protocols
  • 7. FRAMEWORKS, LIBRARIES AND PACKAGING TOOLS MAKE OUR LIVES MUCH EASIER… • React • Polymer • Angular • Bootstrap • PhoneGap / Manifold.js
  • 8. BROWSERS ARE OPENLY INNOVATING AND EVERGREEN… • Firefox • Chrome/Opera • Microsoft Edge • Safari iOS • Safari
  • 9. OUR COMMUNICATION TOOLS ARE SPLENDID • We all ❤ GitHub • We all talk on Slack • We all can access hundreds of free resources on learning our trade • We all can take part in meetups or conferences almost every day - or on the web.
  • 10. AND YET… IT ALWAYS FEELS LIKE SOMETHING IS MISSING…
  • 12. EVERYTHING WE DO IS INCREDIBLE
  • 14. INCREDIBLE = LACKING CREDIBILITY
  • 15. INCREDIBLE? • Almost everything we release these days is experimental • Many things need non-standard code or flags to be turned on • Things work only in one browser, sometimes even a special build • After impressing one another with a cool logo, grandiose statements and a 3 line hello world demo there’s a fine print stating “don’t use this in production” • To use any of the new standards, you need to use an abstraction library
  • 16. WHO DO WE CODE FOR? ✘ Not our end users - they are not likely to have the same computers, connections and browsers we have ✘ Not companies who need to work with products that work in large teams or can be used in an environment following certification processes ✔ We code for ourselves, conference participants, hacker news commenters, the tech press and an imaginary, perfect, future audience.
  • 17. WHAT HAPPENED? HOW DID WE END UP SO SELF-CENTERED?
  • 18. WHAT IS THE MAIN THING WE KEEP TRYING TO FIX WITH ALL OUR INNOVATION EFFORTS?
  • 19. MOBILE HAS BEEN SOLD TO US AND BY US AS TOTALLY DIFFERENT • The app is a much better form factor than web sites with URLs • Everything needs to work offline • Speed is paramount and every byte costs money. • Everything needs to be much simpler interfaces - people are busy and on the road • Every app should take full advantage over what the operating system and hardware offers
  • 20. WELL, WE BOLLOCKSED THAT UP PROPER… ✘
  • 21. TROUBLE WITH THE MOBILE WEB… www.theverge.com/2015/7/20/9002721/the-mobile-web-sucks
  • 22. TROUBLE WITH THE MOBILE WEB… www.theverge.com/2015/7/20/9002721/the-mobile-web-sucks
  • 23. THE WEB IS DESIGNED TO WORK INDEPENDENT OF HARDWARE, SOFTWARE, ABILITY OR LOCATION.
  • 24. ON MOBILE, THE DECK IS STACKED AGAINST THE WEB…
  • 25. ON MOBILE, THE DECK IS STACKED AGAINST THE WEB… • Browsers are hard-wired and update with operating systems • Hardware creators, service providers and even third party vendors fork and release their own unholy versions of the OS and the browser. • The more you control the experience, the more competitive you are.
  • 26. DENIAL ANGER BARGAINING DEPRESSION ACCEPTANCE THE FIVE STAGES OF MOURNING FOR THE OPEN WEB IN A MOBILE WORLD.
  • 27. DENIAL ANGER BARGAINING DEPRESSION ACCEPTANCE THE FIVE STAGES OF MOURNING FOR THE OPEN WEB IN A MOBILE WORLD. • This is just a fad, it will go away. • If we build our own operating system based on HTML5, the others will learn from that and embrace it more. • Surely the simplicity of web standards and the amazing value of Microformats and properly structured HTML will never cease to amaze new developers.
  • 28. DENIAL ANGER BARGAINING DEPRESSION ACCEPTANCE THE FIVE STAGES OF MOURNING FOR THE OPEN WEB IN A MOBILE WORLD. • It is all the fault of our users - they do all the things wrong like using outdated browsers or turning off JavaScript! • It is the fault of browser makers - they just don’t innovate quickly enough to match what mobile can do! • It is the fault of clients - they only want crap and nothing exciting that pushes the envelope! • It is the fault of tool creators - we need to match what native has in terms of tooling and then we all can ride unicorns and have ice cream!
  • 29. DENIAL BARGAINING DEPRESSION ACCEPTANCE THE FIVE STAGES OF MOURNING FOR THE OPEN WEB IN A MOBILE WORLD. • Let’s build a stop phone gap solution - one that is designed to become redundant to show mobile OS makers that the web is ready if only it had access to hardware capabilities. • Let’s define lots of APIs and form expert groups - surely these will be embraced an implemented by OS providers instead of coming up with their own ones! • Let’s inject browsers with our apps into the platform - (crosswalk-project.org). This worked wonders with Chromeframe and Internet Explorer. ANGER
  • 30. DENIAL BARGAINING DEPRESSION ACCEPTANCE THE FIVE STAGES OF MOURNING FOR THE OPEN WEB IN A MOBILE WORLD. • Let’s concede defeat - we can never match what native offers, and never innovate as fast. • Let’s consider a new career - goat farming, for example, sounds like a great investment. • Let’s try to find recognition elsewhere - maybe in a smaller group of people who care about what I do. ANGER BARGAINING DEPRESSION
  • 31. DENIAL BARGAINING DEPRESSION ACCEPTANCE THE FIVE STAGES OF MOURNING FOR THE OPEN WEB IN A MOBILE WORLD. • Maybe this is just another form factor - and we could use our time to care for the web that is instead. • Maybe there is space for more than one form factor - just maybe. I mean, crazier things have happened, like multiple ways to use a road. • Maybe this is a time to reflect and improve what we have - after all, there is a lot that needs fixing? ANGER BARGAINING DEPRESSION
  • 33. THE WEB IS FULL OF RUBBISH, TIME TO CLEAN IT UP INSTEAD OF ADDING MORE…
  • 34. I JOINED MICROSOFT TO HELP WITH ONE VERY IMPORTANT FIX THE WEB VERY MUCH NEEDED…
  • 35. THE IDEA WAS TO GET RID OF ALL THE BAD IDEAS OF THE PAST… ✘ VML ✘ attachEvent() ✘ currentStyle ✘ X-UA-Compatible (render modes) ✘ IE Layout Quirks ✘ VBScript ✘ Conditional Comments ✘ MS-Prefixed Events
  • 36. AND REPLACE THEM WITH YUMMY GOODNESS.
  • 37. IT SEEMS THE WEB IS SAFARI/IOS…
  • 38. before after before after -webkit-appearance: none -webkit-gradient EXPERIMENTAL? PROBABLY SAFE TO USE…
  • 39. COPY + PASTE BEATS VALIDATION? https://github.com/search?l=html&q=charset+%22UTF8%22&ref=searchresults&type=Code&utf8=%E2%9C%93 <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta charset="utf-8"> <meta charset=“utf8"> ✘ ✔ > 600k times in use on GitHub!
  • 40. THINGS YOU LEARN WHEN YOU WRITE A NEW JS ENGINE https://channel9.msdn.com/events/WebPlatformSummit/2015/Chakra-The- JavaScript-Engine-that-powers-Microsoft-Edge @BTERLSON @GAURAVSETH
  • 41. THINGS YOU LEARN WHEN YOU WRITE A NEW JS ENGINE ✘ Only a third of the top 3000 sites can benefit from JS inlining. Reason is lots of scripts instead of concatenation. ✘ You need to optimise a lot of JS in the engine (length reading on every iteration of for loops!) ✘ Outdated libraries are still very much in use and clash with new JS features (mootools breaking with array.contains(), zepto disliking array constructors) ✓ Minification is used a lot on the web and optimising for uglify.js code is a big win
  • 42. THE WEB IS A MESS!
  • 43. PROMISES DON’T WORK • Can we stop producing “not ready for production” solutions? • People are getting tired of “upcoming amazing technology” we “need to use now” and jump through hoops to implement. • Abstraction libraries end up in production, become interoperability issues and fill up the web. • Experimental technology in use gets included across browsers to ensure backwards compatibility - making browsers slow and fat.
  • 44. WE SHOULD NEVER PUNISH OUR USERS • It isn’t their job to fix their working environments to our needs • There is no “everybody should use this” - you publish on the web; you knew what you signed up for. • We’re wasting time re-evaluating sensible concepts like progressive enhancement. It works, it is future- proof. Let’s not pretend we can control things.
  • 45. THE ONE THING THAT CAN HELP US IS LOVE…
  • 46. ✔ Let’s not repeated the same mistakes we did with IE6 (checking for browsers, blocking others) ✔ Let’s not write code “that works” rather than “is correct” ✔ Let’s not optimise our work for a platform that doesn’t appreciate it and where it won’t flourish (mobile) LOVE FOR THE FORM FACTOR THAT IS THE WEB…
  • 47. AND THIS IS WHERE RIGHT NOW WE NEED TO CONCENTRATE ON GETTING ONE THING RIGHT…
  • 48. • Arrow functions as a short-hand version of an anonymous function. • Block-level scope using let instead of var makes variables scoped to a block (if, for, while, etc.) • Classes to encapsulate and extend code. • Constants using the const keyword. • Default parameters for functions like foo(bar = 3, baz = 2) • Destructuring to assign values from arrays or objects into variables. • Generators that create iterators using function* and the yield keyword. • Map, a Dictionary type object that can be used to store key/value pairs. and Set as a collection object to store a list of data values. • Modules as a way of organizing and loading code. • Promises for async operations avoiding callback hell • Rest parameters instead of using arguments to access functions arguments. • Template Strings to build up string values including multi-line strings. ES6 COMES WITH SO MUCH GOODNESS, TECHNICALLY IT HAS TO BE FATTENING…
  • 49. Library Builders map, set & weakmap __proto__ Proxies Symbols Sub7classable built7ins Scalable Apps let, const & block7 scoped bindings Classes Promises Iterators Generators Typed arrays Modules Syntactic Sugar Arrow functions Enhanced object literals Template strings Destructuring Rest, Spread, Default String, Math, Number, Object, RegExp APIs ALL OF THESE PARTS HAVE DIFFERENT AUDIENCES
  • 50. SUPPORT IS ENCOURAGING, BUT ALSO PATCHY http://kangax.github.io/compat-table/es6/
  • 51. THE PROBLEM: FOR NON-SUPPORTING BROWSERS, ES6 FEATURES ARE SYNTAX ERRORS…
  • 53. ✘ It adds an extra step in between writing code and running it in the browser - probably the thing that made the web grow as fast as it did. ✘ You don’t run or debug the code you write. ✘ You’re at the mercy of the transpiler to create efficient code ✘ You create probably much more code than you need ✘ Browsers that support ES6 will never get any. THE PROBLEMS WITH TRANSPILING:
  • 54. http://www.w3.org/TR/html-design-principles/#priority-of-constituencies In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. In other words costs or difficulties to the user should be given more weight than costs to authors; which in turn should be given more weight than costs to implementors; which should be given more weight than costs to authors of the spec itself, which should be given more weight than those proposing changes for theoretical reasons alone. Of course, it is preferred to make things better for multiple constituencies at once. “ PRIORITIES OF CONSTITUENCIES…
  • 55. https://featuretests.io/ TURNS OUT, YOU CAN FEATURE TEST ES6…
  • 56. HOW DOES ES6 PERFORM? http://kpdecker.github.io/six-speed/
  • 61. THE ES6 CONUNDRUM: • We can’t use it safely in the wild • We can use TypeScript or transpile it • We can feature test for it, but that can get complex quickly • Browsers that support it, will not get any ES6 that way (but can use it internally) • The performance is bad right now (which is a normal thing). To improve this, we need ES6 to be used in the wild…
  • 62. HELP ES6 BY LOOKING AT ITS UNIT TESTS… https://github.com/tc39/test262 http://test262.ecmascript.org/
  • 63. YOU CAN LEARN AND FIX ISSUES. http://es6katas.org
  • 64. WE NEED TO MOVE FROM PATCHING TO BUILDING
  • 65. Stick and Carrot: Alan O’Rourke https://www.flickr.com/photos/33524159@N00/17233999165 THANK YOU! Stick, Carrot and heart: opensourceway https://www.flickr.com/photos/47691521@N07/5537457133/ Selfie Stick group: j0sh (www.pixael.com) https://www.flickr.com/photos/87690240@N03/16322726941/ Skip by Denna Jones https://www.flickr.com/photos/95267793@N00/2336623192 CHRIS HEILMANN @CODEPO8 Messy room: David, Bergin, Emmett and Elliott https://www.flickr.com/photos/44925192@N00/183227976