New Stack Lunch Presentation

Lunch Presentation at Zendesk

Transcript

1. The New Stack
   Chris Bach & Matt Biilmann, Netlify 2016
   1
   

   View Slide

2. The Web Dev Toolchain Disrupted
   • Modern Build Tools
   • Modern Browsers
   • Modern APIs
   • CDN Hosting
   2
   

   View Slide

3. Push your web-app or site to netlify.
   - the modern day platform that developers use
   to manage and publish their content online.
   3
   

   View Slide

4. 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
   

   View Slide

5. "I'm writing some scripts to try to track things a whole lot faster."
   Thu Apr 07 2005, Linux-Kernel Mailing List
   5
   

   View Slide

6. 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
   

   View Slide

7. 10 Years Ago
   7
   

   View Slide

8. Or today?
   For many Wordpress developers
   8
   

   View Slide

9. 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
   

   View Slide

10. Another Detour
    • GitHub rode the Rails wagon
    • Rails came with Rake
    • Task runners went mainstream
    10
    

    View Slide

11. 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
    

    View Slide

12. Git Centric Workflow
    Any front-end project at netlify should work somewhat like this
    12
    

    View Slide

13. Git Centric Workflow
    After the initial clone, the flow becomes something like this
    13
    

    View Slide

14. Pull • Watch • Push
    14
    

    View Slide

15. Pure Front-Ends
    • Not mixed with backend code or dependency
    • All you need is in Git
    • No database, message queue, search engines, etc…
    15
    

    View Slide

16. View Slide

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

    View Slide

18. APIs
    Dynamic needs handled by 3rd party widgets
    Made by MarketMe
    18
    

    View Slide

19. Most Dev Friendly Setup
    • All content live Markdown or YAML files
    • Everything in version control
    • Use all of our text based dev tools
    19
    

    View Slide

20. View Slide

21. 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
    

    View Slide

22. Made by MarketMe
    22
    The Production Story
    

    View Slide

23. Pull • Build • Push
    23
    

    View Slide

24. JavaScript, APIs & Markup
    • Can run anywhere
    • Distribute on Global CDN nodes
    • Faster, Safer, Simpler & Cheaper
    24
    

    View Slide

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

    View Slide

26. View Slide

27. Example: WeWork
    • Gradual transition from Rails to Roots
    • No huge rewrite
    • Proxy all non-static requests to legacy origin
    27
    

    View Slide

28. One Rule
    netlify intelligently proxies only URLs with no corresponding file
    28
    

    View Slide

29. View Slide

30. Closing the Circle
    30
    

    View Slide

31. View Slide

32. View Slide

33. Example: Sequoia
    • Large site: ~15,000 HTML Pages
    • Fetches data from Contentful + Job API
    • Trigger rebuild whenever content change
    33
    

    View Slide

34. View Slide

35. 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
    

    View Slide

36. View Slide

37. Thanks!
    Matt Biilmann
    www.netlify.com
    @biilmann
    37
    

    View Slide