LET’S LEARN
HOW TO USE
JAVASCRIPT
RESPONSIBLY
AND STAY
UP-‐TO-‐DATE.
CHRIS HEILMANN @CODEPO8 MICROSOFT SINGAPORE MEETUP -‐ NOVEMBER 2015

TODAY, I WANT TO
TALK TO YOU ABOUT
JAVASCRIPT…

AND WHY I AM
EXCITED ABOUT IT…

JAVASCRIPT IS…
• An incredibly versatile
language
• Available web-‐wide and across
many platforms
• Toolset independent
• Forgiving and inviting

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 :)﴿

JAVASCRIPT IS IN SUPER HIGH DEMAND!
https://www.google.com/trends/explore#q=undefined%20is%20not%20a%20function

A QUICK REMINDER
HOW JAVASCRIPT IS
PRETTY MUCH THE
ODD ONE OUT…

JAVASCRIPT IS
TECHNICALLY NOT A
GREAT LANGUAGE
FOR THE WEB…

HTML AND CSS ARE
DESIGNED TO BE
FAULT TOLERANT.
https://adactio.com/journal/4272

JAVASCRIPT ISN’T
FAULT TOLERANT.

ONE LITTLE MISTAKE,
AND NOTHING
SHOWS UP.

THANKFULLY ONLY
PARANOID FREAKS
TURN OFF JAVASCRIPT!

http://kryogenix.org/code/browser/everyonehasjs.html
WELL, NOT QUITE…

SOUNDS
FAMILIAR?

JAVASCRIPT ABUSE IS
RAMPANT…

3MB OF BLOCKING
JAVASCRIPT BEFORE
THE FIRST WORD
APPEARS ON THE
PAGE!

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

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.

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
others and make them smaller
• And each of those comes with
a “don’t use in production”
label.

MY GOAL FOR TODAY:
LET’S LEARN HOW TO USE JAVASCRIPT
RESPONSIBLY AND STAY UP-‐TO-‐DATE.

LET’S FIX THINGS AT THE SOURCE:
1: THE JAVASCRIPT LEARNING PROCESS

LEARNING
JAVASCRIPT SEEMS
UNFASHIONABLE…
• 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
• Go back to step 1

I CALL THIS THE FULL
STACK OVERFLOW
DEVELOPER
https://www.christianheilmann.com/2015/07/17/the-‐full-‐stackoverflow-‐developer/

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.

LET’S FIX THINGS AT THE SOURCE:
2)﴿ REMOVING SCAPEGOATS: IE IS DEAD!

REMOVING THE
LARGEST STUMBLING
BLOCK OF THE WEB!

COMMUNICATION IS
OPEN AND READY TO
ANSWER YOUR
PROBLEMS!
@MSEDGEDEV
uservoice.modern.ie
status.modern.ie
remote.modern.ie
insider.windows.com

MOVING FROM TRIDENT TO EDGEHTML…

ALL THE NON-‐
STANDARD CODE IS
GONE, STOP
WORRYING ABOUT
AND ABOVE ALL
SUPPORTING IT!
✘ VML
✘ attachEvent(﴾)﴿
✘ currentStyle
✘ X-‐UA-‐Compatible (﴾render
modes)﴿
✘ IE Layout Quirks
✘ VBScript
✘ Conditional Comments
✘ MS-‐Prefixed Events

SCAN AND REMOVE!
http://dev.modern.ie/tools/staticscan/
https://github.com/MicrosoftEdge/static-‐code-‐scan

NO MORE PLUGINS,
THE BROWSER IS
THE RUNTIME…

LET’S FIX THINGS AT THE SOURCE:
3)﴿ STOP BREAKING THINGS!

WE NEEDED TO KEEP
IE11 IN WINDOWS 10
AS TOO MANY SITES
RELIED ON ITS NON-‐
STANDARD CODE.

BUILDING A NEW
BROWSER TAUGHT US
LOTS…

MOVING FROM TRIDENT TO EDGEHTML…

YOU CAN’T FIX WHAT YOU DON’T GET…
https://twitter.com/Caged/status/590602214021922818

USER AGENT
SNIFFING…

USER AGENT
SNIFFING…
PARSING THE “PACK OF LIES”

