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
Cloud ready architecture for web sites
Guess the stack
10 pages of intranet information.
Campus overview, organisational
charts and most important
telephone numbers. Updated 2-3...
Foodie-Facebook! 1000s of
members put recipes online, like
and share. They can put recipes
on their weekly food plan.
Coac...
An event page, where people can
select seats and tickets to a
multitude of events in real-time.
They can reserve seats for...
An event page, where people can
select seats and tickets to a
multitude of events in real-time.
They can reserve seats for...
The tools of our trade
Front-End: Markup, CSS, JS
CMS: Data, structures, editors
Applikation: Process, state
Hosting: Availability, stability, se...
Technology Lock-In
Front-End: Markup, CSS, JS
CMS: Data, structures, editors
Applikation: Process, state
Hosting: Availability, stability, se...
Front-End
Templating languages
Static site generators
Hosting
Scaleable, blazingly fast, secure
Deploy it: Storage, Dropbox
It’s just HTML
Sources: Markdown, JSON, APIs
+
Some SSGs are more flexible than others
Not so good with binary data
Which increases as site grows bigger
Needs a build pro...
Front-End: Markup, CSS, JS
CMS: Daten, Strukturen, Editoren
Applikation: Prozesse, Zustände
Hosting: Availability, stabili...
Content
That’s nothing for non tech-savvy
users!
{
"story": {
"name": "home"
"path": "/"
"content": [

...
{
"component": "hero",
"headline": "This is the concept of Story...
CMS status independent of site status
For regular size projects free/cheap plans
100% output independet
CMS, not Content D...
What’s your content exit strategy
Big users pay big money
Almost no good open source alternatives
Git as a CMS -> Sounds g...
Front-End: Markup, CSS, JS
CMS: Data, structures, editors
Applikation: Prozesse, Zustände
Hosting: Availability, stability...
Applications
Serverless
Serverless is not about having no
servers, it’s about not caring
about servers
“Functions as a Service”
Accept: application/json
Accept: text/html
30%
70%
3rd Party + Microservices
Integration with 3rd party services is easy
Defined Input and Output
Manageable attack surface
Pay what you need
+
More interfaces, more contracts
What if we like state
What about platform independence
Serverless architectures are hard
-
Front-End: Markup, CSS, JS
CMS: Data, structures, editors
Applikation: Process state
Hosting: Availability, stability, sec...
JAMStack
J
A
M
avascript
PIs
arkup
J
A
M
avascript
PIs
arkup
Templated markup prebuilt at
deploy time. Using a static site
generator. Deployable anyhwere
J
A
M
avascript
PIs
arkup
Server side processes and DB
actions are abstracted into
reusable APIs over HTTPS and
JavaScript
J
A
M
avascript
PIs
arkup
Dynamic processes are done on
the client. Via JavaScript.
Deployed markup is extended
with funct...
Sum it up
Full control of every part in your app
Incremental adoption
Resilient, failsafe, sustainable
Every piece is independent
+
Exit strategies!
This is 3rd party land!
Very platform specific
Lots of technologies: Fragmentation
-
@ddprrt
fettblog.eu · scriptconf.org · devone.at
Jamstack on Azure
Jamstack on Azure
Jamstack on Azure
Jamstack on Azure
Jamstack on Azure
Jamstack on Azure
Jamstack on Azure
Jamstack on Azure
Jamstack on Azure
Jamstack on Azure
Jamstack on Azure
Jamstack on Azure
Jamstack on Azure
Jamstack on Azure
Upcoming SlideShare
Loading in …5
×

Jamstack on Azure

285 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

×