Seven ways to be a happier JavaScript developer

A presentation at enterJS in June 2018 in Darmstadt, Germany by Chris Heilmann

Slide 1

Slide 1

Seven ways to be a happier JavaScript developer Chris Heilmann (@codepo8) April 2018

Slide 2

Slide 2

ways to be a happier JavaScript developer ▪ Understanding that JavaScript is not a language ▪ Concentrating on the now ▪ Limiting our development environment ▪ Making it harder to write bad code ▪ Getting to know our tooling ▪ Giving back to others ▪ Muffling the noise

Slide 3

Slide 3

Understanding that JavaScript is not a language…

Slide 4

Slide 4

JavaScript is a lot of things… ▪ Far from perfect ▪ Everywhere ▪ Free to use ▪ Environment independent ▪ Freely documented ▪ Instantly gratifying

Slide 5

Slide 5

JavaScript’s versatility means diverse needs. ▪ Web scripts ▪ WebView based solutions (Electron) ▪ Browser extensions ▪ Web based apps (PWA) ▪ Server-side solutions (Node) ▪ Convertible to binary formats (WebAssembly) ▪ Powering Robots (Nodebots) ▪ Packages (NPM)

Slide 6

Slide 6

JavaScript is much more now than we ever expected… ▪ A standardised language (TC39) ▪ An ecosystem ▪ A community ▪ An opportunity to do a lot with one language ▪ A chance to cause damage (performance, security)

Slide 7

Slide 7

Relax - in a world of options nobody can be an expert in all of them.

Slide 8

Slide 8

Concentrating on the now…

Slide 9

Slide 9

Worries of the past shouldn’t prevent us from creating…

Slide 10

Slide 10

Focusing exclusively on the next cool thing is as stifling and depressing

Slide 11

Slide 11

developer.mozilla.org/en-US

Slide 12

Slide 12

caniuse.com

Slide 13

Slide 13

Limiting our development environment

Slide 14

Slide 14

The web development trinity Editor ▪ Where we code ▪ Where we tweak themes ▪ Where we mix spaces and tabs – like animals Terminal ▪ Where we do version control ▪ Where we run build tasks ▪ Where we deploy ▪ Where we tweak themes ▪ Where we assume everyone runs OSX Browser ▪ Where we debug ▪ Where we check and tweak visual output ▪ Where we audit ▪ Where we annoy the end user with odd log messages.

Slide 15

Slide 15

That is a lot of duplication and multiplication with choice

Slide 16

Slide 16

Tooling is starting to overtake that historically grown trinity.

Slide 17

Slide 17

Good editors consolidate features to avoid context switching.

Slide 18

Slide 18

VS Code (@code) Open Source, Cross-platform Hundreds of extensions Highly theme-able Built-in source control support Built-in terminal Integrates into build processes Written and extensible in TypeScript Straightens and lightens teeth with repeat use ▪ Possibly is good against hair loss ▪ Gluten free, macrobiotic ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ code.visualstudio.com

Slide 19

Slide 19

VS Code (@code) Open Source, Cross-platform Hundreds of extensions Highly theme-able Built-in source control support Built-in terminal Integrates into build processes Written and extensible in TypeScript Straightens and lightens teeth with repeat use ▪ Possibly is good against hair loss ▪ Gluten free, macrobiotic ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ twitter.com/crandycodes/status/983488436756627456 code.visualstudio.com

Slide 20

Slide 20

code.visualstudio.com/updates/v1_22#_node-debugging

Slide 21

Slide 21

smashingmagazine.com/2018/01/visual-studio-code vscodecandothat.com

Slide 22

Slide 22

glitch.com Instead of using your own machine, why not try online before? jsbin.com codepen.io

Slide 23

Slide 23

Making it harder to write bad code.

Slide 24

Slide 24

Applying a stricter ruleset pre-empts mistakes

Slide 25

Slide 25

Linting > Debugging ▪ Find mistakes while you make them ▪ Based on the experience and consensus of many others ▪ Learn from explanations of linting results ▪ Install and configure, or use in-built linting. code.visualstudio.com

Slide 26

Slide 26

Moving from knowing .* to learning by making mistakes

Slide 27

Slide 27

Adding custom linting and validation to your dev and release process. webhint.io

Slide 28

Slide 28

Getting to know our tooling

Slide 29

Slide 29

It is true that our tools have become much more complex.

Slide 30

Slide 30

Knowing them gives you superpowers and insights how to build great solutions

Slide 31

Slide 31

Step one is to stop using console.log() and use breakpoints instead. code.visualstudio.com/Docs/editor/debugging smashingmagazine.com/2018/02/javascript-firefox-debugger/

Slide 32

Slide 32

Giving back to others

Slide 33

Slide 33

Take part in the JavaScript community... ▪ Help document ▪ Help clean up and send pull requests ▪ Publish your own work as open source ▪ Enjoy meetups and events ▪ Help by example, not by telling people what they should do

Slide 34

Slide 34

Muffling the noise…

Slide 35

Slide 35

Not everybody cares about the nuts and bolts and has endless time to invest… twitter.com/headjs_ru/status/955333399564161024

Slide 36

Slide 36

It is easy to get tempted to sell people your experience as “best practice”

Slide 37

Slide 37

Find the largest item in the array…

Slide 38

Slide 38

Once learned, never forgotten…

Slide 39

Slide 39

Loop optimisation

Slide 40

Slide 40

Using native methods instead of “if”…

Slide 41

Slide 41

Looking up array methods..

Slide 42

Slide 42

Embracing new language features…

Slide 43

Slide 43

Which one is the best?

Slide 44

Slide 44

It depends™ ▪ Who is writing the code? ▪ Where does it run? ▪ How clean is the data we deal with? ▪ What horrible old environment needs support? ▪ Who will maintain it? ▪ How likely is it ever to change? ▪ How will it be used?

Slide 45

Slide 45

Validate and triage ▪ Let’s not feel bad if not everything in the JS world excites us ▪ Not everything hot and cool is ready to replace what we are comfortable with. ▪ If it doesn’t make our lives easier, it is OK to not use it – hype moves fast and forgets fast. ▪ Let’s be excited, but also ready to give it a “meh”

Slide 46

Slide 46

Projection isn’t good… ▪ What makes us effective can be very subjective ▪ It makes sense to talk about our success. ▪ It makes less sense trying to force others to do the same ▪ New approaches lead to new happy paths, let’s not discourage people from finding theirs.

Slide 47

Slide 47

Let’s not kid ourselves about the bleeding edge… ▪ The amazing new idea of today very often becomes the problem of tomorrow ▪ Production code moves less fast than we think ▪ Our end users aren’t guinea pigs or canaries ▪ It is the bleeding edge, make sure you have enough blood to give

Slide 48

Slide 48

Let’s make this a great community… ▪ Let’s be the people we’d like to have met when we started ▪ Let’s be kind ▪ Let’s be supportive ▪ Let’s allow people to learn by making mistakes and letting off steam ▪ Let’s not get lost in pointless drama

Slide 49

Slide 49

Thanks! Chris Heilmann @codepo8 Terminal photo by Terminal 5 Insider Editor photo by John Oxley Library Browser photo by Joseph Brent