Everything web and why open matters

My Slides of my Keynote at IJS 2017 in Munich (https://javascript-conference.com/).

Transcript

1. Everything Web and why OPEN matters Carsten Sandtner / @casarock / Munich 2017
2. Hello! I am Carsten! @casarock at Twitter Technical Director at mediaman GmbH RheinMainJS Co-Orga moz://a TechSpeaker
3. “ Everything web?
4. “ why open matters
6. ≠
7. Arms race of features! Browser Wars This awesome Lego Idea is © by MTTBSSTT https://ideas.lego.com/projects/859b4a49-324d-4671-b8f0-d9b1eebad63d
8. Standards? W3C - ignored
9. “ We know, what you want!
10. This happened
11. At the end Internet Explorer won
12. Internet Explorer won • Development stopped for at least five years!
 • Pages were optimised for one browser
 • Standards? IE was the standard
13. “ I hate Javascript!
14. 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 }
15. 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
16. But there was hope.
17. New browsers were coming
18. Awaking of the new forces
19. New competitors • New features: Standards
 • Work together to define new standards
20. “ There is not only one tool for the web.
21. But competition? • Add-ons! • Performance! • Security! • Release Cycles! • Developer Tools!
22. Developing new features & standards • Vendors started to propose new standards • Working together on new standards • Implement standards, not proprietary technology
23. Developing new features & standards Examples: • WebVR • Service Workers • EcmaScript • …
24. “ I love Javascript!
25. This is why OPEN matters!
26. 2007 Steve Jobs introduced the iPhone
27. Reality - App Store - closed system. - Same for Android and Windows Phone
28. The web in your hand. Every time. Everywhere. mobile revolution © http://www.jeshoots.com/
29. Common feature?
30. Web Applications - from click & response to SPA
31. Javascript goes Backend NodeJS © https://pixabay.com/en/technology-servers-server-1587673/
32. Javascript everywhere
33. IOT
34. “ The “Web of Things” (WoT) is the idea of taking the lessons learned from the World Wide Web and applying them to IoT.
35. “ 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
36. Everything web!
37. New APIs and Technologies • PWA Progressive Web Apps • Service Workers • Push notifications • Web Bluetooth • Web Assembly • … and many more
38. Open Development © https://pixabay.com/en/walla-walla-landscape-mountains-2413192/
39. New challenges for Browsers
40. How Browsers works Internet ✨ Magic ✨
41. DOM/ Parsing <section> <h1 class=„main">Hello Munich!!</h1> <img src="http:!//some.url/image.png"> !</section> <section> <h1>
 class = main <img>
 src = http://… Hello Munich!
42. 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/
43. Layout https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/
44. Modern Web Applications https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/
45. Firefox Quantum
46. 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/
47. 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/
48. 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/
49. 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/
50. There is more to come • Quantum Dom • Quantum Compositor • Quantum Renderer • and more optimizations!
51. “ A browser engine has to deal with more complicated tasks than in 2007 or even earlier
52. Web Developers are in charge, too
53. “ How can I help making the web a more better place?
54. 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
55. 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!
56. Recap
57. Standards are important
58. Open development is important
59. Web Technologies drive more than web pages
60. YOU could help making the web a better place!
61. “ There is not only one tool for the web.
62. Thank you! Twitter: @casarock https://casa-rock.de