JavaScriptures 5 - Babel & Webpack

Transcript

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

    community

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

    essential

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

    process
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

    complexity
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

    flag

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