Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)

•

0 j'aime•288 vues

Rahul Row-Chowdhury (vedoucí produktového týmu pro Chrome and webovou platformu) řekl na pódiu na Google I/O 2016: ,,Pamatujete si, jak příchod AJAXu razantně změnil co bylo možné na desktopovém webu? Progressive web apps jsou tím stejným posunem pro mobilní web.'' - Progressive web apps používají nové možnosti jak psát webové aplikace, které se chovají jako nativní. V této přednášce se podíváme na service worker, push notifikace, app shell, RAIL a další technologie a postupy. Jakub je frontendový vývojář pracující ve firmě Shiptio, zajímající se o moderní webové frameworky, knihovny a nástroje. Jakub je také členem GDG Prague a GDG ČVUT.

Logiciels

Progressive web apps
Jakub Škvára
Frontend engineer @ Prague
prepare your web for 2017

“
Remember back when AJAX
completely changed what was
possible in the desktop web?
Progressive web apps are that
same fundamental shift for
the mobile web.
“
“
-Rahul Row-Chowdhury
(Google’s product lead for Chrome and the Web platform)

I FELT PRETTY CLEVER UNTIL I
REALIZED I’D INVENTED WEBPAGES.
INSTALLING THINGS HAS GOTTEN SO FAST AND PAINLESS.
WHY NOT SKIP IT ENTIRELY, AND MAKE A PHONE THAT
HAS EVERY APP “INSTALLED” ALREADY AND JUST
DOWNLOADS AND RUNS THEM ON THE FLY?

if ('serviceWorker' in navigator) {
...
}
Progressive enhancement
JavaScript

CSS
@media (min-width: 300px) and (max-width: 600px) {
...
}
Responsive

App-Like: Application Shell
Minimal user interface
Instant loading

HTML
<head>
<style>
.header {
...
}
</style>
</head>
Application Shell

Service worker
Service workers are to progressive web
apps as XMLHttpRequest was to AJAX

JavaScript
navigator
.serviceWorker
.register('/sw.js')
.then(function() {
...
});
Service worker

Web app manifest
Full-screen
Splash screen
Add to home screen
Icons

$manifest.json { "short_name": "My App", "name": "My Progressive Web App", "display": "standalone", "icons": { } } Web app manifest$

Re-engageable: Push notifications
Push API
Works even if browser is closed
Needs permission

JavaScript
self.registration.showNotification('Title', {
body: 'My Notification',
icon: 'images/icon.png',
tag: 'my-tag'
});
Push notifications

RAIL performance model
Response
- respond in under 100 ms
Animation
- every 16 ms = 60 fps
Idle - maximize idle time - 50 ms chunks
Load - deliver content under 1000 ms

PRPL pattern
Push resources for initial route
Render the initial route ASAP
Pre-cache code for remaining routes
Lazy-load & create next routes on-demand

Other
Geolocation
Camera + Microphone
Battery
Connection info
Bluetooth - Physical web

Benefits
Works offline
Improves the load performance
Increases conversion rate

“
Progressive web apps are our ticket
out of the tab, if only we reach for it.
“ “

Jakub Škvára
@skvaros
+JakubSkvara
Questions?
Thank you!

Contenu connexe

Tendances

Iseltech17 - Single Page Applications

Monica Rodrigues

Making Single Page Applications (SPA) faster

Boris Livshutz

The Thick Front-End

Jeff Dickey

Building Single-page Web Applications with AngularJS @ TechCamp Sai Gon 2014

Duy Lâm

The Event Driven Future Powered by Serverless

mfazal

6 web development trends to follow in 2021

World Web Technology Pvt Ltd

Machine Learning Deployments

OMKARGURAV21

Demand driven applications with om.next and react native

dvcrn

“Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience”

Progressive Web App

SaleemMalik52

Serverless computing con Azure Functions

Hernan Guzman

A Lap around ASP.NET 5 - VConf

Sam Basu

Code workshop

