Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScriptures 5 - Babel & Webpack

JavaScriptures 5 - Babel & Webpack


Artsy Open Source

April 13, 2018


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

  2. None
  3. But first, what is JavaScript?

  4. None
  5. None
  6. Then Google Maps happened

  7. None
  8. JavaScript quickly went from being a “toy language” to something

    that was understood to be capable of real power
  9. But there were problems...

  10. None
  11. None
  12. None
  13. None
  14. None
  15. NodeJS opened up the world of JavaScript to a new

  16. (But the language had problems)

  17. None
  18. However, server-side JavaScript started to be used in all sorts

    of creative ways
  19. It started to rewrite itself

  20. None
  21. None
  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
  23. None
  24. None
  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
  26. Before browser vendors implemented support for modern JavaScript this was

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

    enjoyable to use
  28. It also created a platform for real-time, open-source language development

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

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

  32. None
  33. Once a proposal has reached Stage IV it is considered

    stable and will be incorporated into the language
  34. How does this apply to Artsy?

  35. None
  36. Our JavaScript projects incorporate many language features, some of which

    are not a part of the official JavaScript spec
  37. None
  38. None
  39. “JavaScript that Scales” (it’s true)

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

  42. They need to be transpiled into something that the browser

    (or the server) can understand
  43. None
  44. With JavaScript’s low and high-level language features, anything is possible

  45. None
  46. 4. You are expected to expect the unexpected every minute,

    every hour of every day and of every night. - John C. Lilly
  47. And things move fast....

  48. None
  49. Things that were previously impossible to imagine have become possible,

    as well as common
  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.
  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.
  52. But how does one manage this outward-spiraling complexity?

  53. None
  54. None
  55. Webpack is a Module Bundler that runs during development

  56. It builds a dependency graph of your application and combines

    those assets into one or more bundles to be consumed by a target
  57. None
  58. Simply put…

  59. None
  60. None
  61. It provides a common set of tools for managing application

  62. None
  63. Because of its robust dependency graph architecture, powerful developer tooling

    can be built on top of it
  64. None
  65. And the overall developer experience highly optimized

  66. None
  67. However, Webpack configuration can be complex

  68. None
  69. It is designed for planet scale

  70. But it can also be simple

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

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

  74. What does a basic Webpack config look like?

  75. None
  76. None
  77. None
  78. None
  79. What about a server?

  80. None
  81. None
  82. None
  83. Thanks!

  84. None