Upgrade to Pro — share decks privately, control downloads, hide ads and more …

New Stack Lunch Presentation

New Stack Lunch Presentation

Lunch Presentation at Zendesk

Mathias Biilmann

March 07, 2016
Tweet

More Decks by Mathias Biilmann

Other Decks in Programming

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

    View Slide

  30. Closing the Circle
    30

    View Slide

  31. 31

    View Slide

  32. 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. 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. 36

    View Slide

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

    View Slide