Everything web and why open matters

Everything web and why open matters

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

B1fa8b2208e7d7cc68da7fbb519dbc96?s=128

Carsten Sandtner

October 25, 2017
Tweet

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

  5. None
  6. Arms race of features! Browser Wars This awesome Lego Idea

    is © by MTTBSSTT https://ideas.lego.com/projects/859b4a49-324d-4671-b8f0-d9b1eebad63d
  7. Standards? W3C - ignored

  8. “ We know, what you want!

  9. This happened

  10. At the end Internet Explorer won

  11. Internet Explorer won • Development stopped for at least five

    years!
 • Pages were optimised for one browser
 • Standards? IE was the standard
  12. “ I hate Javascript!

  13. 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 }
  14. 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
  15. But there was hope.

  16. New browsers were coming

  17. Awaking of the new forces

  18. New competitors • New features: Standards
 • Work together to

    define new standards
  19. “ There is not only one tool for the web.

  20. But competition? • Add-ons! • Performance! • Security! • Release

    Cycles! • Developer Tools!
  21. Developing new features & standards • Vendors started to propose

    new standards • Working together on new standards • Implement standards, not proprietary technology
  22. Developing new features & standards Examples: • WebVR • Service

    Workers • EcmaScript • …
  23. “ I love Javascript!

  24. This is why OPEN matters!

  25. 2007 Steve Jobs introduced the iPhone

  26. Reality - App Store - closed system. - Same for

    Android and Windows Phone
  27. The web in your hand. Every time. Everywhere. mobile revolution

    © http://www.jeshoots.com/
  28. Common feature?

  29. Web Applications - from click & response to SPA

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

  31. Javascript everywhere

  32. IOT

  33. “ The “Web of Things” (WoT) is the idea of

    taking the lessons learned from the World Wide Web and applying them to IoT.
  34. “ 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
  35. Everything web!

  36. New APIs and Technologies • PWA Progressive Web Apps •

    Service Workers • Push notifications • Web Bluetooth • Web Assembly • … and many more
  37. Open Development © https://pixabay.com/en/walla-walla-landscape-mountains-2413192/

  38. New challenges for Browsers

  39. How Browsers works Internet ✨ Magic ✨

  40. 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!
  41. 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/
  42. Layout https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/

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

  44. Firefox Quantum

  45. 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/
  46. 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/
  47. 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/
  48. 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. There is more to come • Quantum Dom • Quantum

    Compositor • Quantum Renderer • and more optimizations!
  50. “ A browser engine has to deal with more complicated

    tasks than in 2007 or even earlier
  51. Web Developers are in charge, too

  52. “ How can I help making the web a more

    better place?
  53. 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
  54. 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!
  55. Recap

  56. Standards are important

  57. Open development is important

  58. Web Technologies drive more than web pages

  59. YOU could help making the web a better place!

  60. “ There is not only one tool for the web.

  61. Thank you! Twitter: @casarock https://casa-rock.de