JAMstack and WordPress: friend or foe?

The term JAMstack was coined by Mathias Biilman, the co-founder of Netlify, to contrast more ‘modern’ approaches to web development with the LAMP stack we all know very well. JAMstack refers to the serverless, database-less stack comprised of Javascript, APIs and Markup.

Interest in the JAMstack is growing, and many feel that the JAMstack approach to web development, which in many ways is faster, more secure, and offers greater stability than the traditional stack, is the future of the web. But it also has many drawbacks and issues.

In this talk we will examine the JAMstack to understand what it is and what it offers, and look at the progression of approaches to web development, the pros and cons of the various methodologies, and where WordPress fits in with it all.

Transcript

1. JAMstack
   WordPress friend or foe?
   Miriam Schwab, WordCamp London 2019
   

   View Slide

2. 5x
   

   View Slide

3. In the beginning… (circa 1999)
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. L A M P
   Apache MySQL
   Linux PHP
   

   View Slide

8. View Slide

9. View Slide

10. Web pages are
    getting heavier
    

    View Slide

11. March 1, 2015 <> March 1, 2018
    MEDIAN DESKTOP
    1828.2 KB
    ▲25.8%
    MEDIAN MOBILE
    1669.0 KB
    ▲77.5%
    MEDIAN DESKTOP
    2278.4
    ▲15.1%
    MEDIAN MOBILE
    2254.3
    ▲28.6%
    

    View Slide

12. View Slide

13. 20*49 = 980
    

    View Slide

14. But what about
    ??
    

    View Slide

15. View Slide

16. The Web is not Google, and should not be just Google.
    

    View Slide

17. Website
    security is
    getting
    harder
    

    View Slide

18. View Slide

19. Sucuri Hacked Website Report 2018
    

    View Slide

20. View Slide

21. 20*49 = 980
    

    View Slide

22. Scaling is challenging
    

    View Slide

23. View Slide

24. View Slide

25. The stack previously known as “static”
    

    View Slide

26. View Slide

27. J A M
    JavaScript APIs Markup
    

    View Slide

28. View Slide

29. View Slide

30. “With a proper CDN, full HTTP/2 support and
    service workers in place, last year we managed to
    beat the performance results we had so far.
    However, even with a fancy nginx build, the
    performance we could get with a pre-built
    websites enhanced with JavaScript was nothing
    short of breathtaking.”
    Vitaly Friedman, Smashing Magazine
    

    View Slide

31. Benefits of JAMstack
    Fast Secure
    Scalable Cheap
    

    View Slide

32. Wait a second!
    Doesn’t this mean
    we’re just going
    back to this??
    

    View Slide

33. No.
    

    View Slide

34. Static Site Generators
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. ”static site generator”
    

    View Slide

39. View Slide

40. If it’s so great, why isn’t everyone
    using JAMstack?
    • Need to feel comfortable with command line
    • Sites and content managed via Git
    • Some CMSs are available, but hard to integrate, and
    limited
    • Long publish build time
    • No multi-author capabilities
    • Complex to develop
    • Limited plugin and theme ecoysystem
    • People like what they are used to
    

    View Slide

41. JAMstack + developers = !
    JAMstack + (marketers, content
    managers, creators) = "
    

    View Slide

42. 1/3 of the web
    !
    

    View Slide

43. CMS market share: a numbers analysis by Joost de Valk
    

    View Slide

44. ”static site generator”
    

    View Slide

45. WordPress vs. ”static site generator”
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. Headless CMS (REST API)
    API Front end
    CDN
    App
    Watch
    WP back end
    content
    management
    API only, UI anything
    

    View Slide

51. Pros:
    • Cooler – any framework,
    technology, language
    • Portable
    • Fast
    • Secure
    • Scalable
    • Future-proof
    Cons:
    • High barrier of adoption
    - more complicated to
    develop, need team of
    developers on it
    • Vendor lock-in
    • No plugins or themes
    • No live preview
    • Not great for frequent
    content updates
    

    View Slide

52. Static plugins
    

    View Slide

53. Pros:
    • Easy to install a plugin
    • Low cost
    • Use WP as usual
    • Deploy to static hosting
    of your choice
    Cons:
    • Complicated to
    configure – not great
    for marketers
    • Huge load on servers
    • Full publish can take
    long
    • Redirect support?
    • Need to replace forms,
    search, comments, ajax
    

    View Slide

54. View Slide

55. View Slide

56. Pros:
    • Modern web app
    • Fast
    • Secure
    • Scalable
    Cons:
    • Tied into the offered
    themes
    • Barrier to entry
    • Full build on every
    change
    • No preview
    • Depends on WP REST
    API
    

    View Slide

57. WordPress as static site generator
    

    View Slide

58. Magic
    

    View Slide

59. Pros:
    • Fast, secure, scalable
    • Continue using WP
    • Click of a button, no
    complicated configs
    • CDN, http/2, SSL, gzip
    • Serverless forms
    • Algolia search
    • Other optimizations on
    the fly
    Cons:
    • No Ajax (yet)
    • No membership sites
    with logins (yet)
    • No WooCommerce
    (yet)
    

    View Slide

60. Let’s continue working to
    bring WordPress into the
    future, and sustain it for
    many years to come.
    

    View Slide

61. Thank you!!
    Miriam Schwab | miriam@strattic.com
    @miriamschwab
    

    View Slide

62. Credits
    • HTML icon – iconfinder
    • CSS icon – iconfinder
    • LAMP diagram - By K7.india at English Wikipedia, CC BY 3.0,
    https://commons.wikimedia.org/w/index.php?curid=31270395
    • Photo of weights - Photo by Victor Freitas from Pexels
    • Photo of locks - Photo by V P from Pexels
    • Browser icon - https://www.iconfinder.com/icons/1055104/browser_webpage_website_icon
    • Jam photo - https://www.pexels.com/photo/blur-focus-jam-jars-48817/ (no attribution required)
    • Rocket icon - https://www.iconfinder.com/icons/2588762/fast_optimize_rocket_seo_icon
    • Padlock icon - https://www.iconfinder.com/icons/511942/lock_login_protection_secure_icon
    • Scale icon - https://www.iconfinder.com/icons/1063900/arrow_expand_fullscreen_scale_icon
    • Pound icon - https://www.iconfinder.com/icons/1737366/business_money_pound_icon
    

    View Slide