Les frameworks de développement mobile

Par défaut

Il existe aujourd’hui des dizaines de framework pour le développement d’applications mobiles.
Le choix du bon framework est essentiel car il peut avoir un impact direct sur les délais de livraison, la maintenabilité et l’évolution de l’application. Pour le grand public le résultat est à peu près similaire, mais pour un développeur qui veut se lancer dans cette aventure, il est important de comprendre:

  1. Quelles sont les choix disponibles?
  2. Quelles sont les avantages et inconvénients de chacun?

Dans le domaine du développement d’application mobile, on distingue les applications natives d’une part,  les applications hybrides de l’autre. Entre les deux on a  toute une game de  solutions intermédiaires

1. Applications natives

Les applications natives sont écrites en Objective C ou Swift pour les systèmes IOS, en java pour les androids et C# ou vb.Net pour les dispositifs Microsoft.

Avantages

  • Les applications natives sont plus performantes car ils offrent la possibilité d’exploiter tout le potentiel de l’appareil.  (GPS, caméra, bibliothèque d’images…)
  • Son design est souvent plus pointu.

Inconvénients

  • Obligation de développer les mêmes fonctionnalités plusieurs fois.
  • connaissances spécifiques de certains langages de programmation pour chacun de ces plateformes.
2. Les frameworks de développement multiplateformes (applications natives générées)

Pour contrer ces inconvénients, certains framework offrent la possibilité de développer pour toutes les plateformes en une seule fois, mais en produisant du code native pour chaque plateforme.

2.1 Xamarin

Pour les développeurs .net, l’intégration de Xamarin dans Visual studio fait de ce framework le choix idéal. Le développeur code une seule fois en C# et, à la fin il génère du code spécifique pour les trois plateformes.

Ces codes peuvent ensuite être compilé dans les environnements de déploiement approprié tel que Xcode pour les applications IOS.

Avantages

  • Toutes les fonctionnalités sont conservées sur chaque plate-forme.
  • La performance est très proche de l’application native

Inconvénients

  • Le développeur doit apprendre le C# pour utiliser Xamarin
  • La nécessité de connaître les SDK de chaque plate-forme
2.2 React Native

React native créé par facebook en 2013, s’est rapidement imposé car il apporte le meilleur des deux mondes: développement natif sur un framework hybride.

La philosophie de React  est à peu près identique sauf que le code est basé sur une version de javascript: React et JSX. Le code est ensuite compilé pour fournir des composantes natives Ios ou android (pas de htmls). D’où la nécessité d’utiliser XCode à la fin du processus pour la compilation du code ios et l’équivalent du côté android. La réutilisation de code entre les 2 plateformes tourne autour de 85%
3. Applications hybrides (Javascript, html, Css)

Ces applications sont généralement développés en utilisant html5, css et javascript. Ce sont généralement des page web qui s’affichent dans un webview. Cela ouvre des possibilités aux développeurs web qui peuvent utiliser simplement les technologies qu’ils maîtrisent déjà.

3.1 Les frameworks basé sur cordova

La plupart de ces frameworks utilise l’api javascript de cordova pour accéder aux composantes de l’appareil tel que caméra, géolocalisation, etc. Parmi les plus populaires, on peut citer PhoneGap, Ionic, jquery mobile, sencha.

3.1.1 Apache Cordova (ex PhoneGap)

Apache Cordova a été créé par Nitobi, qui a été acheté en 2011 par Adobe Systems. PhoneGap est l’outil développé par Adobe Systems, par dessus le framework Cordova et distribué sous licence open source. Il permet d’envelopper du code html css et javascript afin de leur permettre d’accéder au composante de l’appareil.

3.1.2 Ionic

Ionic a été créé en 2013. Il utilise angular js et aussi cordova pour créer des applications mobiles essentiellement basé html css javascript.

Avantages

  • Développement en AngularJS.
  • Open source et gratuit.
  • Rapidité de développement.

Inconvénients

  • Concepteur d’interface visuel drag&drop mais payant pour l’export natif.
3.1.3 Framework commercial: Sencha touch Kendo UI

Du côté commercial parmi les plus connu on compte:
– Kendo UI essentiellement basé sur jQuery

