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
Tweet

More Decks by Artsy Open Source

Other Decks in Programming

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