LET’S DETECT MOBILE!
window.mobileCheck
=
function()
{
var
check
=
false;
(function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|
hiptop|iemobile|ip(hone|od)|iris|kindle|lge
|maemo|midp|mmp|mobile.+firefox|netfront|opera
m(ob|in)i|
palm(
os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|
wap|windows
(ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-­‐6]i|770s|802s|a
wa|abac|
ac(er|oo|s-­‐)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-­‐m|r
|s
)|
avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-­‐(n|u)|c55/|capi|ccwa|cdm-­‐|cell|chtm|cldc|cmd
-­‐|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-­‐s|devi|dica|dmob|do(c|p)o|ds(12|-­‐d)|el(49|ai)|em(l2|ul)|er(ic|
k0)|esl8|ez([4-­‐7]0|os|wa|ze)|fetc|fly(-­‐|_)|g1
u|g560|gene|gf-­‐5|g-­‐mo|go(.w|od)|gr(ad|un)|haie|hcit|hd
-­‐(m|p|t)|hei-­‐|hi(pt|ta)|hp(
i|ip)|hs-­‐c|ht(c(-­‐|
|_|a|g|p|s|t)|tp)|hu(aw|tc)|i-­‐(20|go|ma)|i230|iac(
|
-­‐|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(
|/)|klon|kpt
|kwc
-­‐|kyo(c|k)|le(no|xi)|lg(
g|/(k|l|u)|50|54|-­‐[a-­‐w])|libw|lynx|m1-­‐w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|
ca)|m-­‐cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-­‐|
|o|v)|zz)|mt(50|p1|v
)|mwbp|mywa|n10[0-­‐2]|
n20[2-­‐3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-­‐|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|
owg1|p800|pan(a|d|t)|pdxg|pg(13|-­‐([1-­‐8]|c))|phil|pire|pl(ay|uc)|pn-­‐2|po(ck|rt|se)|prox|psio|pt-­‐g|qa-­‐
a|qc(07|12|21|32|60|-­‐[2-­‐7]|i-­‐)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h
-­‐|oo|p-­‐)|sdk/|se(c(-­‐|0|1)|47|mc|nd|ri)|sgh-­‐|shar|sie(-­‐|m)|sk-­‐0|sl(45|id)|sm(al|ar|b3|it|t5)|
so(ft|ny)|sp(01|h-­‐|v-­‐|v
)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-­‐|tdg-­‐|tel(i|m)|tim-­‐|t-­‐mo|
to(pl|sh)|ts(70|m-­‐|m3|m5)|tx-­‐9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-­‐3]|-­‐v)|vm40|
voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-­‐|
)|webc|whit|wi(g
|nc|nw)|wmlb|wonu|x700|yas-­‐|your|
zeto|zte-­‐/i.test(a.substr(0,4)))check
=
true})(navigator.userAgent||navigator.vendor||window.opera);
return
check;
}
WHAT CAN GO WRONG?

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.

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.

IF YOU THINK
JAVASCRIPT, THINK
ESCALATORS.

LET’S FIX THINGS AT THE SOURCE:
4: REMOVING SCAPEGOATS: TOOLING

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)﴿.

• 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!

• Open Source and cross platform
• Written in JavaScript
• Includes debugging and linting -‐
learn your mistakes while you
write code
• GitHub integration
VISUAL STUDIO CODE
https://code.visualstudio.com/

• One hour free test server
• Authenticate with Google,
Facebook or Microsoft
• Keep your code by forking or
downloading it
TRY NODE AND EXPRESS…
https://www.christianheilmann.com/2015/10/27/testing-out-node-and-express-without-a-local-install-or-editor/

EVERYBODY DUCK!
LIVE DEMO…

LET’S FIX THINGS AT THE SOURCE:
5)﴿ REMOVING SCAPEGOATS: EVOLVE JS

JAVASCRIPT HAS
GROWN UP.
IT IS AN NOW AN
EVERGREEN LANGUAGE
WE CALL ECMASCRIPT
(﴾6, 2015…)﴿

http://kangax.github.io/compat-table/es6/
SUPPORT IS ENCOURAGING (﴾EDGE, FIREFOX, CHROME, SAFARI (﴾ON 9)﴿)﴿

ONE SOLUTION:
TRANSPILING INTO
ES5…
https://babeljs.io

ANOTHER
SOLUTION:
SUPERSET
LANGUAGES THAT
CONVERT INTO JS…
http://typescriptlang.org/

https://featuretests.io/
WHAT ABOUT FEATURE TESTING?

SEE THE BABEL.JS DOCS AND TRY IT IN THE BROWSER…
https://babeljs.io/docs/learn-‐es2015/

READ THE
EXCELLENT BOOK
EXPLORING ES6
FOR FREE
(﴾OR BUY IT, AXEL DESERVES SUPPORT)﴿
http://exploringjs.com/es6/

JAVASCRIPT HAD A
BUMPY RIDE, AND
MANY PREJUDICES
PERSIST.
OPEN YOUR MIND
AND LEARN HOW FAR
IT IS COME AND
WHAT IT CAN DO FOR
YOU.

THANKS!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM