JavaScriptures 5 - Babel & Webpack

https://github.com/artsy/javascriptures/tree/master/6_babel-webpack

Transcript

1. Babel/Webpack
   Be fruitful, and bundle
   JavaScriptures V
   Chris
   

   View Slide

2. View Slide

3. But first, what is JavaScript?
   

   View Slide

4. View Slide

5. View Slide

6. Then Google Maps happened
   

   View Slide

7. View Slide

8. JavaScript quickly went from being a “toy
   language” to something that was
   understood to be capable of real power
   

   View Slide

9. But there were problems...
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. NodeJS opened up the world of
    JavaScript to a new community
    

    View Slide

16. (But the language had problems)
    

    View Slide

17. View Slide

18. However, server-side JavaScript started
    to be used in all sorts of creative ways
    

    View Slide

19. It started to rewrite itself
    

    View Slide

20. View Slide

21. View Slide

22. CoffeeScript was the spark. It showed
    the world that if you didn’t like the
    language you could change it, and you
    didn’t need the browser vendors to do so
    

    View Slide

23. View Slide

24. View Slide

25. Babel has support for the latest version
    of JavaScript through syntax
    transformers. These plugins allow you to
    use new syntax without waiting for
    browser support
    

    View Slide

26. Before browser vendors implemented
    support for modern JavaScript this was
    essential
    

    View Slide

27. Babel unlocked JavaScript’s potential as
    a language that can be enjoyable to use
    

    View Slide

28. It also created a platform for real-time,
    open-source language development and
    exploration
    

    View Slide

29. View Slide

30. Language proposals are submitted by
    TC39, and prototyped with Babel
    

    View Slide

31. These proposals are then moved in
    stages through the approval process
    

    View Slide

32. View Slide

33. Once a proposal has reached Stage IV
    it is considered stable and will be
    incorporated into the language
    

    View Slide

34. How does this apply to Artsy?
    

    View Slide

35. View Slide

36. Our JavaScript projects incorporate
    many language features, some of
    which are not a part of the official
    JavaScript spec
    

    View Slide

37. View Slide

38. View Slide

39. “JavaScript that Scales” (it’s true)
    

    View Slide

40. View Slide

41. These language features don’t run
    natively in the browser
    

    View Slide

42. They need to be transpiled into
    something that the browser (or the
    server) can understand
    

    View Slide

43. View Slide

44. With JavaScript’s low and high-level
    language features, anything is possible
    

    View Slide

45. View Slide

46. 4. You are expected to expect the
    unexpected every minute, every hour of
    every day and of every night.
    - John C. Lilly
    

    View Slide

47. And things move fast....
    

    View Slide

48. View Slide

49. Things that were previously impossible
    to imagine have become possible, as
    well as common
    

    View Slide

50. WebAssembly (abbreviated Wasm) is a binary instruction format
    for a stack-based virtual machine. Wasm is designed as a portable
    target for compilation of high-level languages like C/C++/Rust,
    enabling deployment on the web for client and server applications.
    

    View Slide

51. JavaScript frameworks can make use of WebAssembly to
    confer massive performance advantages and new features
    while still making functionality easily available to web
    developers.
    

    View Slide

52. But how does one manage this
    outward-spiraling complexity?
    

    View Slide

53. View Slide

54. View Slide

55. Webpack is a Module Bundler that runs
    during development
    

    View Slide

56. It builds a dependency graph of your application
    and combines those assets into one or more
    bundles to be consumed by a target
    

    View Slide

57. View Slide

58. Simply put…
    

    View Slide

59. View Slide

60. View Slide

61. It provides a common set of tools for
    managing application complexity
    

    View Slide

62. View Slide

63. Because of its robust dependency graph
    architecture, powerful developer tooling
    can be built on top of it
    

    View Slide

64. View Slide

65. And the overall developer experience
    highly optimized
    

    View Slide

66. View Slide

67. However, Webpack configuration can be
    complex
    

    View Slide

68. View Slide

69. It is designed for planet scale
    

    View Slide

70. But it can also be simple
    

    View Slide

71. webpack --mode development --output
    dist/bundle.js --watch
    

    View Slide

72. View Slide

73. Webpack 4 can run without configuration
    via the “development” --mode flag
    

    View Slide

74. What does a basic Webpack config
    look like?
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. What about a server?
    

    View Slide

80. View Slide

81. View Slide

82. View Slide

83. Thanks!
    

    View Slide

84. View Slide