Azure cloud for the web frontend developers

•Transferir como PPTX, PDF•

1 gostou•82 visualizações

It’s impossible to reason about modern web application without mentioning its front-end part – extensive, feature-rich, performant, sometimes with quite sophisticated structure and build process, but after all not requiring server-side code to construct it in the runtime, i.e. static. In the Azure cloud, we now have a special service for this kind of apps (including both classic SPAs and statically generated ones), empowering developers to focus on the business logic rather than the infrastructure that builds and hosts them. In my technical session & demo, let's go through the full development flow: we scaffold a web front-end app, push it to the GitHub, set up Azure Static Web App service, enjoy the fully automatic build, and deploy to global high-availability hosting - all in a few minutes!

Software

Azure cloud for the
web frontend developers
Maxim Salnikov
@webmaxru

How Azure empowers every frontend developer
and team on the planet to achieve more

I’m Maxim Salnikov
• Build on web platform since 90s
• Organize developer communities and
technical conferences
• Speak, train, blog, and…
Developer Engagement Lead at Microsoft
@webmaxru

…produce and mix some beats
• Built a tool for the real-time
BPM count
• Works in any browser on any
platform
• No backend, just a static web
app
• PWA: installable, offline-ready
http://localhost:3000

What’s next?
Share it with the global community
Add some extra features
Still focus on the frontend development

What do frontend developers want from the cloud
Hosting
• Fast & reliable
• Geo-distributed
• SPA-, SSR-ready
• Custom domains
• Free SSL certificate
Deployment
• Fully automated
• Staging environments
• No DevOps skills needed
Feature helpers
• Serverless API
• Provider-based
authentication
• Role-based access control
• Tools for the local
development
Generous free tier

How to start?
1. Point to the code repository
2. Confirm configuration
3. Three, two, one…
4. App is online
VS Code Extension Azure Portal
- or -

How to deploy a new version?
1. Code and push to the repo
>npm
run
build

How to develop locally?
npm install -g @azure/static-web-apps-cli
swa start [app dist folder or url]
--run "[command to start dev server]"
--api [functions folder or url]
Start full dev environment for React
swa start http://localhost:3000 --run "npm start" --api ./api
Azure Static Web Apps CLI
• Web server with the configuration file support
• Emulating authentication and authorization
• Serving or proxying to API requests

How to continue learning?
aka.ms/swa-learning
Step-by-step learning paths on deploying and configuring your apps in
Azure Static Web Apps
aka.ms/swa-docs
Detailed documentation, how-to guides
aka.ms/swa-demo
Real-world React application example with the API, routes, authentication

Thank you!
Let’s stay connected
Maxim.Salnikov@microsoft.com
Twitter: https://twitter.com/webmaxru
LinkedIn: https://www.linkedin.com/in/webmax/

Mais conteúdo relacionado

Mais procurados

Intro to Azure Static Web Apps

Moaid Hathot

Serverless in Azure with Functions

Christos Matskas

Building Deploying and Managing Microservices-based Applications with Azure P...

CodeOps Technologies LLP

Serverless with Azure Functions

Andreas Willich

Azure web apps

Vaibhav Gujral

Azure functions

vivek p s

Leading Edge of Modern Web Apps on Azure - Menaka - CCDays

CodeOps Technologies LLP

Azure serverless architectures

Benoit Le Pichon

Let’s dive into the world of serverless and give you real world examples of how to get started. We will focus on Azure Functions in Java and discuss how to provision, deploy and test them in a productive environment. In my demos we will see the ease of local development leveraging from the great integration in Visual Studio Code. Finally, let’s ship our samples and scale them in Azure. If you are tired of server maintenance and want to achieve more with your java functions , don’t miss this session.

Go Serverless with Java and Azure Functions

CodeOps Technologies LLP

Azure Web Apps - Introduction

Christopher Gomez

Imagine a scenario, where you can launch a video call or chat with an advisor, agent, or clinician in just one-click. We will explore application patterns that will enable you to write event-driven, resilient and highly scalable applications with Functions that too with power of engaging communication experience at scale. During the session, we will go through the use case along with code walkthrough and demonstration.

WRITE SCALABLE COMMUNICATION APPLICATION WITH POWER OF SERVERLESS

CodeOps Technologies LLP

