Getting Started with PWAs - Workshop en

This workshop will help you take your web project to the next level with Progressive Web Apps (PWAs) technology. The workshop will start off with an explanation of what PWAs are (and what they’re not), the use cases for and benefits of building them, and solid approaches to creating them. Then step-by-step, through the process of turning a website into a PWA. Following along, you’ll author Web App Manifests and Service Workers and gain exposure to some next-gen APIs that tie them more deeply into the underlying operating system. By the end of the workshop, you’ll walk away with a functional PWA you can use right away.

Functions for your Azure Static Web App API: managed or own? en

Azure Static Web Apps service allows to use an existing Functions app to serve API for your project. At the same time, you can build managed functions as a part of the SWA. What works best for your scenario? Joint this session to learn about pros and cons of two solutions to take an informed decision.

What I need to learn as a developer to be relevant in today's world ? en

Welcome to 21st century, a century of learning - Now I need to learn a lot more and with increased speed than before. I hear a lot about Cloud, Microservices, Cloud Native Applications, DevOps, Containers, Orchestrators and much more… the important question is why should I care ? where should I start? How all these things fit together? What are the important things I need to know to be always relevant and stay current. Let's talk about all these powerful tools and technologies especially how microservices, containers and DevOps fit together.

Let's start drawing the picture together with practical demo of deploying a containerized microservices application to cloud with DevOps.

Come and learn about our journey and how we stayed relevant until now. We would like to share our perspective until now and for the future. We will take a practical demo applications which covers Microservices, Cloud Native Applications, DevOps and Azure

[Workshop] Making Scully-generated site offline-ready en

Scully static site generator is doing an amazing job by creating a super-light version of an Angular app ready to be rendered almost instantly on any device. In my workshop, we'll go a step further and reduce the number of bytes to download to zero (starting from the second load). As a pleasant consequence, our Scully app will work without a network connection at all! Scully + Workbox + some automation = every attendee will get the practical experience on generating static offline-ready Angular apps.

This 100% practical workshop can also be delivered as a full-day event.

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

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. 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-3 models at scale en

Join this session to get all the answers about how ChatGPT and other GPT-3 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. During this session, we'll keep our playground - Azure OpenAI Studio - open to illustrate these capabilities with live demos!

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

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.

This session is based on our knowledge of Azure AI and OpenAI platforms, prompt engineering skills, and conversations with the companies that use ChatGPT-related services in production. We'll illustrate the best architecture through the live demo.

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

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.

[Workshop] Building your very own chatbot using React and OpenAI en

Let's explore how to interact with LLM (large language models) to leverage their superpower! In this workshop, we'll create an OpenAI-powered chatbot in React that can hold conversations using your own data! While building, you will learn about Prompt Engineering (an emerging discipline with its own methodologies, tools, and best practices), Chat Markup Language (ChatML), and multiple ways to let OpenAI use your own data - the mainstream option for using LLM in the real world!

Outline:

- Introduction
-- Setting up the goal
-- Pre-requisites and technical setup

- Generative AI introduction
-- Key terms, main models, and services
-- Completions API and Chat Completion API: when to use what
-- Prompt Engineering: the art of communication with LLM

- Connecting your app with API
-- Setting up and running the app
-- Calling Completion API and displaying result

- Building chat with out-of-the-box ChatGPT
-- Two ways to build chat-like experience: Chat Completions API and ChatML
-- Experimenting with metaprompt
-- Controlling request length to follow the token limit

- Grounding ChatGPT to use your data
-- Various ways to use your own data
-- Using prompt engineering to generate request to the database
-- Using prompt engineering to generate the answer

- Conclusion
-- Ways to continue learning
-- Useful resources

Using the power of ChatGPT in Developer Relations en

Generative AI tools like ChatGPT are changing the way we live and work, including building products and relationships. Can they help us execute the core devrel task - communicating with developers - more effectively?

The answer is yes! Generative AI tools can enhance many developer relation workflows related to content generation and analysis. You can start using them today for creating tutorials, answering questions using your product's documentation, categorizing and summarizing user feedback, and many other elements of your job.

In this session, I'll introduce the key areas where ChatGPT can help a devrel. I will also provide examples and share lots of useful prompts - so you can start using the Generative AI superpower right away!

Tab Driven Development: How GitHub Copilot changes the way we code en

Hitting the "Tab" key to accept code suggested by GitHub Copilot - an AI-driven pair programmer that makes developers happier (proven by research) - is changing the way we code. Its smart suggestions make it feel like the tool is reading your mind. This allows us to focus on the problem we're trying to solve, not on the code we're writing. We don't have to worry about syntax nuances, boilerplate, or boring and repetitive code we don't want to write. Instead, we can talk about the code we do want to write and how GitHub Copilot can help us. In my session, I'll show what GitHub Copilot is and isn't - understanding its limitations is key to using it effectively.

If your code could speak, what would it tell you? Let GitHub Copilot Chat help you find out! en

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.

- Explore the transformative impact of AI assistance on programming and development practices
- Dive into crucial details for maximizing the benefits of AI assistance, focusing on providing context
- Gain insights into common pitfalls associated with AI-assisted development and learn effective mitigation techniques
- Optimize your developer environment through fine-tuning for enhanced productivity, ensuring a seamless workflow

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

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.

Navigating Copilot ecosystem as a developer en

Multiple Microsoft and GitHub copilots are already available, with more on the way. As a developer, you have the flexibility to customize existing copilots or create new ones. Whether you prefer low-code or pro-code options, both are at your disposal. Wondering which one to choose? This session serves as your Copilot in the copilot building arena. Join to kickstart or elevate your Generative AI developer journey!

AI-assisted development: how to build and ship with confidence en

Adoption of AI-powered tools for development is trending. It changes the way we write and ship code, simplifies collaboration, and fundamentally changes how we can prevent vulnerabilities from entering our code. How can we use AI assistants to build and ship with confidence? In my session, we use GitHub Copilot as an example to illustrate which measures are in place "out of the box" and where to pay special attention to ensure your code follows security standards.

- AI-assisted development status
- Measures for preventing vulnerabilities from entering generated code
- AI-assistance in fixing vulnerabilities in existing code
- Other aspects of security through a software development lifecycle (SDLC)
- Recommendations on security-first GitHub Copilot usage
- Live demo

Code Smarter, Not Harder: GitHub Copilot Coding Clinic en

Get speedy onboarding to the new, efficient and pleasant reality of coding - powered by AI assistants. During first 30 minutes, Maxim Salnikov from Microsoft will share all the latest & greatest techniques on using GitHub Copilot in the most efficient way. Next 90 minutes, we'll boost developer productivity for YOUR coding tasks - based on what was presented. No "hello world" examples using random tech stack: your code, your project, your challenges - our solution.

Get prepared:
- Make sure you have an access to GitHub Copilot. Free trial is available: https://github.com/github-copilot/signup
- Bring your own laptop and think about which codebase you might want to use (no "100% stealth mode" and/or "under NDA" code/projects, please - this is not a private session, we want to learn from each other)
- VS Code is a preferred editor for the session but we can also use all supported ones: https://docs.github.com/en/copilot/using-github-copilot/getting-started-with-github-copilot

The Phantom of the App: Background Services en ru

Your user closes the browser tab and your excellent frontend app immediately disappears. But what if you want to build even better UX by keeping a portion of your app always alive - to send & receive events, to finish network operations, and to run some code even when a user does not have your website open? During my session, let's explore all the possibilities we have in the Service Worker-driven APIs to create true Phantoms of our apps. All for good: to keep the app itself and content always fresh, network operations - resilient, and user - notified

This is a session about practical usage and the best practices of APIs forming Background Services of the modern browser: Background Fetch, Background Sync, Periodic Background Sync, Web Push. First, I explain "why", then introduce the concept of "apps code running in the browsers' background" and then list exact possibilities: what's possible today and where, and what will be possible in the nearest future.

Фоновые сервисы в браузерах - есть ли жизнь после закрытия вкладки? en ru

Пользователь закрывает вкладку в браузере, и ваше замечательное фронтенд-приложение испаряется. А что если можно было бы оставить какие-то его части еще немного поработать во благо улучшения UX? Отреагировать на какие-то события, завершить начатое общение с сетью - в общем, исполнить немного кода при закрытой вкладке и даже браузере. Я расскажу о разных интересных возможностях API из семейства сервис-воркеров, позволяющих продлить жизнь приложения, чтобы всегда иметь под рукой свежие данные, не бояться проблем с сетью, уметь показывать уведомления - все ради отличного пользовательского опыта.

Это сессия о применении и лучших практиках использования API, входящих в состав фоновых сервисов современных браузеров: Background Fetch, Background Sync, Periodic Background Sync, Web Push. Сначала я объясняю «зачем это все», затем ввожу понятие «код приложений, работающий в фоновом режиме браузера», а затем перечисляю конкретные возможности: что можно сделать уже сегодня и где, какие существуют ограничения, и что будет возможно в ближайшем будущем.

Azure cloud for the web frontend developers en

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!

This session will be useful for the frontend web developers who want to know more about how cloud can power up their projects and workflows. Join this session to learn about how to build, deploy, host your frontend web application on Azure cloud, and how to extend it with the authentication and API functionality.

Getting started with dual-screen web apps en ru

Devices with dual screens are coming to the market. How do we as web developers make sure that our applications provide the best possible UX for any screen configuration and layout? In this session, we’ll talk about what’s coming to CSS and Web APIs to help us with solving this challenge, and how to start building your dual screen ready web app today!

https://docs.microsoft.com/en-us/dual-screen/web/desktop-developer-tools
https://blogs.windows.com/msedgedev/2020/09/14/introducing-dual-screen-foldable-web-apis/
https://aka.ms/foldables-explainer
https://devblogs.microsoft.com/surface-duo/build-and-test-dual-screen-web-apps/

Keynote: The status of Angular en ru

What is the current status of the Angular framework? What new features are there in the latest version and on the roadmap? Let's have a bird-eye view of the framework to make informed technical decisions, to make sure that we use the latest best practices, and to look into the future of our Angular projects with confidence.

Облачные технологии: принципы, преимущества, начало работы ru

Эта 40-минутная сессия будет полезна тем, кто только начинает или планирует начать использовать преимущества облачных вычислений для разработки программных продуктов и сервисов. План:
- Определение и задачи облачных вычислений
- Преимущества
- Публичные, частные и гибридные облака
- IaaS, PaaS, SaaS и другие категории облачных служб
- Практическая демонстрация: перенос веб-приложения в облако

[Workshop] Making a PWA from your web app using Workbox en

The web platform is versatile, capable, and can go far beyond the browser tab while keeping its open and universal nature. We call “progressive” the web apps built using the latest browser APIs to achieve a new level of user experience. In this framework-agnostic workshop, we’ll convert a "classic" web application to progressive using Workbox 6 - the latest version of the service worker automation library. So you can do the same with an app you or your company is developing now!

During this hands-on task-based training you will learn about:
- Progressive Web App concept pillars
- Service Worker API fundamentals
- Current platforms' PWA support (and workarounds when needed)
- Workbox library - an industry-standard in the automation of network-related PWA tasks

On the practical side, every participant will build an app which is:
- Installable on all modern desktop and mobile operating systems
- Offline-ready: the app itself, smart caching strategies for the data it consumes, and network-resilient data sending
- Ready for being extended by the next PWA features coming to the web
- Following the modern web development flows for building a service worker

Also, I share lots of practical tips & tricks, both technical and UX, review real-life PWA examples, explain how to avoid common pitfalls, and how to deal with edge cases.

Course overview:
- Part 1
- Setting the goal and introducing the PWA concept
- Basics of the Service Worker API
- Introducing Workbox and setting up its infrastructure
- Registering a service worker in the app
- Part 2
- Building an application shell
- Implementing a smart app update flow
- Introducing caching strategies for runtime data
- Quick setup of extra features using Workbox recipes
- Part 3
- Replaying requests made offline
- Making an app installable
- Review of other APIs to build a native-like app
- Questions and answers

Expected level:
- Basic knowledge of JavaScript is required
- The knowledge of any framework(s) is not required

Pre-requisites:
You need a laptop with installed (latest stable versions)
- Git, Node, NPM
- Browsers Chrome and/or Edge, optionally - Firefox

A week before the workshop you will receive a link with the initial repo to clone and detailed setup instructions.

Автоматизируем сервис-воркер с Workbox 6 ru en

"Задеплоил сервис-воркер - нужно покупать новый домен" - известная шутка про сложность написания собственной логики кэширования. С приходом шестой версии библиотеки Workbox компромисс между гибкостью и удобством автоматизации сетевых задач для PWA больше не нужен. В этом докладе я расскажу как начать работу с Workbox 6, реализовать типовую функциональность для офлайн веб-приложения и пойти дальше, добавляя собственную логику кэширования.

Целевая аудитория
Фронтендеры, которые только начали знакомство с сервис-воркерами и PWA, а также те, кто уже делает или поддерживает PWA и хочет познакомиться с удобными инструментами

Мне не о чем выступать... ru

Первый шаг при подготовке доклада - это поиск его темы. Этот процесс может оказаться непростой задачей как для новичков, так и для опытных докладчиков, и важно попытаться его формализовать. В моем мастер-классе мы рассмотрим некоторые направления поиска, проведем мозговой штурм и зафиксируем идеи, которые вы сможете развить в полноценные доклады.

Один экран хорошо, а два лучше en ru

Мобильные устройства с нестандарнтными экранами - двойными, гибкими, вращающимися - постепенно перестают быть экзотикой. А как мы, разработчики, можем быть уверены, что наши приложения обеспечивают наилучший UX для любой конфигурации и ориентации экрана? Давайте посмотрим, что добавилось в библиотеки Android, стандарты CSS и Web API, чтобы помочь нам с решением этой проблемы, и начтем создавать приложения с поддержкой двух и более экранов уже сегодня!

Automating a service worker with Workbox 6 ru en

"I deployed a service worker - now, I need to buy a new domain" - a well-known joke about the difficulty of implementing your own caching logic. With the arrival of the sixth version of the Workbox library, the trade-off between flexibility and ease of automation of network tasks for PWA is no longer needed. In this talk, I will tell you how to get started with Workbox 6, implement typical functionality for an offline web application, and go further by adding your own caching logic.

Outline
- Using Service Worker API - main challenges
- Back to declarative approach with Workbox
- Using recipes to automate common tasks
- Building our own plugin for maximum flexibility
- Adding Workbox to your app in 5 minutes

The target audience
Front-end developers who have just started getting to build service workers and PWAs, as well as those who already make or maintain PWAs and want to get acquainted with convenient tools

Functions for your Azure Static Web App API: managed or own? en

Azure Static Web Apps service allows to use an existing Functions app to serve API for your project. At the same time, you can build managed functions as a part of the SWA. What works best for your scenario? Joint this session to learn about pros and cons of two solutions to take an informed decision.

Native Web Apps: Are We There Yet? en ru

There are so many discussions about web VS native apps. Will we get to the point where the Web becomes truly Native for the majority of the platforms? Progressive Web Apps, Project Fugu, WebAssembly & other technologies actively contribute to moving in this direction. In this session, we go through a list of details that make the integration of an application & operating system seamless, and map it to the APIs available for the web platform. With the knowledge of what's available today and what's coming soon, you are empowered to build truly Native Web Apps to deliver the best user experience!

This session will be interesting and useful for the frontend developers who want to know what's available and what's coming in the web app and underlying platform integrations

Cloud technologies: what, where, and when to learn en

In this session, I'll introduce a holistic approach to learning about Azure cloud and other technologies from Microsoft. We’ll go through the formal resources like documentation and training, and list main local communities where you can gain and share technical skills. This session will be interesting and useful to attend to those who want to start their cloud developer journey, get certified, learn something new, and deepen their knowledge.

Нативные веб-приложения: готовность номер один! en ru

В последнее время мы так часто дискутируем о "нативных" веб-приложениях. Но когда же, наконец, наступит момент, когда Веб станет по-настоящему "родным" для большинства аппаратных и программных платформ? Прогрессивные веб-приложения, Project Fugu, WebAssembly и другие технологии активно способствуют движению в этом направлении. В данном докладе мы рассмотрим несколько особенностей, которые делают интеграцию любого приложения и операционной системы максимально тесной, и попытаемся сопоставить эти особенности с API, доступными для веб-платформы. Зная, что доступно уже сегодня и что появится в ближайшее время, вы сможете планировать и создавать по-настоящему нативные веб-приложения, обеспечивающие максимальное удобство для пользователей!

Этот доклад будет интересен и полезен для веб-фронтенд разработчиков, которые хотят знать, что доступно сейчас и что скоро появится в плане интеграции веб-приложений и платформ, где они используются.

Angular: Что новенького? en ru

Что происходит с Angular? Что появилось в последней версии и что планируется? Давайте взглянем на фреймворк и сообщество вокруг него с высоты птичьего полета, чтобы принимать обоснованные технические решения, убедиться в использовании лучших практик и заглянуть в будущее наших проектов на Angular.

Why your next CEO is coming from Developer Relations en

Developer Relations teams & departments are no longer the prerogatives of large companies. With explosive scaling horizontally, this discipline gains maturity and more influence in business development. Let me illustrate why current DevRel managers and directors are the best candidates to take leadership in your company in just a few years.

- Developer Relations went a long way from being voluntary activities of engineers passionate about developer communities around the product they build to a blooming discipline crucial for many businesses.
- Core skills in DevRel incredibly well match with the ones for CEO.
- The maturity level of the Developer Relations leaders in business development is close to being enough to take leadership in a company - keep an eye on them!

Gamifying learning for a technical audience en

Our mainstream resource for self-paced online education - Microsoft Learn - contains hundreds of role-based learning paths and thousands of modules. How do we help companies to structure content from there for current learning objectives, and to build an engaging experience for the learners? In this session, I'll introduce a Cloud Skills Challenge - the program to streamline and gamify the learning process on top of the large knowledge base. You can apply these techniques and findings to your learning system too!

Choosing a proper container for your web app in the cloud en

Cloud vendors offer multiple options for running containerized web apps and actively add new ones - with more features and better developer experience. Latest addition to that list, Azure Container Apps (ACA) is a serverless container platform providing flexibility you need without the overhead of managing complex infrastructure.

In my session, we'll take a generic fullstack web application, put it into container, and deploy to ACA. In parallel, we'll compare ACA with alternatives, and add interesting features only available in that service to our app. So, you can make an informed decision about the best container in the cloud for your own project.

All kinds of web developers will find something interesting and useful in this session. Those familiar with containers will learn about a powerful new option, and newbeginners will get proper motivation and practical guidance.

How Azure helps to build better business processes and customer experiences with AI en

Artificial Intelligence is not the future, it is NOW. Cloud technology empowers developers and technology leaders to benefit from AI effectively and responsibly with the models and tools they need. In this session, we go through the portfolio of Azure AI services and run some demos to showcase how AI can improve daily life, safety, productivity, accessibility, and business outcomes.

Artificial Intelligence is not the future, it is NOW. Cloud technology empowers developers and
technology leaders to benefit from AI effectively and responsibly with the models and tools they
need. In the first part of my session, we go through the portfolio of Azure AI services and run some
demos to showcase how AI can improve daily life, safety, productivity, accessibility, and business
outcomes.

In the second part of the session, we'll get all the answers about how ChatGPT and other GPT-3
models can be applied to your current or future project. 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 use-
cases that might inspire you to either optimize your product or build a completely new one.

With such a great power of AI technology comes great responsibility: how do you build trusted
solutions responsibly with Azure AI? In the final part of the session, we'll go through Responsible AI
practices - ethical principles that put people first.

During this session, we'll keep our playground - Azure OpenAI Studio - open to illustrate these
capabilities with live demos!

Web Push Notifications done right en

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.

1. Why native notifications?
2. History of Web Push API
3. How it works under the hood
4. Proper UX for the registration
5. Best practices during sending
6. Cross-platform challenges
7. Relevant services, libraries, resources

Service Worker: taking the best from the past experience for the bright future of PWAs en ru

There is no doubt that Progressive Web Apps will get the really broad adoption and recognition by all the involved parties: browser vendors (finally, all the major ones), developers, users. And the speed and smoothness of this process heavily depend on how correctly we, developers, use the power of new APIs. The main one in PWA concept is Service Worker API, which is responsible for all offline magic, network optimizations and push notifications.

In my session based on the accumulated experience of developing and maintaining PWAs we
- go through the list of advanced tips & tricks,
- showcase best practices,
- learn how to avoid common pitfalls,
- have a look at the latest browser support and known limitations,
- share lots of useful insights.
All on the way to the #YearOfPWA, all for delighting our users by the truly modern web applications.

Progressive Angular Apps in the #YearOfPWA en

Many web developers agree in opinion that Progressive Web Apps idea open a new milestone for the web. There is really broad adoption of PWA by all the parties: browser vendors, developers, users. What does Angular team contribute to this movement? Let’s have a deep look at the latest and greatest Angular Service Worker.

We skip the documentation-like feature listing and look beyond: practical applications, current browsers support, known limitations and lots of useful insights and tips & tricks. Example of server-side rendered and cached application shell is included!

As a practical outcome of the session, you will know how to create a truly progressive Angular app, while saving time and nerves by avoiding some deep pitfalls waiting for you in seemingly simple (but quite tricky when it comes to the real world use cases) PWA idea.

Everything beyond the official Angular Service Worker documentation: practical applications, current browsers support, known limitations and lots of useful insights and tips & tricks.

[Workshop] Let's make a web app progressive in a workday en ru

It eventually happened: Progressive Web Applications took a worthy place in the modern web landscape, and there is no more need to convince developers why to go for performant, reliable, and engaging apps. Most likely, your web application is not the exception: adding PWA features is getting it to the next level of user experience.

In our 100% hands-on session, we'll take a regular app and make it progressive. We'll create and register Service Worker, build App Shell, generate Application Manifest, send Push Notifications. We'll get a practical experience with Workbox - a PWA library, allowing us to perform these tasks really fast. The result of our workshop: fast, installable, offline-capable, mobile-network-friendly, re-engageable app.

Keynote: Is a new cross-platform development era coming? en ru

