Develop, Debug, Learn? A time to re-think our tooling.

A presentation at DotJS in December 2019 in Paris, France by Chris Heilmann

Slide 1

Develop, Debug, Learn? A time to re-think our tooling.

Slide 2

I remember when this was all fields…

Slide 3

And then we added labels…

Slide 4

JavaScript, DHTML, Unobtrusive JavaScript, Flash/Air/Flex, DOM Scripting, AJAX, Comet…

Slide 5

A logical order…

Learn Develop Debug

Slide 6

Then we added abstractions…

Slide 7

And build processes…

Slide 8

Alas… Learn Depend Develop Debug

Slide 9

Caught in the rush…

https://pxhere.com/en/photo/489670

Slide 10

people.focus()

Slide 11

This is not about us. This is about our tech legacy.

Slide 12

Filling the needs - musts

Availability Accessibility Security Mutability

Slide 13

Adding quality - should

Enhanced performance Extended availability Customisabilty

Slide 14

Creating delight - want

Making full use of the platform in a safe manner Predict usage and prevent simple mistakes

Slide 15

developers === people

Slide 16

Demand overload!

Performance Security Accessibility Interoperability App-readiness Maintenance Automation Frameworks Libraries CLI/Tool customisation https://pxhere.com/en/photo/1554913

Slide 17

We work on faith…

🦄

Slide 18

Missed opportunities

https://pxhere.com/en/photo/630291

Slide 19

A tale of fixing a typo…

Slide 20

We have amazing tech, and yet nobody is happy.

Slide 21

The full stackoverflow developer.

Slide 22

What went wrong?

https://pxhere.com/en/photo/977180

Slide 23

Slide 24

Context switching is mentally exhausting – really!

Slide 25

Rethinking tooling… Prevent us from doing things wrong instead of patching up what we created.

Slide 26

A more natural approach…

Develop Learn Debug

Slide 27

Holistic developer tools: Lightweight, preconfigured and open to feedback and contribution.

Slide 28

Two sides to our stack

Editor Browser (Developer Tools) Docs(MDN / CanIUse…)

Slide 29

This is powerful and flexible.

Slide 30

Problem: You can’t know everything

Slide 31

In-context documentation and linting – learn while you code.

Slide 32

aka.ms/webhint4code

Slide 33

Slide 34

Slide 35

Slide 36

Problem: Context switching is tiring

Slide 37

Editing in elements

aka.ms/elements4code

Slide 38

Wild idea: Open source code is a resource

Slide 39

aka-ms/ai-autocomplete

Slide 40

Sorry - I have no easy answers.

Slide 41

But I know that an open mind, open ears and open source can fix this.

Slide 42

Automation is happening everywhere.

Slide 43

This is a good time to be open to make it easy to become a developer.

Slide 44

This is your world to build.

Editor Browser Docs

Slide 45

Merci beaucoup! Chris Heilmann

aka.ms/workwithchris @codepo8 @edgedevtools @msedgedev