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
   

   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