The document discusses strategies for responsibly using JavaScript. It recommends:
1. Learning JavaScript fundamentals directly rather than relying on copying code.
2. Stop supporting outdated browsers like Internet Explorer and instead focus on modern standards.
3. Avoid browser detection and stop introducing non-standard code that breaks websites.
4. Leverage powerful developer tools and modern frameworks rather than workarounds.
5. Evolve use of JavaScript by adopting modern standards like ES2015 using compilers rather than blaming language shortcomings.
3. • An incredibly versatile language
• Available web-wide and across
many platforms
• Toolset independent
• Forgiving and inviting
JavaScript is…
4. • In browsers on the web
• On the server
• In applications
• To access services
• As a data format (JSON)
• On hardware
• … your turn, surprise me :)
You can use JavaScript…
5. Javascript is in super high demand!
https://www.google.com/trends/explore#q=undefined%20is%20not%20a%20function
6. A quick reminder how
JavaScript is pretty
much the odd one
out…
Photo by nan palmero https://www.flickr.com/photos/97402086@N00/14187670430/
7. Javascript is not a
great language for
the web…
Photo by hajime7 https://www.flickr.com/photos/77798146@N00/3377368881
8. HTML and CSS are designed to be
fault tolerant.
https://adactio.com/jour nal/4272
18. 3MB of blocking JavaScript before
the first word appears on the page!
Photo by bionicteaching https://www.flickr.com/photos/29096601@N00/6057415565
19. This is one big issue we have in the
web community…
• Javascript is too powerfulfor 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
20. 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.
21. 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.
22. </WEB
My goal for today:
let’s learn how to use JavaScript
responsibly and stay up-to-date.
23. The plan…
1. Fix the JavaScript learning
process…
2. Stop catering to undead
browsers
3. Stop breaking the web
4. Use the amazing tools we have
5. Evolve JavaScript itself
25. Back in the days, learning JavaScript
worked a bit like this…
• Look at the source of web sites
using view-source
• Copy and paste the bits that look
like they are responsible for
some things
• Change some numbers around
• Run into errors
• Blame Internet Explorer
26. Today we’re more professional
about this…
• 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 a terrible
language
• For goodmeasure, blame Internet
Explorer
27. The full stack overflow developer
https://www.christianheilmann.com/2015/07/17/the-full-stackoverflow-devel oper/
28. 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.
44. ✘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.
Stop doing that!
45. ✘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.
Keep your helper tools up-to-date
48. • 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).
Our development environment is
incredible!
49. • Editors have linting, build integration,
and some are even written in JavaScript
and run in the browser.
• We share codeon GitHub and help
debug problems using JSFiddle, JSBin
and others…
Our development environment is
incredible!
50. • Open Source and cross platform
• Written in JavaScript
• Includes debugging and linting -
learn your mistakes while you
write code
• Fully Extensible using JavaScript
• GitHub integration
https://code.visualstudio.com/
Visual Studio Code
51. • One hour free test server
• Authenticate with Google,
Facebookor Microsoft
• Keep your codeby forking or
downloading it
https://www.christianheilmann.com/2015/10/27/testing-out-node-and-express-without-a-local-install-or-editor/
Try out Node and Express
52. LIVE DEMO…
Photo by Jo Naylor https://www.flickr.com/photos/11598937@N08/3479161418
Everybody duck!