– Sencha touch aussi permet de développer des applications mobiles html css javascript. Il possède une version commercial et une version libre sous license GPL.

4. Les Applications web mobile

Les applications web mobile, appelées aussi web app. Ce sont des sites web conçus spécifiquement pour fonctionner dans les tailles d’écran des mobiles.

Avantages

  • Facile à maintenir car elle ne nécessite par de mise à jour par l’utilisateur,
  • Le développeur n’est pas obligé de se soumettre à processus d’approbation.

Inconvénients

  • On n’a pas accès aux API natives de la plateforme.
  • Pas d’icone sur l’écran pour lancer l’application
Conclusion

Aujourd’hui la communauté des développeurs penchent plutôt vers les solutions hybrides qui permet de développer une seule fois et de déployer sur toutes les plateformes .

Le graphique suivant donne une idée de la situation des ces framework en terme de productivité/qualité

Référence: https://www.hippopunk.com/en/strategies-developing-cross-platform-apps/

Utilisation de jQuery fullcalendar avec asp.net

Par défaut

Pendant quelques semaines j’ai cherché sur l’internet des exemples pour comprendre comment utiliser le fullCalendar Jquery dans mes applications web asp.net. Le jour où j’ai enfin compris le truc, j’ai décidé de publier un article en français sur le sujet. J’espère que quelqu’un pourra en profiter.

1. Configuration simple en 10 lignes de code

1.1 Ajouter les références jquery (css et javascript)

<link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css"  rel="stylesheet" type="text/css" />
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>

1.2 Écrire le code javascript pour initialiser le calendrier

$(document).ready(function() {
   $('#calendar').fullCalendar({
   // ici vous ajouterez les options et les fonctions
    })
 });

Le code précédant fait appel à un élément de votre page nommé ‘calendar’. Donc il faufra ajouter le code suivant dans le body de la page

<div id='calendar'></div>

En exécutant cette page vous devriez voir s’afficher un calendrier sans évènements.

2. Afficher des évènements

Maintenant il faudrait dire au calendrier qu’est ce qu’il doit afficher

Il s’attend à recevoir une liste d’événements sous la forme d’une chaîne de caractère en format json.

events: [{ title: 'Event1', start: '2013-11-11 08:00:00', end: '2013-11-11 10:00:00' },            { title: 'Event2', start: '2013-11-12 11:00:00', end: '2013-11-12 13:00:00'}]

Si vous ajouter ce code à l’intérieur du code précédant ceci devrait afficher 2 événements.

$(document).ready(function () {
 $('#calendar').fullCalendar({
       // ici vous ajouterez les options et les fonctions
  events: [{ title: 'Event1', start: '2013-11-11 08:00:00', end: '2013-11-11 10:00:00' },           { title: 'Event2', start: '2013-11-12 11:00:00', end: '2013-11-12 13:00:00'}]        })
 });

Mais le plus pratique c’est de lui indiquer l’adresse ou il doit aller chercher les événements, dans ce exemple nous utilisons une page .ashx.

events: ’loadEvents.ashx’

Ça pourrait être aussi un webservice. (voir article au sujet de Json, webService, webMethods)

3. Les options

Les options vous permettent de contrôler l’apparence et le comportement du calendrier. Par exemple.

$('#calendar').fullCalendar({
 weekends: false, // cache samedi et dimanche

   events: ’loadEvents.ashx’ //Adresse des événements a afficher
 });

Vous pouvez rajouter plusieurs options séparées par une virgule.

4. Les fonctions (Callbacks)

Les callbacks sont des options qui exécute une fonction chaque fois que certaines actions sont réalisées dans l’interface. L’exemple suivant définit ce qui doit se passer quand un utilisateur click sur le calendrier.

$('#calendar').fullCalendar({
    dayClick: function() {
           alert('Vous avez cliqué sur une journée'); //Affiche un message
         }
 });

Pami les plus utilisés on peut citer:

eventDrop // déplacement d’un évévement
eventResize //modifier la durée d’un événement
select // Click sur une case
drop //glisser un évènement externe sur le calendrier
eventRender  //peut-être utiliser pour afficher un tooltip par exemple

Pour connaître toutes les options disponibles vous pouvez consulter la documentation à l’adresse suivante: http://arshaw.com/fullcalendar/docs/display/