Try   HackMD

Application native, hybride, ça sera tout ?

Définition des différents principes de dévelopement d'applications Web

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

© Julien Noyer - All rights reserved for educational purposes only


Introduction

Dans le domaine de l'informatique la programmation est l'ensemble des activités qui permettent l'écriture des programmes informatiques qui utilise un langage de programmation spécifique au support sur lequel il doit être éxécuté, c'est à dire que selon le système d'exploitation le langage utilisé est différents pour développer un programme informatique plus communément appelé une application.

Qu'il s'agisse d'une application de bureau (dites Desktop) ou mobile, la problématique du système d'exploitation reste la même, mais il est à présent possible de la contourner grâce aux logique de programmation Web. En effet, depuis l'apparition du HTML5 des navigateurs Web modernes, les capacités qu'offre ces derniers permettent de développer des applications Web des plus en plus proches de ce que permettaient les premières applications dites "natives".

Associé à la puissance de calcul des smartphones actuels, le navigateur est devenu un outil qui permet d'afficher sur tous les systèmes d'exploitation, qu'il soit Desktop ou Mobile, la même application.

En savoir plus https://bit.ly/3xyq6jf


Application Native

Un code spécifique pour chaque support

En savoir plus https://bit.ly/3xyq6jf

On distingue une application hybride d'une NativeApp par le fait qu'elle n'est pas développée dans le langage natif du support dans lequel elle s'exécute. Si nous devons par exemple développer une NativeApp pour MacOs, nous devrons évoluer dans l'environnement de travail xCode en Objective C alors que pour Androïd, nous utiliserons Androïd Studio en Java. Bien que ces deux environnement présentent des logiques similaires le code à produire est dans un langage différent.

Caractéristiques d'une NativeApp

  • Code spécifique : une NativeApp Windows ne peut pas être installé sur un autre OS
  • Non connecté : une NativeApp n'a pas néceessairement besoin d'une connexion Internet
  • Opaque : le code qui peermet dde développé unee NativeApp est rarement OpenSouce
  • ISO : étant développée dans le langage du support, une NativeApp est conforme aux critères du support

Exemples : Photoshop, Word, League Of Legend


Les applications hybrides (HybridApp)

Le même code exporté pour plusieurs supports

En savoir plus https://bit.ly/3xyq6jf

Contrairement à une NativeApp une hybridApp pourra être diffusée sur plusieurs systèmes d'exploitation grâce à un système de compilation du code. L'environnement de travail est le même que celui qui nous sert à développer des sites Web. Les langages les plus communément utilisés pour développer des applications hybrides sont Javascript, HTML et CSS, c'est pourquoi l'engouement est grand autour des techniques qui permettent de les développer.

Caractéristiques d'une HybridApp

  • Code unique : le code sourrce d'une HybridApp est le même pour tous les supports
  • Compilée : une HybridApp est compilé pour pouvoir s'afficher sur des supports différents
  • Storable : une HybridApp est installable uniquement via un srore (AppStore, GoogleStore, )

Exemples : Slack, Nestor


Les applications Web (WebApp)

Du site Internet à l'application Web

En savoir plus https://bit.ly/3xyq6jf

Ce qui différencie un site Internet d'une WebApp est plus de l'ordre du principe que de la simple technique. Ce que l'on appelle un site Internet est initialement une succession de fichiers qui permettent d'afficher du contenu via une URL. Un site Internet devient une WebApp à partir du moment où il intègre un système de gestion de l'information, c'est-à-dire un Backoffice qui permet de définir le contenu du FrontOffice.

Caractéristiques d'une WebApp

  • Développées comme un site : les WebApps sont développées avec les mêmes technologies qu'un sit Web
  • Installées sur un serveur : les WebApps sont disponibles uniqument depuis un serveur Web
  • FrontEnd : les WebApps présentent une interface client autonome du BackEnd
  • BackEnd : les WebApps ont un BackEnd connecté à unee base de données
  • API/WebService : les fonctionnalités du BackEnd d'une WebApp distribuent les informations au FrontEnd

Exemples : next.liberation.fr, www.facebook.com


Les Single Page Applications (SPA)

Une WebApp développé sur une seule page Web

En savoir plus https://bit.ly/3xyq6jf

Avec l'évolution des supports pour les afficher et des langages utilisés pour développer des WebApp, il est devenu possible de manipuler de façon plus profonde les balises du DOM. Ces évolutions, on permit l'éclosion du principe de SPA qui associait les logiques et les techniques de développement d'une WebApp, mais en supprimant le principe de navigation via plusieurs pages au profit de la gestion des vues dynamiques gérés de façon asynchrone.

Caractéristiques d'une SPA

  • Développées comme un site : les WebApps sont développées avec les mêmes technologies qu'un sit Web
  • Installées sur un serveur : les WebApps sont disponibles uniqument depuis un serveur Web
  • FrontEnd : les WebApps présentent une interface client autonome du BackEnd
  • BackEnd : les WebApps ont un BackEnd connecté à unee base de données
  • API/WebService : les fonctionnalités du BackEnd d'une WebApp distribuent les informations au FrontEnd

Exemples : mail.google.com, alibaba.com


Les progressive Web App (PWA)

Installer une application Web sur un smatphone

En savoir plus https://bit.ly/3xyq6jf

C'est grâce à l'apparition de nouveaux standards Web que les principes permettant de développer des PWA sont apparus. En effet, depuis la mise en place du principe de service worker il est à présent possible de manipuler le cache navigateur et celui de manifest qui permet l'installation d'une PWA sur un smartphone via le cache navigateur, qu'il est à présent possible faire d'une SPA une PWA pour la rendre accessible via un icône sur l'écran d'accueil.

Caractéristiques d'une PWA

  • Progressive : les PWA s'afficheent sur tous les supports et sur tous les navigateurs Web
  • Sécurisée : les PWA sont accéssiblent via le protocole HTTPS
  • Engageante : les PWA poposent des expériences immersives qui intégrent les notion de notifications Web
  • Installable : lees PWA peuvent être insstallées sur un support mobile et desktop
  • Fluides : les PWA sont légères à installer et rapides à s'exécuter
  • Accessibles : les PWA respect les normes W3C du Web sémantique
  • Fonctionnalités hors-ligne : les PWA peuvent fonctionner sans connexion internet

Exemples : flipboard.com, 2048game.com, pinterest.fr


Ressources

Liste de liens utiles pour la mise en place de la séquence