Service Fabric is the foundational technology introduced by Microsoft Azure to empower the large-scale Azure service. In this session, you’ll get an overview of containers like Docker after an overview of Service Fabric, explain the difference between it and Kubernetes as a new way To Orchestrate Microservices. You’ll learn how to develop a Microservices application and how to deploy those services to Service Fabric clusters and the new serverless Service Fabric Mesh service. We’ll dive into the platform and programming model advantages including stateful services and actors for low-latency data processing and more. You will learn: Overview of containers Overview of Service Fabric Difference between Kubernetes and Service Fabric Setup Environment to start developing an application using Microservices with Service Fabric. Shared as part of Cloud Community Days on 17th June 2020 - ccdays.konfhub.com

Azure Service Fabric - Hamida Rebai - CCDays

CodeOps Technologies LLP

Microsoft has a cloud platform which runs .NET, NodeJS and PHP. All 101 talks out there will show you the same: it’s easy to deploy, it scales out on demand and it runs WordPress. Great! But what about doing real things? In this session, we’ll explore the things they don’t teach kids in school. How about trying to find out the architecture of this platform? What about the different deployment options for Windows Azure Web Sites, the development flow and some awesome things you can do with the command line tools? Did you know you can modify the automated build process? Join me in this exploration of some lesser known techniques of the platform.

Windows Azure Web Sites- Things they don’t teach kids in school - Comunity D...

Maarten Balliauw

Azure Functions - Introduction

Venkatesh Narayanan

Azure app service to create web and mobile apps

Ken Cenerelli

The new Azure App Service Architecture

João Pedro Martins

Azure Batch and MPI

Martin Abbott

What is Azure development?-MS Azure development

Zabeel Institute

Azure Cloud Dev Camp - App Platform

giventocode

BUILDING SERVERLESS SOLUTIONS WITH AZURE FUNCTIONS

CodeOps Technologies LLP

Mais procurados (20)

Intro to Azure Static Web Apps

Serverless in Azure with Functions

Building Deploying and Managing Microservices-based Applications with Azure P...

Serverless with Azure Functions

Azure web apps

Azure functions

Leading Edge of Modern Web Apps on Azure - Menaka - CCDays

Azure serverless architectures

Go Serverless with Java and Azure Functions

Azure Web Apps - Introduction

WRITE SCALABLE COMMUNICATION APPLICATION WITH POWER OF SERVERLESS

Azure Service Fabric - Hamida Rebai - CCDays

Windows Azure Web Sites- Things they don’t teach kids in school - Comunity D...

Azure Functions - Introduction

Azure app service to create web and mobile apps

The new Azure App Service Architecture

Azure Batch and MPI

What is Azure development?-MS Azure development

Azure Cloud Dev Camp - App Platform

BUILDING SERVERLESS SOLUTIONS WITH AZURE FUNCTIONS

Semelhante a Azure cloud for the web frontend developers

Azure Websites

Senthamil Selvan

Rongde Qiu-DDsmile-2015.1.25

Rongde Qiu

If you have not heard of service workers you must attend this session. Service Workers encompass new browser capabilities, along with shiny new version of AJAX called Fetch. If you have every wanted your web applications to experience many native application features, such as push notifications, service workers is the gateway to your happiness. Have you felt confused by application cache and going offline? Well service workers enable offline experiences in a much cleaner way. But that is not all! If you want to see some of the cool new, advanced web platform features that you will actually use come to this session! https://love2dev.com/blog/what-is-a-service-worker/

Service workers your applications never felt so good

Chris Love

Azure Functions Real World Examples

Yochay Kiriaty

Devops continuousintegration and deployment onaws puttingmoneybackintoyourmis...

Emerson Eduardo Rodrigues Von Staffen

Organizations around the globe are leveraging the cloud to accomplish world-changing missions. This session will address how AWS can help organizations put more money toward their mission and scale outreach and operations to achieve more with less. Hear some of AWS’s most advanced customers on how their organizations handle DevOps, continuous integration and deployment. Learn how these practices allow them to rapidly develop, iterate, test and deploy highly-scalable web applications and core operational systems on AWS. The discussion will focus on best practices, lessons learned, and the specific technologies and services they use.

DevOps, Continuous Integration and Deployment on AWS: Putting Money Back into...

Amazon Web Services

Benefits of an Open environment with Wakanda

Alexandre Morgaut

The art of wmb deployment automation

MidVision

Building a DevOps pipeline for Serverless by using Mocha, GitHub and Travis

Exove

Building Solution in Office 365 requires leveraging other cloud services, such as Azure Services. For those new to SharePoint and all SharePoint veterans, building cloud ready “Full Trust” solutions for Office 365 introduces a huge paradigm shift over the traditional on-premise full-trust development model. In this session, we will look at a couple common full trust solutions and move them to Office365 and Azure. We will leverage various Azure services such as Azure Functions, Event Grids and WebJobs. See demonstrations on how event receivers become Azure Function and Event Grids, and timer jobs become Azure WebJobs. Learn about other useful Azure services for replacing full trust functionality. Don’t pass up this opportunity to learn skills and knowledge you need to build Office 365 Solutions leveraging Cloud Services Attendee Takeaways: 1. Understand how to take Full Trust solutions from On-premise to the Office365. 2. Learn how to use Azure Functions, Event Grids, WebJobs and several other Azure Services. 3. See demonstrations of a couple common Full Trust Solutions converted to cloud solutions on Office365 and Azure.

Real World SharePoint Framework and Azure Services

Brian Culver

Azure Mobile Services

Anubhav Ranjan

Success Story of SharePoint Development on Azure

Malin De Silva

Introduction to Microsoft Azure Compute

Ravikanth Chaganti

Connector API Apps

BizTalk360

How Joomla and Microsoft are a Great Open Source Success

Cory Fowler

Azure integration services from the IT Professional perspective

Alessandro Moura

You have some on-premise application. Perheaps you have Wordpress/PHP or Node.js/Javascript, you like them, but you don't want to handle, some ops issues, like managing FastCGI (for PHP) or Node service. Why don't you publish them on Azure? Web Sites already support PHP and Node. And you can store MySql DB on ClearDb as DBaaS. And then you can scale out your app bringing your session out the server with Redis. And, again, you can do some worker jobs with Azure Web Jobs. And undestand how can you use Kudu features to debug and work better with websites.

Migrare Applicazioni Web su Azure

Marco Parenzan

Blazor - The New Silverlight?

Christian Nagel

Vincent biret azure functions and flow (ottawa)

Vincent Biret

Vincent biret azure functions and flow (toronto)

Vincent Biret

Semelhante a Azure cloud for the web frontend developers (20)

Azure Websites

Rongde Qiu-DDsmile-2015.1.25

Service workers your applications never felt so good

Azure Functions Real World Examples

Devops continuousintegration and deployment onaws puttingmoneybackintoyourmis...

DevOps, Continuous Integration and Deployment on AWS: Putting Money Back into...

Benefits of an Open environment with Wakanda

The art of wmb deployment automation

Building a DevOps pipeline for Serverless by using Mocha, GitHub and Travis

Real World SharePoint Framework and Azure Services

Azure Mobile Services

Success Story of SharePoint Development on Azure

Introduction to Microsoft Azure Compute

Connector API Apps

How Joomla and Microsoft are a Great Open Source Success

Azure integration services from the IT Professional perspective

Migrare Applicazioni Web su Azure

Blazor - The New Silverlight?

Vincent biret azure functions and flow (ottawa)

Vincent biret azure functions and flow (toronto)

Mais de Maxim Salnikov

Have you been in the situation where you need to remember what is this code written by you some time ago about? Not even saying about you trying to understand someone else's code? GitHub Copilot Chat is a new way to code, where you can write code, fix bugs, write tests, and explain code to yourself and others in a chat window in a sidebar or inline. In this session, I'll demonstrate how GitHub Copilot Chat takes developer experience to the next level and how it can help you be more productive in your day-to-day work.

If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...

Maxim Salnikov

In this session, we'll explore different scenarios where the features of Generative AI can provide added value to an IT solution. We'll also learn how to begin developing your own application powered by AI. Using Azure OpenAI service as an illustration, we'll examine the various APIs it offers, review the best practices of Prompt Engineering, explore different ways to incorporate your own data into the process, and take a glance at several tools and resources that make the developer experience more seamless.

Building Generative AI-infused apps: what's possible and how to start

Maxim Salnikov

Prompt Engineering - an Art, a Science, or your next Job Title?

Maxim Salnikov

Join this session to get all the answers about how ChatGPT and other LLM models can be applied to your current or future project. We'll start by putting in order all the terms - OpenAI, GPT-3, ChatGPT, Codex, Dall-E, etc. - and explain why Microsoft and Azure are often mentioned in this context. Then, we'll go through the main capabilities of the Azure OpenAI and respective usecases that might inspire you to either optimize your product or build a completely new one.

ChatGPT and not only: how can you use the power of Generative AI at scale

Maxim Salnikov

The top questions we get about ChatGPT-powered enterprise scenarios are all about using the company's own data as the basis for the responses. In this session, we'll explore various options starting from simply injecting data into the prompt to the advanced architectures with multiple Cognitive Services chained together and fine-tuning models - all for you to choose the flexible, scalable, and cost-efficient solution that works the best for you.