Having a single codebase for the main mobile platforms applications is a Holy Grail for many developers. There are some different approaches like using some existing programming languages (not related to mobile dev) and “compile” to native, or creating a synthetic language, or using JavaScript and wrap by the native code (or run in VM). The results are often slow, cumbersome and quite far from having real “native” feeling. What if we want to add more platforms like native desktop apps and web-based ones? The listed methods will not help us there at all.

What could be the real unifying factor for the app platforms we have now, both mobile, desktop and web-based? Right! We have browsers everywhere, that means we can run JavaScript everywhere and the only questions are how to “unbind” it from online-only usage pattern, how to give an access to main hardware APIs without any plugins, and how to let the apps out from the browser UI.

Progressive web apps idea is gaining momentum among web developers, but let’s have a look at it from the mobile developer’s point of view. Is this a real new cross-platform silver bullet?

[Workshop] Progressive Web Apps using the Angular Service Worker en

The term Progressive Web App refers to a group of technologies, such as service workers, and push notifications, that can bring native-like performance and user experience to web apps. Progressive Web Apps are interesting because in some ways they represent a coming of age for the Web. The Angular Service Worker makes it easy to build snappy Web apps that load instantly on any device, even without an internet connection. Take advantage of the searchability, shareability, and no-install-required-ability of the Web without compromise.

During this 100% hands-on session, we’ll have a look at recent tools and guides from Angular team to help us build Progressive Web Apps. We’ll have a look at Angular CLI and plugins/libraries for App Shell, Service Worker, and Application Manifest supporting us in the fast and easy creation of installable, offline-capable, mobile-network-friendly apps.

Course overview
Introduction to PWA and Workshop Setup
Introduction to Angular Service Worker
Create an installable mobile web app with Angular CLI
Make the App Installable with Web App Manifest
App Shell Architecture
Add an app shell component to the App
Deep dive into Service Workers
Add basic offline capabilities with Service Worker
Adding Splash Screen
Sending Push Notifications
Questions and answers

Angular Material: Reward your app with high-quality UI in minutes en

Our amazing web applications need high-quality UI components. So we have the Angular app on one hand and Material Design visual language on another. How to combine these without calling designer and spending days on struggling with CSS cross-platform issues and re-inventing client-side code for common UI scenarios? Right! Angular Material, set of reusable, well-tested, and accessible UI components, is going to solve this issue. Let's create our cross-platform, UI-rich app just in minutes. Are you ready for the exploring and coding?

Bonus: after our app is created we'll check its Accessibility, how it's automagically added by Angular Material to allow users of all abilities to navigate, understand, and use our UI successfully.

A practical guide on giving our Angular app a production-grade UI without struggling with layouts, styles and cross-platform issues.

Reactive State Management For Your Angular App en

Your Angular application is a reactive system. It reacts to different events and updates the model, then propagates the changes through the component tree. It works like a charm for the simple and not UI-intensive apps. But when you, following this architecture, meet some more complex use cases (like concurrent data modification, complex component intercommunications, the need to keep temporary UI state, etc), it's time to think about a different way to manage the app state. Redux pattern to the rescue! But Redux in the Angular way. We have reactive forms, reactive router, observables-based HTTP-client, so let's have a look at reactive Redux called NgRx platform.

In this session: intro to the state management (famous Facebook bug), base principles and components of Redux, converting our regular app to the one using centralized store using NgRx platform, tooling, pros and cons of having a centralized store for the state management.

Optimized Angular apps: smaller, faster, better en ru

Angular apps are getting more performant with each new version of the framework - thanks to the huge number of internal optimizations. But the main responsibility for the eventual app performance is on us, developers. Let's go through the main points on how we could help the framework to build and the browser to perform our app better.

Networking
- Production mode
- Lazy loading
- Service worker
- Server-side rendering

Code execution
- Using pure pipes
- OnPush CD strategy
- Custom CD strategy
- Using trackBy

Building an Angular PWA: Angular Service Worker or Workbox? en ru

There is no doubt that Progressive Web Apps are getting the really broad adoption and recognition by all the involved parties: browser vendors (finally, all the major ones), developers, users. Angular developers are lucky to have some really nice options to automate their PWA’s main functionality exposed by Service Worker API. The first option is 100% native to the Angular and created by the Angular team: Angular Service Worker. The second one is a framework-agnostic library called Workbox.

Both approaches are robust, convenient and unique! Let’s go through the main features of PWA implemented using NGSW vs Workbox and the resulting application lifecycle management. After the session, everyone will give their own answer on what’s easier to start with, which library is simpler to use, which resulting PWA is more convenient to maintain.

As an active speaker on Angular and PWA topics I often receive a question: what option to choose to automate building Angular PWA? There is no “right” answer, you have to choose the option which works best for you. In this session I generalized my experience with two great options: Angular Service Worker and Workbox. I believe this technical session will be very useful for many Angular developers.

Сервис-воркеры: используем накопленные знания для светлого будущего PWA en ru

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

В моей сессии, основанной на накопленном опыте разработки и поддержки PWA, мы
пройдемся по списку:
- лучшие практики с примерами кода
- как избежать множества подводных камней
- последние новости с фронта поддержки PWA браузерами
- известные ограничения и как с ними жить
- масса полезной и практической информации о PWA

То, что мы называем прогрессивными веб-приложениями сегодня, завтра будет обычными практиками разработки. Мой доклад для тех веб-разработчиков, кто хочет быть готов к завтрашнему дню, начав знакомство с новыми возможностями веба уже сейчас. Мобильные разработчики тоже узнают массу полезностей - новый вид нативных приложений (на основе веб-платформы) уже сейчас доступен для обеих главных платформ.

Практический мастер-класс по PWA: Давайте сделаем веб-приложение прогрессивным за один день! en ru

В течение одного интенсивного дня вы узнаете все идеи, лежащие в основе PWA и после продуктивной работы, выполнив шаг за шагом все инструкции ментора, овладеете и всеми практическими навыками по прогрессивизации веб-приложений. Никто не уйдет домой без полноценного PWA, созданного своими руками!

Прогрессивные веб-приложения уже получили действительно широкую известность и признание всеми вовлеченными сторонами: разработчиками браузеров (наконец, всеми!), разработчиками, пользователями. Действительно, почему бы не добавить нашему продукту все эти ранее недоступные в рамках веба возможности: работу в оффлайн-режиме, значительное ускорение работы с сетевыми запросами, веб-push уведомления, “устанавливаемость” на устройство пользователя как обычное нативное приложение и массу других полезных свойств? А если мы скажем, что все это возможно сделать в течение одного рабочего дня?

Запросы на “прогрессивизацию” веб-продуктов возникают все чаще, и задача нашего мастер-класса - дать всю теоретическую базу о PWA и, самое главное, пройти все шаги от обычного к прогрессивному приложению на практике, на вашем личном компьютере (не забудьте принести ноутбук и зарядник к нему), в вашем любимом редакторе кода.

На конкретном примере простого, но многофункционального приложения вы на практике, работая над кодом под руководством опытного ментора, убедитесь, как просто добавить возможности, значительно улучшающие пользовательский опыт и делающие ваш веб-продукт настоящим приложением, тем, что мы называем PWA.

План дня (8 часов с перерывом на обед):

Определяем общую цель и конкретные задачи, что нужно, чтобы наше приложение стало PWA
Теоретический курс PWA, направленный на быстрый практический старт
Устанавливаем и настраиваем наше рабочее окружение
Краткое знакомство с нашим подопытным - “обычным” веб-приложением
Создаем и регистрируем наш первый сервис-воркер. Изучаем возможности Dev Tools браузера касательно PWA
Отправляем наше приложение в оффлайн - на практике знакомимся с библиотекой Workbox
Оптимизируем работу с сетью - кешируем запросы к API, используя разные стратегии
Отдыхаем от кодинга - составляем Web App Manifest, чтобы наше приложение стало устанавливаемым
Знакомство с веб-push уведомлениями и добавление этой функциональности нашему приложению
Продвинутые сетевые возможности - добавляем возможность отправлять контент на сервер, и собираем аналитику находясь оффлайн
Проверка итоговой “прогрессивности” нашего приложения, подведение итогов
Пара слов о других интересных возможностях сервис воркеров и о будущем PWA
Сессия вопросов и ответов

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

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

Оптимизация приложений на Angular: легче, быстрее, удобнее en ru

Благодаря огромному количеству добавляемых улучшений внутри Angular, приложения на нем становятся все производительнее с каждой новой версией фреймворка даже без дополнительных усилий с нашей стороны. Тем не менее главная ответственность за быстродействие приложения все же на нас. Давайте рассмотрим некоторые приемы, позволяющие нам помочь фреймворку собирать приложения, которые браузер сможет загружать быстрее и исполнять быстрее. Все ради удобства наших пользователей!

Доклад состоит из набора рецептов по оптимизации вашего приложения, разделенных на две группы:

Работа с сетью
- Production mode
- Lazy loading
- Service worker
- Server-side rendering

Выполнение кода
- Использование pure pipes
- Стратегия обнаружения изменений OnPush
- Собственная стратегия обнаружения изменений
- Использование trackBy

Аудитория слушателей доклада: Разработчики, желающие узнать о лучших практиках построения приложений на Angular

Что лучше для Angular PWA: Angular Service Worker или Workbox? en ru

Прогрессивные веб-приложения уже получили действительно широкую известность и признание всеми вовлеченными сторонами: разработчиками браузеров (наконец, всеми!), разработчиками, пользователями. Разработчикам приложений на Angular повезло: существуют как минимум два отличных варианта для автоматизации основных функций PWA: "нативный" Angular Service Worker и библиотека Workbox.

Оба подхода надежны, удобны и по-своему уникальны! Давайте рассмотрим основные функции PWA, реализованные с использованием NGSW и Workbox, чтобы после доклада вы смогли сами выбрать вариант, с которого проще начать, который проще использовать и удобнее поддерживать.

Аудитория слушателей доклада: Разработчики приложений на Angular, заинтересованные идеей прогрессивных веб-приложений

Сервис-воркеры: используем накопленный опыт и смотрим в будущее ru

Service Worker API - это фундамент концепта прогрессивных веб-приложений, отвечающий за возможность работы оффлайн, оптимизацию сетевых запросов, push-уведомления и массу других полезных вещей. Формально определяемый как программируемый сетевой прокси, сервис-воркер дает нам возможность реализовать целый слой логики приложения и содержит массу нюансов в своем поведении, которые и будут представлены в рамках сессии.

Основываясь на накопленном сообществом опыте разработки и использования сервис-воркеров в реальных проектах, мы обсудим:
- лучшие практики с примерами кода для всего жизненного цикла сервис-воркера, от регистрации до экстренного удаления
- возможные проблемы и особые случаи при работе с http-запросами из сервис-воркера
- последние новости о поддержке отдельных частей спецификации разными браузерами
- рекомендуемые инструменты для автоматизации некоторых сетевых задач
- планируемые добавления в Service Worker API: новые интересные возможности

Diving deep, deep offline without drowning - the web can do it! en ru

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see more and more large and small projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the deep exploration of Service Worker API possibilities (using Cache Storage, Background Fetch, Background Sync) and gathered UX gotchas, we go through the history of the offline web, the importance of treating the network as an enhancement, current challenges (and their solutions) and proper tooling. We architect our offline-ready app applying the best tech and UX practices and adding the features one-by-one: app shell, caching resources and data, sync when online. All in name of our users who demand the new level of the resilient web experience.

