Comparatif de frameworks HTML/Javascript pour le développement

Comparatif de frameworks HTML/Javascript pour le développement d’applications mobiles. Com-paratif de frameworks HTML/Javascript pour le développement d’applications mobiles. Compa-ratif de frameworks HTML/Javascript pour le déve-loppement d’applications mobiles. Comparatif de frameworks HTML/Javascript pour le développe-ment d’applications mobiles

Comparatif de frameworks HTML/Javascript pour le développement d’applications mobilesLI

VRE

BLAN

C

Benoit DesnosResponsable de l’offre [email protected]

02

Livre Blanc Comparatif de frameworks HTML / Javascript pour le développement d’applications mobiles – Février 2012 – Tous droits réservés Netapsys ©

Sommaire 1. Introduction 04 Le multiplateforme 04

Les applications mobiles en HTML/Javascript 05

Objectifs du livre blanc 05

2. Les frameworks 07 Les « natifs like » 07

Sencha Touch 08

JQuery mobile 09

Dojo mobile 10

GWTMobile 12

Les pro-Apple 13

ChocolateChip-ui 13

Webapp-net 14

Les non natifs 15

Wink toolkit 15

DhtmlX Touch 16

Qooxdoo 17

The-m-project 18

Les minimalistes 19

BkRender 20

Zepto 21

Xui 22

Les autres 23

3. Langage de programmation utilisé 24

4. Fonctionnalités générales 25

5. Interface 26 Élément de navigation par framework 27

Éléments de présentation des données par framework 27

Éléments de formulaire par framework 28

Disponibilité des fenêtres pop up par framework 28

Thèmes disponibles par framework 29

03


6. Interactivité 30 Disponibilité des évènements par framework 30

Disponibilité des animations de transition par framework 30

7. Données 31 Technologies d’accès aux données distantes par framework 31

Disponibilité de fonctionnalités concernant la gestion

des données par framework 32

8. Compatibilité avec les navigateurs mobiles 34 Compatibilité des frameworks avec les principaux navigateurs

mobiles des plateformes iOS et Android 34

Le cas Opéra Mini 35

9. Conclusion 36 Application mobile 36

Site mobile 37

10. Annexe 1 : Terminologie 38 Présentation des frameworks 39

Fonctionnalités générales par frameworks 39

Élément de navigation par framework 40

Éléments de présentation des données par framework 41

Éléments de formulaire par framework 43

Disponibilité des fenêtres pop up par framework 45

Thèmes disponibles par framework 46

Disponibilité des évènements par framework 46

Disponibilité des animations de transition de page par framework 46


des données par framework 47

11. Annexe 2 : Méthodologie 48

12. À propos de Netapsys 49

04


1.

Introduction

Avec l’arrivée de l’iPhone, la notion de smartphone a brusquement prit

une nouvelle dimension. Apple a brusquement imposé un nouveau

standard avec écran tactile, icônes, absence de stylets, etc. Un nouveau

marché a été inventé de façon durable. Depuis lors la concurrence

s’est alignée et a repris les choix fondamentaux faits par Apple en

commençant par copier dans un premier temps, puis en se permettant

des originalités comme Windows Phone ou les dernières versions

d’Android.

Après des débuts difficiles, la concurrence s’est organisée. D’abord

dominé par Apple, le marché est désormais de nouveau fragmenté et se

partage entre deux acteurs principaux et plusieurs outsiders. Android et

Apple représentent le gros du marché, RIM perd continuellement des

parts de marché avec son BlackBerry tandis que Microsoft n’arrive pas à

imposer Windows Phone 7 et semble miser désormais sur Windows 8.

Le marché a muri, les outils et les méthodes de développement aussi.

Développer des applications pour smartphone ciblant uniquement

la plateforme Apple est un choix souvent remis en question et le

développement multiplateforme s’impose petit à petit.

Le multiplateforme

05


Fort de ce constat, Netapsys a réalisé un premier livre blanc sur le

développement multiplateforme.

Il a résulté de cette étude qu’il y avait une catégorie à part dans le

développement multiplateforme : le développement de l’application en

HTML5, Javascript et CSS.

En effet, les outils permettant de faire des applications à base d’HTML,

comme Phonegap, ne fournissent aucun service pour réaliser le cœur

de l’application, à savoir la partie HTML et Javascript. Ils s’appuient pour

cela sur l’utilisation d’un framework tiers choisi par le développeur.

Il reste donc à choisir ce framework Javascript.

Ce livre blanc a pour objectif de classer et de comparer les différents

frameworks d’aide à la réalisation d’une application mobile en HTML5/

Javascript/CSS pour smartphone ou tablette.

Sont exclues de cette étude les frameworks trop peu spécialisés, comme

par exemple SmartClient. En effet, ces frameworks offrent des services

spécialisés mobiles mais ils ne sont pas suffisants car ils ne proposent

pas en particulier de ressources graphiques permettant d’obtenir

facilement un aspect « natif » pour l’application finale. Ces frameworks

sont souvent suffisants pour faire des sites mobiles, mais ils réclament

Les applications mobiles en HTML/Javascript

Objectifs du livre blanc

06


trop de travail pour faire une application pouvant passer pour une

application native de la plateforme ciblée.

Dans la liste des solutions retenues se trouvent des frameworks qui

sont des évolutions de frameworks pour machines de bureau, et des

nouveaux entrants uniquement présents dans le mobile.

On trouve des solutions riches offrant une organisation complète

du développement et des frameworks simples pouvant être utilisés

ponctuellement.

L’étude se consacre plus particulièrement à iOS et Android. Ils

représentent la très grande majorité des smartphones et surtout sont les

plateformes ciblées en exclusivité par la majorité des bibliothèques. Au

contraire, le BlackBerry et Windows Phone ne sont supportés que par une

minorité de ces frameworks.

Ce document est découpé en deux parties : dans un premier temps nous

présentons rapidement les frameworks, puis nous les comparons à l’aide

de grilles de comparaison explicitées en annexe.

07


2.

Les frameworks

Dans cette partie nous allons présenter les différents frameworks retenus.

Ils sont classés en 5 catégories :

• Les « natifs like »

• Les pro-Apple

• Les non natifs

• Les minimalistes

• Les inclassables

Ces frameworks sont ceux qui offrent une expérience utilisateur proche

d’une application native. Ils ont été créés par des groupements ayant

déjà fait leur preuve sur des frameworks « desktop » et sont parmi les

