Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScriptures 5 - Babel & Webpack
Search
Artsy Open Source
April 13, 2018
Programming
0
340
JavaScriptures 5 - Babel & Webpack
https://github.com/artsy/javascriptures/tree/master/6_babel-webpack
Artsy Open Source
April 13, 2018
Tweet
Share
More Decks by Artsy Open Source
See All by Artsy Open Source
Adding React Native to an Existing App - Artsy x React Native 2018
artsyopensource
0
390
The Artsy Omakase - Artsy x React Native 2018
artsyopensource
1
760
Learning How to Learn - Artsy x React Native
artsyopensource
0
380
JavaScriptures 4.2 - Local State
artsyopensource
0
310
JavaScriptures 3 - Styled Components
artsyopensource
1
300
JavaScriptures 4.1 - Relay
artsyopensource
0
190
JavaScriptures 2 - TypeScript
artsyopensource
0
260
JavaScriptures 1 - React
artsyopensource
0
300
Other Decks in Programming
See All in Programming
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
430
新宿ダンジョンを可視化してみた
satoshi7190
2
260
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.3k
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
140
雑に思考を整理する技術と効能
konifar
60
29k
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Netty Chicago Java User Group 2024-04-17
sullis
0
170
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
RailsConf 2023
tenderlove
4
540
Designing Experiences People Love
moore
136
23k
Become a Pro
speakerdeck
PRO
11
4.5k
Documentation Writing (for coders)
carmenintech
60
3.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Adopting Sorbet at Scale
ufuk
68
8.6k
A Tale of Four Properties
chriscoyier
151
22k
What's new in Ruby 2.0
geeforr
337
31k
Transcript
Babel/Webpack Be fruitful, and bundle JavaScriptures V Chris
None
But first, what is JavaScript?
None
None
Then Google Maps happened
None
JavaScript quickly went from being a “toy language” to something
that was understood to be capable of real power
But there were problems...
None
None
None
None
None
NodeJS opened up the world of JavaScript to a new
community
(But the language had problems)
None
However, server-side JavaScript started to be used in all sorts
of creative ways
It started to rewrite itself
None
None
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
None
None
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
Before browser vendors implemented support for modern JavaScript this was
essential
Babel unlocked JavaScript’s potential as a language that can be
enjoyable to use
It also created a platform for real-time, open-source language development
and exploration
None
Language proposals are submitted by TC39, and prototyped with Babel
These proposals are then moved in stages through the approval
process
None
Once a proposal has reached Stage IV it is considered
stable and will be incorporated into the language
How does this apply to Artsy?
None
Our JavaScript projects incorporate many language features, some of which
are not a part of the official JavaScript spec
None
None
“JavaScript that Scales” (it’s true)
None
These language features don’t run natively in the browser
They need to be transpiled into something that the browser
(or the server) can understand
None
With JavaScript’s low and high-level language features, anything is possible
None
4. You are expected to expect the unexpected every minute,
every hour of every day and of every night. - John C. Lilly
And things move fast....
None
Things that were previously impossible to imagine have become possible,
as well as common
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.
JavaScript frameworks can make use of WebAssembly to confer massive
performance advantages and new features while still making functionality easily available to web developers.
But how does one manage this outward-spiraling complexity?
None
None
Webpack is a Module Bundler that runs during development
It builds a dependency graph of your application and combines
those assets into one or more bundles to be consumed by a target
None
Simply put…
None
None
It provides a common set of tools for managing application
complexity
None
Because of its robust dependency graph architecture, powerful developer tooling
can be built on top of it
None
And the overall developer experience highly optimized
None
However, Webpack configuration can be complex
None
It is designed for planet scale
But it can also be simple
webpack --mode development --output dist/bundle.js --watch
None
Webpack 4 can run without configuration via the “development” --mode
flag
What does a basic Webpack config look like?
None
None
None
None
What about a server?
None
None
None
Thanks!
None