Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Civic hacking on the JAMstack

118 views

Published on

JAMStack refers to a modern web development architecture for building sites on client side Javascript, APIs and prebuilt markup. Brian is the host of JAMStack Radio and is the Lead Developer Advocate for Netlify, a company that automates the pain away of managing static site deployments. Brian will show us why the JAMStack is becoming an architecture of choice for all sorts of projects and how it can be applied in building fast, scalable civic-impact projects.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Civic hacking on the JAMstack

  1. 1. Civic Hack on the JAMstack @bdougieYO
  2. 2. learning from what works @bdougieYO
  3. 3. Grand Master Flash & The Furious Five @bdougieYO@bdougieYO
  4. 4. @bdougieYO@bdougieYO
  5. 5. Simplicity Cost Speed @bdougieYO@bdougieYO
  6. 6. @bdougieYO@bdougieYO
  7. 7. @bdougieYO@bdougieYO
  8. 8. The JAM Structure Browser Client Build Tool microservices @bdougieYO@bdougieYO
  9. 9. @bdougieYO @bdougieYO Monolithic Architecture @bdougieYO
  10. 10. @bdougieYOsandwich.netlify.com @bdougieYO The JAM Architecture APIClient @bdougieYO
  11. 11. @bdougieYOsandwich.netlify.com @bdougieYO The JAM Architecture APIClient @bdougieYO
  12. 12. @bdougieYOsandwich.netlify.com @bdougieYO Spread the JAM @bdougieYO
  13. 13. Sample from what is good
  14. 14. @bdougieYO@bdougieYO
  15. 15. @bdougieYO@bdougieYO
  16. 16. @bdougieYO@bdougieYO API Client
  17. 17. @bdougieYO@bdougieYO@bdougieYO
  18. 18. @bdougieYO@bdougieYO@bdougieYO
  19. 19. @bdougieYO@bdougieYO Markdown powered client
  20. 20. @bdougieYO@bdougieYO@bdougieYO
  21. 21. History
  22. 22. @bdougieYO@bdougieYO
  23. 23. about contact The Static Website index.html @bdougieYO@bdougieYO
  24. 24. @bdougieYO@bdougieYO
  25. 25. @bdougieYO@bdougieYO
  26. 26. Not JAM stack @bdougieYO@bdougieYO
  27. 27. The Website Architecture Client Web Server App Server Database @bdougieYO@bdougieYO
  28. 28. The Website Client Web Server App Server Database Monolithic Application @bdougieYO@bdougieYO
  29. 29. @bdougieYO@bdougieYO
  30. 30. Wordpress @bdougieYO@bdougieYO
  31. 31. The Website w/plugins Client Web Server App Server Database Monolithic Application @bdougieYO@bdougieYO plugins plugins plugins plugins
  32. 32. @bdougieYO Who is handling? speed, cost, security @bdougieYO
  33. 33. @bdougieYO Wordpress @bdougieYO
  34. 34. sandwich.netlify.com @bdougieYO @bdougieYO @bdougieYO@bdougieYO
  35. 35. The durag error for rap sandwich.netlify.com @bdougieYO bundled.netlify.com @bdougieYO @bdougieYO@bdougieYO
  36. 36. Through the fire sandwich.netlify.com @bdougieYO bundled.netlify.com @bdougieYO @bdougieYO@bdougieYO Through the wire
  37. 37. @bdougieYOsandwich.netlify.com @bdougieYO The JAM Architecture APIClient @bdougieYO
  38. 38. Today
  39. 39. (sort-of) @bdougieYO@bdougieYO
  40. 40. index.html about contact Statically Bundled Output @bdougieYO@bdougieYO
  41. 41. Static Site Generators @bdougieYO@bdougieYO
  42. 42. @bdougieYO index.html about contact Markdown Files @bdougieYO
  43. 43. @bdougieYO@bdougieYO
  44. 44. Continuos Integration @bdougieYO@bdougieYO
  45. 45. The JAM Architecture Client Git @bdougieYO CI @bdougieYO
  46. 46. Continuous Integration (CI) CDN Continuous Delivery Git @bdougieYO@bdougieYO
  47. 47. Continuous Delivery Browser Client Build Tool microservices @bdougieYO@bdougieYO
  48. 48. The Modern Website CDN Continuous Delivery Git @bdougieYO@bdougieYO
  49. 49. Simplicity
  50. 50. New fresh look on the CMS bundled.netlify.com @bdougieYO @bdougieYO@bdougieYO
  51. 51. @bdougieYO netlifycms.org @bdougieYO
  52. 52. @bdougieYO My Middleman Blog @bdougieYO
  53. 53. Netlify CMS @bdougieYO Netlify Hugo Marketing/Docs Site @bdougieYO
  54. 54. @bdougieYO netlify/netlify-cms @bdougieYO
  55. 55. @bdougieYO@bdougieYO Started door
  56. 56. @bdougieYO JAM Restaurant App @bdougieYO
  57. 57. @bdougieYO Flexible Menu Updating @bdougieYO
  58. 58. @bdougieYO Flexible Menu Updating @bdougieYO
  59. 59. @bdougieYO Flexible Image Gallery @bdougieYO
  60. 60. @bdougieYO Flexible Image Gallery @bdougieYO
  61. 61. @bdougieYO@bdougieYO
  62. 62. @bdougieYO Reservations @bdougieYO
  63. 63. @bdougieYO Serverless Reservations @bdougieYO
  64. 64. @bdougieYO Serverless Reservations @bdougieYO
  65. 65. @bdougieYO Serverless Reservations @bdougieYO
  66. 66. More Simplicity
  67. 67. @bdougieYO http://www.benmvp.com/bart-salmon/ @bdougieYO
  68. 68. @bdougieYO http://www.benmvp.com/bart-salmon/ @bdougieYO APIClient
  69. 69. @bdougieYO https://www.opensmc.tech/ @bdougieYO
  70. 70. @bdougieYO https://www.opensmc.tech/ @bdougieYO BackendClient
  71. 71. Cost
  72. 72. @bdougieYO It’s cost less @bdougieYO
  73. 73. @bdougieYO It’s really does @bdougieYO
  74. 74. @bdougieYO it’s rude to talk about money @bdougieYO
  75. 75. @bdougieYO Outsource Complexity @bdougieYO
  76. 76. @bdougieYO Outsource Complexity Without the Cost @bdougieYO
  77. 77. @bdougieYO Auth w/Auth0 @bdougieYO
  78. 78. @bdougieYO Auth w/Auth0 @bdougieYO
  79. 79. @bdougieYO Commerce w/Snipcart @bdougieYO
  80. 80. @bdougieYO@bdougieYO
  81. 81. @bdougieYO@bdougieYO
  82. 82. @bdougieYO@bdougieYO do more with actual plugins
  83. 83. Speed
  84. 84. performance.sucuri.net @bdougieYO@bdougieYO
  85. 85. *green is good, red is bad @bdougieYO@bdougieYO
  86. 86. @bdougieYO@bdougieYO
  87. 87. @bdougieYO CDN @bdougieYO
  88. 88. @bdougieYO before after @bdougieYO
  89. 89. Speed, Cost, Simplicity, but what about?
  90. 90. Server-side Rendering
  91. 91. Serverless-side Rendering
  92. 92. iot email rest apis schedulers notifications form handling user database continuous automation @bdougieYOhttps://github.com/serverless/examples @bdougieYO
  93. 93. SEO
  94. 94. @bdougieYOsandwich.netlify.com @bdougieYO The JAM Architecture APIClient @bdougieYO SEO?
  95. 95. Static sites don’t need servers
  96. 96. @bdougieYO It’s Static HTML @bdougieYO
  97. 97. @bdougieYO or bundles to static at build time (React) @bdougieYO
  98. 98. Templates
  99. 99. @bdougieYO@bdougieYO
  100. 100. @bdougieYO templates.netlify.com @bdougieYO
  101. 101. @bdougieYO https://www.netlify.com/blog/2017/10/05/coding-modern- websites-with-the-jamstack-part-1/ @bdougieYO
  102. 102. http://bit.ly/tastyEggRolls @bdougieYO 1. Clone from templates.netlify.com 2. Connect the CMS 3. Add a menu item 4. Change the name of the restaurant @bdougieYO
  103. 103. Some other things
  104. 104. @bdougieYO Site of the week @bdougieYO
  105. 105. @bdougieYO Algolia Search @bdougieYO
  106. 106. @bdougieYO SparkPost Emails @bdougieYO
  107. 107. @bdougieYO@bdougieYO
  108. 108. @bdougieYO

×