Future of web development

PROGRESSIVE
WEB APPS
THE FUTURE….

SERVICE WORKERS ARE
TO PROGRESSIVE WEB
APPS AS
XMLHTTPREQUEST WAS
TO AJAX
Progressive Web Apps London
PROGRESSIVE WEB APPS

SECURITY
▸ When developing, there is no needs
to do anything different Localhost is
treat as a secure environment.
▸ letsencrypt.org a group of people
trying to get HTTPS as wide spread
as possible on the web. Offer a
command line tool that will help you
generate your SSL certs and
encourage you to automate the
process.

SECURITY
▸Mozilla SSL Config Generator (bit.ly/ssl-config-gen)
▸Should be your first stop when seeing up secure servers.
▸Tool that gives you example configurations with all the
best practices that is constantly kept up to date so you
know your server will be secure.
▸Chrome DevTools provides an in-depth look at the security
of your site, if you haven't been already you should definitely
take advantage of this free tool.

SECURITY
▸SSL Labs
▸Analysis tool to help pain point problems in your servers
security and help you rectify them.
▸bit.ly/ssl-labs
▸Lastly some “Light” reading and watching on the subject of
security.
▸Google Developers Security: bit.ly/security-docs
▸HTTPS The green lock and beyond: bit.ly/green-lock-beyond

USEFUL LINKS
▸paul.kinlan.me/detecting-injected-content/
▸letsencrypt.org/
▸mozilla.github.io/server-side-tls/ssl-config-generator/
▸www.ssllabs.com/ssltest/
▸developers.google.com/web/fundamentals/security/
▸www.youtube.com/watch?v=9WuP4KcDBpI (Deploying HTTPS:
The Green Lock and Beyond (Chrome Dev Summit 2015)

EVERY STEP YOU MAKE A
USER PERFORM BEFORE
THEY GET VALUE OUT OF
YOUR APP WILL COST YOU
20% OF USERS
http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

WEB APPS VS NATIVE
▸One thing Web apps have over Native is that they are always available so already
you have retained 20% of your users.
▸Golden Rules
▸Don't be big
▸ Minify everything, .webp image format (compatibility!), <picture> element tag
▸Only download what you need
▸ Simple enough don't try to load everything in your web app your user will be left waiting and slowly
but surely hating your app.
▸Only download whats changed
▸ Use file headers to see if the file has changed or not to reduce round trip time

CACHING & OTHER TRICKS
▸Defer the loading of scripts and some one Critical CSS files until the
HMTL has been parsed.
▸Defer iframe loading.
▸Reduce Round trips
▸As we all know caching allows for us to display web pages without having
to make calls to servers making the over all experience for the user
better. Having a robust caching strategy can shave seconds off your
loading time.
▸We can now do so much more with caching using Service Workers (more
on this later on).

HTTP/2
▸Instead of 6 simultaneous connections HTTP/2 uses only
one.
▸HTTP/2 tackles the issue of heads blocking on the protocol
level, by changing HTTP/1.1 connections into streams
allowing connections to share a single connection splitting
things up into streams.
▸Once one set of frames is finished sending the stream is
freed up for the next set not needing to wait for a response.

USEFUL LINKS
▸Gulp-Serv https://github.com/sindresorhus/gulp-rev
▸Async CSS Loading github.com/filamentgroup/loadCSS
▸Sample Web App aerotwist.com/blog/guitar-tuner/
▸HTTP/2 github.com/GoogleChrome/simplehttp2server

OFFLINE AND
AVAILABLE

SERVICE WORKERS
▸Service workers are the future of web apps, they provide a
tremendous amount of power and control for a small amount
of effort.
▸We can take control of what we show and how the user
interacts with our web apps when we have no connection or
a slow connection.
▸The aim is to never again see the Chrome No connection
Dinosaur, or keep our users in a state of limbo.

NO CONNECTION
▸Service workers can be used to load cached web pages and
assets when a user has no connection to the internet.
▸Instead of seeing a web page telling the user they are at
fault cause their device is not connected to the internet. They
see their favourite app and what they were doing last
allowing them to interact with the app despite having no
internet connection.

SLOW CONNECTION / LIE-FI
▸What happens when a users device is reporting they have a
connection but its so slow it might as well be non existent?
They are left in limbo staring at a blank screen, slowly
getting frustrated by your app.
▸Using the service worker API you can do the same as if the
user wasn't connected to the internet and display their
application and allow them to interact with it communicating
their interactions when the connection is strong enough.

SPEEDING UP LOADING
▸Even when users have a strong internet connection service
workers can reduce the time it takes load your applications
up.
▸Caching and service workers can actually make a web app
load up faster than some native applications.
▸(only after the first loading that is)

USEFUL LINKS
▸Service Worker Specification
github.com/slightlyoff/ServiceWorker
▸Free Service Worker Udacity course
www.udacity.com/course/offline-web-applications--ud899
▸ The Network layer is yours to own.
www.youtube.com/watch?v=4uQMl7mFB6g

HIGH PERFORMANCE
ANIMATIONS

JS ANIMATIONS VS CSS ANIMATIONS
▸Many people discuss the merits and draw backs of both
ways of defining and executing animations.
▸Largely it doesn't matter which method you use as they all
use the same render pipeline.

THINKING OUT OF THE BOX
▸Animations can be expensive and fitting them in 8ms cycles
is very hard and can lead to a lot of “janking”
▸Introducing FLIP Animations
▸F - First: First positions of the animation
▸L - Last: Ending position of the animation
▸I - Invert: Transformation of objects
▸P - Play: Play the animation

FLIP ANIMATIONS
▸May sound like average animations but in fact it is different.
▸The animation actually plays out in reverse, instead of
transitioning between the first and ending positions of the
animation the object actually starts off in the ending state
with a transform to make it look like it is in its starting
position.
▸Once the transformation is removed the object will animate to
its ending position creating the illusion of an animation that is
more likely to play out at 60fps.

USEFUL LINKS
▸bit.ly/aerocharged
▸bit.ly/anatomy-of-a-frame
▸csstriggers.com
▸voice-memos.appspot.com
▸bit.ly/flip-anims
▸bit.ly/flipjs
▸bit.ly/rail-udacity

INSTALLABLE
AND ENGAGING

INSTALLABLE AND
ENGAGING
▸ Giving the user the option to access
the web app without the need for a
browser.
▸ Creates a better mobile experience
that is normally only found in native
applications.
▸ Keeps users engaged with your web
app as they can have instant
access.

iPhone (2007) Chrome (2013)Android (2012)

NOT VERY
GOOD!▸ Pretty much glorified bookmarks
▸ No real standardisation
▸ Needed to use <meta> tags
▸ No control of what is launched

THREE
RULES!▸ Offer an offline experience
▸ Have a manifest
▸ Keep user engaged

WORKING OFFLINE
▸ Already discussed in the previous
section but applies here also.
▸ Anything that is intended to be
saved on the users home screen
should always be available
▸ Either have the app cache previous
data to show or gracefully inform the
user that they need internet
▸ No Offline-O-Saurus!

USING MANIFEST
▸ Defines how your app will look on
the mobiles home screen.
▸ How the web app looks when it is
opened.
▸ What the app will launch when it is
opened.
▸ How the app launches.
▸ Don’t have the app launch in a leaf
page!

THE MANIFEST
▸ manifest.json
{
"name": "The Air Horner",
"short_name": "Air Horner",
"icons": [
{
"src": "images/Airhorner_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html",
"display": “standalone" || “window”,
"theme_color": "#2196F3",
"background_color": "#2196F3"
}

KEEPING USER
ENGAGED
▸ Inform the user that they can install
the web application.
▸ Make the request simple and un-
intrusive.
▸ Be able to handle the users choice
and remove the prompt without
issue.
▸ Don’t spam the user!

THE OLD WAY

PROMPTING THE
USER

USEFUL LINKS
▸https://w3c.github.io/manifest/
▸https://developers.google.com/web/fundamentals/engage-
and-retain/app-install-banners/
▸https://developer.mozilla.org/en-
US/docs/Web/API/Window/onbeforeinstallprompt
▸https://github.com/GoogleChrome/samples/tree/gh-
pages/app-install-banner

INCREASING
ENGAGEMENT

INCREASING ENGAGEMENT WITH
PUSH NOTIFICATIONS
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

NOTIFICATIONS
SHOULD BE
▸ Personal
▸ Timely
▸ Relevant
▸ Actionable
▸ Concise
▸ Work offline
▸ Don’t advertise

BAD EXAMPLES
Google Plus
Fred just posted a new message
Document Saved
Your document is now saved.
Files Have Been Synced
7 files have now been synced
Super Cool App
Install my native app, it’s cool!
Thanks
Thanks for installing my app
Super Cool App
Error: Lost network connection

GOOD EXAMPLES
Questn
Fred answered your questn
Flight Delayed
New departure time is 7:35pm.
Payment due
Your payment is due today
HTTP203 Podcast
A new episode is now available
Goober
Your self driving car has arrived
Credit card alert
Did you try to make a purchase?

HOW
NOTIFICATIONS
WORK!
(THE ABRIDGED VERSION)
(TOO MUCH CODE, SO LITTLE TIME)

SUBSCRIBING USERS
Ask User to
Subscribe
User Subscribes
Send End Point
Details
Check If User Is Subscribed
Save End Point
Details
Browser Server

SENDING MESSAGES
Send to End Point Send To Browser Received by BrowserGenerate Message
Server End Point Client

RECEIVING MESSAGES
SW Starts Handle Message Show NotificationPush Arrives
Client

PROMPTING, SUBSCRIBING AND
NOTIFYING

USEFUL LINKS
▸https://developers.google.com/web/fundamentals/engage-
and-retain/push-notifications/
▸https://w3c.github.io/push-api/
▸https://developers.google.com/web/updates/2016/03/web-
push-encryption
▸https://github.com/GoogleChrome/propel (A library
developed by Google for web push notifications)

GOOGLE LINKS
▸Progressive web apps london slides
https://docs.google.com/presentation/d/1sUKnfSHsnu4dS2o
K-
NyAqpTDkL2iY25zTzxTrSSnTTY/edit#slide=id.g10dfcf3c05_
0_4660
▸Jake Archibalds Slides
https://speakerdeck.com/jaffathecake/offline-first-
progressive-apps

Future of web development

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Future of web development

Similaire à Future of web development (20)

Dernier

Dernier (20)

Future of web development

Notes de l'éditeur