Maxim Salnikov

Information & Communications Technology

Azure JavaScript Angular progressive web apps IoT

Oslo, Norway

Maxim Salnikov

Developer Engagement Lead

Maxim Salnikov is an Oslo-based cloud and web front-end geek with a strong passion for the developer community building. He architects and builds complex web applications since the end of the last century, and has extensive experience with all aspects of web platform focusing on the apps managing real-time data from IoT devices, and Progressive Web Apps. He is a Google Developer Expert in Web Technologies & IoT, and a former Microsoft MVP in Development Technologies.

Maxim is a founder and active contributor to two conferences: Mobile Era and ngVikings - Nordics’ main conferences for mobile and Angular developers respectively. Also, he leads Norway’s largest meetups dedicated to web front-end and mobile: Angular Oslo, Mobile Meetup, Oslo PWA, Framsia.

Maxim is passionate about sharing his web platform experience and knowledge with the community. He travels extensively for visiting developers events and speaking/training at conferences and meetups around the world.

===

Invite me to speak at your event using this form: http://bit.ly/maxim-salnikov-speaker-request

===

In short:
Maxim Salnikov is an Oslo-based cloud and web front-end geek who builds web applications since the end of the last century and shares his extensive experience with many aspects of the web platform by speaking/training at developer events around the world and running his own conferences & meetups. He is actively exploring new features of the web and the idea of progressive web applications (PWA) in particular.

===

For Angular events:
Maxim Salnikov is an Oslo-based cloud and web front-end geek. He builds web applications since the end of the last century and shares his extensive experience with many aspects of the web platform by speaking/training at developer events around the world. To introduce Angular to the developer community, Maxim is running his own technical events including ngVikings conference, Angular Oslo meetup, and ngCommunity gathering.

===

For cloud events:
Maxim Salnikov is an Oslo-based cloud and tech community geek. He is a webdev maestro who builds apps since the end of the last century and shares his extensive web platform experience by speaking & training at developer events around the world. Daytime, Maxim is boosting cloud skills at the country scale by leading developer engagement in Microsoft Norway. In the evenings, you'll find him organizing the country's main web & mobile meetups, and two full-scale tech conferences.

Maxim Salnikov

Developer Engagement Lead

Максим занимается созданием сложных веб-приложений с конца прошлого века и имеет большой опыт работы со всеми аспектами веб-платформы, фокусируясь на решениях с данными в реальном времени на стыке веба и IoT, и популяризуя идею прогрессивных веб-приложений (PWA). Он Google Developer Expert по веб-технологиям и IoT и обладатель награды Microsoft MVP в технологиях разработки.

Максим является основателем и руководителем двух конференций: Mobile Era и ngVikings - главных скандинавских мероприятий по мобильной и Angular разработке соответственно. Кроме того он проводит крупнейшие в Норвегии митапы по фронтенд- и мобайл тематике.

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

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


Some recordings of my talks:
https://bit.ly/maxim-salnikov-speaker-youtube
https://bit.ly/maxim-salnikov-speaker-vimeo

Photo:
https://bit.ly/maxim-salnikov-speaker-photo

Current sessions

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.


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 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.


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.