The new browser space

The new browser space 2/6/20 Chris Heilmann - codepo8 1

All the links: aka.ms/berlin0220 2/11/20 Chris Heilmann - codepo8 2

$ whoami 2/6/20 § Chris Heilmann @codepo8 – he/him/his § Principal Program Manager Microsoft Developer Experience (VSCode, Devtools…) § W3C Member § 20 years web developer § eToys, Agilisys, Yahoo, Mozilla… § Wrote 3 books, contributed to 10(?)… § Blogged since 2004, loud on Twitter Chris Heilmann - codepo8 3

I’ve been working on a lot of things… Web Sites 2/6/20 eCommerce templates Portals Developer Products Browser Developer Tools Chris Heilmann - codepo8 4

What is a browser? 2/6/20 Chris Heilmann - codepo8 5

What is a browser? § Gateway to the internet § Displays web content § The last resort app to use on a phone? 2/6/20 Chris Heilmann - codepo8 6

Browsers for end users 2/6/20 Chris Heilmann - codepo8 7

Browsers for end users § Firewall for annoying/dangerous web content (Ad Blockers, Tracking Protection, Malware Filters) § High performance media playback solution § Record keeper (browsing history) § Convenience method (autofill) § Online identity keeper 2/11/20 § Conversion tool Chris Heilmann - codepo8 8

Browsers for developers 2/6/20 Chris Heilmann - codepo8 9

Browsers for developers § Consumption and creation platform § App platform (Progressive Web Apps, Electron…) § Test platform (Automation with Puppeteer / Playwright) § Preview of technology of the web to come (Beta, Canary, Developer builds, flags, origin trials) 2/11/20 Chris Heilmann - codepo8 10

Spoilt for choice (Desktop) 2/11/20 Chris Heilmann - codepo8 11

No way to predict (mobile) 2/11/20 Chris Heilmann - codepo8 12

What are web standards? 2/11/20 Chris Heilmann - codepo8 13

Why do we need web standards? § Predictability of code outcome § Prevention of monopolies § Quality control – if your code validates the issue must be somewhere else § Maintainability, backwards compatibility and future readiness. 2/11/20 Chris Heilmann - codepo8 14

Web standards are an agreement § They used to be pretty academic § Nowadays they are informed by use and needs of developers and users collected by browser makers and developers § Discussions happen in the open and you are welcome to join 2/11/20 Chris Heilmann - codepo8 15

§ It is hard to imagine a world without the world wide web § Web technologies are standardised and browser differences are negligible The web is a roaring success… 2/6/20 § Open source has matured from a niche to the technology that runs the web § Documentation is plentiful, free and interactive Chris Heilmann - codepo8 16

§ Blatant lack of accessibility § Security problems So, why is it all kind of a mess? 2/6/20 § Performance issues § A need for blockers to keep the web safe and a lot less annoying Chris Heilmann - codepo8 17

Different users, different needs 2/6/20 Chris Heilmann - codepo8 18

§ To different users, a browser is § something they can’t control Somehow bitter pills to swallow 2/6/20 § something they cherish and highly customize § irrelevant, as all of them work OK enough § nothing worth changing their habits for § Security and privacy aren’t things that people control, but trust in the platform to do for them Chris Heilmann - codepo8 19

Different developers, different needs 2/6/20 Chris Heilmann - codepo8 20

§ The caring developer is a tiny fraction of the market § For many, this is a job to make a living Somehow bitter pills to swallow (2) 2/6/20 § New developers don’t find an empathic, open world, but an avalanche of choice and opinions § Satisfying developer needs has no direct correlation to creating better user products Chris Heilmann - codepo8 21

§ Browsers can’t break the web – their forgiveness knows no bounds Why learn the basics? 2/6/20 § If it works, why bother learning why? § If it doesn’t work, there’s ample of resources to learn quick fixes. Chris Heilmann - codepo8 22