Ankit Kashyap

Why Progressive Web App is what you need for your Business

Lets Grow Business

Sexy React Stack

KMS Technology

Single page applications

Diego Cardozo

Author: Son Tang - Senior Engineer Manager Contact Email: sontang@kms-technology.com Git repo: https://github.com/hunterbmt/react_redux_seminar Working as a Front-end developer is more challenging than ever since the Front-end part of application is no longer simple tasks. Nowadays, with the increased popularity of Single Page Application (SPA), developing a Front-end application requires more tools, more frameworks and also more attention from software engineers to application architecture so as to make sure high performance and scalability. When the complexity of your SPA increases, more people have to work on the application at the same time and a larger number of components and UI elements are built. That results in the application scalability becoming a signification problem. Without a good approach, the more complicated our application becomes, the buggier, the more unproductive and low-performing it becomes. React and Redux are one of many technical stacks which provides a lot of support to developers to build a solid SPA in an easy and effective way. They are easy to pick up and to be productive with. This presention will discuss benefits of using React and Redux as well as how to architect application in order to scale effectively without sacrificing benefits we have from React and Redux.

React & Redux, how to scale?

KMS Technology

Single Page Applications

Massimo Iacolare

Modern SharePoint Development using Visual Studio Code

Jared Matfess

Share of mobile traffic rises dramatically in the recent years. Products in Turkey, being a mobile driven market, has to deal with this rapid mobile traffic expansion. Several strategies including deeplinking and new technology approaches like Progressive Web Apps has to be implemented in order to cope with this new challange. This presentation briefly goes over those strategies and provide a guidance for mobile product managers and developers.

How to deal with mobile traffic expansion

Mevlana M. Gürbulak

Progressive web apps

Francisco Dalla Rosa Soares

Tendances (20)

Iseltech17 - Single Page Applications

Making Single Page Applications (SPA) faster

The Thick Front-End

Building Single-page Web Applications with AngularJS @ TechCamp Sai Gon 2014

The Event Driven Future Powered by Serverless

6 web development trends to follow in 2021

Machine Learning Deployments

Demand driven applications with om.next and react native

Progressive Web App

Serverless computing con Azure Functions

A Lap around ASP.NET 5 - VConf

Code workshop

Why Progressive Web App is what you need for your Business

Sexy React Stack

Single page applications

React & Redux, how to scale?

Single Page Applications

Modern SharePoint Development using Visual Studio Code

How to deal with mobile traffic expansion

Progressive web apps

Similaire à Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016)

Progressive Web Apps and WordPress

Alexandra Anghel

An introduction to Progressive Web Apps

Kevin Farrugia

Single Page Application (SPA): A Comprehensive Guide for Beginners

Inexture Solutions

Checklist for progressive web app development

WebGuru Infosystems Pvt. Ltd.

Service workers

Pavel Zhytko

Progressive web apps with Angular 2

Manfred Steyer

How i made the responsive mobile version of

Sayed Ahmed

Intro to appcelerator

Dave Hudson

Mobile application development has evolved a lot. First, there were native mobile applications developed in Objective C & Swift for IOS and Java & Kotlin for android. Then came the hybrid apps which are mobile apps developed using web technologies like HTML, CSS, & JavaScript, but two years back a new kind of app start immerging called Progressive web apps(PWA), it blurs the line between native & mobile web.

Progressive Web Apps –The Future of Apps

Ashish Saxena

Jws masterclass progressive web apps

Alexandre Marreiros

Progressive Web Apps and React

Mike Melusky

PWA

Anuradha Malalasena

[D2대학생세미나] frontend개발자가 들려주는 개발 이야기

NAVER D2

Basic Understanding of Progressive Web Apps

AnjaliTanpure1

Progressive Web Application by Citytech

Ritwik Das

Careers In Java Script Ajax - Java Script Ajax Tutorials & Programs by Learni...

S P Jain Institute of Management & Research (SPJIMR)

An introduction to AngularJS

