$30 off During Our Annual Pro Sale. View Details »

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/).

Carsten Sandtner

October 25, 2017
Tweet

More Decks by Carsten Sandtner

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. “ Everything web?

    View Slide

  4. “ why open matters

    View Slide

  5. View Slide


  6. View Slide

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

    View Slide

  8. Standards?
    W3C - ignored

    View Slide

  9. “ We know, what you want!

    View Slide

  10. This
    happened

    View Slide

  11. At the
    end
    Internet Explorer
    won

    View Slide

  12. Internet
    Explorer
    won
    • Development stopped for at
    least five years!

    • Pages were optimised for one
    browser

    • Standards? IE was the
    standard

    View Slide

  13. “ I hate Javascript!

    View Slide

  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
    }

    View Slide

  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

    View Slide

  16. But there was hope.

    View Slide

  17. New browsers were coming

    View Slide

  18. Awaking of
    the new forces

    View Slide

  19. New
    competitors
    • New features: Standards

    • Work together to define
    new standards

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. “ I love Javascript!

    View Slide

  25. This is why OPEN matters!

    View Slide

  26. 2007
    Steve Jobs
    introduced the
    iPhone

    View Slide

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

    View Slide

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

    View Slide

  29. Common
    feature?

    View Slide

  30. Web Applications - from click & response to SPA

    View Slide

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

    View Slide

  32. Javascript
    everywhere

    View Slide

  33. IOT

    View Slide

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

    View Slide

  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

    View Slide

  36. Everything web!

    View Slide

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

    View Slide

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

    View Slide

  39. New challenges for
    Browsers

    View Slide

  40. How Browsers works
    Internet ✨ Magic ✨

    View Slide

  41. DOM/
    Parsing

    Hello Munich!!

    !


    class = main

    src = http://…
    Hello Munich!

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

  45. Firefox
    Quantum

    View Slide

  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/

    View Slide

  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/

    View Slide

  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/

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

  52. Web Developers are in
    charge, too

    View Slide

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

    View Slide

  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

    View Slide

  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!

    View Slide

  56. Recap

    View Slide

  57. Standards are important

    View Slide

  58. Open development is
    important

    View Slide

  59. Web Technologies drive
    more than web pages

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide