Recommended
More Related Content
What's hot
What's hot (20)
Similar to Forget the Web Backend: Static Serverless + Client-Side Code for the Win!
Similar to Forget the Web Backend: Static Serverless + Client-Side Code for the Win! (20)
Recently uploaded
Recently uploaded (20)
Forget the Web Backend: Static Serverless + Client-Side Code for the Win!
- 4. ASP.NET MVC APPLICATION Data Access Business Logic Views Controllers Models
- 6. SERVERLESS WEB APPLICATION FaaS BaaS
- 12. Serverless
- 13. Serverless
- 14. Web Serverless
- 16. Long-running servers Cost Control Service-full & ephemeral Compute Per usageMonthly Few controls & abstractedMany user-handled controls
- 20. WildRYDES
- 22. Authentication Azure AD B2C Blob Storage Cosmos DB Web Browser HTML, JavaScript, CSS, etc. Azure Functions API Calls Over HTTP Azure Functions Proxies
- 24. Authentication Azure AD B2C Blob Storage Cosmos DB Web Browser HTML, JavaScript, CSS, etc. Azure Functions API Calls Over HTTP Azure Functions Proxies
- 27. Static Web Hosting HTML, JavaScript, CSS Dynamic Web Hosting ASP.NET / PHP / Ruby on Rails
- 28. https://wildrydes.blob.core.windows.net/app/index.html https://wildrydes-web-app.azurewebsites.net/
- 31. Demo: Static Web Hosting
- 32. as a Service User Management
- 33. Authentication Azure AD B2C Blob Storage Cosmos DB Web Browser HTML, JavaScript, CSS, etc. Azure Functions API Calls Over HTTP Azure Functions Proxies
- 34. Azure AD B2C
- 35. Identity and Access Management Social Accounts Local Accounts Customize Experience
- 38. Authentication Azure AD B2C Blob Storage Cosmos DB Web Browser HTML, JavaScript, CSS, etc. Azure Functions API Calls Over HTTP Azure Functions Proxies
- 39. Cosmos DB
Editor's Notes
- Web + Serverless = Two of my favorite topics Goal: Understand Serverless Web App 1) briefly Serverless, 2) create serverless web app But before all that let’s take a closer look at the title of this session ...
- Probably some of you’re already going like what is this guy talking about? How can you not have a backend? A web app always has a frontend and a BACKEND And you’d be right! But if you go serverless then you can ...
- ... forget about the backend as we know it! Because a lot of the stuff you traditionally have to do when building a web backend is no longer necessary in serverless There’s a lot that you can simply forget The architecture for serverless backend looks very different!
- You’re probably quite familiar with this, at least most of you Called a monolith, because everything is contained in a one big app Typically sits on top of a single SQL database Quite tightly coupled Separation of concerns = horizontally, not vertically Layers like business logic, and data access Almost everything is run on the server All the code is either written by us or imported from a library
- Serverless backend is very different Multiple services each with a single responsibility Loosely coupled, communicate over language agnostic interfaces such as HTTP Multiple data stores 3rd-party services: sending email and user management Compose to create large systems
- Two categories Functions as a Service or FaaS Backend as a Service or BaaS Very different from each other
- BaaS = using 3rd-party services as features for the application Don’t have to write those components yourself Use cases for BaaS = authentication, content management, error logging, location services FaaS = custom code that is run in small stateless functions Azure FaaS = Azure Functions FaaS for what you don’t want to out-source
- A good analogy of BaaS and FaaS is a brick wall In a wall like this BaaS would be the bricks ... ... and FaaS would be the plaster that holds them together
- Less code needs to be written Developers love code We will soon all be out of jobs? NO WAY Unique problems to solve, custom code needed No point in solving problems that have already been solved a 1000 times Less boiler plate code = you can focus on things that really matter
- Wat? If we expanded it a little ...
- ... static web hosting Client-side app (single page application) What serverless means Not too detailed definition Own perspective to why serverless matters and why it’s so awesome
- Serverless = Azure Functions?
- A huge amount of serverless services in Azure logic apps ,cognitive services, Power BI, App Insights More than just Azure Functions or FaaS Service-full?
- I’ve always loved serverless Talks about serverless are about IoT, integrations or data transformations As a web developer maybe serverless is not for me? Dead wrong! Serverless is a great match for web development and I hope to prove it to you by the end of this presentation!
- Two questions Web App and Azure SQL Database 1st q: How many of you have used these? 2nd q: How many of you think these are serverless services? I would argue they are! And that the ones that rose your hand on the first question are already using serverless! You are on the right path eventhough you are probably not utilizing the full potential of serverless yet The reason I’m saying this is that I don’t think serverless is a black-or-white kind of a thing but a spectrum
- Not a single spectrum but spectrum with multiple dimensions Multiple directions which define how serverless a service is
- Benefits especially from a business perspective Hosting costs dramatically decreased For many companies a fast time-to-market is really important You don’t have to worry about scaling
- Attracts result-oriented people People who have an idea and just want to get it running We are starting to see companies apply serverless to their processes from top to bottom As developers we need to be ready for the change
- Let’s look at how you can build web applications with it How you deploy and host a web app and utilize BaaS and FaaS to build a backend for it
- Wildrydes Requesting unicorn rides to anywhere in the world Serverless web application tutorial originally designed for AWS Can I make the same app using Azure? Number 1 reason = ...
- ... my daughter just loves unicorns
- Architecture Static web hosting, user management and serverless backend
- Static web hosting Hosting a client-side web application
- Top line is the static web hosting part of the application
- Many alternatives for static web hosting You can pretty much use any hosting platform Serve files over HTTP Blob Storage because: It is in Azure It’s billing is based on how much storage is used and how much is transferred = good serverless Blob storage does the same for storage that Azure Functions does for compute
- What enables static web hosting in having your web app only consist of static files HTML, CSS and JS files = holy trinity of web development + images and fonts No server-side scripts Making a web app client-side only is not at all difficult anymore
- We’ve gone a full circle When I started making websites = writing HTML and some CSS and a little bit of JS More interactions = PHP & ASP.NET Make the web sites static again!
- Blob storage issues You cannot configure a default file like index.html You cannot tell it which container to use by default This means that the URL to your web site would have to include both the container and the default file Shorter URL like at the bottom here?
- Answer to these problems = Azure Functions Proxies No more need for index.html and container name in URL Helps with cross-origin issues Cool newish feature in Azure Functions, generally available
- Serve functions from multiple Function Apps as endpoints on a single Function App Makes solving cross-origin JavaScript issues simple Serve other Azure Services or even 3rd-party services
- Always have to implement when making a new app Important to get it right everytime External security company audit Service that has already been tested and guaranteed to work Fully trust
- User management is the middle line Done with BaaS 3rd-party service provides the user management and authentication
- I chose Azure AD B2C Because: It is a part of Azure I can trust this service It is quite serverless for the billing Works well with single page applications
- Handles typical user management features Sign-in and sing-up and so on Social account identities are available Local accounts also You can customize the pages for your company brand
- Serverless Backend Functions as a Service
- Last part
- Cosmos DB for storing data about unicorn rides A globally distributed multi-model database Really cool service! We use it for a NoSQL database Not perfect serverless = manual scaling
- Azure Functions Event-driven stateless functions HttpTrigger to make an API endpoint for requesting unicorns Creates a new ride and persists it to the database
- Hopefully now fully convinced that serverless + web = rocks! There are some clear pain points but the concept is now proven Most of the hard edges will be smoothed out in the future Not for everyone at the moment Give it a go! Can’t wait what the future has in store for us with serverless and web development!