SlideShare a Scribd company logo
New trends on the Web Platform
Kenneth R. Christiansen
Hi! I am Kenneth
New trends on web platform
Our team mission
Move the Web Platform forward

Recommended for you

Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps

The document provides an overview of progressive web apps (PWAs). It discusses the history and idea behind PWAs, defining them as websites that are built using common web technologies but adopt features that make them feel like native mobile applications. The key pillars that transform websites into PWAs are listed as being reliable, fast, engaging, and integrated. Core building blocks like service workers and web app manifests are explained. Example case studies are given that demonstrate performance improvements from adopting PWAs. Limitations are also outlined.

#pwa #progressivewebapps
Pwa demystified
Pwa demystifiedPwa demystified
Pwa demystified

Progressive Web Apps, also known as Installable Web Apps or Hybrid Web Apps, is the latest industry trend helping businesses create more engaged and loyal customers by presenting regular web pages or websites as traditional applications or native mobile applications to the users.

progressive web appsinstallable web appshybrid web apps
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App

Progressive web apps (PWAs) are a new type of application that combines the best of the web and the best of native apps. PWAs use modern web capabilities to deliver fast, engaging mobile experiences that feel like native mobile applications to users. Some key characteristics of PWAs include being progressive, responsive, connectivity-independent, app-like, fresh, safe, discoverable, and installable. They aim to provide native-app experiences through features like push notifications, offline support, and the ability to launch from a home screen icon.

progressive web apppwanative app
Why the web matters
New trends on web platform
The web is awesome
Great reach, low friction
safe
ephemeral
(deep) linkable
indexable
composable
How did the Web beat native
applications on the desktop?
But you might ask yourself...

Recommended for you

Progressive Web Apps - Up & Running
Progressive Web Apps - Up & RunningProgressive Web Apps - Up & Running
Progressive Web Apps - Up & Running

This Slide contains the basics of PWA its advantage and why to build a PWA. It also contains some technical features and case studies of PWA.

gdgjalandharprogrammingpwa
Progressive web apps
 Progressive web apps Progressive web apps
Progressive web apps

This document discusses progressive web apps (PWAs). It defines PWAs as applications that take advantage of new technologies to provide the best of mobile sites and native apps to users. PWAs are reliable, fast, and engaging. They work across all devices and platforms without installation. Core aspects of PWAs include application shells, web app manifests, and service workers. Major browsers support key PWAs features like caching, adding to home screens, and push notifications. Popular companies using PWAs include Flipkart, Paper Planes, and Housing. The document encourages building and migrating to PWAs.

javascriptpwahtml
Progressive Web Apps For Startups
Progressive Web Apps For StartupsProgressive Web Apps For Startups
Progressive Web Apps For Startups

What are the ways that startups can leverage the benefits that progressive web apps allow these days? In this talk, I covered some of the startups best practices and how entrepreneurs can take advantage from the capabilities that PWAs give them.

web developmentstartupentrepreneurship
Distribution is
The Hardest Problem
In Software
But mobile is a different beast than the desktop
➫ Unreliable network
➫ Slower hardware
➫ Less screen real-estate
➫ Different input methods
➫ Different set of expectations
And for a long time...
Great sadness
Lots of dinosaurs, slowness, hard to re-engage with
users, hard to pay on mobile
...really a
second grade experience
Source: funnycatsite.com
Year 2010

Recommended for you

Progressive Web-App (PWA)
Progressive Web-App (PWA)Progressive Web-App (PWA)
Progressive Web-App (PWA)

Progressive Web App (PWA) is a term used to denote web apps that use the latest web technologies. Progressive web apps are technically regular web pages (or websites) but can appear to the user like traditional applications or (native) mobile applications. This new application type attempts to combine features offered by most modern browsers with the benefits of mobile experience.

pwaresponsiveprogressive webapp
Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)

Progressive web apps (PWAs) are experiences that combine the best of the web and mobile apps. They load quickly, work offline, and feel like native mobile apps. The key aspects of PWAs include service workers for offline functionality, app shells for fast loading, and manifest files for home screen capabilities. PWAs use caching strategies and service workers to load from the cache first for offline access, then request updates from the network as needed. This provides a better user experience than online-first solutions which require network connectivity.

PWA demystified
PWA demystifiedPWA demystified
PWA demystified

Progressive Web Apps (PWAs) are websites that use recent web standards to deliver an app-like experience without requiring users to download an app. PWAs work across any device, use responsive design for any screen size, and work offline or on low quality networks using service workers. They also feel like native apps through features like push notifications, being discoverable on search engines and home screen installation. PWAs provide a number of benefits including improved user experience through fast loading, engagement through push notifications, and business value through increased customer engagement and conversions.

#pwa#technology#commerce
Reliable, Fast & Engaging
But there is good news, because today the web can be
Year 2016 (6 years later)
The mobile landscape changed
a lot in recent years
But we need to keep in mind that
➫ People don't proactively look for new apps to install
➫ On average, a user in the US installs 0 new apps per month
➫ People hate to get updates for apps they don't use
Mobile evolved

Recommended for you

Progressive Web Apps - Overview & Getting Started
Progressive Web Apps - Overview & Getting StartedProgressive Web Apps - Overview & Getting Started
Progressive Web Apps - Overview & Getting Started

A brief intro to progressive web apps & conventional ways of performance optimization on web. The presentation was given as part of a tech talk, thus the readers are suggested to read through the reference links as well.

service workerspwaprogressive web apps
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications

Progressive Web Apps (PWAs) are websites that utilize modern web capabilities to deliver native app-like experiences to users. PWAs are built using common web technologies including HTTPS, service workers, and web app manifests. Service workers allow PWAs to work offline by caching app assets and responding to fetch events. When installed on a user's homescreen, PWAs can load quickly and feel like native applications while retaining the benefits of the web such as being discoverable, installable, and updatable.

pwaprogressive web applicationsweb development
Progressive web application
Progressive web applicationProgressive web application
Progressive web application

PWA stands for progressive web application. Progressive web applications are web applications that use features like manifest files, service workers and responsive design to provide app-like functionality regardless of device or platform. Some key features of PWAs include being responsive, working offline or on low quality networks, having a native app-like feel, being installable and being re-engageable through features like push notifications. PWAs allow developers to provide app-like experiences without having to develop native mobile applications.

I don't want to download your app,
I just want to do stuff
New trends on web platform
With many devices around usapps don't scale well
Too many icons!
Lack of overview
Lots of updates pending for stuff I never use!

Recommended for you

Brug - Web push notification
Brug  - Web push notificationBrug  - Web push notification
Brug - Web push notification

Юлия Олецкая (Ruby Developer, Altoros) & Константин Рейдо (Ruby Developer, Altoros); г.Минск Доклад: Web Push Notification

Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps

This Slide Deck Was used on my Masterclass abut PWA in my Masterclass about PWA and Web Standards. Thia was an introduction to PWA and his basic stone Path.

mobile web standardsprogressive webappsmobile web
Progressive Web Apps and the Windows Ecosystem [Build 2017]
Progressive Web Apps and the Windows Ecosystem [Build 2017]Progressive Web Apps and the Windows Ecosystem [Build 2017]
Progressive Web Apps and the Windows Ecosystem [Build 2017]

Whether at home or at work, the web plays an increasingly critical role in our daily lives. As we have become more dependent on accessing the tools it powers, we’ve also struggled to overcome some of its limitations—network connectivity, for instance. At Microsoft, we’ve long been interested in the power of the web for software development and we are even more excited for the future possibilities offered by progressive web apps (PWAs). In this session, we discuss what PWAs are, how they can be integrated into the development process of modern websites, the advantages and disadvantages of PWAs vs. native development, and what opportunities they present when installed alongside native apps in Windows.

appsmicrosoft edgewindows
Too many icons!
➫ Lack of overview
➫ Updates pending for stuff I
never use!
Is there a better model?
We want low friction and engaging,
easy to use experiences
➫ Low friction with a continuous focus on time to interactive
➫ Great performance with browser optimizations and good
developer primitives
➫ Reliability with new APIs allowing apps to work offline
➫ Easy distribution as you can link even to sub sites (say a
specific tweet on Twitter)
The web on mobile can offer

Recommended for you

Meet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practiceMeet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practice

Progressive Web Apps aim to provide an app-like user experience through features like push notifications, offline support, and installation prompts while maintaining the key web-based advantages of universality, security, and lack of dependence on app stores. They work across browsers using progressive enhancement and rely on modern web APIs like service workers and the web app manifest to provide app-like functionality, falling back to support core content on all platforms through techniques like polyfilling and graceful degradation. While browser support for some features like service workers is still evolving, Progressive Web Apps aim to make high-quality web apps available to all.

meet.jspwajavascript
A year with progressive web apps! #webinale
A year with progressive web apps! #webinaleA year with progressive web apps! #webinale
A year with progressive web apps! #webinale

About a year ago, we started using Progressive Web Apps (PWAs). The idea behind PWA was to replace native mobile apps. In this talk, I will show you what is possible to build with PWA, what kind of limitations exist, and what we learned in our journey. Along the way, you will see where progressive web apps can be a good fit for your own projects.

webinalepwaprogressive web applications
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps

Progressive Web Apps (PWAs) provide an app-like user experience on the web by making use of modern web capabilities. PWAs use a web app manifest and service workers to work offline, receive push notifications, and load quickly. The web app manifest allows developers to define how the app should appear to users, while service workers cache assets to provide an app-shell experience regardless of network availability. Tools like sw-precache and sw-toolbox help generate service worker code and implement common caching strategies. By following best practices for manifests, service workers, and other features, web apps can achieve many of the benefits of native mobile apps without needing to be installed from an app store.

pwawebprogramming
➫ Engaging and allow to re-engage with users with push
messages or by placing an icon right on the user home
screen
➫ Ephemeral by only updating app resources when accessing
it and remove least used resources
The web on mobile can be
Low friction with a continuous focus on time to interactive
➫ Smart code splitting with ECMAScript modules and HTTP 2.0 Push
➫ Service Worker caching
➫ Google's PRPL (Push, Render, Pre-cache, Lazy-load) pattern
➫ Google Lighthouse and Microsoft Sonarwhal
The web evolved
Great performance with browser optimizations and good
developer primitives
➫ Lots of browser optimizations all over for touch/rendering etc
➫ CSS contain: strict to avoid doing unnecessary work
➫ Encapsulation and shareability with web components
➫ Classes and better language primitives with ES2015+
The web evolved
Reliability with new APIs allowing apps to work offline
➫ Service Workers supply a proxy between the browser and the server
➫ Allows for flexible, programmatically programming
➫ A separate process which only runs when needed
➫ Can run when browser is closed as a result of events
➫ A new primitive for the web (for push etc)
The web evolved

Recommended for you

Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App

Progressive web apps (PWAs) are a new type of application that combines the best of the web and the best of native apps. PWAs use newer web platform features and service workers to deliver app-style experiences to users. Some key benefits of PWAs include providing responsive and reliable experiences that load instantly and feel like regular apps to users, while also being able to reach users on any device via a web URL rather than an app store. PWAs aim to reduce the barriers between the web and native apps.

appsmobile application developmentagile
Checklist for progressive web app development
Checklist for progressive web app developmentChecklist for progressive web app development
Checklist for progressive web app development

What are the principles to build a progressive web app? What are its core features? What about its architecture? The blog explores it all. Give it a read. https://www.webguru-india.com/blog/checklist-for-progressive-web-app-development/

website development companyseo services
Progressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejorProgressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejor

Presentación para el Google Developer Group DevFest 2016 de Granada sobre "Progressive Web Apps" y todo lo relacionado con ellas

googleprogrammingweb
Easy distribution as you can link even to sub sites
➫ Apps and sites can be shared with just a link
➫ Deep-linking can be used to share a specific view in the app or state
○ For instance a deep link to a specific tweet on Twitter
○ Ie. https://twitter.com/IntelSoftware/status/930853470952759296
➫ Sites can still be distributed via stores, with proper infra or packaged
The web evolved
Engaging and allow to re-engage with users with push
messages or by placing an icon right on the user home screen
➫ Push messages (via Service Worker) allows sites to re-engage with users
➫ Web App Manifest, allows configuring an app-like experience
○ Show no chrome (standalone), lock to portrait, theme-color, start URL etc
○ Add to homescreen experience with icon and integration with host OS
The web evolved
Ephemeral by only updating app resources when accessing it
and remove least used resources
➫ Resources (Service Worker cache etc) are updated when site is visited
➫ Caches gets removed when out of space, least used first
➫ Permanent storage can be requested for apps added to homescreen
The web evolved
https://www.youtube.com/watch?v=Dsv5NT4PYG0

Recommended for you

Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App

Presented at Web Directions Code, Melbourne If you have a website—particularly one that generates revenue for your organization—you need a Progressive Web App. So where do you begin? How do you decide which features of a Progressive Web App make sense for your users? What tools can make the process easier (or harder)? In this practical session, Jason will guide you through the key design decisions you’ll need to make about your Progressive Web App and how those decisions impact the scope of your project. He'll also teach you how to avoid common pitfalls and help you take full advantage of Progressive Web App technology.

progressive web appswebdesign
SEMINAR (pwa).pptx
SEMINAR (pwa).pptxSEMINAR (pwa).pptx
SEMINAR (pwa).pptx

This seminar presentation introduces progressive web apps (PWAs). It defines PWAs as web apps that use modern web capabilities to provide an app-like experience to users across different platforms. The presentation discusses the key characteristics and features of PWAs, why they should be built, the core technologies used to create them, and their advantages over traditional web apps and native mobile apps. Examples are given of major companies that have successfully adopted PWAs. The presentation concludes that PWAs are the future of mobile web experiences due to their performance, cost-effectiveness, and ability to work across devices.

Progressive Web Apps - deep dive
Progressive Web Apps - deep diveProgressive Web Apps - deep dive
Progressive Web Apps - deep dive

PWAs allow websites to behave like native applications through the use of technologies like web app manifests, service workers, and progressive enhancement. A web app manifest allows sites to define metadata like display properties, icons, and app functionality. Service workers act as proxies between web apps and the network to enable features like offline access and push notifications. PWAs aim to provide reliable, fast, and engaging experiences for users.

webpwa
But that can't be web?!
No address bar - super fast - icon on homescreen
We call that experience
https://developers.google.com/web/progressive-web-apps/
New trends on web platform
Great for one-time use
The low friction of the web

Recommended for you

Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your Business

Progressive Web Apps (PWAs) are web applications that have responsive designs, work offline, and can be installed on a user's home screen. Key features of PWAs include being responsive across devices, working offline through service workers, being discoverable through web app manifests, automatically updating, using secure HTTPS connections, and allowing users to re-engage through push notifications and installing on home screens without an app store. PWAs provide faster experiences for web users compared to regular websites and allow developers to engage users similar to native mobile apps.

web designonline businessdesign
Why Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandWhy Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp Finland

Progressive web apps (PWAs) combine the best of the web and the best of mobile apps. PWAs use newer web capabilities like service workers and app manifests to deliver app-style experiences to users. There are six main steps to building a PWA: 1) creating a web app manifest, 2) registering a service worker, 3) adding files to cache, 4) deleting previous caches, 5) fetching data from the cache, and 6) adding a custom "Add to Home Screen" option. PWAs offer benefits like being installable, working offline, being discoverable, and loading instantly like regular web pages. WordPress plugins exist to help websites build PWAs and add features like

