---
# System prepended metadata

title: 'Applications natives, hybrides et WebApps'
tags: [' pwa', ' hybridapp', ' webapp', ' nativeapp', support]

---

---
title: Applications natives, hybrides et WebApps
tags: support, webapp, nativeapp, hybridapp, pwa
robots: noindex, nofollow
author: Julien Noyer
---

# Application native, hybride et web

*Définition des approches et principes du développement d'applications*

![](https://i.imgur.com/dc0PCL4.png)

## Les contraintes matériels déjouées par Internet

Dans le domaine de l'informatique, la [programmation](https://fr.wikipedia.org/wiki/Programmation_informatique) est l'ensemble des activités qui permettent l'écriture des programmes informatiques qui utilise un [langage de programmation](https://fr.wikipedia.org/wiki/Langage_de_programmation) spécifique au support sur lequel il doit être éxécuté, c'est à dire que selon le [système d'exploitation](https://fr.wikipedia.org/wiki/Système_d%27exploitation) 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](https://fr.wikipedia.org/wiki/Programmation_web). En effet, depuis l'apparition du [HTML5](https://fr.wikipedia.org/wiki/HTML5) des navigateurs Web modernes, les capacités qu'offre ces derniers permettent de développer des applications Web de plus en plus proche de ce que permettaient les première applications dites "natives". 

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

---

<br><br><br>

# Les applications native (NativeApp)

*Un code spécifique pour chaque support*

<iframe src="https://www.youtube.com/embed/jRT3OjIS4Nk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style=" width: 100%; height: 400px; border: none"></iframe>

## Définition d'une NativeApp

On distingue une application hybride d'une NativeApp par le fait qu'elle n'est pas développé dans le langage natif du support dans lequel elle s'éxécute. Si nous devons par exemple développer une NativeApp pour MacOs nous devrons évoluer dans l'environement de travail xCode en [Objective C](https://fr.wikipedia.org/wiki/Objective-C) alors que pour Androïd nous utiliserons Androïd Studio en [Java](httpshttps://en.wikipedia.org/wiki/Java_%28programming_language%29). Bien que ces deux environements présentent des logiques similaires le code à produire est dans un langage différrent.

**Caractéristiques d'une NativeApp**

- **Code spécifique** : une NativeApp Windows ne peut pas êetree 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

---
<br><br><br>

## Les applications hybrides (HybridApp)

*Le même code exporté pour plusieurs supports*

<iframe src="https://www.youtube.com/embed/t5DLzrcodmM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style=" width: 100%; height: 400px; border: none"></iframe>

## Définition d'une HybridApp

Contrairement à une NativeApp une **hybridApp** pourra être diffuée sur plusiers systèmes d'exploitation grâce à un système de compilation du code. L'environement de travail est le même que celui qui nous sert à développer des sites Web. Les langages les plus communéments utilisés pour développer ddes applications hybrides sont [Javascript](https://en.wikipedia.org/wiki/JavaScript), [HTML](https://fr.wikipedia.org/wiki/Hypertext_Markup_Language) et [CSS](https://en.wikipedia.org/wiki/Cascading_Style_Sheets), c'est pourquoi l'engouement est grands autours 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

---
<br><br><br>

# Les applications Web (WebApp)

*Du site Internet à l'application Web*

<iframe src="https://www.youtube.com/embed/cdf7PZkp_gE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style=" width: 100%; height: 400px; border: none"></iframe>

## Définition d'une WebApp

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 appel un site Internet est initialement une succession de fichiers qui permettent d'afficher du contenu via une [URL](https://fr.wikipedia.org/wiki/Uniform_Resource_Locator). Un site Internet devient une WebApp à partir du moment ou il intègre un système de gestion de l'information, c'est à dire un Backoffice qui permet de définir le contenu dun [FrontOffice](https://fr.wikipedia.org/wiki/Application_de_front_office).

**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

---
<br><br><br>

# Les Single Page Applications (SPA)

*Une WebApp développé sur une seule page Web*

<iframe src="https://www.youtube.com/embed/dSINh3wRZsA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style=" width: 100%; height: 400px; border: none"></iframe>

## Définition d'une SPA

Avec l'évolution des supports pour les afficher et des langages utilisés pour développer des WebApp, il est devenu posssibble de manipuler de façon plus profonde les balises du [DOM](https://en.wikipedia.org/wiki/Document_Object_Model). Ces évolution on permis l'éclosion du principe de SPA qui associé les logiques et les tehniques 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](https://en.wikipedia.org/wiki/Asynchronous_I/O).

**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

---
<br><br><br>

# Les progressive Web App (PWA)

*Installer une application Web sur un smatphone*

<iframe src="https://www.youtube.com/embed/dSKp-76Ur6E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style=" width: 100%; height: 400px; border: none"></iframe>

## Définition d'une PWA

C'est grâce à l'apparition de nouveaux [standards Web](https://en.wikipedia.org/wiki/Web_standards) que les principes permettant de développer des PWA sont apparues. En effet, depuis la mise en place du principe de [service worker](https://en.wikipedia.org/wiki/Progressive_web_application#Service_workers) 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 accessiblee via un icone 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

---
<br><br><br><br><br><br>

# Ressources

![](https://i.imgur.com/My64oZI.png)

## Liens utiles

La liste ci-dessous contient les liens utiles cité dans ce document.

- [**Programmation informatique** https://fr.wikipedia.org/wiki/Programmation_informatique](https://fr.wikipedia.org/wiki/Programmation_informatique)
- [**Langage de programmation** https://fr.wikipedia.org/wiki/Langage_de_programmation](https://fr.wikipedia.org/wiki/Langage_de_programmation)
- [Système d'exploitation https://fr.wikipedia.org/wiki/Système_d%27exploitation](https://fr.wikipedia.org/wiki/Système_d%27exploitation)
- [**Programmation Web** https://fr.wikipedia.org/wiki/Programmation_web](https://fr.wikipedia.org/wiki/Programmation_web)
- [**HTML5** https://fr.wikipedia.org/wiki/HTML5](https://fr.wikipedia.org/wiki/HTML5)
- [**Objective C** https://fr.wikipedia.org/wiki/Objective-C](https://fr.wikipedia.org/wiki/Objective-C)
- [**Java** httpshttps://en.wikipedia.org/wiki/Java_%28programming_language%29](httpshttps://en.wikipedia.org/wiki/Java_%28programming_language%29)
- [**Javascript** https://en.wikipedia.org/wiki/JavaScript](https://en.wikipedia.org/wiki/JavaScript)
- [**HTML** https://fr.wikipedia.org/wiki/Hypertext_Markup_Language](https://fr.wikipedia.org/wiki/Hypertext_Markup_Language)
- [**CSS** https://en.wikipedia.org/wiki/Cascading_Style_Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets)
- [**URL** https://fr.wikipedia.org/wiki/Uniform_Resource_Locator](https://fr.wikipedia.org/wiki/Uniform_Resource_Locator)
- [**FrontOffice** https://fr.wikipedia.org/wiki/Application_de_front_office](https://fr.wikipedia.org/wiki/Application_de_front_office)
- [**DOM** https://en.wikipedia.org/wiki/Document_Object_Model](https://en.wikipedia.org/wiki/Document_Object_Model)
- [**Asynchrone** https://en.wikipedia.org/wiki/Asynchronous_I/O](https://en.wikipedia.org/wiki/Asynchronous_I/O)
- [**Standards Web** https://en.wikipedia.org/wiki/Web_standards](https://en.wikipedia.org/wiki/Web_standards)
- [**Service Worker** https://en.wikipedia.org/wiki/Progressive_web_application#Service_workers](https://en.wikipedia.org/wiki/Progressive_web_application#Service_workers)