import { Head } from 'mdx-deck' import { FullScreenCode, Split } from 'mdx-deck/layouts' import { CodeSurfer } from "mdx-deck-code-surfer" import vsDark from "prism-react-renderer/themes/vsDark"
import Slab from './components/Slab' import Layouts from './components/Layouts' import Todo from './components/Todo' import Video from './components/Video' import Tweet from './components/Tweet'
export { default as theme } from './theme'
<title>Frontend Application Bundles: The Docker of Frontend</title>@glenmaddern
Only got 10 minutes.
Thank the organisers anyway.
export default Layouts.Gradient
I’m working on a product called Linc
I'm here all weekend and some of next week
export default Layouts.Light
I'm not an expert
But it doesn't matter, FABs & Docker are similar in terms of intent, in terms of what they _enable_
If you don't know Docker too much don't worry either
I’ve also only got 10 minutes, focusing on WHY, talk to me later
export default Layouts.Light
If someone tries to explain Docker, they usually start with the story of Containerization.
export default Layouts.Light
Basically, the story goes that the most important invention of the 20th century was a box. This box.
Before the box, stuff shipped one-by-one
After, ship 40 feet of cargo at once.
"Revolutionary", the story goes
export default Layouts.Light
Same story for Docker, logo is a shipping container on a... whale for some reason.
export default Layouts.Light
Now you don't care what software is running, all your infrastructure can just start caring about these containers, and it's a "revoltionary idea"
export default Layouts.Image( require('file-loader!./assets/dwight.jpg') )
export default Layouts.Image( require('file-loader!./assets/dwight.jpg') )
Good boxes, too!
We just called them Virtual Machines. And lots of companies like Heroku or AWS or VMWare were doing really clever things with their platforms, lots of the same things you can do these days, but Docker was different.
They were really successful, they changed their respective worlds.
I don't have time to go into it
Talk about how both intermodal containers and docker match these.
ICs were well-designed, but the crucial aspect was that the patents were given away to industry, effectively making them open source, so anyone can use them. They were designed to work with anyone's trucks, anyone's ships, and they came just at the right time as the world was changing after world war 2.
Docker was much more restrictive, the images were dozens or hundreds of megabytes instead of multiple gigs, but the big thing was that it ran everywhere, you weren't locked into any particular hosting platform to make use of this new architecture.
I'm going to come back to platform-agnostic at the end but I've been here talking X minutes so I think it's probably time to talk about FABs themselves, hey?
I don't have time to go into much detail, obviously the open-source bit is somewhat of a given, I'll just focus on the first one for the moment.
export default Layouts.Image( require('file-loader!./assets/keynote/keynote.001.png') )
export default Layouts.Image( require('file-loader!./assets/keynote/keynote.002.png') )
export default Layouts.Image( require('file-loader!./assets/keynote/keynote.001.png') )
https://github.com/fab-spec/fab-nextjs-example
export default Layouts.Light
https://github.com/fab-spec/fab
export default Layouts.Code
@fab/static - compile a FAB from a static dir
@fab/cra - zero-config version of @fab/static for CRA
@fab/nextjs - compile a NextJS v8 project
@fab/afterjs - compile a AfterJS project
@fab/compile - used internally by the above
@fab/serve - run a FAB in a NodeJS express server
@fab/cf-workers - deploy FAB to a Cloudflare Worker
@fab/lambda-edge - deploy FAB to Lambda@Edge
@fab/now-sh - deploy FAB to Now.sh
@fab/heroku – deploy FAB to Heroku
export default Layouts.Gradient
- Build on each push to Github ✅
- Preview links per commit ✅
- Instant releases on PR merge ✅
- Release to any FAB environment ✅
- Blue/green deployments
- Canary deployments
- A/B testing between FABs
- Performance testing each commit
- Visual regression testing
- Parallel acceptance testing
- Smoke testing against production backends