wordpresspwafinland
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps

This slides includes : - Introduction to progressive web apps - History of mobile and web applications - Advantages of creating Progressive Web Apps - Techniques for developing Progressive Web Apps - Limitations of creating Progressive Web Apps

web developmentwebsitepwa
Always handy if I want it to be
Add to homescreen
No clutter
Looks and acts like an app
As you interact with a PWA experience, gradually you become
more engaged
➫ PWAs are web sites that progressively becomes more app-like
➫ If you use on a regular basis, you might want app on your homescreen
➫ A browser engagement threshold allows sites prompting to install after a while
➫ No door slammers, no prompt for things you seldom use
➫ User always in control
➫ When launched from homescreen, it can act more like a real app
Progressive Web Apps
Great success stories so far!

Recommended for you

Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020

The document discusses why progressive web apps (PWAs) are useful for WordPress. It explains that PWAs combine the best of mobile apps and mobile web by allowing websites to be installed on home screens like apps while still being accessible through regular web browsers. The document outlines the steps to build a PWA, including adding a web app manifest and service workers to cache files so content can be accessed offline. It also discusses features like push notifications and adding PWAs to home screens on iOS.

pwawordpressjavascript
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence

Progressive web app may look like a buzz word around improved web standards and few mobile friendly web design patterns. But it brings positive impact on businesses and users. Let’s learn more about it here.

mobile presence
Progressive web app
Progressive web appProgressive web app
Progressive web app

Progressive Web App New Web Technology for the Mobile User Which work on Poor Data Connection and It Will Work With Simple Manifest File Or with use of Service Workers. It Feel Like Mobile App to the user.

internetnew mediaphp
New trends on web platform
New trends on web platform
76% increase in conversions
+14% iOS
+30% Android
monthly active users
26%increase in average spend
per visit by members arriving
via a push notification
72%increase in time spent for users
visiting via a push notification
+50%repeat visits within 3 months

Recommended for you

progressive web app
 progressive web app progressive web app
progressive web app

This seminar report provides an introduction to progressive web apps (PWAs). It defines PWAs as websites that are reliable, fast and engaging like native mobile apps. The report discusses the key features of PWAs including being responsive, working offline, and being installable on home screens. It also covers the benefits of building PWAs such as improving user experience and increasing engagement. Specific examples of companies that created successful PWAs are provided, including Flipkart, Housing, and AliExpress. Service workers and application shells are explained as important technologies that enable the core functionality of PWAs. Finally, the advantages and disadvantages of the PWA approach are summarized.

Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education

Progressive Web Applications are a new way to think about using the web to provide great user experiences using the best web platform features. The education market has many opportunities to benefit their communities using PWAs to deliver information and application experiences across all devices and platforms.

progressive web applicationsmobilewebsite
SharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning ModelsSharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning Models

Shailen Sukul is a senior SharePoint architect who works with latest web technologies and SharePoint. He specializes in SharePoint installation, configuration, development and training. In his personal projects he prefers AWS and ASP.Net MVC. He maintains several open source SharePoint projects on CodePlex. You can follow him on Twitter or check out his blog for more information.

sharepoint 2013
And many, many more...
Checkout https://www.pwastats.com/ and https://developers.google.com/web/showcase/
for more statistics and success stories
Size of Twitter Clients
214 MB
24 MB
600 KB
Twitter NativeTwitter Lite
Mini dive!

Recommended for you

PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran KasireddyPWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy

A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser.

pwawebappswebsite
Next Generation Mobile Web - PWA (Progressive Web App)
Next Generation Mobile Web  - PWA (Progressive Web App)Next Generation Mobile Web  - PWA (Progressive Web App)
Next Generation Mobile Web - PWA (Progressive Web App)

Progressive web apps (PWAs) are web applications that have responsive designs, work offline, and can be installed on home screens. PWAs have key features like being responsive across devices, working offline through service workers, being discoverable through web app manifests, always being up-to-date, and allowing push notifications and app-like interactions. PWAs provide a faster web experience for customers compared to regular websites, improving conversion rates and revenue. They allow reaching customers who may not install a native mobile app.

progressive web appmobile webpwa
Progressive Web Apps - NPD Meet
Progressive Web Apps - NPD MeetProgressive Web Apps - NPD Meet
Progressive Web Apps - NPD Meet

Introduction to Progressive Web Apps (PWA) as presented in Divum's New Product Developers Meet. PWA provides highly reliable, fast & engaged mobile like user experience on the web.

mobileresponsive web designdivum
Service Worker 101
Service Worker 101
Fast with Service Worker, serve from cache
Service Workers work on second load
➫ Progressive enhancement
➫ Site much work without
➫ Provides an update mechanism

Recommended for you

Core Web Vitals SEO Workshop - improve your performance [pdf]
Core Web Vitals SEO Workshop - improve your performance [pdf]Core Web Vitals SEO Workshop - improve your performance [pdf]
Core Web Vitals SEO Workshop - improve your performance [pdf]

Core Web Vitals to improve your website performance for better SEO results with CWV. CWV Topics include: - Understanding the latest Core Web Vitals including the significance of LCP, INP and CLS + their impact on SEO - Optimisation techniques from our experts on how to improve your CWV on platforms like WordPress and WP Engine - The impact of user experience and SEO

csvseogoogle
Web Assembly (W3C TPAC presentation)
Web Assembly (W3C TPAC presentation)Web Assembly (W3C TPAC presentation)
Web Assembly (W3C TPAC presentation)

Web Assembly (Wasm) will enable a new class of powerful web apps. Wasm is a new format that is a small, fast, and efficient executable for the web. It allows compiling code from languages like C/C++ to run on the web. Wasm has the potential to enable high-end games, CAD programs, and other apps requiring low-latency computations. Existing native code libraries and game engines could be ported to run in the browser using Wasm. While still early, Wasm shows promise for enhancing the capabilities of web apps.

webwasmwebassembly
Generic sensors for the Web
Generic sensors for the WebGeneric sensors for the Web
Generic sensors for the Web

The document discusses the Generic Sensor API, which aims to standardize sensor access on the web. It provides an overview of various sensor types like accelerometers, gyroscopes, magnetometers, as well as derived sensors like orientation sensors. It describes the limitations of the existing sensor APIs and the goals of the new Generic Sensor API, including making it easier to add new sensor types. It also provides examples of how different sensor fusion algorithms work to derive orientation from multiple raw sensors.

webhardwaresensors
Service Workers are flexible!
➫ They are a specialized web worker
➫ Programmable!
➫ Choose your own caching mechanism
➫ Even different one depending on URL!
Cache, Falling Back to Network
Page
Service Worker
Network
Cache
Network, Falling Back to Cache
Page
Service Worker Network
Cache
Cache, then Network
Page
Service Worker Network
Cache

Recommended for you

HTML literals, the JSX of the platform
HTML literals, the JSX of the platformHTML literals, the JSX of the platform
HTML literals, the JSX of the platform

- Lit-html is a library that allows HTML templates to be rendered efficiently using JavaScript template literals. It parses template literals and creates a template object with "parts" that can be updated. - Rendering only updates the dynamic parts of the template, avoiding re-rendering the entire template and reducing work. Templates are treated as values that can be manipulated. - Google is working on lit-html to standardize its parsing of templates and "template parts" concept, with the goal of it potentially being adopted directly into the web platform. Lit-html aims to have minimal limitations and a standardized public API for extensions.

webjsxtemplating
Cold front - bridging the web and the physical world
Cold front - bridging the web and the physical worldCold front - bridging the web and the physical world
Cold front - bridging the web and the physical world

