Web agency Octave & Octave

Un "Flickr viewer" responsive utilisant les CSS3

Le même contenu sur un iPad, un iPhone, et un ordinateur grace au responsive design

Pour parvenir à ce but les candidats doivent utiliser la technique dite du "responsive design" et une contrainte supplémentaire était imposée, ne pas dépasser les 10k de code. Nous avons donc développé une visionneuse de galerie flickr en utilisant les "media queries" (issue de la nouvelle norme CSS3).

La forte croissance du web mobile nous amène à produire des applications qui s'adaptent à ces nouveaux écrans. Toutefois les écrans des smartphones ainsi que ceux des tablettes sont beaucoup plus petits que ceux des ordinateurs que nous connaissons et utilisons aujourd'hui. Si nous voulons continuer à afficher le même contenu et offrir les mêmes fonctionnalités il faut faire très attention au design de l'application. Dans certain cas le layout complet doit être modifié, dans d'autres on peut simplement redimensionner les éléments, mais les écrans des mobiles étant plus petits que ceux des ordinateurs, il faut faire attention à la lisibilité.

D'une application à 10k à une application structurée et modulaire.

Suite au concours, nous avons voulu donner une seconde vie à Eight Viewer en rendant l'application stable, évolutive et maintenable.
Construire une SPA ("Single Page Application") peut devenir un vrai cauchemard si le développeur ne pense pas à architecturer son code.
Face à l'émergence d'applications de plus en plus complexes, des frameworks Javascript MVC ont été développés et adoptés par les développeurs.
Parmis les plus connus nous pouvons citer Backbone, Spine, JavascriptMVC. Ces frameworks permettent une meilleure organisation du code en dissociant les couches "modèle / vue / controller" d'une application.
Eight Viewer repose donc sur l'utilisation du framework Backbone. Outre son API, Backbone utilise également l'API History d'HTML5 ce qui permet de construire son application sur des url sémantiques.
Nous avons également utilisé RequireJs, une librairie qui permet de charger des fichiers de manière asynchrone. Grâce à sa gestion des dépendances, RequireJs permet également de concevoir une application sous forme de modules dont certains peuvent être dépendants des autres.
Il est ainsi plus facile de faire évoluer une application en ajoutant ou supprimant des modules.

Pour en savoir plus, voici les slides de Julien Cabanès présentées lors du ParisJS #10.

Pour voir le projet : http://eightviewer.com