I like cheese. But not too late.

1. OVERBOARD.JS
Where are we going with this?
Chris Heilmann @codepo8, JSConf Asia, Singapore, Nov 2015
https://www.flickr.com/photos/116261672@N04/19015989685

2. CHRIS HEILMANN
@CODEPO8

3. DEVELOPER,
WRITER,
PRESENTER,
TRAINER,
MANAGER…

4. CHRIS HEILMANN
@CODEPO8

5. • Authoring web sites and enhancing
them with JS
• Scripting/Extending applications
(﴾Illustrator, Homesite, Visual Studio
Code, Sublime…)﴿
• Authoring re-‐usable widgets for
people who don’t know JS
• Working on libraries/frameworks
• Working on browsers and JS
engines
• Working on server-‐side JavaScript
• Designing APIs for JS consumption

6. JAVASCRIPT IS A
VERSATILE, CREATIVE
AND EASY TO LEARN
PICK AND MIX
ENVIRONMENT…

7. WE KEEP TREATING JS
LIKE A “ONE SIZE FITS
ALL” ENVIRONMENT WE
CAN CONTROL…
ttps://www.flickr.com/photos/49503073847@N01/3250153332

8. LATELY, WE GO OVERBOARD WITH JS
https://www.flickr.com/photos/13963375@N00/138745886

9. WE’RE GOING
FULL SPEED ON
INNOVATION…
• Componentised Web
• Modules/Packages
• Extensible Web Manifesto
• WebAssembly/ASM.js
• PostCSS
• Progressive Apps

10. THE VICIOUS
INNOVATION CYCLE…

11. WE FORCE RULES
ONTO OURSELVES
THAT MIGHT BE
OVERKILL…
https://egghead.io/series/how-‐to-‐write-‐an-‐open-‐source-‐javascript-‐library

12. https://www.flickr.com/photos/38497891@N04/4151566643
WE LIVE IN A HYPE FUELLED ENVIRONMENT

13. Moore’s Law:
(﴾paraphrased)﴿
Computers get faster,
better, cheaper and
are more available
every two years.

14. WE WORK WITH AMAZING HARDWARE…

15. WE WORK WITH GREAT CONNECTIVITY…

16. WE GET PAID WELL – FOR A JOB WE LIKE
https://www.flickr.com/photos/31317832@N05/4326186183

17. WE WORK WITH AMAZING BROWSERS

18. May’s Law:
(﴾paraphrased)﴿
Software efficiency halves every
18 months, compensating
Moore’s law.

19. https://www.flickr.com/photos/56218409@N03/19216130670
WE MOVE FAST AND RUN IN CIRCLES

20. http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/
THE WEB IS IN A
SORRY STATE…
• The median page’s time to interact
is 5.5 seconds, and fully loads in just
over 15 seconds.
• The median page is 2MB in size and
contains 170 resources

21. "https://www.flickr.com/photos/80835334@N07/14860543478
WAITING ISN’T FUN…

22. ESPECIALLY WHEN IT COSTS YOU…

23. https://www.flickr.com/photos/37996646802@N01/16637071998
HOW DOES THIS HAPPEN?

24. WE KEEP PROJECTING…
US
OUR
AUDIENCE
TECHNICAL PROFICIENCY,
INTEREST IN CHANGE AND UPGRADES,
INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…

25. AND WE CONSIDER OURSELVES
BETTER…
US
OUR
AUDIENCE
TECHNICAL PROFICIENCY,
INTEREST IN CHANGE AND UPGRADES,
INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…

26. TIME TO GET REAL…
US
OUR
ASSUMED
AUDIENCE
OUR
AUDIENCE
TECHNICAL PROFICIENCY,
INTEREST IN CHANGE AND UPGRADES,
INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…

27. THE NEXT USERS ARE
NOT THOSE WHO
COMPLAIN THE WEB
IS NOT AS GOOD AS
NATIVE APPS…
https://vimeo.com/139312920
https://brucelawson.github.io/talks/2015/velocity
Bruce Lawson at SOTB 2015

28. GROWTH HAPPENS WHERE
MOORE’S LAW ISN’T A
REALITY

29. MOORE’S LAW
STOPPED WORKING
WHEN WE HARD-‐
WIRED HARDWARE
AND SOFTWARE…

30. AS DEVELOPERS, WE
ARE ASKED TO DO
THE IMPOSSIBLE…
• Make it work the same in every
browser
• Make it easy to maintain and we
want to control everything
• Make sure it is also accessible -‐ I
think there’s a law we need to
follow
• Don’t spent too much time on it -‐
let’s release it now and fix it later!
• Use this analytics code you have
no clue about -‐ we need to know
how people use our products

31. https://www.flickr.com/photos/73645804@N00/2473052504
JUST FIND THE RIGHT
BRICKS AND ASSEMBLE
SOMETHING GREAT!

32. WHAT DOES THIS CODE DO?