The section is mix of visionary and technical pieces. During "building" our offline-ready app, we go through code samples, UX best practices, learn how to avoid pitfalls, find workarounds for non-supported features.

Structure
- History of the offline web
- The importance of treating the network as an enhancement
- Current challenges (and their solutions)
- Proper tooling
- Implementing the offline-ready app + best practices
- App shell
- External resources
- Caching API responses
- Post data while offline
- Practical outcomes

Sending the Angular app into deep, deep offline with Workbox en

There is no need to advocate for progressive web apps anymore. The idea of connection-independent applications has proven its viability and we see more and more large and small projects following that path, making the offline-ready behavior a best practice, good manner of the web. In my session, based on the deep exploration of Service Worker API possibilities and gathered UX gotchas, we go through the history of the offline web, the importance of treating the network as an enhancement, current challenges (and their solutions) and proper tooling. We architect our offline-ready Angular app applying the best tech and UX practices adding the features one-by-one: app shell, caching resources and data, sync when online. All in name of our users who demand the new level of the resilient web experience.

[Workshop] Progressive Angular: Using the Web Platform Power to the Fullest en

Web Platform is amazing. It becomes more and more performant, feature-rich while keeping its universal nature. We call “progressive” the web apps we build using the latest browser APIs, allowing us to achieve a totally new level of the user experience. On this workshop, we’ll focus on what Angular as a framework contributes to the PWA idea.

During the full day of training you will learn about: PWA concept pillars, Service Worker API fundamentals, current platform’s PWA support (and workarounds when needed), and of course, Angular Service Worker in details, including undocumented features. I share lots of practical tips & tricks, both technical and UX, review real-life PWA examples, explain how to avoid common pitfalls, and how to deal with edge cases.

On the practical side, I empower you to build an Angular PWA. We start from the “regular” application, and in the form of discrete, documented steps I guide you on how to add PWA features one-by-one using the tools provided by Angular team and the community. As a result, everyone will have a fully-featured, installable PWA ready to delight its users by offline experience, optimized networking and push notifications. We are not about hitting the numbers – we are about providing the extra value for our users, but 100% score in the Lighthouse is also guaranteed!

After all, for you to get prepared for the next steps, I introduce what’s new coming to PWA-related APIs and what’s on Angular Service Worker roadmap.

BONUS: We also check how to get started in your Angular project with another PWA automation library – Workbox.

Course overview:
- Introduction to PWA and Workshop Setup
- Introduction to Angular Service Worker
- Creating MVP PWA
- External resources caching
- Setting up runtime caching
- Web App Manifest and Adding to Home Screen
- Implementing push notifications
- Providing better UX for app update flow
- Configuring navigation URLs
- Future development of PWA and Angular Service Worker
- Questions and answers

Expected level:
- Basic knowledge of Angular is required
- The knowledge of PWA-related APIs is not required

Pre-requisites:
You need a laptop with installed (latest stable versions) Git, Node, NPM, and browsers (latest stable versions) Chrome / Firefox / Edge (on Windows). A week before the workshop you will receive a link with the initial repo to clone and detailed setup instructions.

[Workshop] PWA: Using the Web Platform Power to the Fullest en

Web Platform is amazing. It becomes more and more performant, feature-rich while keeping its universal nature. We call “progressive” the web apps we build using the latest browser APIs, allowing us to achieve a totally new level of the user experience. On this workshop, we’ll focus on what Workbox as a network tasks automation library contributes to the PWA idea.

During the full day of training you will learn about: PWA concept pillars, Service Worker API fundamentals, current platform’s PWA support (and workarounds when needed), and Workbox library - the industry standard in the automation of PWA tasks. I share lots of practical tips & tricks, both technical and UX, review real-life PWA examples, explain how to avoid common pitfalls, and how to deal with edge cases.

On the practical side, I empower you to build a Progressive Web Application. We start from the “regular” application, and in the form of discrete, documented steps I guide you on how to add PWA features one-by-one using Workbox. As a result, everyone will have a fully-featured, installable PWA ready to delight its users by offline experience, optimized networking and push notifications. We are not about hitting the numbers – we are about providing the extra value for our users, but 100% score in the Lighthouse is also guaranteed!

After all, for you to get prepared for the next steps, I introduce what’s new coming to PWA-related APIs and what’s on Workbox roadmap.

Course overview:
- Introduction to PWA and Workshop Setup
- Introduction to Workbox
- Creating MVP PWA
- External resources caching
- Setting up runtime caching
- Web App Manifest and Adding to Home Screen
- Implementing push notifications
- Replaying offline requests using Background sync
- Providing better UX for app update flow
- Future development of PWA and Workbox
- Questions and answers

Expected level:
- Basic knowledge of JavaScript is required
- The knowledge of any framework(s) is not required

Pre-requisites:
You need a laptop with installed (latest stable versions) Git, Node, NPM, and browsers (latest stable versions) Chrome / Firefox / Edge (on Windows). A week before the workshop you will receive a link with the initial repo to clone and detailed setup instructions.

Погружение в глубокий офлайн — веб способен на это! en ru

Прогрессивные веб-приложения уже получили действительно широкую известность и признание всеми вовлеченными сторонами: разработчиками браузеров (наконец, всеми!), разработчиками, пользователями. Идея приложений, не зависящих от подключения к сети, доказала свою жизнеспособность, и мы видим все больше и больше проектов, идущих по этому пути, что делает возможность работы в офлайне не только лучшей практикой, но просто и хорошей манерой в вебе. В моем докладе, основанном на глубоком исследовании возможностей Service Worker API (с использованием Cache Storage, Background Fetch, Background Sync) и собранных UX-находках, мы рассмотрим историю офлайн веба, важность рассмотрения подключения как привилегии, текущие проблемы (и их решения) и правильные инструменты.