solutions les plus pérennes de ce comparatif. La compatibilité de la

plupart d’entre eux avec leur version « desktop » permet d’accéder à

une quantité impressionnante de fonctionnalités déjà créées par les

communautés via des plugins. Le bémol est le pendant de cet avantage :

ces frameworks sont parfois lourds à charger, ce qui peut affecter le

confort de navigation.

Les « natifs like »

08


Sencha Touch est la version mobile du bien connu ExtJs. C’est

actuellement la solution la plus indiquée si l’on souhaite réaliser une

application HTML/Javascript esthétiquement identique à une application

mobile native. Il est particulièrement exhaustif et ses thèmes iOs et

Android sont soignés. Il est construit sur une architecture objet Javascript

entièrement créée par l’équipe de Sencha et permet d’utiliser le design

pattern « Model View Controller » pour une meilleure maintenabilité et

une meilleure évolutivité. Il faut prévoir un peu de temps pour le prendre

en main car si une utilisation basique est plutôt bien documentée, il

faudra souvent consulter les sources pour traiter les situations plus

compliquées. Mais le forum est assez réactif bien que la priorité de

l’équipe Sencha aille au support payant.

L’équipe Sencha propose également d’autres produits en relation directe

avec Sencha touch : Sencha.io, service gratuit de « Cloud » permettant de

gérer les données, le login, les messages et le déploiement d’applications

Sencha Touch. Sencha Animator (199$) est une application facilitant

la création d’animations, de créer des transitions et des boutons en

respectant les standards grâce à CSS3.

JSBuilder, gratuit et indispensable, est un outil permettant d’optimiser le

code des projets Ext JS pour la production. Le code est ainsi beaucoup

plus léger.

Sencha Touch

CRITÈRE DESCRIPTION

URL http://www.sencha.com/products/touch/

Communauté facebook.comsencha.com/forum/

Démonstration http://dev.sencha.com/deploy/touch/examples/kitchensink/

Version V 1.1.1

Langage Javascript

http://www.sencha.com/products/touch/

http://www.sencha.com/products/touch/

https://www.facebook.com/senchainc

http://www.sencha.com/forum/

http://dev.sencha.com/deploy/touch/examples/production/kitchensink/

09


On ne présente plus jQuery, et sa version mobile a déjà fait de nombreux

émules. Il semble d’ailleurs avoir actuellement la communauté la plus

importante des frameworks testés ici. La version v1 de ce framework vient

de sortir et jouit de nombreux composants. Cependant, il lui manque

quelques finitions pour permettre une bonne simulation d’application

native. Le défilement par exemple reste géré par le navigateur ce qui

empêche de mettre deux listes déroulantes dans la même page. On

trouve aussi des incohérences sur les barres de défilement fixes qui

disparaissent sur Android mais fonctionnent parfaitement sur iOS. La

communauté est très active et le développement avance vite. Comme

dit précédemment, les nombreux plugins de jQuery sont compatibles

avec la version mobile ce qui apporte une quantité importante de

fonctionnalités.

Voici le lien vers deux thèmes créés par la communauté afin d’approcher

au mieux les visuels d’iOS et Android : thème iOS, thème Android.

JQuery mobile

Spécialité mobile Non

Licence GPL V3 et commerciales

Open Source Oui

Popularité Excellente

Documentation Référence de l’API

Outils de support Forum

Formation Vidéos et tutoriels

Produits associés Sencha.io, JS Builder, Sencha Animator

Formule Commercial Software licence, Commercial OEM Licence

Prix Gratuit, À négocier

Contenu de l’offre Création de sa propre application commerciale, Création de son propre SDK commerciale

https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Them

https://github.com/jjoe64/jquery-mobile-android-theme

http://jquerymobile.com/

10



URL http://jquerymobile.com/

Communauté forum.jquery.com/jquery-mobilefacebook.comtwitter.com

Démonstration http://jquerymobile.com/test/

Version V 1.0 Finale

Langage Javascript


Licence Licence MIT ou GL2

Open Source Oui


Documentation Référence de l’API


Formation Laissé à la communauté pour le moment. Plusieurs tutoriels ont déjà émergés sur la toile, on peut en trouver les liens sur le forum et dans le Blog.

Produits associés Themeroller, jQuery

Formule Licence MIT ou GL2

Prix Gratuit

Contenu de l’offre Création de sa propre application commerciale

La version mobile de dojo présente une solution intéressante bien que

méconnue. Le framework apporte un nombre important de composants

et des thèmes ressemblant à une application native. De plus, comme

jQuery, il hérite de la bibliothèque Dojo standard et de tous ses plugins

existants. Pour information, Dojo est un framework un peu particulier

permettant de ne charger que les classes dont on a besoin ce qui allège

le poids de l’application. Une grande partie du code se fait directement

dans le code HTML5 en y ajoutant des attributs, Dojo faisant ensuite de

la manipulation de DOM en fonction de ces attributs. Par exemple, pour

créer un magasin de données et une liste dynamique à partir de celle ci

Dojo mobile

http://jquerymobile.com/

http://forum.jquery.com/jquery-mobile

https://www.facebook.com/jQueryMobile

https://twitter.com/jquerymobile

http://view.jquerymobile.com/master/

http://dojotoolkit.org/

11


il suffira de faire :

<div data-dojo-type=»dojo.data.ItemFileReadStore»

jsId=»sampleStore» url=»data/monFichierDeDonnée.json»></div>

<ul id=»list» data-dojo-type=»dojox.mobile.EdgeToEdgeDataList»

store=»sampleStore» query=»{text: ‘*’}»></ul>

Le seul Javascript qu’il faudra ajouter est l’ajout des classes utilisées en

début de fichier soit « dojo.data.ItemFileReadStore » et « dojox.mobile.

EdgeToEdgeDataList ».


URL http://dojotoolkit.org/

Communauté twitter.com dojotoolkit.org/community/

Démonstration archive.dojotoolkit.orgchrism.dojotoolkit.org/androidchrism.dojotoolkit.org/iphone

Version V 1.7.1

Langage HTML


Licence NewBSD et AFL open source

Open Source Oui

Popularité Moyenne

Documentation Référence et guide de l’API, documentation

Outils de support Forum, chat

Formation Tutoriels

Produits associés Dojo

Formule Licence NewBSD et AFL open source

Prix Gratuit

http://dojotoolkit.org/

https://twitter.com/dojotoolkit

http://dojotoolkit.org/community/

http://archive.dojotoolkit.org/nightly/checkout/dojox/mobile/tests/

toolkit.org/mobile-rc1/release/demos/demos/mobileGallery/demo-android.html

http://chrism.dojotoolkit.org/mobile-rc1/release/demos/demos/mobileGallery/demo-iphone.html

12


GWTMobileGWT Mobile est l’ensemble de trois éléments. GWT Mobile UI est

le système de widgets graphiques. GWT Mobile Persistence est un

« wrapper » de l’ORM javascript « persistence.js », il fournit une persistance

des objets coté client à la manière de ce qu’Hibernate fournit côté serveur.

GWT Mobile Phonegap est un « wrapper » de la bibliothèque Phonegap

qui permet l’accès aux ressources natives des terminaux mobiles.

Les principaux avantages de GWT Mobile sont de permettre de coder et

de tester en Java, et d’avoir accès aux plugins et éléments du framework

GWT. Les thèmes iOs et Android sont assez éloignés de l’aspect natif mais

ils fonctionnent. Le thème Android est à peu près au point mais le thème

iOS est pour le moment difficilement utilisable. La principale lacune du

framework est la documentation très parcellaire : il faut constamment

se référer au code source fourni en démonstration ou à la mailing list.

Le projet n’est pas très actif et il reste beaucoup de choses à faire pour

disposer d’une panoplie complète de composants. Il constitue cependant

la meilleure solution autour de GWT.


URL github.com/dennisjzh/GwtMobile

Communauté groups.google.com/forum/

Démonstration ambigtion.com/gwtmobileui/

Version V1.1

Langage Java


Licence Apache v2

Open Source Oui

Popularité Faible

Documentation Les deux applications de démonstrations fournies avec les sources.

Outils de support google group

Formation dojotoolkit.org/documentation/

https://github.com/dennisjzh/GwtMobile

https://github.com/dennisjzh/GwtMobile

https://groups.google.com/forum/#!forum/gwtmobile

http://www.ambigtion.com/gwtmobileui/

https://groups.google.com/forum/#!forum/gwtmobile

http://dojotoolkit.org/documentation/

13


Produits associés GWT

Formule Apache v2

Prix Gratuit

Les frameworks de cette partie sont focalisés sur la plateforme iOS et

l’esthétique iOS.

Les pro-Apple

Chocolate chip UI ou « Chui » est un framework orienté mobile. Il

est donc léger et se focalise sur la compatibilité avec les navigateurs

mobiles plutôt que les navigateurs desktop. Si la partie Javascript de

Chui resemble à jQuery, la partie la plus intéressante est certainement

son langage de balise WAML (Web App Markup Language) spécialement

conçu pour l’HTML5. Ce langage permet un peu à la manière de Dojo de

créer des composants sans une ligne de Javascript. Mais contrairement à

Dojo, les balises utilisées ont été créées pour l’occasion en reprenant les

noms des widgets d’iOS. On utilisera donc des <panel>, <tableview> ou

encore <slider>. Chui est basé sur la libraire Javascript ChocolateChip.js

mais il existe deux portages, un pour jQuery et un pour Zepto (Zepto étant

lui même compatible jQuery).

ChocolateChip-ui


URL chocolatechip-ui.com

Version V1.0

Langage WAML

Spécialité mobile Oui

http://chocolatechip-ui.com/

http://www.chocolatechip-ui.com/

14


Webapp.net est un framework Javascript léger au fonctionnement

similaire à Dojo : on ajoute des classes et des ids particuliers aux balises

HTML et celles-ci obtiennent alors un aspect mobile. Il y a toutefois peu

de composants et seul un thème iOS existe. La documentation disponible

gratuitement est très pauvre en particulier parce que l’auteur a publié

un livre sur le sujet : « Beginning iPhone and iPad Web Apps ». Le support

d’Android est inexistant. Cependant il n’y a rien de superflu dans ce

framework qui peut constituer une base pour faire de petites applications

ou pour démarrer.

Webapp-net

Licence BSD

Open Source Faible

Popularité Documentation, et les d’exemples dans le dossier d’installation.

Documentation support.bkrender.com/forums

Outils de support Tutoriaux

Formation Jquery, Zepto

Produits associés BSD

Formule Gratuit

Prix Gratuit


URL webapp-net.com

Version twitter.comforums.chrilith.com

Langage demo.webapp-net.com

Spécialité mobile V0.5.2

Licence HTML

Open Source Oui

Popularité BSD

http://trywebapp.net/

http://support.bkrender.com/forums

http://webapp-net.com/

http://twitter.com/chrilith

http://forums.chrilith.com/

http://demo.webapp-net.com/

15


Ces Frameworks ne recherchent pas à obtenir un aspect natif.

Les non natifs

Le projet a démarré début 2009 à Orange Labs. Depuis le 17 juin

2010, Wink est un projet de la « Dojo foundation ». Il fournit toutes les

fonctionnalités élémentaires d’un framework Javascript : depuis la

manipulation du DOM jusqu’aux requêtes HTTP asynchrones mais

également quelques fonctions mobiles comme la gestion du « touch » et

des « gestures ». Wink n’est pas livré prêt pour imiter l’aspect natif : il n’a

pas de thème iOS ou Android, il offre de nombreux composants mais peu

sont ceux que l’on trouve dans les applications natives. Wink veut faire

du web et pas du natif. Il y a cependant des composants très intéressants

que nous n’avons pas trouvé ailleurs comme la reconnaissance de

« gestures » complexes, l’orientation du terminal dans l’espace et le

chargement des éléments d’une liste a posteriori lors du défilement.

Il faut noter enfin que nous avons noté des problèmes de compatibilité

de plusieurs composants sur Android (trace, accordion, flip etc.).

Wink toolkit

Documentation Oui

Outils de support Moyenne

Formation Le livre

Produits associés demo.qooxdoo.org

Formule BSD

Prix Gratuit

http://www.winktoolkit.org/

http://forums.chrilith.com/

http://demo.qooxdoo.org/devel/playground/ - Hello%20World-mobile

16



URL winktoolkit.org

Communauté winktoolkit.org/discussion/twitter.com

Démonstration winktoolkit.org/documentation/wink/winktoolkit.org/webapps/lajax

Version V 1.4

Langage Javascript


Licence BSD Licence

Open Source Oui

Popularité Moyenne

Outils de support Forum, blog

Formation Tutoriaux

Formule BSD Licence

Prix Gratuit

DHTMLX touch offre de nombreux composants pour créer une

application web mobile fonctionnelle. La stratégie de ce framework est

de fournir des composants compatibles avec DHTMLX suite (la version

desktop), il n’y a donc pas de thème iOS ou Android, même si parfois le

résultat ressemble un peu à iOs (barre de titre). DHTMLX est assez réputé

et possède une bonne communauté de développeurs. En outre il offre

de nombreux outils aidant à la création de l’application. Mais Visual

Designer n’est pas encore tout à fait au point en particulier sous Chrome

et changer la valeur d’une propriété est difficile, alors qu’avec les autres

navigateurs certains composants ne s’affichent simplement pas. Il permet

cependant de créer avec une facilité déconcertante les vues de son

application dans un éditeur en ligne WYSIWYG et on ne peut qu’attendre

impatiemment une version mieux stabilisée. Skinbuilder quant à lui

DhtmlX

Touch

http://www.winktoolkit.org/

http://www.winktoolkit.org/discussion/

http://twitter.com/winktoolkit

http://www.winktoolkit.org/documentation/wink/

http://www.winktoolkit.org/webapps/lajax/snow.html

http://www.winktoolkit.org/discussion/

http://www.winktoolkit.org/blog/169/

http://dhtmlx.com/

17


permet de choisir son jeu de couleurs pour l’application et Touch UI

inspector donne accès au contenu des objets DHTMLX d’une application

même lorsque l’application est passive, ce qui constitue un excellent outil

de débuggage.


URL dhtmlx.com/touch/

Communauté forum.dhtmlx.com/facebook.comtwitter.com

Démonstration dhtmlx.com/touch/samples/

Version V1.0

Langage Javascript


Licence Free

Open Source Oui


Documentation Documentation, API référence

Outils de support Forum, Tickets.

Formation «Developer’s guide» et tutoriaux

Produits associés DHTMLX, Visual designer, skinbuilder, touch ui inspector

Formule « Free »

Prix Gratuit

Qooxdoo est un SDK utilisant un système complet de classes Javascript.

Il permet de gérer les environnements. On peut développer en découpant

son application en plusieurs fichiers et classes, débugger, vérifier et

optimiser son code avec les outils en ligne de commande. Il contient son

propre framework, « testrunner », pour créer des tests unitaires. Il permet

de générer une documentation du projet similaire à JAVAdoc et JSDoc.

Qooxdoo

http://www.dhtmlx.com/touch/

http://forum.dhtmlx.com/

http://www.facebook.com/dhtmlx

http://twitter.com/dhtmlx

http://www.dhtmlx.com/touch/samples

http://docs.dhtmlx.com/touch/doku.php

http://docs.dhtmlx.com/touch/doku.php?id=api:start

http://forum.dhtmlx.com/

http://support.dhtmlx.com/

http://docs.dhtmlx.com/touch/doku.php?id=start

http://docs.dhtmlx.com/touch/doku.php?id=start

http://qooxdoo.org/

18


Le framework est créé par l’hébergeur 1and1 et est déjà assez abouti.

Notons que le framework est utilisé pour des applications Desktop mais

que les composants mobiles ont été particulièrement soignés et qu’ils

sont jusqu’à six fois plus rapides.


URL qooxdoo.org

Communauté twitter.comforum.qooxdoo.org

Démonstration qooxdoo.org/demo

Version V1.6

Langage Javascript

Licence LGPL (GNU lesser General public Licence) ou EPL (Eclipse public licence)

Open Source Oui

Popularité Bonne

Documentation Référence API, manuel, glossaire

Outils de support Mailing list, irc, forum

Formation Tutorial, playground

Produits associés playground

Formule LGPL (GNU lesser General public Licence) ou EPL (Eclipse public licence)

Prix Gratuit

Framework MVC incluant jQuery mobile, Modernizr, Underscore,

Mobiscroll et des concepts de Sproutcore et Persistance.js.

Le framework présente une interface graphique ludique avec de

nombreuses options et l’architecture MVC qu’il met en avant est un

avantage pour les applications de taille conséquente. Cependant, la

version testée est loin d’être stable et nous avons rencontré de nombreux

bugs. Un framework donc déconseillé en production actuellement mais

très prometteur.

The-m-project

http://qooxdoo.org/

http://twitter.com/qooxdoo

http://forum.qooxdoo.org/

http://qooxdoo.org/demo

http://www.gnu.org/licenses/lgpl-2.1.html

http://www.eclipse.org/org/documents/epl-v10.php

http://demo.qooxdoo.org/current/apiviewer/#qx

http://manual.qooxdoo.org/1.5.x/

http://manual.qooxdoo.org/current/pages/glossary.html

http://qooxdoo.org/community/mailing_lists#general_list_for_users_and_developers,

http://qooxdoo.org/community/mailing_lists#general_list_for_users_and_developers,

http://qooxdoo.org/forum

http://www.gnu.org/licenses/lgpl-2.1.html

http://www.eclipse.org/org/documents/epl-v10.php

http://the-m-project.net/

19



URL the-m-project.net

Communauté facebook.comtwitter.com

Démonstration the-m-project.net/apps/kitchensink

Version V0.8 alpha

Langage Javascript

Licence MIT

Open Source Oui

Popularité Bonne

Documentation Roadmap, JSDoc, Wiki, Blog, doc

Formation Tutoriels

Formule MIT

Prix Gratuit

Ces petits frameworks sont nombreux sur internet, nous avons

sélectionné ceux qui semblent être les plus intéressants actuellement.

Ces mini frameworks n’ont pas de composants évolués tout prêts. Ils

sont très légers et fournissent des fonctionnalités élémentaires et de bas

niveau, telles que la manipulation du DOM et des CSS, ou une navigation

HTML habituelle avec chargement de page mais avec l’aspect d’une

application mobile.

Les minimalistes

http://the-m-project.net/

http://www.facebook.com/pages/The-M-Project/155037587882581

http://twitter.com/_themproject

http://the-m-project.net/apps/kitchensink/index.html

http://the-m-project.net/roadmap.html

https://github.com/mwaylabs/the-m-project/wiki

http://blog.the-m-project.org/

http://panacodalabs.github.io/The-M-Docs/#home

http://panacodalabs.github.io/The-M-Docs/#tutorials/how_to_switch_a_page

20


BkRender permet de développer son site en BKML, un langage de balise

proche du HTML. Ce langage est interprété par un serveur Bkrender qui

