When in doubt, trust the browser

Presented at Fronteers, Dec 12 2019 at De Kien, Kortrijk.

As a front-end developer, you're always confronted with making choices. In this talk I cover the benefits you get for free when considering W3C standards or standard browser API's instead of reaching for the latest framework or library.

This was a test run of a more theoretical talk I want to base on this. Any feedback is very much appreciated.

Transcript

1. When in doubt,
   trust the browser
   

   View Slide

2. I'm Pieter Beulque
   Front-end Developer
   

   View Slide

3. Show what's possible
   without the trusted
   npm install
   Goal of today
   

   View Slide

4. Let's build a tweet embed
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. Let's start!
   

   View Slide

9. Custom Elements
   Defining a re-usable component
   

   View Slide

10. Custom Elements
    Create your own
    Progressive enhancement dream
    Initializes whenever a node is added to the DOM
    Anything is possible!
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. Custom Elements
    There's a very good introduction on
    Google Developers' Web Fundamentals
    

    View Slide

15. Shadow DOM
    King of the castle
    

    View Slide

16. Shadow DOM
    Isolate component's DOM
    Scope component styles
    

    View Slide

17. Shadow DOM
    Isolate component's DOM
    Scope component styles
    
    

    View Slide

18. View Slide

19. 
    
    
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. Also
    Also
    

    View Slide

24. Shadow DOM
    :host
    & ::slotted()
    

    View Slide

25. Shadow DOM
    :host
    

    View Slide

26. Shadow DOM
    
    

    View Slide

27. Shadow DOM
    

    View Slide

28. Shadow DOM
    There's another very good introduction on
    Google Developers' Web Fundamentals
    

    View Slide

29. Browser support
    Both can be polyfilled: github.com/webcomponents/polyfills
    All evergreen browsers
    Edge starting January 2020
    No Internet Explorer
    

    View Slide

30. Use it in production?
    

    View Slide

31. Custom Elements
    Yes, but…
    Have been using it for 3 years
    Has its limitations
    Wouldn't use it for applications
    

    View Slide

32. Shadow DOM
    You could, but…
    Falls short compared to frameworks
    Feels clunky
    

    View Slide

33. My thoughts
    Great to sprinkle Javascript on top of content websites
    More accessible out of the box than a everything-in-JS approach
    Probably run into limits when using for applications
    

    View Slide

34. North star
    Custom Elements as a compile target
    ✨
    Stencil & Svelte already support this.
    

    View Slide

35. Let's move on
    

    View Slide

36. View Slide

37. View Slide

38. Internationalization API
    Intl.RelativeTimeFormat
    

    View Slide

39. Internationalization API
    Format dates, numbers and plurals
    The browser already has all languages
    Your browser knows your user's preferences
    

    View Slide

40. Internationalization API
    new Intl.RelativeTimeFormat(
    'en',
    ).format(
    value,
    unit
    )
    

    View Slide

41. Internationalization API
    new Intl.RelativeTimeFormat(
    'en', // Any valid locale
    ).format(
    value, // A number, positive = future, negative = past
    unit // 'months', 'days', 'years', …
    )
    

    View Slide

42. Internationalization API
    new Intl.RelativeTimeFormat('en').format(1, 'day')
    in 1 day
    new Intl.RelativeTimeFormat('nl').format(-1, 'year')
    1 jaar geleden
    new Intl.RelativeTimeFormat('fr').format(0, 'month')
    dans 0 mois
    

    View Slide

43. That's not very human
    new Intl.RelativeTimeFormat('en').format(1, 'day')
    in 1 day
    new Intl.RelativeTimeFormat('fr').format(0, 'month')
    dans 0 mois
    

    View Slide

44. That's not very human
    new Intl.RelativeTimeFormat(
    'en', { numeric: 'auto' }
    ).format(1, 'day')
    tomorrow
    ce mois-ci
    new Intl.RelativeTimeFormat(
    'fr', { numeric: 'auto' }
    ).format(0, 'month')
    

    View Slide

45. Browser support
    There's a polyfill from Polyfill.io: github.com/andyearnshaw/Intl.js/
    Chrome, Firefox and Opera
    No Safari
    No Edge or Internet Explorer
    

    View Slide

46. Use it in production?
    

    View Slide

47. Internalization API
    Definitely!
    Save bandwidth on translation files
    All edge cases handled automatically
    Locale 'default' uses your user's preferences
    

    View Slide

48. 1 + 1 = 2
    Let's recap
    

    View Slide

49. Let's build a reusable, standalone component
    that turns a time into a human-readable, relative time
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. Define attributes to
    watch for changes
    Run the formatter
    on every change
    

    View Slide

57. Define attributes to
    watch for changes
    Run the formatter
    on every change
    

    View Slide

58. Zero dependencies.
    Self-contained. Re-usable.
    20 LOC.
    

    View Slide

59. OK, I cheated a little.
    The code that calculates the date difference
    adds another 30 lines.
    

    View Slide

60. All in a single file?
    

    View Slide

61. ES Modules
    Do you really need a bundler?
    

    View Slide

62. View Slide

63. View Slide

64. The browser knows what to do.
    

    View Slide

65. Browser support
    Everywhere but IE & UC Browser
    Serve bundle as a fallback, thanks to nomodule
    

    View Slide

66. View Slide

67. Progressive Enhancement is beautiful
    And browsers are amazingly good at it.
    

    View Slide

68. Use it in production?
    

    View Slide

69. ES Modules
    Yes, with caution
    Definitely needs HTTP/2
    No problem for small amount of modules
    Watch out for huge dependency trees
    

    View Slide

70. North star
    ES Modules as a bundling target
    ✨
    Rollup & Parcel already support this.
    

    View Slide

71. One more thing
    

    View Slide

72. Built-in lazy loading
    Unofficial, Chrome-only
    
    

    View Slide

73. So remember…
    

    View Slide

74. When in doubt,
    trust the browser
    

    View Slide

75. Thank you!
    Questions?
    @pieterbeulque
    

    View Slide