Yogesh singh

Top 10 Best PWA Development Tools and Technologies to Use.pdf

Groovy Web

Word press with react – implementing headless wordpress with reactjs converted

DaljeetSingh210

There’s been a lot of talk lately about Progressive Web Apps. The main purpose is to provide an app-like user experience. For those who haven’t heard of them, progressive web apps aim to bridge the gap between the mobile web and native apps by providing things like the ability to install, provide offline support, run background processes and send push notifications. How does it work? What does it mean from the technical point of view? Is it worth to dig into PWA now? What are the non-technical doubts about using it? Johannes Weber shows PWA in action and is intended to answer all these questions.

Progressive Web Apps

Johannes Weber

Similaire à Progressive web apps prepare your web for 2017 (GDG ČVUT Prague 20.11.2016) (20)

Progressive Web Apps and WordPress

An introduction to Progressive Web Apps

Single Page Application (SPA): A Comprehensive Guide for Beginners

Checklist for progressive web app development

Service workers

Progressive web apps with Angular 2

How i made the responsive mobile version of

Intro to appcelerator

Progressive Web Apps –The Future of Apps

Jws masterclass progressive web apps

Progressive Web Apps and React

PWA

[D2대학생세미나] frontend개발자가 들려주는 개발 이야기

Basic Understanding of Progressive Web Apps

Progressive Web Application by Citytech

Careers In Java Script Ajax - Java Script Ajax Tutorials & Programs by Learni...

An introduction to AngularJS

Top 10 Best PWA Development Tools and Technologies to Use.pdf

Word press with react – implementing headless wordpress with reactjs converted

Progressive Web Apps

Dernier

Announcing Codolex 2.0 from GDK Software

Jim McKeeth

%in tembisa+277-882-255-28 abortion pills for sale in tembisa

masabamasaba

In the past six months, the AI landscape has undergone a massive transformation, ushering in a new era of productivity with the latest in Large Language Models (LLMs) and AI technology. This deep dive unlocks how to: Create CustomGPT Models: No coding needed to tailor AI for your unique projects. Integrate your own data, including PDFs and Excel sheets, making information handling a breeze. Plus, discover how to call your own actions/integrations for even more personalized utility. Navigate Advanced Prompting: Overcome AI's memory limits and utilize Retrieval-Augmented Generation for accessing your personalized data, streamlining how you interact with AI. Stay Ahead with AI Trends: Peek into the evolving world of LLMs, featuring newcomers like Google Gemini, Anthropic Claude, Open Sora, and Twitter Grok, and understand what their advancements mean for your productivity. Witness Real-Life Transformations: Through examples and prompt demonstrations, see firsthand how these AI strategies revolutionize routine tasks, from data analysis to content creation. Learn to leverage image output and input for advanced practical use cases, adding a new dimension to your productivity toolkit. No previous coding or AI experience is needed for this talk. Stay ahead in the fast-evolving world of work. Embrace the AI revolution and transform your workflow with advanced LLM techniques. Join us to ensure you're not left behind in the productivity race.

AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques

VictorSzoltysek

ADR, or Architecture Decision Record, is a valuable tool in software development for several reasons. It provides a centralized location for documenting and tracking architectural decisions, aiding both current and future team members. ADRs enhance communication among team members by documenting the rationale behind architectural decisions, especially beneficial during onboarding of new team members or when revisiting decisions. They serve as a knowledge base, enabling teams to learn from past decisions and refine their decision-making process. Additionally, ADRs contribute to transparency by helping stakeholders understand the reasons behind specific architectural choices. As with any other tool or process, introducing them into an organization can face several obstacles, and overcoming these challenges is crucial for successful implementation. In this talk I go through some common problems and our way of solving them.

Architecture decision records - How not to get lost in the past

Papp Krisztián

%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview

masabamasaba

+971565801893 Mtp-Kit (500MG) Prices » Dubai [(+971565801893**)] Abortion Pills For Sale In Dubai, UAE, Mifepristone and Misoprostol Tablets Available In Dubai, UAE CONTACT DR.Leen Whatsapp +971565801893 We Have Abortion Pills / Cytotec Tablets /Mifegest Kit Available in Dubai, Sharjah, Abudhabi, Ajman, Alain, Fujairah, Ras Al Khaimah, Umm Al Quwain, UAE, Buy cytotec in Dubai +971565801893''''Abortion Pills near me DUBAI | ABU DHABI|UAE. Price of Misoprostol, Cytotec” +971565801893' Dr.DEEM ''BUY ABORTION PILLS MIFEGEST KIT, MISOPROTONE, CYTOTEC PILLS IN DUBAI, ABU DHABI,UAE'' Contact me now via What's App…… abortion Pills Cytotec also available Oman Qatar Doha Saudi Arabia Bahrain Above all, Cytotec Abortion Pills are Available In Dubai / UAE, you will be very happy to do abortion in Dubai we are providing cytotec 200mg abortion pill in Dubai, UAE. Medication abortion offers an alternative to Surgical Abortion for women in the early weeks of pregnancy. We only offer abortion pills from 1 week-6 Months. We then advise you to use surgery if its beyond 6 months. Our Abu Dhabi, Ajman, Al Ain, Dubai, Fujairah, Ras Al Khaimah (RAK), Sharjah, Umm Al Quwain (UAQ) United Arab Emirates Abortion Clinic provides the safest and most advanced techniques for providing non-surgical, medical and surgical abortion methods for early through late second trimester, including the Abortion By Pill Procedure (RU 486, Mifeprex, Mifepristone, early options French Abortion Pill), Tamoxifen, Methotrexate and Cytotec (Misoprostol). The Abu Dhabi, United Arab Emirates Abortion Clinic performs Same Day Abortion Procedure using medications that are taken on the first day of the office visit and will cause the abortion to occur generally within 4 to 6 hours (as early as 30 minutes) for patients who are 3 to 12 weeks pregnant. When Mifepristone and Misoprostol are used, 50% of patients complete in 4 to 6 hours; 75% to 80% in 12 hours; and 90% in 24 hours. We use a regimen that allows for completion without the need for surgery 99% of the time. All advanced second trimester and late term pregnancies at our Tampa clinic (17 to 24 weeks or greater) can be completed within 24 hours or less 99% of the time without the need surgery. The procedure is completed with minimal to no complications. Our Women's Health Center located in Abu Dhabi, United Arab Emirates, uses the latest medications for medical abortions (RU-486, Mifeprex, Mifegyne, Mifepristone, early options French abortion pill), Methotrexate and Cytotec (Misoprostol). The safety standards of our Abu Dhabi, United Arab Emirates Abortion Doctors remain unparalleled. They consistently maintain the lowest complication rates throughout the nation. Our Physicians and staff are always available to answer questions and care for women in one of the most difficult times in their lives. The decision to have an abortion at the Abortion Clinic in Abu Dhabi, United Arab Emirates.+971565801893

+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...

Health

%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain

masabamasaba

Conference: Engage2024 in Antwerp Type: Workshop Speakers: Florian Vogler, Henning Kunz, Christoph Adler Title: Navigating the Future with The Hitchhiker's Guide to Notes and Domino 14 Abstract: Embark on an exhilarating journey with industry trailblazers Florian Vogler, Henning Kunz, and Christoph Adler in this not-to-be-missed workshop at the forefront of the tech universe. Get ready for a thrilling kick-off as we navigate the current state of the HCL universe, setting the stage for an exploration of the groundbreaking Notes and Domino 14. Discover the latest enhancements and revolutionary features that will redefine your experience. In this interactive session, unlock a treasure trove of tips and tricks to elevate your utilization of version 14, both with and without the game-changing panagenda MarvelClient. Brace yourself for also diving into Nomad, Nomad Web, and VoltMX, expanding your horizons in the expansive HCL landscape. Be a part of this exclusive opportunity to stay ahead in the ever-evolving world of HCL technologies. Your journey to mastering Notes and Domino 14 begins here. And remember, in the spirit of intergalactic exploration, don't forget to bring your towel!

W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...

panagenda

Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts In Chinsurah ❤Personal Whatsapp Number Chinsurah Call Girls 8617697112 💦✅. Chinsurah escorts we are avaliable for our all types budget customers with offer great deals in Chinsurah.Call Now our Chinsurah escort service & call girls ... Independent call girls in Chinsurah escorts available 24 hours a day for discreet incall and outcall bookings from trusted call girls - Elis.in. Nitya salvi Chinsurah escorts service agency # Are you looking for sexy call girls ? Call our agency to get you dream independent call girl, ... One shot: ₹2000/in-call, ₹5000/out-call Two shots with one girl: ₹3500/in-call, ₹6000/out-call Body to body massage with sex: ₹3000/in-call Full night for one person: ₹7000/in-call, ₹10000/out-call Flexibility Choices and options Lists of many beauty fantasies Turn your dream into reality Perfect companionship Cheap and convenient In-call and Out-call services And many more. WhatsApp Chat: 📞 8617697112 Visit The Website : https://www.nityasalvi.com/

Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...

Nitya salvi

%in Durban+277-882-255-28 abortion pills for sale in Durban

masabamasaba

SHRMPro HRMS Software Solutions Presentation

Shrmpro

In today's dynamic e-commerce landscape, the payment gateway emerges as a linchpin, ensuring smooth and secure transactions between buyers and sellers. In this discourse, we delve into the meticulous process of devising test cases tailored for scrutinizing payment gateways. Crafting precise test cases for payment gateways is a quintessential responsibility for testers operating within the service industry. This article meticulously explores pivotal scenarios integral to how to test payment gateways, coupled with essential guidelines for drafting effective test cases.

Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf

kalichargn70th171

(Vivek)Call Us, 8448380779,Call girls in Delhi NCr – We Offer best in class call girls. escort Service At Affordable Price At low Rate with Space Night 8000 We Are One Of The Oldest Escort and Call girls Agencies in Delhi. You Will Find That Our Female Escorts Are Full Of Fun, Sexy And They Would Love Enjoy Your Company. We Have A Fantastic Selection Of Escort Ladies Available For In-Calls As Well As Out-Calls. Our Escorts Are Not Only Beautiful But All Have Great Personalities Making Them The Perfect Companion For Any Occasion. In-Call:- You Can Come At Our Place in Delhi Our place Which Is Very Clean Hygienic 100% safe Accommodation. Out-Call:- You have To Come Pick The Girl From My Place We Are Also Provide Door Step Services (Delhi Ncr, Noida, Gurgaon, Faridabad, Ghaziabad Note:- Pic Collectors Time Passers Bargainers Stay Away As We Respect The Value For Your Money Time And Expect The Same From You Hygienic:- Full Ac room And Clean Rooms Available In Hotel 24 * 7 Hourly In Delhi NCR More Details, With WhatsApp Number, +91-8448380779

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️

Delhi Call girls

Direct Style Effect Systems -The Print[A] Example- A Comprehension Aid

Philip Schwarz

Unlocking the Future of AI Agents with Large Language Models

aagamshah0812

Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...

SelfMade bd

%in Midrand+277-882-255-28 abortion pills for sale in midrand

masabamasaba

Investing in AI transformation today The modern business advantage: Uncovering deep insights with AI Organizations around the world have come to recognize AI as the transformative technology that enables them to gain real business advantage. AI’s ability to organize vast quantities of data allows those who implement it to uncover deep business insights, augment human expertise, drive operational efficiency, transform their products, and better serve their customers

Microsoft AI Transformation Partner Playbook.pdf

Willy Marroquin (WillyDevNET)

%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg

masabamasaba

The title is not connected to what is inside

shinachiaurasa2

Dernier (20)