00:00
current
Let me tell you
- 📝 a story about missing features
- 📦 a story about JavaScript modules
- ⚡ a story about Vite
- 🖼️ a story about stories
- 🔮 a story about future
next
Hello, my name is Vojta Miksu, I work at Uber as web infrastructure engineer and today I will tell you about a new open source tool that supercharges developing and testing your React components.
Let me tell you
- 📝 a story about missing features
- 📦 a story about JavaScript modules
- ⚡ a story about Vite
- 🖼️ a story about stories
- 🔮 a story about future
2
JavaScript was created for browsers in 1995
in 10 days
3
Loading JS
<script src="analytics.js"></script> <script src="jquery-3.6.0.min.js"></script> <script src="some-jquery-plugin.js"></script> <script src="load-it-first.js"></script> <script src="depends-on-the-plugini.js"></script> <script src="legacy-something.js"></script><script src="analytics.js"></script> <script src="jquery-3.6.0.min.js"></script> <script src="some-jquery-plugin.js"></script> <script src="load-it-first.js"></script> <script src="depends-on-the-plugini.js"></script> <script src="legacy-something.js"></script>
4
- 🔀 The order matters
- 💣 Globals collisions
- 💔 Breaking code into files
- 😔 Dead code elimination
5
6
CommonJS
var $ = require("jquery"); module.exports = "not bad";var $ = require("jquery"); module.exports = "not bad";
7
- ✨ Modularization
- 📦 NPM
- 🚀 Dynamic
- 📂 __dirname
- 🛑 Synchronous
- 💔 ECMA
8
Webpack
9
JavaScript Modules
import $ from 'jquery'; export default function yes(){ return "Finally!"; }import $ from 'jquery'; export default function yes(){ return "Finally!"; }
10
Loading
<script type="module" src="entry.js"></script><script type="module" src="entry.js"></script>
11
- ⏳ Asynchronous
- 🚀 Dynamic imports
- 🌲 Tree shaking
- 👐 Supported everywhere
- ❤️ ECMA
- ⚠️ Interop with CJS
12
Vite
- 💡 Instant startup
- 📦 Serves JS modules
- ⚡️ ESBuild
- 🔩 Rollup plugins
- 🛠️ TypeScript, JSX, CSS
13
14
15
16
Ladle
- 🚀 Released spring 2022
- ⭐ 1700+ GitHub stars
- 🙏 20+ Contributors
- 💬 160+ Discord members
- 🌐 ladle.dev
- 👩💻 github.com/tajo/ladle
17
What is next?
- ✨ Modules everywhere
- 📦 Simpler tooling
- 🏋️♂️ Browsers doing more
- 🚀 Rust & Go for tooling
- 🏃♀️ Node, Deno, Bun
- ⚡️ Super-fast DX
18
Ladle.dev
19