33. https://www.flickr.com/photos/27429206@N02/4290544535
THE AMAZING TECH OF
TODAY IS THE RUBBISH OF
TOMORROW…

34. I CURRENTLY WORK
WITH A CLEANUP
CREW…
http://dev.modern.ie/tools/staticscan/
https://github.com/MicrosoftEdge/static-‐code-‐scan

35. A simple way to detect how old
a part of our massive site is
checking which version of
jQuery was used in that part
of it. It’s like rings in a tree trunk.
https://www.flickr.com/photos/91183364@N08/13916636762
“

36. WE BREAK THE WEB
FOR THE SAKE OF
DEVELOPER
CONVENIENCE…

37. https://aerotwist.com/blog/the-cost-of-frameworks/
A GREAT READ AND TALK VIDEO…

38. THE DOM IS SLOW?

42. BROWSER DO AN
INCREDIBLE AMOUNT
OF WORK FOR US…
• Display of all kind of media content
• Fix minor mistakes in our code
• Optimise our code to run smoothly
• Provide us with developer tools
• Provide us with deep insights what
our code does to the computer
• Allow us to automate testing in
them and debug remotely on
devices we don’t even own (﴾using
3rd party services)﴿

43. ANALYSING
BROWSER RESULTS…
npm install -‐g bigrig
github.com/GoogleChrome/big-‐rig
github.com/GoogleChrome/node-‐big-‐rig

45. FIXING EVERYTHING WITH A LOT OF JAVASCRIPT
HELPS US, NOT NECESSARILY OUR AUDIENCE…

46. https://www.flickr.com/photos/56844027@N05/5634567317
WE SHOULD WORRY A LOT
MORE ABOUT COST…

47. COST FOR
DEVELOPERS…
• Learning new frameworks
• Re-‐learning frameworks
• Debugging frameworks
• Setting up developer
environments
• Cutting down on possible hires/
adding to onboarding time

48. THE REAL
IMPORTANT BIT IS
THE COST FOR OUR
USERS…
• Time to load / execute
• Bandwidth used
• CPU usage
• Frame rate (﴾60 fps)﴿
• Memory usage
• Battery

49. IT’S TIME TO CLEAN
UP AND LEARN THE
BASICS…
https://twitter.com/magnars/status/666961875683405824

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

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

52. WE ARE RUNNING OUT OF
BOTH EXCUSES…

53. 1997 2015
1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
1997
ECMAScript1
1998
ECMAScript2
1999
ECMAScript3
2005 -‐ 2007
ECMAScript4 -‐ Abandoned
2009
ECMAScript5
2015
ECMAScript6
JAVASCRIPT GREW UP…
• 5+ years since ES5 ratification
• Significant changes in 15+ years
• Backwards compatible
• Ratified June 2015
http://www.ecma-‐international.org/publications/standards/Ecma-‐262.htm

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

55. NUMBERS!
Current status (﴾October 2015)﴿:
Desktop:
Edge 13: 80%
Firefox 42: 71%
Chrome 47/Opera 34: 63 %
Safari 9: 54% (﴾former 21%!)﴿
Mobile:
Android 5.1: 29%
iOS9: 54%
http://kangax.github.io/compat-table/es6/

56. WITH ES6 WE HAVE
A CLEAN NEW
SLATE…

57. THE NEW BASELINE
IS HERE!

58. THE NEW BASELINE
IS HERE!

59. MAYBE IT IS PRUDENT
TO CALM DOWN A
BIT!

60. CONTROLLED
ENVIRONMENTS
ALLOW US TO USE
THE NEWEST AND
COOLEST AND FIND
BEST PRACTICES

61. LET’S NOT MAKE THE
JAVASCRIPT WORLD OVERLY
COMPLEX AND SCARY…

62. 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
ES* CATERS TO DIFFERENT AUDIENCES…

63. PLAY WITH IT AND
FIND OUT WHICH
PARTS MATTER TO
YOU…
http://sephie-‐monster.deviantart.com/art/Mythbusters-‐153616339

64. BABELJS ALLOWS YOU TO LEARN AND USE IT NOW…
https://babeljs.io/docs/learn-‐es2015/

65. THERE IS NO SHORTAGE OF GREAT ONLINE RESOURCES
https://babeljs.io/docs/learn-‐es2015/

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

67. https://www.flickr.com/photos/48066826@N02/5034289376
BUT ALSO LET’S CALM
DOWN AND FIX AND
REMOVE WHAT’S BROKEN

68. LET’S ANALYSE AND
CLEAN UP.
PUT THE WEB ON A
DIET.
ONE TOO
CONVENIENT
SOLUTION AT A
TIME…
http://dev.modern.ie/tools/staticscan/
https://github.com/MicrosoftEdge/static-‐code-‐scan

69. LEND A HELPING HAND…

70. LET’S TURN
COMPETITION
INTO EDUCATION
AND FUN AGAIN!

72. THANKS!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM