Slide 1

Slide 1 text

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

Slide 16

Slide 16 text

16

Slide 17

Slide 17 text

Pull • Watch • Push Gulp + Jekyll, BrowserSync, No Backend 17

Slide 18

Slide 18 text

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

Slide 25

Slide 25 text

Intelligent CDN • Atomic Deploys • Instant Cache Invalidation • Routing intelligence: Proxying, GeoIP, Authentication 25

Slide 26

Slide 26 text

26

Slide 27

Slide 27 text

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