React and the JAMstack - Reactathon Fundamentals 2018

Transcript

1. React and the JAMstack
   Matt Biilmann, 2018
   

   View Slide

2. Matt Biilmann
   CEO, Netlify
   

   View Slide

3. View Slide

4. Building thousands of websites
   7 years in Spain, 2 CMSs, 10k+ websites
   

   View Slide

5. Building a fully hosted CMS
   Moved to the Bay Area, built a managed CMS for the legacy stack
   

   View Slide

6. Trends: Git, MicroServices, JS
   Modern Javascript (ES6)
   Microservices
   Git vs FTP
   ReactJS
   

   View Slide

7. For the last 15 years the web has been built on the fly, causing ever
   increasing issue with:
   Security
   7% of all legacy sites hacked
   Performance
   Single origin, builds for every visitor, low conversion
   Scalability
   Infrastructure needs scaling up front
   The Web Needs a Paradigm Shift
   

   View Slide

8. The Evolution of the Web
   Unix Model Legacy Web
   (The site needs to be built
   EVERY time it’s served)
   Modern Web
   ~1970-1997 ~1997-Today Now
   CLIENT
   WEB SERVER
   APP SERVER
   DATABASE
   CLIENT
   SERVER
   CLIENT
   CDN
   SERVICES
   

   View Slide

9. =
   A New Stack
   Decoupled Architecture Git Centric Workflow A Better Web
   +
   10x Faster
   No more malware
   Infinitely scalable
   Browser
   CDN
   Build Tool
   Services
   Git
   Continuous Delivery
   CDN
   

   View Slide

10. View Slide

11. A New Stack
    React
    CDN
    Webpack
    

    View Slide

12. A New Stack
    React
    CDN / Gateway
    Webpack
    

    View Slide

13. Live Demo
    

    View Slide

14. View Slide

15. Wordpress
    Shopify
    Rails
    Kirby
    Magazine
    Shop
    Job Board
    Conference
    

    View Slide

16. Wordpress
    Shopify
    Rails
    Kirby
    Magazine
    Shop
    Job Board
    Conference
    Memberships
    ?????
    

    View Slide

17. Browser
    Front-end / Preact
    Hugo + Webpack
    GitHub
    Netlify CMS (React)
    A Smashing Architecture
    Microservices / Lamba
    

    View Slide

18. View Slide

19. Let’s Continue The Talk!
    #JAMstack
    jamstack.org
    gitter.im/jamstack/community
    @biilmann
    

    View Slide