A call to JS Developers - Let’s stop trying to impress each other and start building
1. Call to JavaScript developers:
Let’s stop trying to impress each other and start building
Chris Heilmann @codepo8, Web on the Edge, Helsinki, Nov 2015
11. 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)
12. So how come we
made the web all
about May’s law?
13. CONVENIENCE
BREEDS MORE
CONVENIENCE
• Browsers aren’t good enough
• Development environments are not
predictive and do our work for us
• Languages are confusing
• We should have to write less code
and achieve more
Instead of celebrating how lucky
we are, we complain…
18. 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…
19. THE WEB IS AN
AMAZING IDEA AND
OFFER…
• Access to information world-wide,
24⨉7
• Independent of hardware, software,
ability, or geographical location
• A read/write medium, everybody is
invited to become a creator and not
just a consumer
20. ONE PERSON’S
BEAUTY IS ANOTHER
ONE’S WORRY…
• It is hard to build software and
interfaces for the unknown
• Open distribution, caching and
availability of source code is
anathema to content providers
wanting to protect their content.
21. 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
23. 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
24. THE ANSWER IS
ALWAYS JAVASCRIPT
• 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. I CURRENTLY WORK
WITH A CLEANUP
CREW…
http://dev.modern.ie/tools/staticscan/
https://github.com/MicrosoftEdge/static-code-scan
29. 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
“
30. WE BREAK THE WEB
FOR THE SAKE OF
DEVELOPER
CONVENIENCE…
31. WE’RE GOING
FULL SPEED ON
INNOVATION…
• Componentised Web
• Extensible Web Manifesto
• WebGL
• WebAssembly/ASM.js
• PostCSS
• Progressive Apps
36. 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.
38. COST FOR
DEVELOPERS…
• Learning new frameworks
• Re-learning frameworks
• Cutting down on possible hires/
adding to onboarding time
• Debugging frameworks
• Setting up developer
environments
40. IS DEPENDENCY HELL
A PROBLEM OF THE
TOO PRIVILEGED?
https://www.youtube.com/watch?v=PA139CERNbc
Stephan Bönnemann (JSConfEU 2015):
Dependency Hell Just Froze Over
42. 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
53. 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
54. 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.
85. • 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/
86. TRANSPILATING FOR THE WEB OF YESTERDAY…
https://babeljs.io
• Converts ES6 to older versions on the server or the client
• In use by Facebook and many others
• Used in editors and tool chains
90. • 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/
92. PLEASE, GO AND
MAKE A BETTER
WEB!
• Analyse the speed of your products
and improve it by simplifying them:
webpagetest.org
• Stop trying to guess what browser is
in use and assume unknown
browsers to be good, not terrible.
• Keep up to date with what browsers
can do: caniuse.com and use it!
• File bugs, report issues, talk to us!
93. JAVASCRIPT IS STILL THE
SIMPLEST, MOST
VERSATILE AND
INVITING LANGUAGE
OUT THERE…