Quelle est la place de JavaScript dans le web Mobile

QUELLE EST LA PLACE DE
JAVASCRIPT DANS LE WEB
MOBILE
Année académique 2015-2016
Travail de synthèse réalisé dans le cadre du cours de conception multimédia
STIC-B430, donné sous la direction du professeur Cohen Atika
Capron Alexandre
Université Libre de Bruxelles
I. Introduction
Créé en 1995 par Netscape Communication Corporation, JavaScript est un langage orienté objet
principalement utilisé dans les pages HTML afin de dynamiser celles-ci. Ce standard de
l’ECMA est très vite devenu incontournable dans l’univers du World Wide Web. Adopté par
les web master du monde entier, JavaScript est aujourd’hui un langage essentiel à la
compréhension des enjeux du web actuel.
J’ai choisi de faire ma synthèse sur JavaScript pour mieux comprendre les enjeux gravitants
autour de l’adaptation de ce standard du web aux technologies mobiles. Cette synthèse me
servira à mieux comprendre le contexte du web mobile, qui est un point essentiel de mon
mémoire sur les initiatives markup à destination du contenu de presse. C’est donc avec cet
objectif en tête que nous tenterons de dégager une brève histoire de JavaScript, son
fonctionnement rudimentaire dans une page web, son adaptation au web mobile ainsi que les
différentes solutions applicatives le concernant.
II. JavaScript
1. Introduction à JavaScript
JavaScript est un langage de script créé en 1995 par Netscape Communication Corporation.
C’est un langage orienté objet principalement utilisé dans les pages HTML afin de dynamiser
une page web, en y ajoutant des interactions avec l'utilisateur, des animations, de l'aide à la
navigation, etc…
Historiquement il s'agit du premier langage de script pour le Web1. Ce standard est un langage
de programmation qui permet d'apporter des améliorations à HTML en permettant d'exécuter
des commandes du côté client, c'est-à-dire au niveau du navigateur et non du serveur web. Dès
1
JavaScript, Ressource Online, visité le 29/03/2016, in : https://fr.wikipedia.org/wiki/JavaScript
1
lors, JavaScript est fortement dépendant du navigateur appelant la page web dans laquelle le
script est incorporé2.
JavaScript est également un standard ECMA Script. En effet, ECMA Script est un langage de
script côté client, mais sert également de standard dont les spécifications sont respectées par les
autres langages de script.
2. Historique
JavaScript fut créé (en 10 jours) en mai 1995 par Brendan Eich, alors employé chez Netscape
Communication Corporation. D’abord connu sous le nom « Mocha », ce nouveau standard du
web fut renommé « Livescript » en septembre 1995 puis « JavaScript » en décembre de la
même année afin de profiter de la popularité montante du langage Java3.
En 1996-1997 Netscape soumet JavaScript à ECMA International pour standardisation avec
l’objectif de pousser les navigateurs à l’implémenter sur la base du travail effectué par
Netscape. Le travail accompli au cours de ce laps de temps conduisit finalement à la sortie
officielle du standard : « ECMA-262 éd.1 ».
Le processus de normalisation continua avec les versions ECMAScript 2 en 1998 et
ECMAScript 3 en 1999. Le « JS2 » ou « original ES4 » travaux dirigés par Waldemar Horwat
débutèrent en 20004.
Peu de temps après, les sorties d’Internet Explorer 4 et de Netscape Navigator 4 portérent un
coup important à cette standardisation en introduisant de nouvelles incompatibilités au niveau
du langage lui-même, mais aussi et surtout en utilisant des modèles de document totalement
divergents5.
2
Cohen Atika, Module JavaScript, Cours universitaire de conception multimédia, Ressource Online, visité en
2016, in : https://uv.ulb.ac.be/login2/index.php
3
A
short
History
of
JavaScript,
Ressource
Online,
visité
le
03/04/2016,
in :
https://www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript
4
Ibid.
5
Bertrand JAN, JavaScript, histoire et écosystème, Ressource Online, visité le 03/04/2016, in :
http://blog.alterway.fr/2016/02/javascript-histoire-et-ecosysteme/
2
Cette « guerre des navigateurs » fut l’un des principaux freins à l’utilisation de JavaScript et
favorisa également le déploiement de solutions propriétaires tels que Flash de Macromedia ou
Adobe. Les développeurs web délaissèrent petit à petit, le support des navigateurs minoritaires
(Opera) ou en perte de vitesse (Netscape Navigator), au profit de la syntaxe du navigateur
dominant : Internet Explorer.
Les problèmes de compatibilité portant beaucoup plus sur l’accès aux éléments du document
que sur le support du langage lui-même, le W3C entreprit de standardiser cet accès en
développant les spécifications DOM (Document Object Model) et similaires comme CSSOM
(CSS Object Model) ou SVGDOM. Néanmoins ces standardisations sont longtemps restées
« théoriques » en raison de la domination d’Internet Explorer 6, dans lequel l’implémentation
de ces standards était incomplète, provoquant de nombreux bugs6.
L’apparition d’un nouveau navigateur, « Firefox » de la Fondation Mozilla (version 1.0 en
2004), entraîna un changement de situation : une alternative à Internet Explorer fut disponible
et le support des standards devient un sujet central pour le web.
Le développement JavaScript s’améliora avec l’apparition de Framework destinés à gérer de
façon transparente (pour le développeur), les incompatibilités et les bugs des différents
navigateurs (JQuery par exemple)7.
Ces Framework offrirent également un grand nombre d’effets graphiques et d’animations
auparavant réservés à Flash et jouèrent un rôle moteur dans le « retour vers JavaScript ».
La situation s’accélérera avec l’apparition d’un autre navigateur : « Chrome » de Google
(version 1.0 en 2008) fondé sur le projet open source Chromium et utilisant le moteur JavaScript
V8. Le cycle de développement rapide de ce navigateur ainsi que les objectifs de Google
modifièrent, à nouveau, le développement des standards du web.
La course aux performances des navigateurs devint l’un des aspects principaux de leur
développement. L’amélioration des performances des moteurs JavaScript intégrés aux
navigateurs conduisit à des développements impensables auparavant comme les jeux 2D ou 3D
en temps réel8.
6
A
short
History
of
JavaScript,
Ressource
Online,
visité
le
03/04/2016,
in :
https://www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript
7
Bertrand JAN, JavaScript, histoire et écosystème, Ressource Online, visité le 03/04/2016, in :
http://blog.alterway.fr/2016/02/javascript-histoire-et-ecosysteme/
8
Ibid.
3
En 2009, fut mis en place ECMAScript 3.1, renommez ECMAScript 5. Les nouveaux
développements de HTML5, et des très nombreuses API qui l’accompagnèrent, donnèrent aux
navigateurs la possibilité de dialoguer avec l’ensemble des fonctionnalités du système : appareil
photo, luminosité ambiante, état de la batterie, géolocalisation, le Responsive Web Design,
etc…
On passa donc de scripts simples à de véritables applications rivalisant avec les applications
natives.
La dernière amélioration du JavaScript et non des moindres est la publication dans sa forme
achevée de la spécification ES6 ou ES2015 qui apporte de nouvelles constructions améliorant
le développement avec ce langage9.
3. Fonctionnement JavaScript
JavaScript est un langage pouvant être utilisé côté navigateur comme côté serveur (PHP, etc.).
Mais dans le cadre de l’explication technique du fonctionnement de JavaScript, nous nous
limiterons au JavaScript dans le navigateur.
Le propre de JavaScript est de manipuler de façon simple des objets, au sens informatique du
terme, fournis par une application hôte.
Voici l'exemple classique du « Hello world » en JavaScript, lorsque l'application hôte est
un navigateur Web.
alert("Coucou le monde");
Dans l'application hôte, alert est une méthode de la classe DOM window, mais celle-ci étant
récurrente, c'est une des seules classes dont on ne doit pas nécessairement préciser le nom pour
utiliser ses méthodes.
9
JavaScript, Ressource Online, visité le 29/03/2016, in : https://fr.wikipedia.org/wiki/JavaScript
4
JavaScript est un langage case sensitive (contrairement à HTML), c'est-à-dire qu'il fait une
différence entre un nom de variable (ou mot réservé) contenant ou non des majuscules. Ainsi,
la fonction bonjour (); n'est pas la même fonction que Bonjour () ; . Enfin, comme en langage
C, chaque instruction se termine par un point-virgule (;)10.
En parallèle, lors de la rédaction du code JavaScript, il faut être attentif aux guillemets et à
l'orthographe des mots-clés.
Comme tout langage de programmation, JavaScript comporte un certain nombre de mots
réservés, mots variables. (Exemple : alert, function, etc…).
Il existe également plusieurs caractères particuliers permettant de manipuler l’affichage d’une
chaîne de caractères. Le plus connu et le plus utilisé est le " saut de ligne ", mais il en existe
d’autres. Tous sont précédés du symbole " \ " appelé " escaping caracter " parce qu’il indique
au moteur JavaScript de ne pas interpréter le caractère qui suit comme un caractère mais comme
un caractère spécial11.
10
JavaScript, Ressource Online, visité le 29/03/2016, in : https://fr.wikipedia.org/wiki/JavaScript
Javascript - Introduction au langage Javascript, Ressource Online, visité le 01/04/2016, in :
http://www.commentcamarche.net/contents/577-javascript-introduction-au-langage-javascript
11
5
alert("Coucou le monde\r je test le caractère retour à la ligne");
Lise des caractères spéciaux12
\b touche de suppression
\f saut de ligne d'impression
\n retour à la ligne
\r appui sur la touche Enter (retour chariot)
\t tabulation
\" guillemets doubles
\' guillemets simples
\\ caractère antislash
Comme on peut le voir, JavaScript permet de dynamiser une page HTML en y ajoutant des
interactions avec l'utilisateur. Mais aussi en ajoutant des animations, de l'aide à la
navigation, comme afficher ou masquer du texte, faire défiler des images, créer des
infobulles, afficher des messages d'alerte, afficher un menu déroulant, créer « un retour en
haut de page » dynamique, créer un menu qui suit la navigation, etc…
Il existe plusieurs façons d'incorporer du JavaScript dans une page Web:
1. à l'aide à la balise <SCRIPT> ;
2. en mettant le code dans un fichier ;
3. à l'aide des événements.
12
Cohen Atika, Module JavaScript, Cours universitaire de conception multimédia, Ressource Online, visité en
2016, in : https://uv.ulb.ac.be/login2/index.php
6
3.1.
Les balises <Script>
Un script est une portion de code qui vient s'insérer dans une page HTML. Le code du script
n'est toutefois pas visible dans la fenêtre du navigateur, car il est compris entre des balises (ou
tags) spécifiques qui signalent au navigateur qu'il s'agit d'un script écrit en langage JavaScript.
Les balises annonçant un code JavaScripts sont les suivantes :
<script>
Placez ici le code de votre script
</script>
3.1.1
Utilisation d’un fichier externe13
Il est possible, et même conseillé, d'écrire le code JavaScript dans un fichier externe,
portant l'extension .js. Ce fichier est ensuite appelé depuis la page Web au moyen de
l'élément <script> et de son attribut src qui contient l'URL du fichier .js. Par exemple :
<body>
<script src="mon_code.js"></script>
</body>
Le fichier mon_code.js est à déposer dans le même répertoire que les pages HTML, sinon, il
faut préciser le chemin, ou l'adresse URL où se trouve le fichier. On peut aussi faire un lien
vers un fichier déposé sur un serveur :
<SCRIPT language = JavaScript
SRC = http://.../scripts/filename.js > </SCRIPT>
13
Cohen Atika, Module JavaScript, Cours universitaire de conception multimédia, Ressource Online, visité en
2016, in : https://uv.ulb.ac.be/login2/index.php
7
Il vaut mieux privilégier un fichier externe plutôt que d'inclure le code JavaScript directement
dans la page. Cela évite de le recharger à chaque chargement de la page, puisque le fichier
externe est mis en cache par le navigateur, ce qui accélère l'affichage de la page.
3.1.2
JavaScripts à partir d’un évènement :
Grâce au JavaScript, il est possible d'associer des fonctions, des méthodes et des
événements. Les événements JavaScript sont à placer dans le corps de la page comme
attribut d'une commande HTML.
3.2
Le concept de variable
Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être
modifiées lors de l'exécution du programme.
En JavaScript, les noms de variables peuvent être aussi longs que l'on désire, mais
doivent répondre à certains critères14 :