The improvements in size, features and price of hardware has ushered new opportunities in creating small, smart devices (aka internet-of-things) which can be integrated in homes and industries. In these places, the devices can help automate common tasks, as well as give information about the state of things, such as temperature of a machine, air quality etc. Installing an app for one such devices might seem fine at first, but it doesn’t scale nicely to 100s of devices, or devices you seldom interact with, like in an industrial setting. Devices might even have different security restrictions, like being locked behind a physical key. So how do we communicate with these devices? The web has always been known for its low fraction and easy onboarding. No need to install any software, just type in a URL and off you go. And it has always been very secure with its sandbox system, and companies can even have URLs be restricted to certain WiFi networks (intranet). In the last couple of years, the web has taken a quantum leap in usability, with offline support, and many ways to make the experience very app-like. So the question is unavoidable, can the web be the platform to make smart devices succeed? The web lives in a sandbox, and its security model has allowed people to trust it and for it to grow enormously over time, but the world is changing around us. There is a growing need to access new hardware capabilities such as sensors or just connect to devices around us. The great news is that the web sandbox is growing with new capabilities and with new security models, allowing us to connect to devices via Bluetooth, USB or even talk NFC. There are now even ways to directly get magnetometer readings on Android devices. In this talk we will look at this new landscape and how it enables the new wave of smart devices. We will also look at how easy it is to use some of these new APIs. Come join me for a look at how the web can make your smart devices success

webhardware
Web components v1 intro
Web components v1 introWeb components v1 intro
Web components v1 intro

A mini intro to web components, starting from what you (presumable) already know and slowly adopting new vanilla web components features. After that, is shows how to accomplish the same using Polymer 2.0. Intended to be instructor led.

webcomponentses2015
Generic Fallback
Page
Service Worker Network
Cache
Service Workers are much more
Background sync
Push messages
…
See separate SSG Learning session about
Progressive Web Apps and Service Workers
Web App Manifest 101
The easiest part of PWAs
Add a manifest file
{
"short_name": "Flipkart",
"name": "Flipkart Lite",
"start_url": "/?start_url=homescreenicon",
"display": "standalone",
"orientation": "portrait",
"icons": [{
"src": "icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
}]
}

Recommended for you

WebKit, why it matters (PDF version)
WebKit, why it matters (PDF version)WebKit, why it matters (PDF version)
WebKit, why it matters (PDF version)

Kenneth Rohde Christiansen is a Danish engineer who currently works at Nokia Danmark and was formerly part of the distributed Qt WebKit team. He has extensive experience working on touch-based designs and was first to port WebKit to the Enlightenment foundation libraries. He is an active contributor to browsers, W3C standards, and integrating Qt WebKit into Qt5.

webkitqtqtwebkit
WebKit, why it matters?
WebKit, why it matters?WebKit, why it matters?
WebKit, why it matters?

This document provides biographical information about Kenneth Rohde Christiansen, who works for Nokia Danmark and previously worked for Nokia Technology Institute in Brazil. It discusses his accomplishments working on touch-based designs in Brazil and porting WebKit to EFL libraries. It also summarizes his current work on browsers, W3C standards, and integrating Qt WebKit into Qt5.

opensourcewebkitqt
Qt WebKit going Mobile
Qt WebKit going MobileQt WebKit going Mobile
Qt WebKit going Mobile

WebKit is everywhere, on desktops, mobiles, - and as an integrated part of the Qt platform, it is on Linux-based MeeGo as well. n this session we will quickly introduce the WebKit project, and look at why it has become so popular on the mobile platform. We will look at some of the mobile adaptions normally done by the different WebKit ports and at the work we have been doing in Qt WebKit to make it more fit for mobile usage. Some of the technologies we will touch, includes: frame flattening, tiling (including challenges), viewport meta information, touch events and fuzzy hit testing. We hope the session will make people aware of the importance of the Qt WebKit project and its mobile efforts; create discussions and use-cases that we can use for integrating even better with, in particular, open source projects targeting mobile usage and the open source community in general.

meegowebkithtml5
Add to homescreen
Discovery is easy on the web
Remembering URLs isn't
Add to homescreen
Can prompt users to install
Requires* some engagement
*Requirements may change over time
Web APK improved experience
➫ Accessible in launcher
➫ Launchable from other apps
➫ Better Android integration
Push notifications
System level notifications,
like apps
Ask to notify users with
specific information
Can send notifications even
when page closed

Recommended for you

Connecting Technology for Great Experiences - How does QML and Web fit together?
Connecting Technology for Great Experiences - How does QML and Web fit together?Connecting Technology for Great Experiences - How does QML and Web fit together?
Connecting Technology for Great Experiences - How does QML and Web fit together?

The document discusses connecting technology for great experiences. It summarizes Kenneth Christiansen's background as a WebKit reviewer with over a year of experience working with WebKit and 2+ years of app development using declarative languages. It then covers current technology trends like the web being everywhere, social networking, personal data and apps being online, fluid interfaces, and technology becoming a way of life rather than just a tool. The document argues that while the web is present in many areas, it has not fully replaced native apps in all scenarios.

indtwebkitqt
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference

We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner! We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too! Check out our proposed agenda below 👇👇 08:30 ☕ Welcome coffee (30') 09:00 Opening note/ Intro to UiPath Community (10') Cristina Vidu, Global Manager, Marketing Community @UiPath Dawid Kot, Digital Transformation Lead @Proservartner 09:10 Cloud migration - Proservartner & DOVISTA case study (30') Marcin Drozdowski, Automation CoE Manager @DOVISTA Pawel Kamiński, RPA developer @DOVISTA Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 09:40 From bottlenecks to breakthroughs: Citizen Development in action (25') Pawel Poplawski, Director, Improvement and Automation @McCormick & Company Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company 10:05 Next-level bots: API integration in UiPath Studio (30') Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 10:35 ☕ Coffee Break (15') 10:50 Document Understanding with my RPA Companion (45') Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath 11:35 Power up your Robots: GenAI and GPT in REFramework (45') Krzysztof Karaszewski, Global RPA Product Manager 12:20 🍕 Lunch Break (1hr) 13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30') Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance 13:50 Communications Mining - focus on AI capabilities (30') Thomasz Wierzbicki, Business Analyst @Office Samurai 14:20 Polish MVP panel: Insights on MVP award achievements and career profiling

#uipathcommunity#automation#automationdeveloper
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing

Invited Remote Lecture to SC21 The International Conference for High Performance Computing, Networking, Storage, and Analysis St. Louis, Missouri November 18, 2021

distributed supercomputerdistributed machine learning
How to evaluate?
How to know how I am performing with my PWA'ness
Lighthouse
Guiding you on the path towards
progressive web app-iness.
goo.gl/zzopnG
New trends on web platform
Sonarwhal
Linting tool for the web, built by Microsoft
https://sonarwhal.com/
https://sonarwhal.com/docs/user-guide/rules/#pwas

Recommended for you

WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

Profile portofolio

20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024

Everything that I found interesting about machines behaving intelligently during June 2024

quantumfaxmachine
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf

Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.

neo4jneo4j webinarsgraph database
Browser support?
Is this all Chrome and mobile only?
Google is a big supporter
➫ Very good support on Android
➫ Working on desktop + Chrome OS support
➫ Working on extending standards and matching Electron
features on desktop
PWAs on Android
➫ Requires HTTPS, Offline experience, manifest
➫ Engagement criteria
➫ Add to homescreen dialog
➫ Installs generated Web APK from Google server
PWAs in the Play Store?
➫ Not directly supported
➫ New Trusted Web Activity
○ Abide to Play store rules (payment etc)
○ Needs a file on server linking to app to show relationship
○ Runs in Chrome (not WebView) like Custom Tabs
○ Can be extended in Java with a onmessage/postmessage API

Recommended for you

7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf

Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).

solar storms
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In

Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk. What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year? Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year. This webinar will review: - Key changes to privacy regulations in 2024 - Key themes in privacy and data governance in 2024 - How to maximize your privacy program in the second half of 2024

data privacyprivacy complianceai
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...

Jindong Gu, Zhen Han, Shuo Chen, Ahmad Beirami, Bailan He, Gengyuan Zhang, Ruotong Liao, Yao Qin, Volker Tresp, Philip Torr "A Systematic Survey of Prompt Engineering on Vision-Language Foundation Models" arXiv2023 https://arxiv.org/abs/2307.12980

Early preview of desktop support
ServiceWorker
Cache API
Push API
Manifest
Microsoft is all-in on PWAs
Microsoft PWA support is strategic
➫ Deeply integrated into Windows
➫ Web Assembly allows native code to run at near native
speed on the web
➫ PWAs in store have access to all WinRT APIs
○ Polyfills will be available for some not-implemented APIs like Web
Bluetooth
PWAs in the Microsoft Store

Recommended for you

Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops

This presentation, delivered at the Postgres Bangalore (PGBLR) Meetup-2 on June 29th, 2024, dives deep into connection pooling for PostgreSQL databases. Aakash M, a PostgreSQL Tech Lead at Mydbops, explores the challenges of managing numerous connections and explains how connection pooling optimizes performance and resource utilization. Key Takeaways: * Understand why connection pooling is essential for high-traffic applications * Explore various connection poolers available for PostgreSQL, including pgbouncer * Learn the configuration options and functionalities of pgbouncer * Discover best practices for monitoring and troubleshooting connection pooling setups * Gain insights into real-world use cases and considerations for production environments This presentation is ideal for: * Database administrators (DBAs) * Developers working with PostgreSQL * DevOps engineers * Anyone interested in optimizing PostgreSQL performance Contact info@mydbops.com for PostgreSQL Managed, Consulting and Remote DBA Services

postgresqlpgsqldatabase
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf

Sustainability requires ingenuity and stewardship. Did you know Pigging Solutions pigging systems help you achieve your sustainable manufacturing goals AND provide rapid return on investment. How? Our systems recover over 99% of product in transfer piping. Recovering trapped product from transfer lines that would otherwise become flush-waste, means you can increase batch yields and eliminate flush waste. From raw materials to finished product, if you can pump it, we can pig it.

pigging solutionsprocess piggingproduct transfers
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf

In the modern digital era, social media platforms have become integral to our daily lives. These platforms, including Facebook, Instagram, WhatsApp, and Snapchat, offer countless ways to connect, share, and communicate.

social media hackerfacebook hackerhire a instagram hacker
PWAs in the Microsoft Store
What about
Apple?
ServiceWorker
Cache API
Push API
Manifest
Apple very recently started on PWA support
Related APIs
Making those PWAs even more native like with new powerful features

Recommended for you

Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...

Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)

user modelinguser profilinguser model
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides

If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights. During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to: - Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value - Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems - Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors - Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported - Look Ahead: Gain insights into where FME is headed with coordinate systems in the future Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!

Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces

An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)

augmented realitycross realityvirtual reality
Server
Request index.html
Receive index.html
Request style.css
Receive style.css
Server
Request index.html
Receive index.html
Receive style.css
Receive app.js
HTTP 2.0 Push
HTTP 1.x HTTP 2.0
➫ Server Push lets the server bundle and send assets alongside a request
➫ This allows the server to do on-demand code splitting/bundling with ES modules
➫ Can reduce load times
➫ Less need to inline CSS, JS…
➫ Better caching in the browser
➫ Pillarstone in PRPL (Push critical resources, Render, Pre-cache, Lazy-load) pattern
1
2
3
4
1
2
BrowserBrowser
Seamless Sign-In
New Credential management API* for
seamless sign-in
AliExpress:
- 85% sign-in failure
+ 11% conversion
Pinterest:
+ 10% increase in desktop logins
*https://developers.google.com/web/updates/2016/04/credential-management-api
"Polyfill" depending on Google accounts: https://developers.google.com/identity/
Surfing random sites will stay safe
➫ Two new standards: Web Bluetooth and Web USB
➫ Only available from sites served over HTTPS
➫ Only accessible from top frame
➫ User gesture required to actually request and connect to a device
➫ Avoids fingerprinting: Device is selected by user, only that device is exposed
to the particular site
Security focused device access via Bluetooth and USB
Web Bluetooth
➫ Bluetooth 4+ (Low Energy) GATT
○ Easy to use, modern web API
○ Uses promises and typed arrays
(ie. Uint8Array etc)
➫ No Classic mode, only Low Energy protocol
➫ Only Central, eg. can connect to peripheral, but
not act like peripherals

Recommended for you

Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence

Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently. Visit- https://onliveserver.com/linux-web-hosting/

cheap linux hosting
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems

Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states. In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing. Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.

The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses

CIO Council Cal Poly Humboldt September 22, 2023

national research platformdistributed supercomputerdistributed systems
Web Bluetooth
Puck.js
➫ Program Espruino devices in
JavaScript
➫ Web based IDE running in the
browser
➫ Uses Web Bluetooth for
communication
Web USB
➫ Securely access USB devices
connected to your computer
➫ Allows creating devices without the
need of expensive native drivers/sdk
➫ Web first experience possible
Polyfill will be available for
PWAs in the Microsoft Store
Medical CPR manikin connected via Web USB

Recommended for you

What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx

This is a slide deck that showcases the updates in Microsoft Copilot for May 2024

microsoftmicrosoft copilot
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter

Widya Salim and Victor Ma will outline the causal impact analysis, framework, and key learnings used to quantify the impact of reducing Twitter's network latency.

BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL

Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.

blockchainweb3blockchain technology
https://medium.com/@kennethrohde/program-a-smart-device-directly-no-install-needed-cd8b29320d76#.nla4jzls9
https://www.youtube.com/watch?v=o7wGt9RfHVA
Web USB
Zephyr.JS
➫ Program Zephyr RTOS
devices in JavaScript
➫ Web based IDE running in the
browser
➫ Uses Web USB for
communication
➫ Created at Intel Open Source
Technology Center
Web Payments
➫ Making paying easy on the mobile
web, avoiding long form checkouts
➫ Use payment methods stored on
your Apple/Android/Samsung Pay
or in your browser
➫ Merchant doesn’t have access to
your payment details
Web VR
➫ Bringing Virtual Reality to the Web
➫ Easy to use API to access hardware
capabilities
○ Use WebGL (2) for rendering
○ GamePad support
➫ Progressive enhancement: works
without VR gear

Recommended for you

