The New Stack
Chris Bach & Matt Biilmann, Netlify 2016
1
Slide 2
Slide 2 text
The Web Dev Toolchain Disrupted
• Modern Build Tools
• Modern Browsers
• Modern APIs
• CDN Hosting
2
Slide 3
Slide 3 text
Push your web-app or site to netlify.
- the modern day platform that developers use
to manage and publish their content online.
3
Slide 4
Slide 4 text
Butterfly
Butterfly
Effect
In chaos theory, the butterfly effect
is the sensitive dependence on
initial conditions in which a small
change in one state of a
deterministic nonlinear system
can result in large differences in a
later state.
4
Slide 5
Slide 5 text
"I'm writing some scripts to try to track things a whole lot faster."
Thu Apr 07 2005, Linux-Kernel Mailing List
5
Slide 6
Slide 6 text
Made by MarketMe
GitHub launched February 2008, grew to 10 million repositories
within the first 5 years, now has more than 10M active users.
6
Slide 7
Slide 7 text
10 Years Ago
7
Slide 8
Slide 8 text
Or today?
For many Wordpress developers
8
Slide 9
Slide 9 text
Git Centric Workflow
• Anything that’s text based goes in a git repo
• Clone, fork, push and pull all the time
• Git has become as essential as our text editors
9
Slide 10
Slide 10 text
Another Detour
• GitHub rode the Rails wagon
• Rails came with Rake
• Task runners went mainstream
10
Slide 11
Slide 11 text
Front-end Build Tools
• All modern front-enders use build tools and task runners
• Grunt, Gulp, Webpack, Ember-CLI
• Jekyll, Middleman, Roots, Hugo, Metalsmith
11
Slide 12
Slide 12 text
Git Centric Workflow
Any front-end project at netlify should work somewhat like this
12
Slide 13
Slide 13 text
Git Centric Workflow
After the initial clone, the flow becomes something like this
13
Slide 14
Slide 14 text
Pull • Watch • Push
14
Slide 15
Slide 15 text
Pure Front-Ends
• Not mixed with backend code or dependency
• All you need is in Git
• No database, message queue, search engines, etc…
15
APIs
Dynamic needs handled by 3rd party widgets
Made by MarketMe
18
Slide 19
Slide 19 text
Most Dev Friendly Setup
• All content live Markdown or YAML files
• Everything in version control
• Use all of our text based dev tools
19
Slide 20
Slide 20 text
20
Slide 21
Slide 21 text
Single Page App
• Run full front-end app locally with no dependencies
• Run locally against production API
• Pure front-end, completely decoupled from backend
21
Slide 22
Slide 22 text
Made by MarketMe
22
The Production Story
Slide 23
Slide 23 text
Pull • Build • Push
23
Slide 24
Slide 24 text
JavaScript, APIs & Markup
• Can run anywhere
• Distribute on Global CDN nodes
• Faster, Safer, Simpler & Cheaper
24
Example: WeWork
• Gradual transition from Rails to Roots
• No huge rewrite
• Proxy all non-static requests to legacy origin
27
Slide 28
Slide 28 text
One Rule
netlify intelligently proxies only URLs with no corresponding file
28
Slide 29
Slide 29 text
29
Slide 30
Slide 30 text
Closing the Circle
30
Slide 31
Slide 31 text
31
Slide 32
Slide 32 text
32
Slide 33
Slide 33 text
Example: Sequoia
• Large site: ~15,000 HTML Pages
• Fetches data from Contentful + Job API
• Trigger rebuild whenever content change
33
Slide 34
Slide 34 text
34
Slide 35
Slide 35 text
Content Editors?
• How to get your marketing team on board?
• Ideal dev cycle, but what about non-techies
• Normal people are not int “Git Centric Worflows”!
35
Slide 36
Slide 36 text
36
Slide 37
Slide 37 text
Thanks!
Matt Biilmann
www.netlify.com
@biilmann
37