un nom de variable doit commencer par une lettre (majuscule ou minuscule) ou un "_".

un nom de variable peut comporter des lettres, des espaces, des chiffres, des caractères _ et
&.
Attention un nom de variable ne peut pas être le même que le nom d’un mot réservé !

La déclaration de ces variables peut se faire de deux façons différentes. Soit de façon
explicite, en faisant précéder la variable du mot-clé var :
Var chaine= "bonjour"
Soit de façon implicite, en laissant le navigateur déterminer qu'il s'agit d'une déclaration de
variable.
14
Javascript - Introduction au langage Javascript, Ressource Online, visité le 01/04/2016, in :
http://www.commentcamarche.net/contents/577-javascript-introduction-au-langage-javascript
8
Pour déclarer implicitement une variable, il suffit d'écrire le nom de la variable suivie du
caractère = et de la valeur à affecter :
Chaine = "bonjour"
Contrairement à la plupart des langages de programmation où il faut préciser quel type de
contenu la variable va devoir contenir, les variables dans JavaScript, sont typées
dynamiquement, ce qui veut dire que l'on peut y mettre du texte en premier lieu puis l'effacer
et y mettre un nombre. En fait, JavaScript autorise la manipulation de seulement 4 types de
données : des nombres (entiers ou à virgules), des chaînes de caractères (string) et
des booléens.
3.2.1
Portée des variables :
JavaScript a deux types de portés : globale et locale. Si une variable est définie en dehors d'une
définition de fonction, il s'agit d'une variable globale et sa valeur est accessible et modifiable
dans tout le programme. En revanche, si une variable est déclarée au sein d'une définition de
fonction, il s'agit d'une variable locale. Elle est créée et détruite chaque fois que la fonction est
exécutée ; en dehors de cette fonction, aucun code ne peut y accéder.
Une variable locale peut posséder le même nom qu'une variable globale, mais elle est
entièrement dissociée de celle-ci. La modification de la valeur d'une variable n'a aucun effet sur
l'autre variable. Seule la version locale est significative au sein de la fonction dans laquelle elle
est déclarée.
3.2.2
Exemple :
<script type="text/javascript">
<!-var a = 12;
var b = 4;
function MultipliePar2(b) {
var a = b * 2;
return a;
}
9
document.write("Le double de ",b," est ",MultipliePar2(b));
document.write("La valeur de a est ",a);
</script>
Dans l'exemple ci-dessus, la variable a est déclarée explicitement en début de script,
ainsi que dans la fonction. Voici ce qu'affiche ce script :
Le double de 4 est 8
La valeur de a est 12
3.3
La notion de fonction
Une fonction est un sous-programme qui permet d'effectuer un ensemble d'instructions par
simple appel de la fonction dans le corps du programme principal. Cela permet une simplicité
du code et une taille de programme réduite. D'autre part, une fonction peut faire appel à ellemême, on parle alors de fonction récursive15.
JavaScript contient des fonctions prédéfinies qui peuvent s'appliquer pour un ou plusieurs types
d'objets spécifiques, on appelle ces fonctions des méthodes.
Avant d'être utilisée, une fonction doit être définie. La définition d'une fonction s'appelle
"déclaration". La déclaration d'une fonction se fait grâce au mot-clé function :
function Nom_De_La_Fonction(argument1, argument2, ...) {
liste d'instructions
}
Pour exécuter une fonction, il suffit de faire appel à elle en écrivant :
Nom_De_La_Fonction();
15
JavaScript, Ressource Online, visité le 29/03/2016, in : https://fr.wikipedia.org/wiki/JavaScript
10
3.3.1
Les méthodes :
Une méthode est une fonction associée à un objet. Les méthodes des objets du navigateur sont
des fonctions définies à l'avance par les normes HTML, on ne peut donc pas les modifier, il est
toutefois possible de créer une méthode personnelle pour un objet personnalisé. Prenons par
exemple une page HTML, elle est composée de l’objet appelé document. Ce dernier a par
exemple la méthode write() qui lui est associée et qui permet de modifier le contenu de la page
en y affichant du texte. Dans le cas de la méthode write(), l'appel se fait comme suit16 :
window.document.write()
Pour reprendre cet exemple, la méthode write() de l'objet document permet de modifier de
façon dynamique le contenu de la page en HTML :
window.document.write(expression1, expression2, ...)
Cette méthode permet d'écrire le résultat des expressions passées en paramètre dans le
document dans lequel elle est utilisée.
3.3.2
Les évènements :
Les événements ont été créés pour ajouter de l'interactivité entre un visiteur et une page
Web. Ces événements se retrouvent toujours dans une balise HTML. A ces événements,
on associe l'appel d'une fonction JavaScript, par exemple, la fonction Main ().
3.4
La notion de condition :
On appelle structure conditionnelle les instructions qui permettent de tester si une condition est
vraie ou non. De nombreux opérateurs existent pour tester des conditions et ils peuvent être
combinés entre eux, mais les plus connus sont les instructions if, if... else, les boucle for
(conditionnelle) ou encore les boucles while.
16
Javascript - Introduction au langage Javascript, Ressource Online, visité le 01/04/2016, in :
http://www.commentcamarche.net/contents/577-javascript-introduction-au-langage-javascript
11
3.5
Notion d'objet
JavaScript traite les éléments qui s'affichent dans le navigateur comme des objets classés selon
une hiérarchie pour pouvoir les désigner précisément auxquels des propriétés sont associées.
3.5.1
Les objets du navigateur
JavaScript divise la page du navigateur en objets, pour permettre d'accéder à n'importe lequel
d'entre eux et pouvoir les manipuler par l'intermédiaire de leurs propriétés.
On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis on
descend dans la hiérarchie jusqu'à arriver à l'objet voulu.

L'objet le plus grand est l'objet fenêtre (les objets en JavaScript ont leur dénomination en
anglais, donc dans le cas présent window).

Dans la fenêtre s'affiche une page, c'est l'objet document.

Cette page peut contenir plusieurs objets, comme des formulaires, des images, etc.
Pour accéder à un objet, il est donc nécessaire de parcourir l'arborescence en partant de l'objet
le plus grand (l'objet window) vers l'objet à atteindre17.
3.5.2
Les objets du noyau18 :
JavaScript fournit en standard un certain nombre d'objets proposant des propriétés et des
méthodes permettant d'effectuer simplement un grand nombre de manipulations. Ces objets
sont appelés objets du noyau JavaScript, car ils ont été standardisés par l'ECMA (European
Computer Manufacturer Association) et constituent la base du langage JavaScript.
17
Javascript - Introduction au langage Javascript, Ressource Online, visité le 01/04/2016, in :
http://www.commentcamarche.net/contents/577-javascript-introduction-au-langage-javascript
18
Ibid.
12
Nom
de Description
l'objet
Array
L'objet Array permet de créer des tableaux. Il possède de nombreuses méthodes
permettant d'ajouter, de supprimer ou d'extraire des éléments d'un tableau ainsi
que de les trier.
Boolean
L'objet Boolean permet de créer des valeurs booléennes, c'est-à-dire des éléments
possédants deux états : vrai et faux.
Date
L'objet Date permet de créer des dates et des durées. Il propose des méthodes
permettant de les manipuler.
Function
L'objet Function permet de définir des fonctions personnalisées.
Math
L'objet Math permet de manipuler des fonctions mathématiques, par exemple,
les fonctions trigonométriques.
Number
L'objet Number est un objet permettant de faire des opérations de base sur les
nombres.
RegExp
L'objet RegExp permet de créer des expressions régulières, c'est-à-dire des
éléments permettant de faire des opérations avancées sur les chaînes de
caractères.
String
L'objet String propose une grande variété de méthodes permettant de manipuler
des chaînes de caractères.
3.6
Notion de bibliothèque
Une bibliothèque est un ensemble cohérent de fonctions permettant de s'affranchir des
tâches répétitives. Il s'agit ici d'un simple fichier JavaScript à inclure (grâce à la balise
<script>) dans le code HTML avant d'utiliser l'un des éléments de cette bibliothèque.
13
JQuery est un exemple de bibliothèque JavaScript conçue pour simplifier l'écriture de
codes JavaScript et AJAX. Créée en 2006 par John Resig, cette bibliothèque est la plus
célèbre et la plus utilisée à ce jour19.
La bibliothèque jQuery est constituée d'un ensemble de blocs de code autonomes appelés
méthodes.
III. JavaScript et le web mobile
1. Contexte web mobile
« Fin 2009, les chiffres de l’Union Internationale des Télécommunications (UTT) montraient
que plus de 4,6 milliards de « comptes » mobiles étaient actifs dans le monde. Plus de 50 % de
la population mondiale est aujourd’hui connectée depuis un smartphone ou une tablette »20.
Les terminaux mobiles d’accès à Internet sont non seulement devenus en moins de vingt ans
les premiers médias numériques, mais leur croissance devient exponentielle sous l’effet de leur
adoption massive par les pays émergents.
Cette explosion de l'usage des appareils mobiles est un important facteur de transformation des
interactions entre utilisateurs et fournisseurs de contenu qui rend indispensable la présence de
ces contenus sous un format adapté aux associées à l'expérience d’un utilisateur mobile.
19
Cohen Atika, Module JavaScript, Cours universitaire de conception multimédia, Ressource Online, visité en
2016, in : https://uv.ulb.ac.be/login2/index.php
20
Poty Pascal, « Portable : mode d’emploi », Les Cahiers Dynamiques, 2010/2, no 47, pp 32-34.
14
C’est le développement de ces différents terminaux mobiles d’accès à Internet qui a été le
facteur clé du décollage du web mobile, dont les deux usages principaux sont l’utilisation de
sites mobiles dédiés qui sont le plus souvent de simple adaptation d’un site Internet préexistant.
Et les applications qui rencontrent un franc succès auprès des possesseurs de smartphones et
tablettes.
1.1
Les applications mobiles :
Les principaux avantages d’une application sont : un format adapté au mobile, une plus grande
facilité d’utilisation pour le grand public, un mode d’accès sans URL, un fonctionnement en
mode hors ligne, des fonctions plus avancées et enfin la possibilité de monétiser une application.
Cependant, deux problèmes se posent à l’utilisation d’application par une entreprise ou un
particulier. Tout d’abord, le temps de développement d’une application mobile standard est
d’environ 2 mois. Il faut aussi noter que les applications sont souvent de type « propriétaire »
et sont seulement disponibles dans un seul « Application Store ». De ce fait, les applications
mobiles possèdent une visibilité relative. Ensuite, le développement d’une application varie
15
d’un système d’exploitation à un autre se privant dès lors d’une partie du public visé ou
augmentant significativement les coûts de production21.
1.2
Les sites adaptés au web mobile :
Les principaux atouts du site mobile se traduisent dans le fait qu’un seul développement soit
nécessaire, et que celui-ci puisse être déployé immédiatement sur toutes les plates-formes. Un
site mobile permet également une indépendance financière vis-vis des « Application Store », et
une pérennité des données, tout en assurant une transparence des mises à jour et une promotion
du web.
En conclusion, la question pour une entreprise ou un webmaster n’est plus « dois-je être présent
sur l’Internet mobile ? » mais « comment dois-je y être présent ? ». Un site mobile est plus
rapide et moins coûteux à mettre en place et une application est plus complexe dans sa mise en
œuvre et sa maintenance. Mais les possibilités d’une application mobile sont souvent plus larges
que celles d’un site web.
2. JavaScript et application
Cette partie de la synthèse va se focaliser sur les différents types d’applications et de
développements possibles pour les plates-formes mobiles.
2.1
Le développement natif
Une application native est une application développée spécifiquement pour une et une seule
plate-forme, grâce aux outils spécifiquement conçus pour celle-ci.
Cette solution consiste à développer avec les outils/langages propres à chaque système
d'exploitation22.
21
Lecocq Claire et al, « Technologies de la mobilité », Documentaliste-Sciences de l'Information, (Vol. 49)
,2012/3, no 3, pp 26-30.
22
Harrel Willam, « Développement web mobile avec HTML, CSS et JavaScript », EDI8, 2013, 448pp.
16
Par exemple :
1. Objective C avec l'IDE XCode pour iOS.
2. Java avec Eclipse pour Android.
3. C# avec Visual Studio pour Windows Phone.
L'avantage de cette méthode se trouve dans le fait de pouvoir bénéficier des éléments propres à
chaque système d'exploitation pour un développement plus rapide et plus propre
En revanche si l’on souhaite avoir une application qui fonctionne sur Android et iOS, cela
devient vite problématique car ce sont 2 plates-formes différentes , qui utilisent donc, 2 codes
complètement différents. Dès lors, le temps de développement est multiplié et les mises à jour
sont plus complexes à effectuer (vu qu'il faut reporter la modification entre les plates-formes).
Le prix d'un développement natif monte dès lors en flèche.
2.2
Le développement hybride
Une application hybride est une application utilisant le navigateur web intégré du support
(Smartphone ou tablette) et les technologies Web (HTML, CSS et JavaScript) pour fonctionner
sur différents OS (iOS, Android, Windows Phone, etc.). Une telle application utilise les
fonctionnalités natives des Smartphones et peut être distribuée sur les plates-formes
d’applications telles que l'AppStore, le Google Play, etc23.
Pour créer des applications hybrides, il faut donc passer par un Framework. Un Framework est
un ensemble cohérent de composants logiciels structurels, qui sert à créer les fondations ainsi
que les grandes lignes de tout ou d’une partie d'un logiciel, d’une application. En bref,
Un Framework est conçu en vue d'aider les programmeurs dans leur travail. On trouve
différents types de Framework24 :
1. Framework d'infrastructure système : pour développer des systèmes d'exploitation,
des interfaces graphiques, des outils de communication.
2. Framework d'intégration multiplateforme : pour fédérer des applications hétérogènes.
Pour mettre à disposition différentes technologies sous la forme d'une interface unique.
23
Harrel Willam, « Développement web mobile avec HTML, CSS et JavaScript », EDI8, 2013, 448pp.
Multi-channel_app_development,
Ressource
Online,
visité
le
10/04/2016,
https://en.wikipedia.org/wiki/Multi-channel_app_development
24
17
in:
3. Framework d'entreprise : pour développer des applications spécifiques au secteur
d'activité de l'entreprise.
4. Framework de gestion de contenu : sont les fondations d'un système de gestion de
contenu pour la création, la collecte, le classement, le stockage et la publication de
« biens numérisés ».
Voici quelques exemples de Framework :
1. JQuery Mobile qui est ce que l’on peut appeler un Touch-Optimized Web
Framework pour ce qui est des smartphones et tablettes. C'est un système unifié
compatible avec la majorité des appareils mobiles. Celui-ci est basé sur jQuery et jQuery
UI.
2. The-M-Project est un Framework HTML5 en JavaScript pour créer une application
mobile ditecross-platform. Celui-ci est basé sur le Framework de jQuery Mobile et est
disponible sur GlitHub.
3. Wink est un Framework écrit en JavaScript pour développer des applications mobiles
pour Android, iPhone, iPad et BlackBerry.
4. Phonegap est un Framework destiné à faciliter la création d'applications mobiles pour
différentes plateformes - Android, iOS, Windows Phone. Développé par Adobe
Systems, il est basé sur Apache Cordova et distribué sous licence open-source1. Les
applications qui en résultent sont hybrides, ce qui signifie qu'elles ne sont ni vraiment
natives ni purement basées sur les langages HTML, CSS et JavaScript25.
Une fois un de ces Framework installé, il suffit de créer un nouveau projet et à l’aide de HTML,
CSS et JavaScript (à la main ou à l’aide de bibliothèques) pour créer son application hybride.
25
Rohit Ghatol et Yogesh Patel, « Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5 »,
Apress, 2012.
18
Voici une vidéo tutorielle de la création d’une application hybride basique (hello world) via
Phonegap :
Lien : https://www.youtube.com/watch?v=Sq2EDVJr_v8&nohtml5=False
Les applications hybrides bien que pouvant souffrir de problèmes de performances sur
d’anciens modèles de smartphones et tablettes, sont considérés par beaucoup comme l’avenir
du web mobile. Par exemple l’application Instagram est une application hybride tout comme
Twitter ou encore Amazone appstore.
3. JavaScript dans les sites web mobiles:
En dehors des applications natives et des applications hybrides, il est également possible de
faire des sites web adaptés aux technologies mobiles. Pour ce faire, plusieurs solutions sont
possibles :
La première étant de transformer un site Web en un site mobile en créant une version optimisée
de celui-ci destiné aux appareils mobiles. Cette approche garantit que toutes les fonctionnalités
et le contenu du site originel seront chargés correctement sur l’appareil mobile. Il existe de
nombreux outils abordables qui peuvent aider à transformer un site Web en un site mobile.
(Mobify, Mofuse, Wirenode, etc…).
19
La seconde solution possible est le responsive web. Plutôt que de créer deux sites distincts (un
site traditionnel et un site mobile), il est possible de créer un site unique disponible à la fois sur
ordinateurs et sur périphériques mobiles, le tout en restant optimisé au niveau du format. Cette
solution permet un développement unique. Le responsive web est par exemple faisable via des
CMS comme WordPress ou Drupal, ou en chipotant dans le CSS.
20
3.1
Problèmes liés au .JS et web mobile :
Mais ces solutions ont leurs propres limites. Par exemple, un site en responsive est le même
pour mobile que pour ordinateur portable (ou de bureau). Dès lors il n’est pas rare de voir
apparaître des problèmes de performance liés à un code non optimisé, des publicités trop
envahissantes ou encore un surplus de JavaScript rendant l’affichage dudit site web, lent. A
cela, on peut ajouter une expérience utilisateur pas toujours optimisée, à cause d’une ergonomie
très compliquée à atteindre lorsque l’on doit adapter un même site internet à plusieurs types
d’écrans et de périphériques26.
Du côté des sites dédiés au mobile, un travail supplémentaire est nécessaire au niveau de la
maintenance et de l’optimisation de ceux-ci. (Le tout engendrant évidemment des coûts
supplémentaires). Autre problème, les internautes doivent retenir au moins deux URL, ou sinon
être redirigé vers le site mobile, ce qui peut prend plusieurs secondes.
Enfin, les sites dédiés aux appareils mobiles ne sont pas universellement compatibles. (Il existe
plusieurs plates-formes différentes comprenant chacune des périphériques multiples et
divers)27.
3.2
Autre utilisation de JavaScript :
Bref, la richesse des fonctionnalités mises à notre disposition par HTML5 et les langages
associés (CSS, JavaScript, etc…) ouvrent la voie à la création de véritables applications Web
mobiles (application hybride ou site web mobile) en mesure de rivaliser avec les applications
mobiles classiques. Mais d'autres technologies en cours de développement promettent de rendre
le Web de plus en plus attractif via des expériences utilisateurs mobiles toujours plus fluides et
plus riches. C’est le cas de AMP HTML.
26
Olson Derek, Choosing between responsive web design and a separate mobile site to improve mobile
visitors’ experience, Ressource Online, visité le 10/04/2016, in: https://www.foraker.com/blog/choosing-betweenresponsive-web-design-and-a-separate-mobile-site-to-improve-mobile-visitors-experience
27
Armen Ghazarian, The Pros and Cons of Responsive Web Design vs. Mobile Website vs. Native App, Ressource
Online, visité le 10/04/2016, in: http://designmodo.com/responsive-design-vs-mobile-website-vs-app/
21
Google avec AMP HTML ou Accelerated Mobile Page HTML propose une nouvelle version
du langage HTML allégée, permettant un affichage rapide des pages web. Le but est d’aider les
éditeurs à optimiser leur contenu pour un accès mobile sans passer par une application dédiée.
Il s’agit notamment de limiter l’utilisation de JavaScript qui alourdit considérablement les pages
web. En effet, selon Google, chaque fois qu’une page Web prend trop de temps à charger, les
éditeurs de presse perdent 29 pourcents de leurs lecteurs, et cela peut monter jusqu’à 58
pourcents si la page prend plus de 10 secondes à s’afficher28.
L’AMP HTML étant un langage dérivé de l’HTML classique. La structure de base d’une page
en AMP HTML est par conséquent très proche de celle d’une page en HTML5 :
Mais AMP HTML est une version allégée et modifiée de HTML 5 comprenant de fortes
restrictions sur certains éléments techniques comme la gestion des ressources (images-vidéosetc…) ou encore JavaScript qui est utilisé au travers de la ligne de code :
<script async src="https :// cdn.ampproject.org/v0.js"></script> , aussi appelé AMP
Runtime.
28
Google, ACCELERATED MOBILE PAGES PROJECT, 2015, Ressource Online, visité en Décembre 2015, in :
https://www.ampproject.org/
22
AMP Runtime est un morceau de code JavaScript qui s’exécute à l’intérieur de chaque document
en AMP. Il fournit des implémentations pour les éléments personnalisés AMP, et gère
l’établissement des priorités de chargement des ressources présentes dans le document.
Dès lors toutes les ressources d’une page en AMP HTML sont gérées par ce même script
JavaScript. La publicité par exemple fonctionne via un iframe lui-même géré par l’AMP
Runtime.
IV. Conclusion
Au vu de ce que nous venons de présenter, JavaScript apparaît comme étant un langage qui
depuis son apparition en 1995, n’a fait que prendre de l’importance. Pouvant être utilisé tant
côté client que côté serveur, les web master du monde entier ont très rapidement adopté ce
standard du web. De nos jours, ce dernier est utilisé pour tout un tas de raisons, que cela soit
pour dynamiser un site web, dans la publicité, dans les systèmes analytiques, dans les menus,
pour l’intégration de widgets, etc…
Mais c’est depuis 2009 que JavaScript est devenu un langage réellement incontournable. En
effet, avec l’apparition des technologies mobiles (tablettes, smartphones, etc…) s’est fait sentir
le besoin de réinventer le web. Que ce soit pour le développement d’une application hybride ou
d’un site dédié mobile, JavaScript est devenu un langage essentiel à maîtriser. Comme nous
l’avons vu précédemment, il est également possible d’utiliser le standard de l’ECMA à
l’intérieur de sites web responsives. Mais c’est avec ces derniers que JavaScript montre le plus
facilement ses limites. En effet, le web mobile étant différent du web traditionnel, et les
appareils mobiles étant moins puissants que les ordinateurs traditionnels, une mauvaise
optimisation du langage ou un surplus de ce dernier dans HTML peut provoquer des problèmes
au niveau de l’affichage (publicités invasives, sites web illisibles, etc…) ou encore des
problèmes liés au temps de chargement dudit site web.
Malgré tout, JavaScript reste aujourd’hui un langage incontournable à comprendre pour toute
personne s’intéressant à la création de sites web ou d’applications mobiles, car même quand ce
dernier pose problème, des solutions sont trouvées comme avec AMP HTML et son utilisation
spécifique du JavaScript via une bibliothèque mise en cache par des CDN (content delivery
networks) sur les serveurs de Google.
23
V. Bibliographie
1. JavaScript, Ressource Online, visité le 29/03/2016, in :
https://fr.wikipedia.org/wiki/JavaScript
2. Harrel Willam, « Développement web mobile avec HTML, CSS et JavaScript »,
EDI8, 2013, 448pp.
3. Rohit Ghatol et Yogesh Patel, « Beginning PhoneGap: Mobile Web Framework for
JavaScript and HTML5 », Apress, 2012.
4. Lecocq Claire et al, « Technologies de la mobilité », Documentaliste-Sciences de
l'Information, (Vol. 49) ,2012/3, no 3, 80pp.
5. Poty Pascal, « Portable : mode d’emploi », Les Cahiers Dynamiques, 2010/2, no 47,
128pp.
6. JavaScript Tutorial, Ressource Online, visité le 30/03/2016 in:
http://www.w3schools.com/js/
7. Google, ACCELERATED MOBILE PAGES PROJECT, 2015, Ressource Online, visité
en Décembre 2015, in : https://www.ampproject.org/
8. Glithub, How to Create a Basic AMP HTML Page, 2015, Ressource Online, visité en
Novembre 2015, in: https://github.com/ampproject/amphtml/
9. De Lacvivier Caroline, Mobile developers agree: HTML5 and JavaScript apps fall
short, Ressource Online, visité le 01/04/2016, in:
http://searchsoa.techtarget.com/feature/Mobile-developers-agree-HTML5-andJavaScript-apps-fall-short
10. S. Gilbertson, How Google’s AMP project speeds up the Web, 2015 Ressource Online
visité en Novembre 2015, in : http://arstechnica.com/informationtechnology/2015/11/googles-ampan-internet-giant-tackles-the-old-myth-of-the-webis-too-slow/
11. Jackson Brian, Diving into Google Accelerated Mobile Pages (AMP), Ressource
online, visité le 01/04/2016, in: https://www.keycdn.com/blog/accelerated-mobilepages/
12. Javascript - Introduction au langage Javascript, Ressource Online, visité le
01/04/2016, in : http://www.commentcamarche.net/contents/577-javascriptintroduction-au-langage-javascript
24
13. A short History of JavaScript, Ressource Online, visité le 03/04/2016, in :
https://www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript
14. Bertrand JAN, JavaScript, histoire et écosystème, Ressource Online, visité le
03/04/2016, in :http://blog.alterway.fr/2016/02/javascript-histoire-et-ecosysteme/
15. JavaScript, Ressource Online, visité le 05/04/2016, in : https://msdn.microsoft.com/frfr/library/2yfce773(v=vs.94).aspx
16. Roland Ludovic, Developper son application mobile, Ressource Online, visité le
06/04/2016, in :https://openclassrooms.com/courses/rentabilisez-vos-applicationsmobiles/developper-son-application-mobile
17. Grafikart, Développement d’application mobile, Ressource Online, visité le
07/04/2016, in :https://www.grafikart.fr/blog/developper-application-mobile
18. Créez une application mobile sur Android avec l'API javascript, Ressource Online,
visité le 07/04/2016, in :http://api.ign.fr/documentation/243/creez-une-applicationmobile-sur-android-avec-l-api-javascript
19. Framework, Ressource Online, visité le 08/04/2016, in :
https://fr.wikipedia.org/wiki/Framework
20. Susan Gunelius, How To Make Your Website Mobile-Friendly On A Budget,
Ressource Online, visité le 08/04/2016, in: http://www.forbes.com/sites/work-inprogress/2013/09/05/how-to-make-your-website-mobile-friendly-on-abudget/#2367f6dd4cda
21. Olson Derek, Choosing between responsive web design and a separate mobile site to
improve mobile visitors’ experience, Ressource Online, visité le 10/04/2016, in:
https://www.foraker.com/blog/choosing-between-responsive-web-design-and-aseparate-mobile-site-to-improve-mobile-visitors-experience
22. Armen Ghazarian, The Pros and Cons of Responsive Web Design vs. Mobile Website
vs. Native App, Ressource Online, visité le 10/04/2016, in:
http://designmodo.com/responsive-design-vs-mobile-website-vs-app/
25