• Creating Angular Progressive Web App: Which Option Will Work Better For You

    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. Your Angular application is not the exception: adding PWA features is getting it to the next level of user experience. We have at least two very interesting options to get there. First, the native Angular Service Worker (NGSW) by Angular team, super-powered by Angular CLI and some extra ng-pwa-tools. Second, the all new framework-agnostic Workbox library by Google Chrome team. What's easier to set up for your Angular app? What has wider functionality? What's faster and more robust? Let's go exploring, coding and testing! You will have 100% full overview of these two approaches after my session, but the final decision is only yours!

  • Automatic Progressive Web Apps using Angular Service Worker

    Progressive Web Apps are the next big thing for the web. They combine the advantages of two platforms: searchability and shareability of the web with capabilities and performance of native mobile. As a result, web developers can use their favorite tools to build installable, re-engageable, connectivity independent apps, that can bring native-like performance and user experience.

  • Tame your Service Worker before your Progressive Web App go into the wild

    The collection of modern web browsers APIs and set of best practices on creating the applications turned into a new software creation methodology called Progressive Web Apps (PWA). The Service Worker API is a key API of the whole concept. Let me unleash its power for you! But with great power comes great responsibility - trivially, but true: I'll show the examples of how easy the "Progressive" part of the PWA term could become "Regressive", how to fix this, and how to test our Service Worker before deploying your app. First, we'll go through the well-known PWA functionality (App Shell, Offline Cache, Push) with focusing on the pitfalls we could easily get into, and how to avoid these. Next, I'll expand your horizons with the new PWA features, like Foreign fetch, Periodic sync, Navigation Preloads. And again - "handle with care". I'll share the points we have to pay attention to, as well as best practices. As a practical result, you will get a full overview of basic and advanced Service Worker features, as well as knowledge on how to solve a real life project issues in the best possible way. BONUS: I'll share the latest additions to Service Worker and satellite APIs, so you will be ready to build the applications for the future!

  • Reactive State Management For Your Angular App

    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 non UI-intensive apps. But when you, following this architecture, meet some more complex usecases (like concurrent data modification, complex component intercommunications, the need to keep temporary UI state, etc), it's time to think about different way to manage the app state. Redux pattern to the rescue! But Redux in Angular way. We have reactive forms, reactive router, observables-based http-client, so let's have a look at reactive Redux called ngrx/store. 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/store, tooling, pros and cons of having centralized store for the state management.

  • The Mobile Web Second Edition: First-Class Citizen on Your Device Now

    They are so similar: Web and Mobile apps. What a nice option to use our web development experience (JavaScript, to be specific) to create cross-platform native-like applications. Is it that simple? What are the pros and cons of mobile web VS native? What is the difference between hybrid mobile apps, progressive web apps and JavaScript-compiled-to-native ones? Let's find the answers together! Attendees will get an overview of modern concepts for building web-based mobile applications, pros and cons from tech and business sides. Bonus: some practical advices on when to go for this option. For the each option I'll give advantages/disadvantages from both tech and business points of view so both developers and managers will get a big picture of today's (and tomorrow's) possibilities of the mentioned concept.

  • Automatic Progressive Web Apps using Angular Service Worker

    Progressive Web Apps are the next big thing for the web. They combine the advantages of two platforms: searchability and shareability of the web with capabilities and performance of native mobile. As a result, web developers can use their favorite tools to build installable, re-engageable, connectivity independent apps, that can bring native-like performance and user experience.

  • Automatic Progressive Web Apps using Angular PWA Tools

    Progressive Web Apps are the next big thing for the web. They combine the advantages of two platforms: searchability and shareability of the web with capabilities and performance of native mobile. As a result, web developers can use their favorite tools to build installable, re-engageable, connectivity independent apps, that can bring native-like performance and user experience.

  • Progressive Web Apps New Features

    Progressive Web Apps are the next big thing for the web. They combine the advantages of two platforms: searchability and shareability of the web with capabilities and performance of native mobile. As a result, web developers can use their favorite tools to build installable, re-engageable, connectivity independent apps, that can bring native-like performance and user experience.

  • Copy of deck

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

    Our amazing web applications need high-quality UI components. So we have Angular 2 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 2, set of reusable, well-tested, and accessible UI components, is going to solve this issue. It's still under active development but we can look behind the scenes and create our cross-platform, UI-rich app just in minutes. Let's go exploring and coding! Bonus: after our app is created we'll check its Accessibility, how it's automagically added by Angular Material 2 to allow users of all abilities to navigate, understand, and use our UI successfully.

  • Automatic Progressive Web Apps using the Angular Mobile Toolkit

    Progressive Web Apps are the next big thing for the web. They combine the advantages of two platforms: searchability and shareability of the web with capabilities and performance of native mobile. As a result, web developers can use their favorite tools to build installable, re-engageable, connectivity independent apps, that can bring native-like performance and user experience.

  • Simple steps and powerful tools to create a Progressive Web App

    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. Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. Let's create our one! During this 100% hands-on session we'll have a look on the modern JavaScript code and recent tools and guides to help us build Progressive Web Apps. We'll create and register Service Worker, build App Shell, generate Application Manifest, send Push Notifications. The result of our workshop: fast, installable, offline-capable, mobile-network-friendly, re-engageable app. Agenda Introduction to PWA and Workshop Setup Service Workers for Instant and Offline Experiences App Shell Architecture Installability and App Manifest Sending Push Notifications Tooling for Progressive Web Apps: Lighthouse and More Questions and answers

  • Simple steps and powerful tools to create a Progressive Web App

    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. Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. Let's create our one! During this 100% hands-on session we'll have a look on the modern JavaScript code and recent tools and guides to help us build Progressive Web Apps. We'll create and register Service Worker, build App Shell, generate Application Manifest, send Push Notifications. The result of our workshop: fast, installable, offline-capable, mobile-network-friendly, re-engageable app. Agenda Introduction to PWA and Workshop Setup Service Workers for Instant and Offline Experiences App Shell Architecture Installability and App Manifest Sending Push Notifications Tooling for Progressive Web Apps: Lighthouse and More Questions and answers

  • Angular For The Win

    1. Intro aka what is “shiny” and why it makes us awesome 2. AOT Compilation - improve performance 3. Change Detection - sane data flow 4. View Encapsulation - build portable components 5. Hierarchical Dependency Injection - improve composability 6. Observables - reduce complexity 7. Angular CLI - convenience 8. Outro aka now go be awesome

  • Automatic Progressive Web Apps using the Angular Mobile Toolkit

    Progressive Web Apps are the next big thing for the web. They combine the advantages of two platforms: searchability and shareability of the web with capabilities and performance of native mobile. As a result, web developers can use their favorite tools to build installable, re-engageable, connectivity independent apps, that can bring native-like performance and user experience.

  • Simple steps and powerful tools to create a Progressive Web App

    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. Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. Let's create our one! During this 100% hands-on session we'll have a look on the modern JavaScript code and recent tools and guides to help us build Progressive Web Apps. We'll create and register Service Worker, build App Shell, generate Application Manifest, send Push Notifications. The result of our workshop: fast, installable, offline-capable, mobile-network-friendly, re-engageable app. Agenda Introduction to PWA and Workshop Setup Service Workers for Instant and Offline Experiences App Shell Architecture Installability and App Manifest Sending Push Notifications Tooling for Progressive Web Apps: Lighthouse and More Questions and answers

  • Progressive Web Apps using the Angular Mobile Toolkit

    Progressive Web Apps are the next big thing for the web. They combine the advantages of two platforms: searchability and shareability of the web with capabilities and performance of native mobile. As a result, web developers can use their favorite tools to build installable, re-engageable, connectivity independent apps, that can bring native-like performance and user experience. The Angular Mobile Toolkit makes it easy to get started building PWA. It’s developed to automate main routines and provide us with some nice tools to control the progressive app behavior. During this practical session, we'll have a look at Mobile Toolkit’s main components, and how they take our web app to the next level. With just some simple updates we’ll get installable, offline-capable, mobile-network-friendly Angular app re-engaging users by push-notifications.

  • Progressive Web Apps using the Angular Mobile Toolkit

    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 Mobile Toolkit 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 on 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 fast and easy creation of installable, offline-capable, mobile-network-friendly apps. Agenda Introduction to PWA and Workshop Setup Introduction to Angular Mobile Toolkit 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

  • Progressive Web Apps using the Angular Mobile Toolkit

    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 Mobile Toolkit 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 on 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 fast and easy creation of installable, offline-capable, mobile-network-friendly apps. Agenda Introduction to PWA and Workshop Setup Introduction to Angular Mobile Toolkit 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

  • Progressive Web Apps using the Angular Mobile Toolkit

    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 Mobile Toolkit 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 on 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 fast and easy creation of installable, offline-capable, mobile-network-friendly apps. Course overview Introduction to PWA and Workshop Setup Introduction to Angular Mobile Toolkit 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 2: Reward your app with high-quality UI in minutes

    Our amazing web applications need high-quality UI components. So we have Angular 2 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 2, set of reusable, well-tested, and accessible UI components, is going to solve this issue. It's still under active development but we can look behind the scenes and create our cross-platform, UI-rich app just in minutes. Let's go exploring and coding! Bonus: after our app is created we'll check its Accessibility, how it's automagically added by Angular Material 2 to allow users of all abilities to navigate, understand, and use our UI successfully.

  • Deploying and running Angular 2 apps in the Azure cloud

  • Реализация PWA с помощью Angular Mobile Toolkit

    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 Mobile Toolkit 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 on 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 fast and easy creation of installable, offline-capable, mobile-network-friendly apps. Agenda Introduction to PWA and Workshop Setup Introduction to Angular Mobile Toolkit 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

  • Погружение в Service Workers

    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 Mobile Toolkit 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 on 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 fast and easy creation of installable, offline-capable, mobile-network-friendly apps. Agenda Introduction to PWA and Workshop Setup Introduction to Angular Mobile Toolkit 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

  • Progressive Web Apps using the Angular Mobile Toolkit

    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 Mobile Toolkit 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 on 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 fast and easy creation of installable, offline-capable, mobile-network-friendly apps. Agenda Introduction to PWA and Workshop Setup Introduction to Angular Mobile Toolkit 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 2. The Shiny Parts.

    1. Intro aka what is “shiny” and why it makes us awesome 2. AOT Compilation - improve performance 3. Change Detection - sane data flow 4. View Encapsulation - build portable components 5. Hierarchical Dependency Injection - improve composability 6. Observables - reduce complexity 7. Angular CLI - convenience 8. Outro aka now go be awesome

  • Progressive Web Apps using the Angular Mobile Toolkit

    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 Mobile Toolkit 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 on 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 fast and easy creation of installable, offline-capable, mobile-network-friendly apps. Agenda Introduction to PWA and Workshop Setup Introduction to Angular Mobile Toolkit 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

  • Copy of AngularConnect

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

    Our amazing web applications need high-quality UI components. So we have Angular 2 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 2, set of reusable, well-tested, and accessible UI components, is going to solve this issue. It's still under active development but we can look behind the scenes and create our cross-platform, UI-rich app just in minutes. Let's go exploring and coding! Bonus: after our app is created we'll check its Accessibility, how it's automagically added by Angular Material 2 to allow users of all abilities to navigate, understand, and use our UI successfully.

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

    Our amazing web applications need high-quality UI components. So we have Angular 2 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 2, set of reusable, well-tested, and accessible UI components, is going to solve this issue. It's still under active development but we can look behind the scenes and create our cross-platform, UI-rich app just in minutes. Let's go exploring and coding! Bonus: after our app is created we'll check its Accessibility, how it's automagically added by Angular Material 2 to allow users of all abilities to navigate, understand, and use our UI successfully.

  • Getting started with Angular2

    On this presentation first we'll go shortly through history of Angular for better understanding what Angular2 was introduced for and why it's not backward-compatible with 1.x. Then we'll list key concepts of Angular2 like cross-component communication, one-directional data flow, user input handling and url routing and others. As a result of our practical hands-on tour we'll discuss the main tools for making our Angular2 life easier and build a functioning app.

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

    Our amazing web applications need high-quality UI components. So we have Angular 2 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 2, set of reusable, well-tested, and accessible UI components, is going to solve this issue. It's still under active development but we can look behind the scenes and create our cross-platform, UI-rich app just in minutes. Let's go exploring and coding! Bonus: after our app is created we'll check its Accessibility, how it's automagically added by Angular Material 2 to allow users of all abilities to navigate, understand, and use our UI successfully.

  • Getting started with Angular2

    On this presentation first we'll go shortly through history of Angular for better understanding what Angular2 was introduced for and why it's not backward-compatible with 1.x. Then we'll list key concepts of Angular2 like cross-component communication, one-directional data flow, user input handling and url routing and others. As a result of our practical hands-on tour we'll discuss the main tools for making our Angular2 life easier and build a functioning app.

  • Getting started with Angular2

    On this presentation first we'll go shortly through history of Angular for better understanding what Angular2 was introduced for and why it's not backward-compatible with 1.x. Then we'll list key concepts of Angular2 like cross-component communication, one-directional data flow, user input handling and url routing and others. As a result of our practical hands-on tour we'll discuss the main tools for making our Angular2 life easier and build a functioning app.

  • Revolutionary CSS Grid Layout: why do we need it, where should we use it, when could we use it?

    Horizontal lines, vertical lines. Front-end developers create grid-based layouts from the early days of web. Tables, floating DIVs, flexbox - it's the... well.. evolution. The time has come to fix the issues with older techniques, which weren't really designed for grid page layout. Revolution time! Let's dive into the wonderful world of the CSS Grid Layout, review its syntax and main features, experiment with some practical examples and check can we use it right now. Be well prepared - CSS Grid Layout is being implemented in every major web engine.

  • Angular 2: Key concepts and getting started - Stockholm

  • Angular 2: Key concepts and getting started - Oslo

  • futureApp with Angular2 and companions - Prague

  • Angular 2: Key concepts and getting started - Riga

  • futureApp with Angular2 and companions - Oslo

  • Accessibility in Material Design

  • Future apps with Angular2 and companions - Barcelona

  • Getting started with Angular2

  • Web graphics: past, present and future (lite)

  • Web graphics: past, present and future

  • Norway's First AngularJS Hackathon