Web Assembly
➫ Compile target for lang's used in native apps: C/
C++ / Rust
➫ Kind of an efficient, low-level bytecode for the web
➫ Small, fast to load and efficient to execute
➫ Bring existing libraries and code to the web
➫ Great for high-end games, CAD and professional
video editors
➫ Fast, portable and secure
https://medium.com/google-earth/earth-on-web-the-road-to-
cross-browser-7338e0f46278
Some important
improvements in
JavaScript
Classes
class Animal {
constructor(name) {
this.name = name;
}
static eat() {
return this;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
// Create an instance of Animal
let obj = new Animal();
obj.speak(); // Animal {}
➫ Built on JavaScript's existing
prototype-based inheritance
➫ Support short names
➫ Two inheritance trees (one for
regular and one for static
methods)
➫ Define and support inheritance
with extends keyword
Arrow function
function funcName(params) {
return params + 2;
}
funcName(2);
// 4
const funcName = (params) => params + 2
funcName(2);
// 4
➫ More concise syntax
➫ No need to re-bind <this>
function Person(){
this.age = 0;
setInterval(() => {
// |this| refers to the person object
this.age++;
}, 1000);
}
function Person() {
var that = this;
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

Recommended for you

ES Modules
export function sayName(name) {
console.log(`Hello ${name}`);
}
➫ Separate code into modules
➫ Import and export symbols
➫ Support for sync and async loading
➫ Improves code organization
➫ Great for external dependencies
mymodule.js
import { sayName } from './mymodule.js';
sayName('Sam');
// Hello Sam
app.js
Thank you

More Related Content

What's hot

Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
SaleemMalik52
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
Suraj Kumar
 
Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016
Abdelrahman Omran
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
AnjaliTanpure1
 
Pwa demystified
Pwa demystifiedPwa demystified
Pwa demystified
edynamic
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
Saleh Rahimzadeh
 
Progressive Web Apps - Up & Running
Progressive Web Apps - Up & RunningProgressive Web Apps - Up & Running
Progressive Web Apps - Up & Running
Suraj Kumar
 
Progressive web apps
 Progressive web apps Progressive web apps
Progressive web apps
Neha Sharma
 
Progressive Web Apps For Startups
Progressive Web Apps For StartupsProgressive Web Apps For Startups
Progressive Web Apps For Startups
Ido Green
 
Progressive Web-App (PWA)
Progressive Web-App (PWA)Progressive Web-App (PWA)
Progressive Web-App (PWA)
NexThoughts Technologies
 
Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)
Zhentian Wan
 
PWA demystified
PWA demystifiedPWA demystified
PWA demystified
Pradeep Patel, PMP®
 
Progressive Web Apps - Overview & Getting Started
Progressive Web Apps - Overview & Getting StartedProgressive Web Apps - Overview & Getting Started
Progressive Web Apps - Overview & Getting Started
Gaurav Behere
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
Chris Love
 
Progressive web application
Progressive web applicationProgressive web application
Progressive web application
RavikantGautam8
 
Brug - Web push notification
Brug  - Web push notificationBrug  - Web push notification
Brug - Web push notification
Olga Lavrentieva
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps
Alexandre Marreiros
 
Progressive Web Apps and the Windows Ecosystem [Build 2017]
Progressive Web Apps and the Windows Ecosystem [Build 2017]Progressive Web Apps and the Windows Ecosystem [Build 2017]
Progressive Web Apps and the Windows Ecosystem [Build 2017]
Aaron Gustafson
 
Meet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practiceMeet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practice
Łukasz Romanowicz
 
A year with progressive web apps! #webinale
A year with progressive web apps! #webinaleA year with progressive web apps! #webinale
A year with progressive web apps! #webinale
Antonio Peric-Mazar
 

What's hot (20)

Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
 
Pwa demystified
Pwa demystifiedPwa demystified
Pwa demystified
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Progressive Web Apps - Up & Running
Progressive Web Apps - Up & RunningProgressive Web Apps - Up & Running
Progressive Web Apps - Up & Running
 
Progressive web apps
 Progressive web apps Progressive web apps
Progressive web apps
 
Progressive Web Apps For Startups
Progressive Web Apps For StartupsProgressive Web Apps For Startups
Progressive Web Apps For Startups
 
Progressive Web-App (PWA)
Progressive Web-App (PWA)Progressive Web-App (PWA)
Progressive Web-App (PWA)
 
Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)
 
PWA demystified
PWA demystifiedPWA demystified
PWA demystified
 
Progressive Web Apps - Overview & Getting Started
Progressive Web Apps - Overview & Getting StartedProgressive Web Apps - Overview & Getting Started
Progressive Web Apps - Overview & Getting Started
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
 
Progressive web application
Progressive web applicationProgressive web application
Progressive web application
 
Brug - Web push notification
Brug  - Web push notificationBrug  - Web push notification
Brug - Web push notification
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps
 
Progressive Web Apps and the Windows Ecosystem [Build 2017]
Progressive Web Apps and the Windows Ecosystem [Build 2017]Progressive Web Apps and the Windows Ecosystem [Build 2017]
Progressive Web Apps and the Windows Ecosystem [Build 2017]
 
Meet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practiceMeet.js Summit 2019 - PWA in practice
Meet.js Summit 2019 - PWA in practice
 
A year with progressive web apps! #webinale
A year with progressive web apps! #webinaleA year with progressive web apps! #webinale
A year with progressive web apps! #webinale
 

Similar to New trends on web platform

Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Saikiran Sheshagiri
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
Sankalp Khandelwal
 
Checklist for progressive web app development
Checklist for progressive web app developmentChecklist for progressive web app development
Checklist for progressive web app development
WebGuru Infosystems Pvt. Ltd.
 
Progressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejorProgressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejor
Israel Blancas
 
Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
Jason Grigsby
 
SEMINAR (pwa).pptx
SEMINAR (pwa).pptxSEMINAR (pwa).pptx
SEMINAR (pwa).pptx
BasitMir10
 
Progressive Web Apps - deep dive
Progressive Web Apps - deep diveProgressive Web Apps - deep dive
Progressive Web Apps - deep dive
Kenneth Rohde Christiansen
 
Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your Business
Lets Grow Business
 
Why Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandWhy Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp Finland
Imran Sayed
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Yatendrasinh Joddha
 
Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020
Imran Sayed
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Magic Software
 
Progressive web app
Progressive web appProgressive web app
Progressive web app
Deepak Upadhyay
 
progressive web app
 progressive web app progressive web app
progressive web app
RAGINI .
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education
Chris Love
 
SharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning ModelsSharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning Models
Shailen Sukul
 
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran KasireddyPWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
Sai Kiran Kasireddy
 
Next Generation Mobile Web - PWA (Progressive Web App)
Next Generation Mobile Web  - PWA (Progressive Web App)Next Generation Mobile Web  - PWA (Progressive Web App)
Next Generation Mobile Web - PWA (Progressive Web App)
Nuri Cahyono
 
Progressive Web Apps - NPD Meet
Progressive Web Apps - NPD MeetProgressive Web Apps - NPD Meet
Progressive Web Apps - NPD Meet
Vaideeswaran Sethuraman
 
Core Web Vitals SEO Workshop - improve your performance [pdf]
Core Web Vitals SEO Workshop - improve your performance [pdf]Core Web Vitals SEO Workshop - improve your performance [pdf]
Core Web Vitals SEO Workshop - improve your performance [pdf]
Peter Mead
 

Similar to New trends on web platform (20)

Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
 
Checklist for progressive web app development
Checklist for progressive web app developmentChecklist for progressive web app development
Checklist for progressive web app development
 
Progressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejorProgressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejor
 
Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
 
SEMINAR (pwa).pptx
SEMINAR (pwa).pptxSEMINAR (pwa).pptx
SEMINAR (pwa).pptx
 
Progressive Web Apps - deep dive
Progressive Web Apps - deep diveProgressive Web Apps - deep dive
Progressive Web Apps - deep dive
 
Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your Business
 
Why Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandWhy Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp Finland
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
 
Progressive web app
Progressive web appProgressive web app
Progressive web app
 
progressive web app
 progressive web app progressive web app
progressive web app
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education
 
SharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning ModelsSharePoint 2013 App Provisioning Models
SharePoint 2013 App Provisioning Models
 
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran KasireddyPWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
 
Next Generation Mobile Web - PWA (Progressive Web App)
Next Generation Mobile Web  - PWA (Progressive Web App)Next Generation Mobile Web  - PWA (Progressive Web App)
Next Generation Mobile Web - PWA (Progressive Web App)
 
Progressive Web Apps - NPD Meet
Progressive Web Apps - NPD MeetProgressive Web Apps - NPD Meet
Progressive Web Apps - NPD Meet
 
Core Web Vitals SEO Workshop - improve your performance [pdf]
Core Web Vitals SEO Workshop - improve your performance [pdf]Core Web Vitals SEO Workshop - improve your performance [pdf]
Core Web Vitals SEO Workshop - improve your performance [pdf]
 

More from Kenneth Rohde Christiansen

Web Assembly (W3C TPAC presentation)
Web Assembly (W3C TPAC presentation)Web Assembly (W3C TPAC presentation)
Web Assembly (W3C TPAC presentation)
Kenneth Rohde Christiansen
 
Generic sensors for the Web
Generic sensors for the WebGeneric sensors for the Web
Generic sensors for the Web
Kenneth Rohde Christiansen
 
HTML literals, the JSX of the platform
HTML literals, the JSX of the platformHTML literals, the JSX of the platform
HTML literals, the JSX of the platform
Kenneth Rohde Christiansen
 
Cold front - bridging the web and the physical world
Cold front - bridging the web and the physical worldCold front - bridging the web and the physical world
Cold front - bridging the web and the physical world
Kenneth Rohde Christiansen
 
Web components v1 intro
Web components v1 introWeb components v1 intro
Web components v1 intro
Kenneth Rohde Christiansen
 
WebKit, why it matters (PDF version)
WebKit, why it matters (PDF version)WebKit, why it matters (PDF version)
WebKit, why it matters (PDF version)
Kenneth Rohde Christiansen
 
WebKit, why it matters?
WebKit, why it matters?WebKit, why it matters?
WebKit, why it matters?
Kenneth Rohde Christiansen
 
Qt WebKit going Mobile
Qt WebKit going MobileQt WebKit going Mobile
Qt WebKit going Mobile
Kenneth Rohde Christiansen
 
Connecting Technology for Great Experiences - How does QML and Web fit together?
Connecting Technology for Great Experiences - How does QML and Web fit together?Connecting Technology for Great Experiences - How does QML and Web fit together?
Connecting Technology for Great Experiences - How does QML and Web fit together?
Kenneth Rohde Christiansen
 

More from Kenneth Rohde Christiansen (9)

Web Assembly (W3C TPAC presentation)
Web Assembly (W3C TPAC presentation)Web Assembly (W3C TPAC presentation)
Web Assembly (W3C TPAC presentation)
 
Generic sensors for the Web
Generic sensors for the WebGeneric sensors for the Web
Generic sensors for the Web
 
HTML literals, the JSX of the platform
HTML literals, the JSX of the platformHTML literals, the JSX of the platform
HTML literals, the JSX of the platform
 
Cold front - bridging the web and the physical world
Cold front - bridging the web and the physical worldCold front - bridging the web and the physical world
Cold front - bridging the web and the physical world
 
Web components v1 intro
Web components v1 introWeb components v1 intro
Web components v1 intro
 
WebKit, why it matters (PDF version)
WebKit, why it matters (PDF version)WebKit, why it matters (PDF version)
WebKit, why it matters (PDF version)
 
WebKit, why it matters?
WebKit, why it matters?WebKit, why it matters?
WebKit, why it matters?
 
Qt WebKit going Mobile
Qt WebKit going MobileQt WebKit going Mobile
Qt WebKit going Mobile
 
Connecting Technology for Great Experiences - How does QML and Web fit together?
Connecting Technology for Great Experiences - How does QML and Web fit together?Connecting Technology for Great Experiences - How does QML and Web fit together?
Connecting Technology for Great Experiences - How does QML and Web fit together?
 

Recently uploaded

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 

Recently uploaded (20)

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 

New trends on web platform

