Web : Generic good practices

Web Fundamentals : developers.google.com

Les check-lists des professionnels du Web : opquast.com

checklits qualité, référencement, accessibilité, performances, ergonomie, ...

PageSpeed Insights : developers.google.com

The Cost Of JavaScript - Addy Osmani medium blog - 20171115

tl;dr: less code = less parse/compile + less transfer + less to decompress

websites payload size

The average web page is 3MB. How much should we care? - Tammy Everts - speedcurve.com/blog - 20170809

• 2011 : 900 kb
• 2017 : 3 mo

Images are more then 50% of the payload size. Text assets that can compress well represent around 10% of the payload size.

Page bloat: The average web page size is more than 2MB - Tammy Everts - www.soasta.com/blog - 20150611

>

• 1995 : 14 kb

• nov 2011 : 0.9 mo

• may 2012 : 1.1 mo
• nov 2012 : 1.2 mo
• may 2013 : 1.45 mo
• nov 2013 : 1.6 mo
• may 2014 : 1.7 mo
• nov 2014 : 1.8 mo
• may 2015 : 2 mo

What is the recommended JS kb limit for a web app? - stackoverflow.com - 2011

500 kb (in 2011 ...)

Sizes of JS frameworks, just minified + minified and gzipped

dealing with assets

Recommended size of javascript assets on a web page - stackoverflow.com - 20150504

Two Quick Ways To Reduce React App’s Size In Production - medium.com/@rajaraodv - 20161130

compression

N.B. : Google Chrome Tools shows compressed values in network panel.

Enable gzip compression - varvy.com - 2016

varvy.com/tools/gzip

varvy.com/pagespeed

accessibility (a11y)

What is Accessibility (a11y) - www.techopedia.com

The word accessibility is abbreviated to "a11y," with the number eleven in the middle referring to the number of letters that the word contains between the first and last letter. It follows an Information and Communications Technology (ICT)-oriented convention, just like internationalization (i18n) and localization (l10n), which are used mostly in the software community.

Hugo Giraudel github account

Accessible Rich Internet Applications (WAI-ARIA) 1.1 - www.w3.org - 20171214

landmarks example - www.w3.org - 20171214

How to Use ARIA Effectively with HTML5 - www.sitepoint.com - 20160211

The A11Y Project A community-driven effort to make web accessibility easier.

Progressives webapps

Progressive Web Apps : developers.google.com

Progressive Web Apps are user experiences that have the reach of the web, and are:

• Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
• Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
• Engaging - Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

Bien comprendre les Progressive Web Apps : makina-corpus.com

workbox - JavaScript Libraries for Progressive Web Apps

lighthouse

Auditing, performance metrics, and best practices for Progressive Web Apps

Hacker News readers as Progressive Web Apps

HNPWA - Hacker News readers as Progressive Web Apps

TodoMVC has helped thousands of developers select an MV* framework for their JavaScript applications. However, the web ecosystem has evolved in the past few years allowing us to build powerful applications using modern browser capabilities.

To provide developers with examples, we collected a list of Hacker News clients built with a number of popular JavaScript frameworks and libraries. Each implementation is a complete Progressive Web App that utilizes different progressive technologies to provide a fast, reliable and engaging experience.

articles

Progressive Web Apps: Escaping Tabs Without Losing Our Soul : Alex Russell

Article fondateur, pose les bases des PWA

Que sont les Progressive Web Apps ? : frank.taillandier.me

L’argumentaire commercial pour les Progressive Web Apps : frank.taillandier.me

vidéos

BDX I/O 2016 : Progressive Web Apps - Le futur du Web arrive... : Hubert Sablonnière

PWA - 10 caractéristiques

1. linkable (ne dépend pas d'un store, monde ouvert (web) vs monde fermé (stores))
2. responsive (content is like water)
3. safe (https, impossible à savoir sur une app native)
4. connectivity independant (mode déconnecté) (penser offline first) (service workers)
5. fresh (toujours up to date)
6. App-like interactions (ergo app natives) (application shell qui comporte les bases du layout d'un app native)
7. Notifications (même navigateur fermé)
8. Discoverable (fichier de manifeste référencé dans le html pour référencement via moteur de recherche)
9. "Installable" (ajout du lien sur l'écran d'accueil)
10. Progressive (adapté aux capacités du navigateur)

service workers

• proxy côté client codé en javascript, intercepte toutes les requêtes, dispose de son propre cache.
• ne fonctionne qu'en https
• commun à une origine (domaine + port)
• nouvelle API navigateur, est exécuté dans un thread indépendant, n'a pas accès à window
• utilise cache (nouvelle API navigateur), c'est une map qui fait correspondre des req et res (!= cache http)
• nouvelle API de requête (fetch)

Support des navigateurs actuels presque 100%. Microsoft & Apple à la bourre (en dev). Pas de polyfills possibles.