Slide 1

Slide 1 text

Everything Web and why OPEN matters Carsten Sandtner / @casarock / Munich 2017

Slide 2

Slide 2 text

Hello! I am Carsten! @casarock at Twitter Technical Director at mediaman GmbH RheinMainJS Co-Orga moz://a TechSpeaker

Slide 3

Slide 3 text

“ Everything web?

Slide 4

Slide 4 text

“ why open matters

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

≠

Slide 7

Slide 7 text

Arms race of features! Browser Wars This awesome Lego Idea is © by MTTBSSTT https://ideas.lego.com/projects/859b4a49-324d-4671-b8f0-d9b1eebad63d

Slide 8

Slide 8 text

Standards? W3C - ignored

Slide 9

Slide 9 text

“ We know, what you want!

Slide 10

Slide 10 text

This happened

Slide 11

Slide 11 text

At the end Internet Explorer won

Slide 12

Slide 12 text

Internet Explorer won • Development stopped for at least five years!  • Pages were optimised for one browser  • Standards? IE was the standard

Slide 13

Slide 13 text

“ I hate Javascript!

Slide 14

Slide 14 text

Browser detection function lib_bwcheck() { this.ver = navigator.appVersion this.agent = navigator.userAgent this.dom = document.getElementById ? 1 : 0 this.opera5 = this.agent.indexOf("Opera 5") > -1 this.ie5 = (this.ver.indexOf("MSIE 5") > -1 !&& this.dom !&& !this.opera5) ? 1 : 0; this.ie6 = (this.ver.indexOf("MSIE 6") > -1 !&& this.dom !&& !this.opera5) ? 1 : 0; this.ie4 = (document.all !&& !this.dom !&& ! this.opera5) ? 1 : 0; this.ie = this.ie4 !|| this.ie5 !|| this.ie6 this.mac = this.agent.indexOf("Mac") > -1 this.ns6 = (this.dom !&& parseInt(this.ver) !>= 5) ? 1 : 0; this.ns4 = (document.layers !&& !this.dom) ? 1 : 0; this.bw = (this.ie6 !|| this.ie5 !|| this.ie4 !|| this.ns4 !|| this.ns6 !|| this.opera5) return this }

Slide 15

Slide 15 text

User Agent Strings !// grandmother of all! Mosaic/0.9 !// Netscapes first! Mozilla/2.02 [fr] (WinNT; I) !// IE4! Mozilla/4.0 (compatible; MSIE 4.0; Windows 98) !// And now? Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ 58.0.3029.110 Safari/537.36

Slide 16

Slide 16 text

But there was hope.

Slide 17

Slide 17 text

New browsers were coming

Slide 18

Slide 18 text

Awaking of the new forces

Slide 19

Slide 19 text

New competitors • New features: Standards  • Work together to define new standards

Slide 20

Slide 20 text

“ There is not only one tool for the web.

Slide 21

Slide 21 text

But competition? • Add-ons! • Performance! • Security! • Release Cycles! • Developer Tools!

Slide 22

Slide 22 text

Developing new features & standards • Vendors started to propose new standards • Working together on new standards • Implement standards, not proprietary technology

Slide 23

Slide 23 text

Developing new features & standards Examples: • WebVR • Service Workers • EcmaScript • …

Slide 24

Slide 24 text

“ I love Javascript!

Slide 25

Slide 25 text

This is why OPEN matters!

Slide 26

Slide 26 text

2007 Steve Jobs introduced the iPhone

Slide 27

Slide 27 text

Reality - App Store - closed system. - Same for Android and Windows Phone

Slide 28

Slide 28 text

The web in your hand. Every time. Everywhere. mobile revolution © http://www.jeshoots.com/

Slide 29

Slide 29 text

Common feature?

Slide 30

Slide 30 text

Web Applications - from click & response to SPA

Slide 31

Slide 31 text

Javascript goes Backend NodeJS © https://pixabay.com/en/technology-servers-server-1587673/

Slide 32

Slide 32 text

Javascript everywhere

Slide 33

Slide 33 text

IOT

Slide 34

Slide 34 text

“ The “Web of Things” (WoT) is the idea of taking the lessons learned from the World Wide Web and applying them to IoT.

Slide 35

Slide 35 text

“ Our hope is that this pragmatic approach based on proven web technologies like HTTP, REST, JSON, WebSockets and TLS will help turn web developers into WoT developers who can help realize our vision of a decentralized Internet of Things

Slide 36

Slide 36 text

Everything web!

Slide 37

Slide 37 text

New APIs and Technologies • PWA Progressive Web Apps • Service Workers • Push notifications • Web Bluetooth • Web Assembly • … and many more

Slide 38

Slide 38 text

Open Development © https://pixabay.com/en/walla-walla-landscape-mountains-2413192/

Slide 39

Slide 39 text

New challenges for Browsers

Slide 40

Slide 40 text

How Browsers works Internet ✨ Magic ✨

Slide 41

Slide 41 text

DOM/ Parsing

Hello Munich!!

  class = main   src = http://… Hello Munich!

Slide 42

Slide 42 text

Styling section { font-size: 15px; color: #ccc; } h1 { font-size: 2em; } .main{ font-size: 4em; } img { width: 100%; } https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/

Slide 43

Slide 43 text

Layout https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/

Slide 44

Slide 44 text

Modern Web Applications https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/

Slide 45

Slide 45 text

Firefox Quantum

Slide 46

Slide 46 text

Replacing Style Engine https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/ Illustrations © by Lin Clark - https://code-cartoons.com/

Slide 47

Slide 47 text

Styling until now Illustrations © by Lin Clark - https://code-cartoons.com/ https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/

Slide 48

Slide 48 text

Styling in Quantum CSS Illustrations © by Lin Clark - https://code-cartoons.com/ https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/

Slide 49

Slide 49 text

Quantum CSS Illustrations © by Lin Clark - https://code-cartoons.com/ https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/

Slide 50

Slide 50 text

There is more to come • Quantum Dom • Quantum Compositor • Quantum Renderer • and more optimizations!

Slide 51

Slide 51 text

“ A browser engine has to deal with more complicated tasks than in 2007 or even earlier

Slide 52

Slide 52 text

Web Developers are in charge, too

Slide 53

Slide 53 text

“ How can I help making the web a more better place?

Slide 54

Slide 54 text

Make the web a better place! • I’m a Developer • Keep users in mind! • Profile your page! • Please keep cross browser testing! • https://medium.com/mozilla-tech/keep-the-web-open-with-cross-browser-testing- e3006662a042 • I’m not a Developer! • Report pages which have problems in a specific browser • https://webcompat.com

Slide 55

Slide 55 text

Make the web a better place! • For everyone • Report browser issues! • https://dev.chromium.org/for-testers/bug-reporting-guidelines • https://developer.mozilla.org/en-US/docs/Mozilla/QA/ Bug_writing_guidelines • https://webkit.org/reporting-bugs/ • https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/ • Beta Test new Releases and report issues!