Using the power of OpenAI with your own data: what's possible and how to start?

Maxim Salnikov

If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...

Maxim Salnikov

It's quite ironic that to interact with the most advanced AI in our history - Large Language Models: ChatGPT, etc. - we must use human language, not programming one. But how to get the most out of this dialogue i.e. how to create robust and efficient prompts so AI returns exactly what's needed for your solution on the first try? After my session, you can add the Junior (at least) Prompt Engineer skill to your CV: I will introduce Prompt Engineering as an emerging discipline with its own methodologies, tools, and best practices. Expect lots of examples that will help you to write ideal prompts for all occasions. This session is based on my research and experiments in Prompt Engineering and is 100% relevant for cloud developers who investigate adding some LLM-powered features to their solutions. It's a guide to building proper prompts for AI to get desired results fast and cost-efficient.

Prompt Engineering - an Art, a Science, or your next Job Title?

Maxim Salnikov

Join this session to get all the answers about how ChatGPT and other GPT-X models can be applied to your current or future project. First, we’ll put in order all the terms – OpenAI, GPT-X, ChatGPT, Codex, Dall-E, etc., and explain why Microsoft and Azure are often mentioned in this context. Then, we’ll go through the main capabilities of the Azure OpenAI and respective usecases that might inspire you to either optimize your product or build a completely new one. During this session, we’ll keep our playground – Azure OpenAI Studio – open to illustrate these capabilities with live demos!

ChatGPT and not only: How to use the power of GPT-X models at scale

Maxim Salnikov

How Azure helps to build better business processes and customer experiences w...

Maxim Salnikov

In this session, you'll get all the answers about how ChatGPT and other GPT-X models can be applied to your current or future project. First, we'll put in order all the terms – OpenAI, GPT-3, ChatGPT, Codex, Dall-E, etc., and explain why Microsoft and Azure are often mentioned in this context. Then, we'll go through the main capabilities of the Azure OpenAI and respective usecases that might inspire you to either optimize your product or build a completely new one.

Using the power of Generative AI at scale

Maxim Salnikov

Finally, Web Push API is available in all major browsers and platforms. It's a feature that can take your users' experience to the next level or... ruin it! In my session, after a tech intro about how Web Push works, we'll explore implementing smart permission request dialogues, various types of notifications themselves, and communicating with your app for more sophisticated scenarios - all done right, with the best possible UX.

Web Push Notifications done right

Maxim Salnikov

The Status of Angular v13

Maxim Salnikov

Несомненно, 2018 - это год, когда Progressive Web Apps получат действительно широкое признание всех вовлеченных сторон: разработчиков браузеров, разработчиков веб-приложений, пользователей. Скорость и гладкость этого процесса в значительной степени зависят от того, насколько правильно мы, разработчики, используем возможности новых API. Основа всей идеи PWA - это Service Worker API, который отвечает за всю магию работы оффлайн, оптимизацию сетевых запросов, push-уведомления и массу других интересных и полезных вещей. В моей сессии, основанной на накопленном опыте разработки и поддержки PWA, мы пройдемся по списку: лучшие практики с примерами кода как избежать множества подводных камней последние новости с фронта поддержки PWA браузерами известные ограничения и как с ними жить масса полезной и практической информации о PWA Онлайн-версия: https://slides.com/webmax/serviceworker-frontdays/

[Russian] Сервис-воркеры: используем накопленные знания для светлого будущего...

Maxim Salnikov

- Веб доказал свою применимость в качестве платформы для создания приложений и сервисов практически любого масштаба и направленности. - Новые веб-API позволяют полноценно использовать функциональность устройств, так что клиентской части веб-приложений больше незачем себя ограничивать рамками браузера. - Набор API, спецификаций и подходов к разработке, позволяющий создавать практически “нативные” приложения для любой платформы, используя навыки веб-разработчика, получил название PWA (Progressive Web Applications). - Сегодняшняя поддержка PWA всеми основными разработчиками браузеров говорит о том, что это может быть одним из главных векторов развития и распространения веб-технологий. - В выигрыше оказываются и разработчики (единая кодовая база), и пользователи (легкие, быстрые, функциональные приложения). Онлайн-версия: https://slides.com/webmax/pwa-rif/

[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт

Maxim Salnikov

Securing Connected Cars Requires Digital Identity

Maxim Salnikov

How to Make Your IoT Devices Secure, Act Autonomously & Trusted Subjects

Maxim Salnikov

Mais de Maxim Salnikov (16)