renvoie un fichier html adapté au terminal qui l’appelle. De cette manière,

le site peut s’adapter aux spécificités du terminal de sorte qu’il soit

toujours parfaitement rendu quel que soit le terminal. Les sites conçus

avec Bkrender ont clairement un aspect de site web, ils ne ressemblent

pas particulièrement à une application native. Le passage d’une page à

l’autre se fait par rechargement de la page et les animations se font rares.

Ce framework a l’avantage d’offrir une grande compatibilité au prix d’un

confort de navigation moindre.

BkRender


URL bkrender.com

Communauté support.bkrender.com/forumstwitter.com

Démonstration bkrender.mobi

Version V4.5.3

Langage BKML


Licence BKML

Open Source Non

Popularité Bonne

Documentation Documentation


Formation 2 jours 3500 euros pour 5 personnes max

Produits associés demo.qooxdoo.org

Formule Free, Basic, Licence exécution

Prix Gratuit, 500 euros/m, non défini

Contenu de l’offre Pour 1 mois (domaine en bkrender, 10K PV), jusqu’à 5 alias + 100K PV, bande passante illimitée + alias illimités.

http://bkrender.com/

http://support.bkrender.com/forums

http://twitter.com/BkRender

http://bkrender.mobi/

http://support.wope-framework.com/home

http://support.wope-framework.com/forums

http://demo.qooxdoo.org/devel/playground/#Hello%20World-mobile

21


Zepto est un petit framework Javascript fonctionnant avec les

navigateurs webkit (iOS et Android en particulier) assez riche malgré sa

petite taille. Uniquement orienté mobile, il n’offre pas le support des

versions d’Internet Explorer qui peuvent représenter parfois jusqu’à la

moitié d’un framework javascript. Zepto permet de manipuler le DOM,

les CSS, de créer des animations et de gérer les évènements « tap »,

« doubletap », « swipe », et « pinch ». L’API de Zepto est la même que

celle de jQuery ce qui permet de facilement passer à jQuery Mobile si le

projet devient important. A noter qu’il y a quelques petites fonctions bien

pratiques comme par exemple : isFunction(), isArray, onReady, extends

(pour étendre un objet).

Zepto


URL zeptojs.com

Communauté github.comtwitter.com

Version V0.8

Langage Javascript


Licence MIT

Open Source Oui

Popularité Bonne

Documentation Sur la page Github

Outils de support Outils Github (issues, requests)

Formation winktoolkit.org/tutorials/

Formule MIT

Prix gratuit

http://zeptojs.com/

http://zeptojs.com/

https://github.com/madrobby/zepto

http://twitter.com/zeptojs

https://github.com/madrobby/zepto

https://github.com/madrobby/zepto/issues

http://www.winktoolkit.org/tutorials/

22


Xui a été créée en 2008 par l’équipe du framework PhoneGap qui avait

besoin d’avoir un framework DOM solide prenant en compte la latence

du web mobile et compatible avec un maximum de plateformes mobiles.

En effet, contrairement à bon nombre de ses confrères, Xui n’est pas

limité aux seuls navigateurs Webkit. Il permet de gérer le DOM, les CSS

et les animations CSS. Il permet de gérer les évènements « touchstart »,

« touchmove », « touchend », « touchcancel », « gesturestart »,

« gesturechange », « gestureend », et « orientationchange ».

Xui


URL xuijs.com

Communauté groups.google.comgithub.com/xui/

Version V2.3.2

Langage Javascript


Licence MIT

Open Source Oui

Popularité Faible

Outils de support Github, google group de phonegap, IRC (irc.freenode.net#pho-negap).

Formation winktoolkit.org/tutorials

Formule MIT

Prix Gratuit

http://www.wope-framework.com/

http://www.wope-framework.com/

https://groups.google.com/forum/#!forum/phonegap

https://github.com/xui/xui/issues

https://github.com/xui/xui/issues

https://groups.google.com/forum/#!forum/phonegap

http://www.winktoolkit.org/tutorials/

23


Il y a de nombreux autres frameworks orientés mobiles sur la toile :

on en a dénombré une quarantaine ! Cependant, beaucoup sont

l’initiative de petits groupes de développeurs et sont trop récents ou trop

incomplets pour l’instant. Il y a également des projets dont la pérennité

est compromise comme jqTouch très certainement remplacé à terme

par jQuery Mobile. Nous nous sommes donc concentrés sur ceux qui

nous paraissaient les plus intéressants à traiter, ceux dont la pérennité, la

popularité et le nombre de fonctionnalités sont suffisants.

Nous avons noté quelques framework pas assez aboutis mais

intéressants et qui peuvent percer à l’avenir : embedJS, unify, Jo et

mootools mobile.

Les autres

24


3.

Langage de programmation

utilisé

BKRE

NDE

R

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

Javascript

Javascript et HTML (ou assimilé)

Java

Langage de programmation à utiliser pour le développement

25


4.

Fonctionnalités générales BK

REN

DER

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

Support des tablettes

Barre url masquée en permanence

Barres d'outils ancrable

Stockage de donnée local v

Support de l'historique

Drag and drop

Internationalisation v

Patron de conception MVC

Fonctionnalités générales par framework

26


5.

Interface

Dans les tableaux suivants, la présence des icônes Apple et Android indique

si un équivalent au composant Apple ou Android en question existe ou pas.

Un framework peut par exemple proposer une barre d’onglet fonctionnelle

mais différente de celle d’iOS ou d’Android. Les composants natifs auxquels

nous nous sommes référés sont décrits dans la section terminologie à la fin

de ce document.

Légende Disponible

Non disponible

Équivalents Apple et Android disponibles

Équivalents Apple et Android non disponibles

Équivalent Apple disponible

Équivalent Android disponible

27


BKRE

NDE

R

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

Onglets (tabs)

Carrousel

Overlays slideup (action sheet, option menu)

Pop over avec liste

Barre de navigation

Barre d’outils

Barre de recherche

Élément de navigation par framework

BKRE

NDE

R

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

Vue scindée (split view)

Liste simple

Liste groupée

Vue de défilement (Scrollview)

Cartes (map)

Accordéon

Éléments de présentation des données par framework

28


BKRE

NDE

R

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

Bouton radio

Checkbox

Bouton Segmenté

Interrupteur

Boite de sélection (Select)

Curseur (Slider)

Zone de texte une ligne (Text input)

Zone de texte multi ligne (Textarea)

Boite de sélection de date (date picker)

Éléments de formulaire par framework

BKRE

NDE

R

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

Fenêtre d'alerte paramétrable

Fenêtre de dialogue (avec boutons)

Fenêtre de popup complètement paramétrable (vue modale)

Disponibilité des fenêtres pop up par framework

29


BKRE

NDE

R

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

iOS

Android

Autres

Thèmes disponibles par framework

30


6.

Interactivité BK

REN

DER

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

Taphold

Double tap

Pinch

Swipe

Rotation

Barre de recherche

BKRE

NDE

R

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

Slide

Fade

Flip

Pop

Disponibilité des évènements par framework

Disponibilité des animations de transition par framework

31


7.

Données BK

REN

DER

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

Xml-rpc ou Json-rpc

Json-p

Yql

Technologies d’accès aux données distantes par framework

Remarque

On ne parle pas ici d’xhr (ajax) qui est supporté par tous ces frameworks mais d’appels plus spécifiques simplifiant le code d’accès à des webservices ou en « cross-domain »

32


BKRE

NDE

R

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

Websql (sqlite)

Localstorage


des données par framework

Il y a quatre façons de stocker des données de manière persistante dans un

navigateur. Les données étaient historiquement stockées dans des Cookies,

mais les limitations de ce format ont poussé le W3C à proposer d’autres

solutions dans l’HTML5.

Le « Localstorage » permet le stockage de données de type « clé-valeur

» et convient au stockage de quantités éventuellement importantes de

données peu structurées. Concernant le stockage de données structurées

de type SQL, une guerre des standards a eu lieu. Web sql, qui est une

implémentation directe de SQLite dans le navigateur, est aujourd’hui

supportée par tous les navigateurs sauf Firefox mais est « dépréciée » par le

W3C. C’est Indexed DB qui a été choisie pour le standard HTML5, mais cette

dernière n’est supportée par aucun navigateur mobile à l’heure actuelle.

Il existe des bibliothèques Javascript compatibles avec les frameworks

testés permettant de facilement gérer la persistance des données grâce

à une forte couche d’abstraction. Ces solutions s’adaptent au navigateur

et s’occupent de stocker les données de façon optimale. Deux de ces

solutions sont particulièrement intéressantes: persistence.js (persistencejs.

org/) qui stocke en WebSQL par défaut et Lawnchair qui stocke en

Localstorage par défaut.

https://github.com/coresmart/persistencejs

https://github.com/coresmart/persistencejs

33


BKRE

NDE

R

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

Comet

Web socket



Le « Push » de données est une technique permettant au serveur

d’envoyer des données au client, ce qui permet une réactivité accrue.

Dans une application de chat par exemple l’utilisateur pourra recevoir le

message peu de temps après qu’il a été tapé par l’interlocuteur sans que

l’application aie à envoyer une requête explicite au serveur.

Ces technologies ne sont pas implémentées par les versions standards des

frameworks que nous avons testées. Ils sont uniquement disponibles via

des plugins.

34


8.

Compatibilité avec les

navigateurs mobiles

Les applications web mobiles sont embarquées dans une application

native, comme Phonegap, et elles utilisent toujours le navigateur natif du

mobile. Mais il est intéressant de voir si le site embarqué peut aussi être

utilisé de façon indépendante comme simple site web mobile utilisé depuis

un navigateur standard.

PLATEFORME NAVIGATEUR

BKRE

NDE

R

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

iOs Natif

Android Natif

Netfront live

Opera mobile

Firefox

Compatibilité des frameworks avec les principaux

navigateurs mobiles des plateformes iOS et Android

35


Le cas Opéra Mini

On peut constater que Gecko (Firefox) et Presto (Opera) sont mis de côté

au profit de Webkit (les trois autres). Le message est clair, les frameworks

mobiles évolués aujourd’hui sont à destination des plateformes Webkit.

On peut comprendre ce choix du fait que les navigateurs Opéra mobile et

Firefox ne sont pas totalement optimisés pour le mobile, ils consomment

beaucoup de mémoire et semblent être de rapides adaptations de leur alter

ego desktop.

Opéra Mini est actuellement le navigateur le plus utilisé sur Android (source)

devant le navigateur natif de la plateforme. Mais le fonctionnement d’Opéra

Mini est spécifique : le navigateur ne contient pas de moteur de rendu car

la plupart du travail est effectué en amont par un proxy depuis lequel une

page statique est transmise au smartphone. Il est par exemple impossible

de réaliser des transitions animées. Pour naviguer de page en page il faut

recharger chaque page en passant par le proxy. On peut donc constater

que les frameworks permettant de faire des applications imitant au mieux

l’aspect natif ne marchent tout simplement pas sur Opéra Mini.

PLATEFORME NAVIGATEUR

BKRE

NDE

R

CHO

COLA

TE C

HIP

UI

DHTM

LX

DOJO

MO

BILE

GWTM

OBI

LE

JQU

ERY

MO

BILE

QO

OXD

OO

SEN

CHA

TOU

CH 1

THE

M P

ROJE

CT

WEB

APP-

NET

WIN

K

iOs et Android Opéra Mini

36


9.

Conclusion

Les deux frameworks qui offrent la plus grande similitude avec une

application native sont Sencha Touch et Dojo Mobile. Ils offrent

tous deux un bon niveau fonctionnel avec une bibliothèque de

composants suffisante et une qualité esthétique du résultat proche

de l’environnement natif. Utilisés encapsulés dans une application

Phonegap par exemple ils permettront d’obtenir un résultat proche

d’une application native. Sencha Touch permet de tout faire en

Javascript et structure l’application grâce à MVC et son système de

classe. Dojo Mobile permet de reprendre un site existant et d’adapter

le code html par simple ajout de balise pour en faire une application

mobile.

jQuery Mobile et Zepto sont deux choix alternatifs intéressants. Ils

fournissent une bibliothèque de composants suffisante mais un résultat

esthétique plus éloigné de l’environnement natif. Ils seront intéressants

par exemple dans le cas où l’application n’a pas de besoins d’aspect

natif. Zepto est minimaliste, léger, flexible et permet de commencer

un petit projet et le basculer sous jQuery si les besoins se font plus

importants. Jquery Mobile permet de reprendre une application HTML

existante mais en faisant majoritairement du javascript.

Si l’équipe a des compétences en Java et qu’elle ne souhaite pas

s’investir dans le Javascript, GWTMobile est une solution recommandée.

Il faudra cependant anticiper une charge de travail afin d’ajouter les

fonctionnalités manquantes à ce framework en devenir.

Application mobile

37


Bien que la réalisation d’un site mobile ne soit pas tout à fait le sujet de

ce livre blanc, il est intéressant de noter que les frameworks testés ici

peuvent aussi être utilisés pour un site mobile non embarqué dans une

application.

Le cas des sites mobiles pose un problème particulier sur Android.

En effet, plus de la moitié des utilisateurs d’Android naviguent sur

Opera mini plutôt que sur Chrome, et les frameworks testés ici sont

généralement dépendants de Webkit et pratiquement tous réfractaires

à Opera Mini. Le support de ce navigateur est donc une contrainte forte

dans le choix du framework pour faire un site mobile pour Android.

Le problème ne se pose pas dans le cas d’une application mobile

embarquée comme une application native car c’est le navigateur natif

d’Android (Chrome) qui sera utilisé dans ce cas.

Site mobile

38


10.

Annexe 1 : Terminologie

Domaine de définition

les notes qui suivent concernent les frameworks étudiés, et

éventuellement leur framework père et leurs plugins. Si par exemple

« dojo.mobile » ne continent pas de méthode pour stocker de

l’information localement, « dojo.io » lui dispose de ces méthodes. Le

framework Dojo Mobile sera donc considéré comme ayant accès à cette

fonctionnalité. De même jquery mobile ne supporte pas « comet » en lui-

même, cependant un plugin disponible sur le site officiel le permet, il sera

donc considéré comme le supportant.

Cependant nous nous arrêterons à ces limites et donc si le composant

n’est ni disponible dans les plugins officiels, ni dans le framework père

alors il sera considéré comme indisponible même si il est possible de

l’intégrer en le codant directement en Javascript dans le framework.

39


CRITÈRE TERMINOLOGIE

Version Version du framework testée

Langage Langage de programmation principal utilisé lors de la création d'application avec le framework

Spécialisé Mobile Est-ce que le framework a été conçu pour les mobiles

Licence Licences avec lesquelles le framework est disponible

Open Source Le framework est-il open source

Popularité Estimation de la popularité en fonction des outils de communication et de la popularité sur le web

Documentation Outils de documentations disponibles.

Support Outils de support disponibles

Formation Outils de formation disponibles

Produits associés Produits en relation étroite avec le framework publié par le même éditeur

Formule Formules ou licences proposées par l'éditeur

Prix Prix par formule

Contenu de l'offre Contenu de l'offre pour la formule


Support avancé des tablettes Existence d'un composant de vue scindée et de pop-over.

Barre url masquée Lors de la navigation dans l'application l barre d'url est masquée. Elle n'apparait que lorsque l'on produit une action spécifique pour la voir.

Barres d'outils ancrable Possibilité d'ancrer un ou plusieurs type de barre en haut et/ou en bas de l'écran.

Stockage de donnée local Possibilité de stocker des données en base de données locale -websql, indexdb- et/ou en « locals-torage ».

Support de l'historique Possibilité lors de la navigation dans l'application d'utiliser le bouton « back » pour revenir à la page précédente de l'application.

Drag and drop Existence d'une api pour gérer le drag and drop.

Internationalisation i18n Existence d'une api pour permettre l'internationalisation de l'application.

Patron de conception MVC Invitation ou obligation d'un découpage du code en modèles, vues et contrôleurs.

Présentation des frameworks

Fonctionnalités générales par frameworks

40



Onglets Existence d'un composant permettant de naviguer entre plusieurs pages grâce à des onglets simi-laires à ceux d'ios et/ou d'Android.

Carrousel Existence d'un composant permettant de naviguer entre des pages en plein écran grâce à un Swipe sur celles-ci.


Existence d'un composant permettant d'afficher un menu modal remontant du bas de l'écran.

Pop over avec liste Existence d'un composant permettant d'afficher un pop up contenant une liste ou un menu.

Barre de navigation Existence d'une barre de type iOS incluant un titre et deux boutons optionnels placés aux extrémités.

Barre d'outils Existence d'une barre pouvant contenir plus de deux boutons de toute sorte.

Barre de recherche Existence d'une barre contenant un champ de texte et un bouton.

CRITÈRE IOS ANDROID

Onglets


Élément de navigation par framework

41


Pop over avec liste

Barre de navigation

Barre d'outil

Barre de recherche


Vue scindée (split view) Existence d'un moyen de créer un équivalent à une iOS splitview. Soit la division horizontale de l'écran en deux vues distinctes.

Liste simple Existence d'un composant permettant de créer des listes simple de donnée avec un visuel appro-chant celui des tableviews iOS et/ou des listviews Android.

Liste groupée Existence d'un composant permettant de créer une page contenant des listes groupées et intitulées.

Vue de défilement (Scrollview) Il y a un composant conteneur qui permet de faire défiler une vue à l’intérieur de lui même.

Cartes (map) Le framework prévoit l'utilisation de google mapkit d'une manière ou d'une autre.

Accordéon Existence d'un composant permettant de faire un menu accordéon. Lors de la sélection d'un des éléments du menu celui-ci se déploie pour afficher le contenu lié.

Barre de recherche Existence d'une barre contenant un champ de texte et un bouton.

Éléments de présentation des données par framework

42



Liste simple

Liste groupée

43


Éléments de formulaire par framework


Bouton radio Existence d'un bouton radio personnalisé par le framework.

Checkbox Existence d'un bouton checkbox personnalisé par le framework.

Bouton Segmenté Existence d'un bouton segmenté soit plusieurs boutons côte à côte. Ils sont généralement utilisés pour faire office de checkbox ou de bouton radio sur iOS.

Interrupteur Existence d'un composant correspondant au Switch d’iOS.

Boite de sélection (Select) Le framework gère les boites de sélection et leur donne le visuel de celles que l'on peut rencontrer dans iOS ou Android.

Curseur (Slider) Existence d'un composant slider.

Zone de texte une ligne (Text input) Existence d'un composant de champ de texte ayant un visuel proche de ceux d'iOS et Android.

Zone de texte multi ligne (Textarea) Existence d'un composant de champ de texte multiligne ayant un visuel proche de ceux d'iOS et Android.

Boite de sélection de date (date picker) Existence d'un composant permettant la sélection d'une date tel que le picker d'iOS ou le calen-drier d'Android.


Bouton radio

44


Checkbox

Bouton Segmenté

Interrupteur

Boite de sélection (Select)

Zone de texte une ligne (Text input)

Zone de texte multi ligne (Textarea)

45


Boite de sélection de date (date picker)

Disponibilité des fenêtres pop up par framework


Fenêtre d'alerte paramétrable Existence d'un composant permettant de créer une fenêtre d'alerte et d'en configurer le titre et le message.

Fenêtre de dialogue (avec boutons) Existence d'un composant permettant de créer une fenêtre de dialogue et d'en configurer le titre, le message et les boutons.

Fenêtre de popup complètement paramé-trable (vue modale)

Existence d'un composant permettant de créer un pop up entièrement configurable.


Fenêtre d'alerte paramétrable

Fenêtre de dialogue (avec boutons)

46


Thèmes disponibles par framework

Disponibilité des évènements par framework

Disponibilité des animations de transition de page par framework


IOS Le framework fournit un thème permettant d'imiter le visuel des applications iOS.

Android Le framework fournit un thème permettant d'imiter le visuel des applications Android.

Autres Le framework fournit un ou des thèmes cohérents n'étant ni des thèmes iOS ni des thèmes Android même si souvent ils s'en rapprochent d'une manière ou d'une autre.


Taphold Le framework permet d'utiliser l’événement taphold qui se déclenche lorsque l'utilisateur main-tient son doigt sur l'écran pendant quelques secondes.

Double tap Le framework permet d'utiliser l’événement Double tap qui se déclenche lorsque l'utilisateur enchaine rapidement deux tap sur l'écran.

Pinch, stretch Le framework permet d'utiliser l’événement Pinch qui se déclenche lorsque l'utilisateur pose deux doigts sur l'écran et les rapproche ou les écarte.

Swipe Le framework permet d'utiliser l’événement Swipe qui se déclenche lorsque l'utilisateur pose son doigt sur l'écran et le fait glisser d'un côté ou de l'autre.

Rotation Le framework permet d'utiliser l’événement Rotation qui se déclenche lorsque l'utilisateur pose deux doigts sur l'écran et effectue une rotation.


Slide La page un est collée côte à côte avec la page 2. Seule la page un est visible à l'écran. Lors de l'animation, les deux pages coulissent en même temps sur le côté jusqu'à ce que la page 2 soit en plein écran.

Fade La page un est au-dessus de l'autre et devient peu à peu transparente laissant apparaître la seconde.

Flip Les 2 pages sont dos à dos, les 2 page se retournent simultanément par le côté.

Pop La 2ieme page apparaît en effectuant un zoom depuis le milieu de la page.

47





Xml-rpc ou Json-rpc Le framework offre une méthode pour communiquer avec XML-RPC ou JSON-RPC.

Json-p Le framework offre une méthode pour communiquer avec JSON-P.

Yql Le framework offre la possibilité d'utiliser le Yahoo Query Language.

Websql (sqlite) Le framework offre la possibilité d'utiliser une base de données sur le terminal. Généralement Websql ou IndexDB.

Localstorage Le framework offre la possibilité d'utiliser le localstorage du navigateur.

Comet Le framework offre la possibilité d'utiliser le push de données grâce à Comet.

Web socket Le framework offre la possibilité d'utiliser le push de données grâce aux web sockets.

48


11.

Annexe 2 : Méthodologie

Pour les tests sur les navigateurs nous avons utilisé une tablette Samsung

galaxy 10.1, un Acer liquid metal S120 et un iPhone 4.

Les informations contenues dans ce document ont été trouvées sur

Internet, dans la documentation des solutions, via leurs outils de

support ou en utilisant les solutions. L’évaluation de la popularité a été

estimée en prenant en compte la densité d’utilisation de leurs outils

de communication et leur réputation sur internet (Google et Vrank

principalement).

49


Web/CMSUsines

logicielles

12.

À propos de Netapsys

Netapsys est une société d’ingénierie informatique spécialiste des

nouvelles technologies (Java J2EE, Microsoft .NET, PHP, Javascript, ...).

Fondée en 2004 par deux experts des nouvelles technologies, Netapsys

a développé et cultive un savoir-faire unique de production logicielle.

S’inscrivant dans un principe d’amélioration continue, Netapsys capitalise

à la fois sur les hommes et sur un outillage avancé d’intégration continue

et de mesure permanente de la qualité de ses développements.

La société s’appuie sur sa capacité d’écoute et sur une veille

technologique de pointe pour apporter à ses clients PME, grands comptes

et services publics une prise en charge clés en main de leurs projets

applicatifs, ou de l’évolution de leur système d’information.

Netapsys vous accompagne sur toutes les solutions technologiques

créatrices de valeur pour les entreprises et institutions :

Business

Intelligence E-commerce Collaboratif

Ingénierie logicielle

GED

Mobilité

http://www.netapsys.fr/business-intelligence

http://www.netapsys.fr/mobilite

http://www.netapsys.fr/e-commerce

http://www.netapsys.fr/usines-logicielles

http://www.netapsys.fr/collaboratif

http://www.netapsys.fr/ingenierie-logicielle

http://www.netapsys.fr/ged

http://www.netapsys.fr/web-cms

http://www.netapsys.fr

50


Présente à Paris, Nantes, Lyon, Strasbourg et Madagascar, Netapsys

compte 350 collaborateurs et a réalisé en 2013 un chiffre d’affaires de

22 millions d’euros. Si vous souhaitez en savoir plus, ou tout simplement

nous rencontrer, n’hésitez pas à nous contacter [email protected].

Retrouvez également toute l’actualité de Netapsys sur notre site internet

www.netapsys.fr.

mailto:[email protected]

Netapsys Atlantique

Netapsys Rhône-Alpes

Netapsys Grand Est

Netapsys Madagascar

Netapsys Conseil

124-126, rue de Provence

75008 Paris

Tél. : +33(0)1 70 64 27 33

17, rue Sanlecque

44000 Nantes

Tél. : +33(0)2 40 89 82 09

18, rue Bourgelat

69002 Lyon

Tél. : +33(0)4 72 16 88 88

11, rue de la Haye

Espace Européen de l’Entreprise

67300 Schiltigheim - Strasbourg

Tél. : +33(0)3 68 00 17 58

Porte B22, Immeuble ARO Ampefiloha

101 Antananarivo

Tél : +261 20 22 552 99

[email protected]

www.netapsys.fr

blog.netapsys.fr

blog.netapsys.fr

Documents

Comparatif de frameworks HTML/Javascript pour le développement