The document discusses the state of JavaScript and opportunities for its responsible use. It encourages learning JavaScript properly rather than copying code without understanding. It argues against workarounds for browser issues and urges focusing on standards compliance. Updating tools and libraries, removing legacy code, and embracing modern JavaScript features like those in ES6 can help address past issues and enable further innovation on the web.
2. Johann Wolfgang von Goethe
1749 – 1832
Humans shall strive for
nothing less but
excellence, for this is what
gives them the most
satisfaction.
That’s why relying on
automatic semicolon
insertion is not an option.
“
5. JAVASCRIPT IS…
• An incredibly versatile
language
• Available web-‐wide and across
many platforms
• Toolset independent
• Forgiving and inviting
6. YOU CAN USE
JAVASCRIPT
• In browsers on the web
• On the server
• In applications
• To access services
• As a data format (﴾JSON)﴿
• On hardware
• … your turn, surprise me :)﴿
7. JAVASCRIPT IS IN SUPER HIGH DEMAND!
https://www.google.com/trends/explore#q=undefined%20is%20not%20a%20function
27. THIS IS ONE BIG ISSUE
WE HAVE IN THE WEB
COMMUNITY…
• Javascript is too powerful for its
own good.
• Almost everything that goes
wrong can be controlled and to
a degree fixed with JavaScript
• This leads to people relying on
libraries and frameworks
28. WE USE CODE WE
DON’T UNDERSTAND
TO FIX ISSUES WE
DON’T HAVE…
• Learning libraries and
frameworks beyond “hello
world” costs time and money.
• Time you don’t spend on
looking at optimising your code
• In essence, we value developer
convenience over user
experience.
29. BUILDING LIBRARIES
AND FRAMEWORKS
THAT MAGICALLY FIX
THINGS HAS BECOME
FASHIONABLE…
• We work around browser issues
• We make web standards of
tomorrow work today.
• We build solutions to clean up
our others and make them
smaller
• And each of those comes with
a “don’t use in production”
label.
30. SIMPLY BECAUSE YOU CAN FIX ANYTHING WITH
JAVASCRIPT DOES NOT MEAN YOU SHOULD!
31. MY GOAL FOR TODAY:
LET’S LEARN HOW TO USE JAVASCRIPT
RESPONSIBLY AND STAY UP-‐TO-‐DATE.
32. LET’S FIX THINGS AT THE SOURCE:
1: THE JAVASCRIPT LEARNING PROCESS
33. THE JAVASCRIPT
LEARNING PROCESS
HAS ALWAYS BEEN
INTERESTING…
• Use view source to see what
others are doing…
• Copy and paste the bits that
look like they are responsible
for some things
• Change some numbers around
• Run into errors
• Blame Internet Explorer
34. THIS, OF COURSE,
WAS WRONG AND
WE GOT MORE
PROFESSIONAL…
• Search for a solution on
Stackoverflow
• Copy and paste the bits that
look like they are responsible
for some things
• Change some numbers around
• Run into errors
• Blame JavaScript for being
terrible and not a real language
• For good measure, blame
Internet Explorer.
35. I CALL THIS THE FULL
STACK OVERFLOW
DEVELOPER
https://www.christianheilmann.com/2015/07/17/the-‐full-‐stackoverflow-‐developer/
36. YOU ARE BETTER
THAN THAT!
• There is no lack of free online
resources for learning
JavaScript
• Watch talks, do online courses,
download and read free books.
• Learn by doing and playing
with the language -‐ if you don’t
know it, analyse it.
• Share your knowledge, when
you teach you end up learning.
38. OUR DEVELOPMENT
ENVIRONMENT IS
INCREDIBLE!
• Developer tools in browsers are
outstanding and give us incredible
insights.
• We can debug across devices and
even convert HTML5 to native apps
for closed systems (﴾manifold.js/
vorlon.js)﴿.
39. • Editors have linting, build integration,
and some are even written in
JavaScript and run in the browser.
• We share code on GitHub and help
debug problems using JSFiddle, JSBin
and others…
OUR DEVELOPMENT
ENVIRONMENT IS
INCREDIBLE!
40. LET’S FIX THINGS AT THE SOURCE:
3)﴿ REMOVING SCAPEGOATS: IE IS DEAD!
55. STOP DOING THAT!
✘ You can’t safely detect a browser.
✘ You fix your code in time and
environment, you might as well code
native.
✘ If you really need to fix an issue with a
specific browser, include agent and
version number.
56. KEEP YOUR HELPER
TOOLS UP TO DATE!
✘ Outdated libraries forced us to
optimise old practices in the JS engine
✘ Shoddily written polyfills broke new
JavaScript functionality and forced us
to rename new methods
(﴾array.contains, f.e.)﴿
✘ Old libraries do browsers sniffing and
apply old syntax of now standardised
functionality.
64. • 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…
65. 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
69. ✘ Extra step between writing code
and running it in the browser.
✘ We don’t run or debug the code
we write.
✘ We’re hope the transpiler creates
efficient code
✘ We create a lot of code
✘ Browsers that support ES6 will
never get any.
THE PROBLEMS WITH
TRANSPILING:
71. ✘ It is an extra step that might be
costly
✘ We can only do it client-‐side
✘ We can get false positives -‐
experimental features might be
implemented in a rudimentary
fashion
✘ We have to keep your feature
tests up-‐to-‐date and extend them
as needed -‐ support for one
feature doesn’t mean support for
another.
THE PROBLEMS WITH
FEATURE TESTING:
72. YOU CAN USE AN
ABSTRACTION,
FRAMEWORK OR
LIBRARY THAT HAS
SIMILAR FEATURES…
73. ✘ They makes us dependent on
that abstraction
✘ We can’t control possible version
clashes in the abstraction layer
✘ Maintainers need to know the
abstraction instead of the
standard of ES6
PROBLEMS WITH
ANY ABSTRACTION
74. 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…
75. THAT SAID…
IF YOU USE JAVASCRIPT IN
AN ENVIRONMENT YOU
CONTROL, PLEASE USE ES6
AND FEED BACK YOUR
EXPERIENCES TO THE
TC93!
76. HELP ES6 BY
LOOKING AT ITS
UNIT TESTS…
https://github.com/tc39/test262
http://test262.ecmascript.org/