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.

Jamstack on Azure

121 views

Published on

JAMStack stands for “JavaScript, APIs, Markup” and describes a new, cloud ready website architecture. The CMS monoliths of old are replaced with finely tuned build processes, static site generators, and serverless functions. A perfect fit for everything Azure has to offer! In this talk, we will look at architectural patterns and challenges that come with this new approach. Let’s see how we can use Azure pipelines, Azure functions and your favorite front-end framework to craft websites that are cheap, scalable, secure and incredibly fast.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Jamstack on Azure

  1. 1. JAMStack on Azure Cloud ready architecture for web sites
  2. 2. Guess the stack
  3. 3. 10 pages of intranet information. Campus overview, organisational charts and most important telephone numbers. Updated 2-3x per year Liferay Portal
  4. 4. Foodie-Facebook! 1000s of members put recipes online, like and share. They can put recipes on their weekly food plan. Coaches can comment and help adjusting. Wordpress
  5. 5. An event page, where people can select seats and tickets to a multitude of events in real-time. They can reserve seats for friends who can buy within a couple of hours. A Java enterprise application
  6. 6. An event page, where people can select seats and tickets to a multitude of events in real-time. They can reserve seats for friends who can buy within a couple of hours. A Java Enterprise application, publishing 20 JSON files and 7 PHP scripts every other hour. PHP app communicates synchronously with a payment system via insecure HTTP
  7. 7. The tools of our trade
  8. 8. Front-End: Markup, CSS, JS CMS: Data, structures, editors Applikation: Process, state Hosting: Availability, stability, security
  9. 9. Technology Lock-In
  10. 10. Front-End: Markup, CSS, JS CMS: Data, structures, editors Applikation: Process, state Hosting: Availability, stability, security
  11. 11. Front-End
  12. 12. Templating languages
  13. 13. Static site generators
  14. 14. Hosting
  15. 15. Scaleable, blazingly fast, secure Deploy it: Storage, Dropbox It’s just HTML Sources: Markdown, JSON, APIs +
  16. 16. Some SSGs are more flexible than others Not so good with binary data Which increases as site grows bigger Needs a build process -
  17. 17. Front-End: Markup, CSS, JS CMS: Daten, Strukturen, Editoren Applikation: Prozesse, Zustände Hosting: Availability, stability, security
  18. 18. Content
  19. 19. That’s nothing for non tech-savvy users!
  20. 20. { "story": { "name": "home" "path": "/" "content": [
 ... { "component": "hero", "headline": "This is the concept of Storyblok", "subheadline": "It would also work for your idea", "background_image": „../assets/images/your_logo_or_bg.png“ }
 ... ] } } Hero Headline Subheadline Background Image Upload This is the concept of Storyblok is going to also works great for your idea …/assets/images/your_logo_or_bg.png <h1> This is the concept <h2> is going to also wor <img src=“../assets/image
  21. 21. CMS status independent of site status For regular size projects free/cheap plans 100% output independet CMS, not Content Design System +
  22. 22. What’s your content exit strategy Big users pay big money Almost no good open source alternatives Git as a CMS -> Sounds good, doesn’t work -
  23. 23. Front-End: Markup, CSS, JS CMS: Data, structures, editors Applikation: Prozesse, Zustände Hosting: Availability, stability, security
  24. 24. Applications
  25. 25. Serverless
  26. 26. Serverless is not about having no servers, it’s about not caring about servers “Functions as a Service”
  27. 27. Accept: application/json
  28. 28. Accept: text/html
  29. 29. 30% 70% 3rd Party + Microservices
  30. 30. Integration with 3rd party services is easy Defined Input and Output Manageable attack surface Pay what you need +
  31. 31. More interfaces, more contracts What if we like state What about platform independence Serverless architectures are hard -
  32. 32. Front-End: Markup, CSS, JS CMS: Data, structures, editors Applikation: Process state Hosting: Availability, stability, security
  33. 33. JAMStack
  34. 34. J A M avascript PIs arkup
  35. 35. J A M avascript PIs arkup Templated markup prebuilt at deploy time. Using a static site generator. Deployable anyhwere
  36. 36. J A M avascript PIs arkup Server side processes and DB actions are abstracted into reusable APIs over HTTPS and JavaScript
  37. 37. J A M avascript PIs arkup Dynamic processes are done on the client. Via JavaScript. Deployed markup is extended with functionality from APIs client-side.
  38. 38. Sum it up
  39. 39. Full control of every part in your app Incremental adoption Resilient, failsafe, sustainable Every piece is independent +
  40. 40. Exit strategies! This is 3rd party land! Very platform specific Lots of technologies: Fragmentation -
  41. 41. @ddprrt fettblog.eu · scriptconf.org · devone.at

×