§ Learning “the web” isn’t a desirable skill Abstraction attraction 2/6/20 § Instead, abstractions get you eyeballs on job boards § Abstractions promise faster turnaround and great products – big companies use them! Chris Heilmann - codepo8 23

§ Constant change in the developer space is a double-edged sword Tech innovation isn’t the answer 2/6/20 § We empower a small group of highly motivated people at the cost of overwhelming others Chris Heilmann - codepo8 24

Focusing on delivery 2/6/20 Chris Heilmann - codepo8 25

§ Availability must Filling the needs 2/6/20 § Accessibility § Security § Mutability to user needs Chris Heilmann - codepo8 26

should must Adding quality 2/6/20 § Enhanced performance § Extended availability (offline) § Customisability Chris Heilmann - codepo8 27

want should § Make full use of the platform must Creating delight 2/6/20 § Predict use cases and prevent simple mistakes § Offer extended functionality Chris Heilmann - codepo8 28

§ Browser developer tools § Editors, extensions and themes § Terminals and their configuration We <3 tools! 2/6/20 § Deployment and optimization toolchains § Abstractions, Components and libraries Chris Heilmann - codepo8 29

§ We overwhelm people who want to start with the web – or just want to do their job It is all a bit much… 2/6/20 § By demanding people to set up complex dev environments we inhibit diverse contribution Chris Heilmann - codepo8 30

Tools to help simplify webdev 2/6/20 Chris Heilmann - codepo8 31

§ JavaScript on the server § Enables a highly customisable web infrastructure (servers, build tools…) Node: the glue 2/6/20 § Elevated JavaScript from “how does browser $x break” to a solution for all kind of web tasks Chris Heilmann - codepo8 32

§ Open Source § Multi Platform Chromium: the engine 2/6/20 § Powers various browsers and App engines (Electron) § Can be automated and scripted (Puppeteer, Playwright) Chris Heilmann - codepo8 33

§ Open Source § Multi Platform § Extensible / Customisable Visual Studio Code: the “hackable” editor § Based on Electron/Chromium § Includes Git version control § Has built-in terminal § Lightweight, code focused 2/6/20 Chris Heilmann - codepo8 34

§ Testing tool to check web projects for: § Accessibility issues § Performance problems § App readiness § Compatibility with standards Webhint: testing and best practices § Common pitfalls to avoid § Security issues § Online service (webhint.io) or node package to integrate in other tools § Highly customisable 2/6/20 Chris Heilmann - codepo8 35

• Show problems with your code while you write it… 2/6/20 aka.ms/webhint4code Chris Heilmann - codepo8 36

2/6/20 Chris Heilmann - codepo8 37

• • Test your apps in the browser… 2/6/20 aka.ms/webhint4edge aka.ms/webhint4firefox aka.ms/webhint4chrome Chris Heilmann - codepo8 38

• Add automated testing to your build process… 2/6/20 aka.ms/webhint4node Chris Heilmann - codepo8 39

§ Edge/Chromium developer tools inside VS Code Elements for Code § No need to switch to the browser to try a few things out § No need to replicate the same functionality in both places aka.ms/elements4code 2/11/20 Chris Heilmann - codepo8 40

2/11/20 Chris Heilmann - codepo8 41

What’s next? 2/6/20 Chris Heilmann - codepo8 42

https://aka.ms/browsers 2/11/20 Chris Heilmann - codepo8 43

What’s missing on the web platform? webwewant.fyi 2/6/20 Chris Heilmann - codepo8 44

In summary… § The web is a diverse place § We have a chance to make it easier for everyone to create quality products for all end users § We have open source platforms with open communication channels that power the web § We accumulated a lot of knowledge, why not add it to our tools to teach the creators of the web in context? 2/6/20 Chris Heilmann - codepo8 45

Thanks – your voice matters! Chris Heilmann @codepo8 @EdgeDevTools christianheilmann.com Click the feedback in Edge developer tools! 2/11/20 Chris Heilmann - codepo8 46