  • 1. New trends on the Web Platform Kenneth R. Christiansen
  • 2. Hi! I am Kenneth
  • 4. Our team mission Move the Web Platform forward
  • 5. Why the web matters
  • 7. The web is awesome Great reach, low friction safe ephemeral (deep) linkable indexable composable
  • 8. How did the Web beat native applications on the desktop? But you might ask yourself...
  • 9. Distribution is The Hardest Problem In Software
  • 10. But mobile is a different beast than the desktop ➫ Unreliable network ➫ Slower hardware ➫ Less screen real-estate ➫ Different input methods ➫ Different set of expectations
  • 11. And for a long time... Great sadness Lots of dinosaurs, slowness, hard to re-engage with users, hard to pay on mobile ...really a second grade experience Source: funnycatsite.com
  • 13. Reliable, Fast & Engaging But there is good news, because today the web can be
  • 14. Year 2016 (6 years later)
  • 15. The mobile landscape changed a lot in recent years But we need to keep in mind that
  • 16. ➫ People don't proactively look for new apps to install ➫ On average, a user in the US installs 0 new apps per month ➫ People hate to get updates for apps they don't use Mobile evolved
  • 17. I don't want to download your app, I just want to do stuff
  • 19. With many devices around usapps don't scale well
  • 20. Too many icons! Lack of overview Lots of updates pending for stuff I never use!
  • 21. Too many icons! ➫ Lack of overview ➫ Updates pending for stuff I never use!
  • 22. Is there a better model?
  • 23. We want low friction and engaging, easy to use experiences
  • 24. ➫ Low friction with a continuous focus on time to interactive ➫ Great performance with browser optimizations and good developer primitives ➫ Reliability with new APIs allowing apps to work offline ➫ Easy distribution as you can link even to sub sites (say a specific tweet on Twitter) The web on mobile can offer
  • 25. ➫ Engaging and allow to re-engage with users with push messages or by placing an icon right on the user home screen ➫ Ephemeral by only updating app resources when accessing it and remove least used resources The web on mobile can be
  • 26. Low friction with a continuous focus on time to interactive ➫ Smart code splitting with ECMAScript modules and HTTP 2.0 Push ➫ Service Worker caching ➫ Google's PRPL (Push, Render, Pre-cache, Lazy-load) pattern ➫ Google Lighthouse and Microsoft Sonarwhal The web evolved
  • 27. Great performance with browser optimizations and good developer primitives ➫ Lots of browser optimizations all over for touch/rendering etc ➫ CSS contain: strict to avoid doing unnecessary work ➫ Encapsulation and shareability with web components ➫ Classes and better language primitives with ES2015+ The web evolved
  • 28. Reliability with new APIs allowing apps to work offline ➫ Service Workers supply a proxy between the browser and the server ➫ Allows for flexible, programmatically programming ➫ A separate process which only runs when needed ➫ Can run when browser is closed as a result of events ➫ A new primitive for the web (for push etc) The web evolved
  • 29. Easy distribution as you can link even to sub sites ➫ Apps and sites can be shared with just a link ➫ Deep-linking can be used to share a specific view in the app or state ○ For instance a deep link to a specific tweet on Twitter ○ Ie. https://twitter.com/IntelSoftware/status/930853470952759296 ➫ Sites can still be distributed via stores, with proper infra or packaged The web evolved
  • 30. Engaging and allow to re-engage with users with push messages or by placing an icon right on the user home screen ➫ Push messages (via Service Worker) allows sites to re-engage with users ➫ Web App Manifest, allows configuring an app-like experience ○ Show no chrome (standalone), lock to portrait, theme-color, start URL etc ○ Add to homescreen experience with icon and integration with host OS The web evolved
  • 31. Ephemeral by only updating app resources when accessing it and remove least used resources ➫ Resources (Service Worker cache etc) are updated when site is visited ➫ Caches gets removed when out of space, least used first ➫ Permanent storage can be requested for apps added to homescreen The web evolved
  • 33. But that can't be web?! No address bar - super fast - icon on homescreen
  • 34. We call that experience https://developers.google.com/web/progressive-web-apps/
  • 36. Great for one-time use The low friction of the web
  • 37. Always handy if I want it to be Add to homescreen
  • 38. No clutter Looks and acts like an app
  • 39. As you interact with a PWA experience, gradually you become more engaged ➫ PWAs are web sites that progressively becomes more app-like ➫ If you use on a regular basis, you might want app on your homescreen ➫ A browser engagement threshold allows sites prompting to install after a while ➫ No door slammers, no prompt for things you seldom use ➫ User always in control ➫ When launched from homescreen, it can act more like a real app Progressive Web Apps
  • 43. 76% increase in conversions +14% iOS +30% Android monthly active users
  • 44. 26%increase in average spend per visit by members arriving via a push notification 72%increase in time spent for users visiting via a push notification +50%repeat visits within 3 months
  • 45. And many, many more... Checkout https://www.pwastats.com/ and https://developers.google.com/web/showcase/ for more statistics and success stories
  • 46. Size of Twitter Clients 214 MB 24 MB 600 KB
  • 51. Fast with Service Worker, serve from cache
  • 52. Service Workers work on second load ➫ Progressive enhancement ➫ Site much work without ➫ Provides an update mechanism
  • 53. Service Workers are flexible! ➫ They are a specialized web worker ➫ Programmable! ➫ Choose your own caching mechanism ➫ Even different one depending on URL!
  • 54. Cache, Falling Back to Network Page Service Worker Network Cache
  • 55. Network, Falling Back to Cache Page Service Worker Network Cache
  • 56. Cache, then Network Page Service Worker Network Cache
  • 58. Service Workers are much more Background sync Push messages … See separate SSG Learning session about Progressive Web Apps and Service Workers
  • 60. The easiest part of PWAs Add a manifest file { "short_name": "Flipkart", "name": "Flipkart Lite", "start_url": "/?start_url=homescreenicon", "display": "standalone", "orientation": "portrait", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" }] }
  • 61. Add to homescreen Discovery is easy on the web Remembering URLs isn't
  • 62. Add to homescreen Can prompt users to install Requires* some engagement *Requirements may change over time
  • 63. Web APK improved experience ➫ Accessible in launcher ➫ Launchable from other apps ➫ Better Android integration
  • 64. Push notifications System level notifications, like apps Ask to notify users with specific information Can send notifications even when page closed
  • 65. How to evaluate? How to know how I am performing with my PWA'ness
  • 66. Lighthouse Guiding you on the path towards progressive web app-iness. goo.gl/zzopnG
  • 68. Sonarwhal Linting tool for the web, built by Microsoft https://sonarwhal.com/ https://sonarwhal.com/docs/user-guide/rules/#pwas
  • 69. Browser support? Is this all Chrome and mobile only?
  • 70. Google is a big supporter ➫ Very good support on Android ➫ Working on desktop + Chrome OS support ➫ Working on extending standards and matching Electron features on desktop
  • 71. PWAs on Android ➫ Requires HTTPS, Offline experience, manifest ➫ Engagement criteria ➫ Add to homescreen dialog ➫ Installs generated Web APK from Google server
  • 72. PWAs in the Play Store? ➫ Not directly supported ➫ New Trusted Web Activity ○ Abide to Play store rules (payment etc) ○ Needs a file on server linking to app to show relationship ○ Runs in Chrome (not WebView) like Custom Tabs ○ Can be extended in Java with a onmessage/postmessage API
  • 73. Early preview of desktop support
  • 75. Microsoft PWA support is strategic ➫ Deeply integrated into Windows ➫ Web Assembly allows native code to run at near native speed on the web ➫ PWAs in store have access to all WinRT APIs ○ Polyfills will be available for some not-implemented APIs like Web Bluetooth
  • 76. PWAs in the Microsoft Store
  • 77. PWAs in the Microsoft Store
  • 79. ServiceWorker Cache API Push API Manifest Apple very recently started on PWA support
  • 80. Related APIs Making those PWAs even more native like with new powerful features
  • 81. Server Request index.html Receive index.html Request style.css Receive style.css Server Request index.html Receive index.html Receive style.css Receive app.js HTTP 2.0 Push HTTP 1.x HTTP 2.0 ➫ Server Push lets the server bundle and send assets alongside a request ➫ This allows the server to do on-demand code splitting/bundling with ES modules ➫ Can reduce load times ➫ Less need to inline CSS, JS… ➫ Better caching in the browser ➫ Pillarstone in PRPL (Push critical resources, Render, Pre-cache, Lazy-load) pattern 1 2 3 4 1 2 BrowserBrowser
  • 82. Seamless Sign-In New Credential management API* for seamless sign-in AliExpress: - 85% sign-in failure + 11% conversion Pinterest: + 10% increase in desktop logins *https://developers.google.com/web/updates/2016/04/credential-management-api "Polyfill" depending on Google accounts: https://developers.google.com/identity/
  • 83. Surfing random sites will stay safe ➫ Two new standards: Web Bluetooth and Web USB ➫ Only available from sites served over HTTPS ➫ Only accessible from top frame ➫ User gesture required to actually request and connect to a device ➫ Avoids fingerprinting: Device is selected by user, only that device is exposed to the particular site Security focused device access via Bluetooth and USB
  • 84. Web Bluetooth ➫ Bluetooth 4+ (Low Energy) GATT ○ Easy to use, modern web API ○ Uses promises and typed arrays (ie. Uint8Array etc) ➫ No Classic mode, only Low Energy protocol ➫ Only Central, eg. can connect to peripheral, but not act like peripherals
  • 86. Puck.js ➫ Program Espruino devices in JavaScript ➫ Web based IDE running in the browser ➫ Uses Web Bluetooth for communication
  • 87. Web USB ➫ Securely access USB devices connected to your computer ➫ Allows creating devices without the need of expensive native drivers/sdk ➫ Web first experience possible Polyfill will be available for PWAs in the Microsoft Store
  • 88. Medical CPR manikin connected via Web USB
  • 90. Zephyr.JS ➫ Program Zephyr RTOS devices in JavaScript ➫ Web based IDE running in the browser ➫ Uses Web USB for communication ➫ Created at Intel Open Source Technology Center
  • 91. Web Payments ➫ Making paying easy on the mobile web, avoiding long form checkouts ➫ Use payment methods stored on your Apple/Android/Samsung Pay or in your browser ➫ Merchant doesn’t have access to your payment details
  • 92. Web VR ➫ Bringing Virtual Reality to the Web ➫ Easy to use API to access hardware capabilities ○ Use WebGL (2) for rendering ○ GamePad support ➫ Progressive enhancement: works without VR gear
  • 93. Web Assembly ➫ Compile target for lang's used in native apps: C/ C++ / Rust ➫ Kind of an efficient, low-level bytecode for the web ➫ Small, fast to load and efficient to execute ➫ Bring existing libraries and code to the web ➫ Great for high-end games, CAD and professional video editors ➫ Fast, portable and secure https://medium.com/google-earth/earth-on-web-the-road-to- cross-browser-7338e0f46278
  • 95. Classes class Animal { constructor(name) { this.name = name; } static eat() { return this; } speak() { console.log(this.name + ' makes a noise.'); } } // Create an instance of Animal let obj = new Animal(); obj.speak(); // Animal {} ➫ Built on JavaScript's existing prototype-based inheritance ➫ Support short names ➫ Two inheritance trees (one for regular and one for static methods) ➫ Define and support inheritance with extends keyword
  • 96. Arrow function function funcName(params) { return params + 2; } funcName(2); // 4 const funcName = (params) => params + 2 funcName(2); // 4 ➫ More concise syntax ➫ No need to re-bind <this> function Person(){ this.age = 0; setInterval(() => { // |this| refers to the person object this.age++; }, 1000); } function Person() { var that = this; that.age = 0; setInterval(function growUp() { that.age++; }, 1000); }
  • 97. ES Modules export function sayName(name) { console.log(`Hello ${name}`); } ➫ Separate code into modules ➫ Import and export symbols ➫ Support for sync and async loading ➫ Improves code organization ➫ Great for external dependencies mymodule.js import { sayName } from './mymodule.js'; sayName('Sam'); // Hello Sam app.js