В течение докдада мы спроектируем приложение, готовое к работе офлайн, применяя лучшие технологии и UX-практики и добавляя возможности одна за одной: оболочка приложения, кеширование ресурсов и данных, синхронизация при подключении к сети. Все ради наших пользователей, которые требуют нового уровня отказоустойчивости и скорости работы наших приложений.

Аудитория слушателей доклада: Разработчики, желащие больше узнать о возможностях веб-платформы, позволяющих разрабатывать действительно быстрые и отказоустойчивые приложения

Advanced Angular PWA: tools & techniques to build a native-like app en

In 2019 Progressive Web Apps work as native ones on every major platform, and in every modern browser. Well, can work as native. If we care about every single detail of the user experience. Luckily, we have excellent tools helping is to develop, test, and rate the PWA quality. In my session we go way beyond the regular "send app to offline" (in a good sense). We explore: proper cross-platform installability, advanced service worker ( full control on the registration, two-way communication with Angular app, bundling and optimizing), options for the versioning, advanced Push notification techniques, and more. All in the name of making our app as feature-rich as the native (if not richer). Bonus: we'll have a look at the upcoming specs and APIs related to PWA to get prepared to delight our users with even better apps.

There are plenty of "Getting started" PWA talks/articles covering the basic setup and leaving developer with the half-baked user experience, which affects the overall PWA idea adoption. This session starts with almost instant Angular PWA scaffolding using Workbox (that's fast our days), and goes way further in exlanations of what makes your webapp native-like. I see the developers' need for the sessions like this as there is lack of information on advanced techniques.

Taking your web app offline (in a good sense) en

Web as an application platform is amazing: evergreen browsers or some form of webviews exist almost on every device with UI, we have native APIs to access the hardware, we use versatile language with the excellent tooling, we are the huge (the largest ever) developer community after all! But the web historically tightly coupled with the connection state... In my session, we confirm: the modern web APIs and some best practices allow us to build offline-first web apps: always available, caring about data consumption, preserving and sync, providing UX which is comparable (if not better) to the native apps, regardless of the connection. Plus, the current state of the tooling makes it possible to add these features in a fast and reliable way. Let's explore the offline web in a very practical manner - by building the offline-first app!

This session will be useful for web front-end developers who have heard about progressive web apps (who haven't :), maybe even tired of PWA-hype, and thus want to understand some of UX benefits on practice. As this is not another "What is PWA" session, I focus exclusively on the modern APIs making offline-first approach possible, in a form of task+solution sections - to maximize the usefulness.

Backend developers and mobile developers will get a nice overview of what web can do today (they will be impressed).

1. The web as an application platform - 10 min
1.1 Cool parts: browsers, hardware APIs, language, community, etc
1.2 Issues: browsers interop, connection status dependency
1.3 Failed tries to solve the offline issue

2. The new imperative way to cache - 10 min
2.1 Setting the requirements for offline usecases
2.2 Briefly about how Service Worker API helps with offline
2.3 Introducing Workbox as a helper to solve complex scenarios

3. Offlinization in practice - 20 min
3.1 Making available the app itself - app shell
3.2 Caching application runtime data
3.3 Preserving and syncing offline actions and data
3.4 Managing larger resources downloads and uploads

4. Summary - 5 min
4.1 The state of offline web
4.2 More APIs to reduce the gap between native and web

Make your Azure DevOps pipeline talk to you loud and clear en

Let's explore the possibilities of Azure DevOps in integrating with the external services: why not to receive the status of build in our Slack team? Or maybe create a card in Trello for every deploy? What about dozen of other out-of-the-box integrations? But what if we want to go deeper and build the integration with our own service - for example, with a PWA sending Push notifications about the next successful release. It's also possible - we'll have a look at Azure DevOps webhooks. Btw what are we going to use to build and deploy that custom notifications service? Sure! Azure DevOps again!

The Phantom of the Angular App: Background Services en

Your user closes the browser tab and your excellent Angular app immediately disappears. But what if you want to build even better UX by keeping a portion of your app always alive - to send & receive events, to finish network operations, and to run some code even when a user does not have your website open? During my session, let's explore all the possibilities we have in the Service Worker-driven APIs to create true Phantoms of our apps. All for good: to keep the app itself and content always fresh, network operations - resilient, and user - notified.

This is a session about practical usage and the best practices of APIs forming Background Services of the modern browser: Background Fetch, Background Sync, Periodic Background Sync, Web Push. All in the context of Angular apps. First, I explain "why", then introduce the concept of "apps code running in the browsers' background" and then list exact possibilities: what's possible today and where, and what will be possible in the nearest future.

[Workshop] Progressive Angular App: From Motivation to Deploy en

Let's have a hands-on end-to-end journey of enriching our Angular app by the Web API features exposed by the modern browsers. Why? We'll start with the motivation part to explain the benefits for our users and us as developers. How? We'll take only battle-tested, production-ready tools to speed up the development. We'll use Workbox as a service worker foundation applying all the best practices we learned. What's next? We'll build a plan on adding new PWA features after they shipped/stabilized in the browsers. As a result, every attendee will create an Angular app which is:
- Offline-ready (far beyond formal app shell requirements)
- Installable using both browser and app UI elements
- Equipped with a useful set of background services
- Ready to be extended by the future APIs of the Service Worker

This 100% practical workshop can also be delivered as a full-day event. It's based on the latest Workbox 5 library and accumulates all the knowledge and experience I gathered during the running dozens of previous workshops.