27
MAI

App.js - Créez des webapps mobiles efficaces rapidement

Publié le 27/05/14 à 07h36 par DJo

App.js est un framework Javascript permettant de créer rapidement des applications web mobiles efficaces.

App.js est un framework Javascript permettant de créer rapidement des applications web mobiles efficaces.

L'objectif du framework Javascript est simple, proposer une interface mobile intuitive et proche de l'UI native.

Multi plateforme, elle pourra être utilisée sur n'importe quel smartphone, et en particulier sur Android et iOS sur lesquels les transitions/animations sont natives.

On retrouve différents éléments d'UI mobile: Listes, Header de navigation, boutons, inputs et système de scroll infini...

D'un point de vue code, App.js propose un système de contrôleurs intéressant, exemple de mise en place:

On définit le layout de la webapp:

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0,
                                   maximum-scale=1.0,
                                   user-scalable=no,
                                   minimal-ui">
    <link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
    <style>
      /* put your styles here */
    </style>
  </head>
  <body>
    <!-- put your pages here -->
    <script src="//zeptojs.com/zepto.min.js"></script>
    <script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
    <script>
      /* put your javascript here */
    </script>
  </body>
</html>

Ensuite, on ajoute les pages de notre webapp en créant une div avec une classe app-page et un data-page permettant de nommer la page en question pour notre contrôleur:

<div class="app-page" data-page="home">
  <div class="app-topbar"></div>
  <div class="app-content"></div>
</div>

Pour charger notre page "home", il faut utiliser le JS suivant:

App.load('home');

Et dès qu'elle sera affichée, notre contrôleur "home" sera appelé:

App.controller('home', function (page) {
  // this runs whenever a 'home' page is loaded
  // 'page' is the HTML app-page element
  $(page)
    .find('.app-button')
    .on('click', function () {
      console.log('button was clicked!');
    });
});

La navigation est elle aussi assez simple à mettre en place, un historique des pages permet de mettre en place le bouton retour facilement.

N'hésitez pas à consulter la documentation du framework qui est plutôt complète.

Grâce à App.js vous pourrez créer rapidement des webapps mobiles compatibles sur l'ensembles des smartphones du marché.

A tester !

 

Site Officiel

Baraguiné par Domi le 20/06/14 à 11h36
Domi sur La Ferme du Web
Et la valeur ajoutée par rapport à jQueryMobile ?

J'en profite pour signaler un outil révolutionnaire pour créer des appl cross plateformes "natives" sans la lourdeur d'utilisation de phonegap et d'Eclipse : Le XDK de Intel : https://software.intel.com/fr-fr/html5/tools

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web