Vers Pagespeed et au-delà

Introduction

De nos jours, de nombreux développeurs web utilisent Pagespeed pour optimiser leurs applications. Cet outil est facile à utiliser, très clair, et donne de nombreux conseils sur comment améliorer la rapidité de ses pages. Et une fois que les développeurs ont fini de résoudre certains problèmes ainsi détectés, ils affichent fièrement leur score tel un trophée prestigieux.

Regarde moi maman ! J’ai un score de 92 sur Pagespeed !

Ok mon garçon. C’est vraiment très bien. Ton site est certainement plus rapide que jamais, aucun doute. Mais peut-être que parfois, tu te demandes s’il y a autre chose au-delà de Pagespeed. Et bien la réponse est oui ! De nombreuses optimisations sont possibles, des techniques oubliées de certains, mais pas de tous, et qui étaient utilisées avant le règne de l’outil de Google.

Note: Cet article n’est pas un réquisitoire contre Pagespeed. J’adore cet outil. J’explore simplement quelques possibilités pour aller plus loin

Auditer votre code

Chrome developer tools inclut de nombreux onglets, mais certains d’entre eux sont délaissés par les développeurs. Des fonctionnalités comme la Timeline, le profiling, ou encore les audits, semblent effrayantes. Quoi, vous voulez vraiment que j’audite mon code ? Et que je fasse du profiling dessus ? Non merci.

En réalité, vous devriez, ces outils sont vraiment puissants. L’onglet Timeline par exemple, vous permet de visualiser quelle partie de votre application consomment de la mémoire et du temps. Ainsi, vous pouvez savoir précisément quels scripts et quelles ressources ralentissent votre chargement. Monitorer la mémoire est quelque chose de très important, surtout sur mobile où elle est limitée. Vous croyez vraiment que le navigateur a accès à 2Go de mémoire sur un Nexus 4 ?

L’onglet “Profile” lui, permet de monitorer l’usage de la mémoire et la consommation CPU dans votre application, et tout spécialement par les scripts. Ainsi, vous pouvez voir quelles fonctions sont gourmandes en ressources. Cela vous permet aussi de vérifier que vous n’avez pas de comportement anormal dans votre code. Cependant, si vous utilisez un framework, vous verrez que la plupart des fonctions consommatrices sont faites par lui. Concernant le profiling CSS, j’en parlerai dans la prochaine section.

Audit for Javascript

L’onglet audit est relativement similaire à ce que Pagespeed fait maintenant: donner des conseils par ordre d’importance sur comment améliorer votre code (et particulièrement côté serveur comme Pagespeed). Cependant, une partie est consacrée au CSS. Elle vous permet de voir le pourcentage de code CSS non utilisé sur votre page, et quels sont les sélecteurs concernés. Très pratique si vous utilisez des librairies CSS comme Bootstrap.

Unused CSS in Google developer tools

A présent, vous devriez être convaincu que ces outils sont très utiles !

LSD is awesome

Vous voulez aller plus loin ? Voilà une vidéo de Google sur ses developer tools :

http://www.youtube.com/watch?v=BaneWEqNcpE

Optimiser votre CSS

Si vous avez profiler votre CSS, vous avez sûrement remarqué que certaines parties de votre CSS ne sont pas otpmisées. C’est généralement dû au fait que vous utilisez des règles CSS trop génériques, et donc le navigateur essaye de les appliquer à des endroits où ces règles ne sont pas utilisées.

Par exemple, avec le code suivant :

HTML

My perfect title

CSS

h3{font-size: 3em;}

Même si vous n’avez qu’un seul h3 dans votre CSS, le navigateur va essayer de trouver d’autres h3 pour leur appliquer cette règle. Mais vous, développeur, vous pouvez l’aider ! Dites-lui simplement que cette règle ne s’applique qu’à ce h3 en particulier (si c’est le cas bien entendu).

#myAwesomeDiv #mySuperDiv h3{font-size: 3em;}

De l’importance du chat ou la légende des cookies

Si vous êtes un fan de Pagespeed, votre CSS et votre Javascript sont probablement déjà minifiés. Très utile, mais il y a mieux si vous utilisez plusieurs CSS ou JS dans votre page. Par exemple, si vous avez 3 feuilles de style, cela requiert 3 requêtes HTTP, probablement sur le même domaine que vos scripts et vos images. Malheureusement, les navigateur n’autorisent qu’un nombre limité de requêtes simultanées. Ce nombre est généralement de 6, mais peut descendre jusqu’à 2 sur certains vieux navigateurs. Vous pouvez voir ce nombre sur Browserscope.

Donc, avec 3 CSS, 4 scripts et 12 images, cela peut prendre beaucoup de temps. Bien entendu, avec une connexion rapide, ce n’est pas gênant me dites-vous. Mais nous vivons dans un monde mobile. Les requêtes HTTP consomment de la batterie et des ressources. Rappelez-vous lorsque la batterie de votre smartphone est presque vide alors que vous l’avez rechargé le matin même. Moins de requêtes HTTP signifie plus de batterie, et des chargements plus rapides. Pensez-y.

En fait, c’est un peu le problème du gros cookie et des petits cookies. Vaut-il mieux charger peu de grosses données, ou plein de petites ? Et bien la réponse est : le gros cookie est généralement plus optimisé. Reto Meier en parle très bien dans une de ses conférences sur Android lors de cette session Google IO

Vous êtes convaincu à présent ? Et bien la solution est très simple: regrouper vos ressources dans un seul fichier. Un CSS, un fichier JS. Et si possible, faites de même pour vos images avec des sprites.

Vous pouvez utiliser des outils comme CleanCSS ou uglifyJS avec la ligne de commande cat (disponible dans le Git Bash si vous êtes sur Windows) pour regrouper ET minifier vos fichiers en même temps.

Ecrivez du code de meilleure qualité

Même avec les meilleurs optimisations côté serveur de la Galaxie, si votre code est mauvais, tout ce travail fait ne sert à rien. Si vous utilisez un mobile sur du Wi-Fi par exemple, récupérer les ressources depuis le serveur pourra être rapide, mais le rendu de la page est une étape critique et peut être très longue. Peut-être trop longue. Et voilà que votre utilisateur est déjà sur un site concurrent.
Vous ne voulez pas que cela arrive bien sûr. Alors allez voir quelques guidelines de différentes entreprises. Vous y trouverez de précieux conseils.

CSS de Github: https://github.com/styleguide/css

JS de Github: https://github.com/styleguide/javascript

CSS de Blackberry: http://developer.blackberry.com/html5/documentation/css_best_practices.html

JS de Blackberry: http://developer.blackberry.com/html5/documentation/javascript_best_practices.html

CSS de Google: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

JS de Google: http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

Conclusion

Cet article n’est pas un guide complet sur l’optimisation de pages web, mais donne malgré tout quelques pistes en complément de Pagespeed, plus axé sur le côté client. N’hésitez pas à regarder les guidelines ci-dessus, et à chercher d’autres conseils sur Google, il y a de nombreuses astuces non présentées ici, et qui peuvent accélerer plus encore votre site !

Go faster than Pagespeed

Introduction

A lot of web developers nowadays heavily use the Google tool Pagespeed to optimize their applications. It’s easy to use, very clear, and gives a lot of advices on how to speed up your web page. Then, when developers have finished resolving some pointed issues, they proudly expose their score like a trophy.

Look at me mum, I have a score of 95 on Pagespeed.

Ok boy, that’s really good. Your website is certainly faster than ever, no doubt about that. But maybe, sometimes, you’re wondering if there is something out there, beyond Pagespeed. And the answer is yes! You can do a lot of things, sometimes done by web developers before the reign of the Google tool.

Note: it’s not an article against Pagespeed. It’s a very useful tool. But if you want to go further, keep reading.

Audit your code

Chrome developer tools include a lot of tabs, but some of them are not often used by web developers. Things like “Timeline”, “Profiles” and “Audits” sound scary. What, you want me to audit my code? And run a profiling tool? No thanks.

Actually, you should. These tools are really powerful. The timeline tab helps you to visualize which part of your code are memory and time consuming. Thus, you can see exactly which script or resource is slowing the page loading. Monitoring memory usage is also important, especially on mobile, where it is limited. Your Nexus device has maybe 2GB of RAM, but apps cannot access that much.

With the profile tab, you can monitor the CPU and memory usage of your app, especially for scripts. Hence, it’s possible to see exactly which function of your Javascript is taking too much time. For CSS, you can see which selectors are consuming resources (see Optimize your CSS). It’s important to check that you haven’t abnormal behaviors on your code. However, if you are using a framework, you will probably see that much of called functions are made by them.

Audit for Javascript

The Audit tab is quite similar to what Pagespeed does now: giving prioritized advices on how you can improve your code (especially on server-side, like Pagespeed). However, there is a part on CSS usage. You can exactly see which percentage of your CSS is actually not used. It’s quite useful if you are using CSS library like Bootstrap.

Unused CSS in Google developer tools

If you have now used these tools, you should see how useful they are!

LSD is awesome

And if you want to go further, here is a Youtube video on Chrome developer tools:

http://www.youtube.com/watch?v=BaneWEqNcpE

Optimize your CSS

If you have used profiling on your CSS, you should have notice that some parts of your CSS are probably not optimized. It’s generally because you have too generic CSS rules, and then your browser try to apply them, on places where they are not used.

For example, if you have the following code:

HTML

My perfect title

CSS

h3{font-size: 3em;}

Even if you have a single h3 in your CSS, the browser will try to find other h3 to apply them this rule. But you, the developer, you can help the browser and say this rule can be applied only on this h3

#myAwesomeDiv #mySuperDiv h3{font-size: 3em;}

Moreover, it’s probably better for your future code. What if you want to add other h3 but with a different style? In conclusion, avoid too generic CSS rules, and don’t forget to profile your CSS.

Cat your files or the legend of cookies

If you are a Pagespeed fan, your CSS code is probably already minified. Pretty useful, but it’s not totally optimized if you are using several CSS files. For examples, if you have three CSS stylesheets, it requires 3 HTTP requests, probably on the same domain that your scripts and images. Sadly, browsers authorize a very limited number of resources to be loaded on the same domain at the same time. This number is generally of 6, but can be of 2 on some old browsers. You can see this number on Browserscope.

So if you have 3 CSS files, 4 scripts and 12 images, it can take a lot of time. Okay, with a fast connection, that’s not a big deal. But we live in a mobile world. HTTP requests consume battery and resources. Remember when your smartphone battery is almost empty at the end of day when you have recharged it in the morning. Less HTTP requests equal more battery. Think about it.

This problem can be easily summarized by cookies. A big cookie is generally better than a lot of little cookies. You can see more details on this Google IO session

You are convinced? Right, the solution is quite simple: regroup your resources in one file: one for CSS, one for Javascript. And if you can, do the same for images with sprites.

You can use tools like CleanCSS or uglifyJS with the command line cat (available on Git bash if you are on Windows) to regroup AND minify your files at the same time.

Write better code!

Even with the best server-side optimization in the Galaxy, if your code is bad, all the work done, especially with Pagespeed worth nothing. If you are using a phone on a Wi-Fi network for example, getting resources from the network will be faster, but rendering the web page will be a critical part, and can take a lot of time. Maybe too much, so the user is already gone on a faster website. So always remember to always care about it. You can check these guidelines from various companies:

CSS from Github: https://github.com/styleguide/css

JS from Github: https://github.com/styleguide/javascript

CSS from Blackberry: http://developer.blackberry.com/html5/documentation/css_best_practices.html

JS from Blackberry: http://developer.blackberry.com/html5/documentation/javascript_best_practices.html

CSS from Google: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

JS from Google: http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

Conclusion

This article is not a complete guide on web page optimization, but it’s a good complement to Pagespeed, and it is more focused on client-side. Feel free to check for guidelines and optimization advices on Google, there are a lot of tips not presented here, and which can speed up even more your web app!

Leave a reply

Devenez un magicien du JSON avec Gson

Beaucoup de développeurs débutants sur Android se demandent comment stocker leurs données dans leur application. Par exemple, si je souhaite afficher une liste de gâteaux à mes utilisateurs, il faut bien stocker ces données quelque part. Une manière simple et efficace de faire cela est d’utiliser du JSON.

Android inclut une API pour travailler avec du JSON. Néanmoins, Google a créé une librarie bien plus puissant appelée Gson. Cet article va vous expliquer comment serialiser et déserialiser des données JSON. La librairie est disponible sur Google code

Si vous ne savez pas ce qu’est JSON, allez voir sur Wikipedia. Cela va changer votre vie !

Récupérer votre fichier JSON

Il y a plusieurs manières de récupérer vos données. Si elles ne vont que peu ou pas changer, vous pouvez les stocker directement dans le dossier assets de votre application. De cette manière, le fichier sera packagé dans l’app, et pourra être lu très rapidement.

Si vous voulez utiliser un fichier local, vous devez utiliser un InputStream pour lire le fichier, et en extraire une String qui sera utilisée par Gson.

InputStream is = this.getAssets().open("cakes.json");

int ch;
StringBuffer str = new StringBuffer();

while ((ch = is.read()) != -1)
	str.append((char) ch);

String result = str.toString();

Une autre solution est de récupérer le fichier depuis un serveur distant. Dans ce cas, vous devrez utiliser un traitement asynchrone, ce qui n’est pas le sujet de cet article. Si vous souhaitez utiliser cette solution, je vous suggère d’aller voir la documentation de DefaultHttpClient et deAsyncTask
Google propose également un article sur le sujet.

Déserialiser les données

Une fois que vous avez vos données sous forme de String, il est temps d’utiliser la magie de Gson.

D’abord, vous devez créer une classe qui correspond à vos données en JSON.

Par exemple, si mon fichier JSON est le suivant:

[
    {
        "id": 0,
        "name": "Cupcake"
    },
    {
        "id": 1,
        "name": "Muffin"
    },
    {
        "id": 2,
        "name": "Cookie"
    }
]

Alors la classe correspondante sera:

public class Cake
{
	public int id;
	public String name;
}

(Si vous criez à l’hérésie en voyant mes attributs publiques, je vous suggère d’aller faire un tour sur cet article)

Une fois le modèle prêt, nous pouvons en créer une List

List listCakes;

Vous êtes prêt à utiliser la magie Gson ? C’est parti !

Gson gson = new Gson();
Type listType = new TypeToken>()
{
}.getType();
listCakes = gson.fromJson(result, listType);

Et oui, c’est tout ! Vous avez juste à créer un objet Gson, un object Type (java.lang.reflect.Type), et utiliser la méthode fromJson. Facile non ?

Félicitations, vous êtes maintenant un magicien du JSON ! Cette méthode est vraiment très simple, et très rapide à faire. Vous n’êtes pas obligé de l’utiliser dans un background thread. Cependant, je vous recommande de le faire malgré tout. Cela ne pourra jamais être un mal pour l’expérience utilisateur.

Devenez un archimage

Un dernier conseil de magicien pour vous. Maintenant que vous savez déserialiser des donnés, vous avez peut-être envie de les sérialiser ? C’est encore plus facile ! Tout ce que vous avez à faire est d’appeler la méthode toJson d’un objet Gson, avec votre liste de données en paramètre. Et c’est tout !

Cet article n’est qu’une rapide introduction à Gson. Il y a encore bien plus à découvrir, et je vous recommande de lire la documentation sur le site officiel. Mais pour l’instant, vous savez manipuler facilement vos données JSON. Rappelez-vous cependant, de grands pouvoirs impliquent de grandes responsabilités.

Leave a reply

How to become a JSON wizard with Gson

A lot of beginners on Android development ask the same question: how to store data for your application. For example, if you want to display a list of cakes to your users, you have to store somewhere these data. An easy way to do it is to work with JSON data.

Android includes a very useful API to work with JSON. However, Google has released a much more powerful library called Gson. This article will explain how to serialize and unserialize data from a JSON file. You can get the library on Google code

If you have never heard of JSON, check it out on Wikipedia. It will change your life!

Get your JSON file

There are several ways to get your JSON file. If data you want are unlikely to change, you can store your file directly in your application assets folder. This way, the file is packaged within your app, and it can be accessed even if you are offline for example. It’s also very fast to load.

If you want to load a local file, you have to use an InputStream to read the file and extract a String, which can be used by Gson.

InputStream is = this.getAssets().open("cakes.json");

int ch;
StringBuffer str = new StringBuffer();

while ((ch = is.read()) != -1)
	str.append((char) ch);

String result = str.toString();

Another solution is to get the file from a remote server. In this case, you have to retrieve data using an asynchronous request, which is out of the scope of this article. If it’s the solution you want, you can check DefaultHttpClient with AsyncTask. Google also proposes a tutorial about requesting asynchronously data.

Unserialize data

Once you have your JSON data as a String, you can use the magic of Gson.

First of all, you have to create a class, which has attributes corresponding to your data.

For example, if my JSON file is the following:

[
    {
        "id": 0,
        "name": "Cupcake"
    },
    {
        "id": 1,
        "name": "Muffin"
    },
    {
        "id": 2,
        "name": "Cookie"
    }
]

Your model class should look like this:

public class Cake
{
	public int id;
	public String name;
}

(If you’re wondering why I use public attribute without getter/setter, check out this post on Android performance)

Once you have your model ready, you can create a List of them.

List listCakes;

Okay, you are now ready to use the magic powers of Gson.

Gson gson = new Gson();
Type listType = new TypeToken>()
{
}.getType();
listCakes = gson.fromJson(result, listType);

And… That’s all! Yes! You just create a Gson object, a Type object (java.lang.reflect.Type), and use a method.

Congratulations, you are now a JSON wizard! Easy right? And very fast! You don’t have to do it in background thread, however, I recommend you to do it anyway. It will be always better for the user experience, even with small JSON files.

How to become an Archwizard

One last tip for you. You know how to deserialize data. And what if you want to serialize it? It’s even easier! Just call the method toJson of a Gson object, with your list as parameter. And that’s all!

This article is a quick introduction to Gson. There is much more to know about it, and I recommend you to read some documentation on the official website. But for now, you know how to manipulate data with JSON. Just remember, with great powers come great responsibilities.

Leave a reply

Angular.js : ajouter les évènements de clavier et de touch

Angular.js est un excellent framework web, inculant de nombreuses fonctionnalités avancées et très utiles. Néanmoins, il possède un système de gestion des évènements qui empêche le développeur d’utiliser directement des attributs comme onclick ou keydown (en réalité vous pouvez essayer, mais il y a de fortes chances que vous ayez de graves problèmes de binding). Le problème étant : Angular.js ne gère pas nativement les événements de clavier et de touch.

Certains plugins permettent d’ajouter facilement cette fonctionnalité, le plus connu étant AngularUI (http://angular-ui.github.com/). Cependant, si vous ne voulez pas vous encombrer d’un plugin, il est très simple d’ajouter vos propres événements.

Tout ce que vous avez à faire est de trouver dans Angular la ligne où tous les événements sont bindés, et ajouter ceux que vous voulez utiliser (en l’occurrence, keydown, ou touchstart par exemple). Pour trouver cette ligne, faites une recherche sur un événement comme dblclick (évitez click, il il est utilisé dans d’autres endroits du code).
Vous devriez trouver une ligne comme

var ngEventDirectives = {};
forEach(
'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave'.split(' ')

Vous n’avez plus qu’à ajouter les événements que vous voulez à la chaine, séparés par un espace, comme ceci:

'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup touchstart touchend'

Cela va créer une directive Angular, utilisable dans votre html, comme n’importe quel autre évènement géré par Angular. Vous pouvez par exemple utiliser le code suivant pour gérer un keydown

J’espère que cela sera utile à certains.

Leave a reply

Hacking Angular.js: how to add keyboard and touch events

Angular.js is a very good web framework, with a lot of cool features. However, it has a particular event handler, which prevent you to use normal Javascript events such as onclick and keydown (actually you can try to use them, but it causes a lot of binding problems). The problem is: Angular.js doesn’t handle keyboard and touch events.

There are some plugins on the Internet to add this functionality. The most important one is AngularUI (http://angular-ui.github.com/). However, if you don’t want to use a plugin, it’s very simple to add this feature to angular.js

All you have to do is find, in the angular Javascript file, the line where all events are binded, and add the ones you want to use. To do that, search for an event like dblclick (avoid click, since it’s used in other parts of the code).

You will find something like that:

var ngEventDirectives = {};
forEach(
'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave'.split(' ')

Then, you just have to add the events you want in the string, separated by a space, like that:

'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup touchstart touchend'

It will create a ng directive, usable in your html, and handling the event like the other ones.

Thus, for keydown event, you can use

I hope it will help some of you.

Leave a reply

Emuler vos smartphones et tablettes sur Google Chrome

Vous ne le savez peut-être pas, mais Google Chrome intègre dans ses outils de développement de quoi simuler un iPad ou une Galaxy Nexus 10 par exemple.

Tout ce que vous avez à faire est d’aller dans les paramètres des dev tools.

Settings in Chrome dev tools

Vous aurez alors un onglet appelé “Overrides”, qui permet de choisir un User Agent.

User Agent emulation

Vous pouvez également spécifier un User Agent personnalisé (pratique pour émuler des plateformes récentes, comme Firefox OS).

Vous pouvez également cocher la case “Device Metrics”, et votre fenêtre prendra la taille du device sélectionné !

Device metrics Emulation

Il est possible que vous ayez à actualiser votre page pour prendre en compte les changements.

Dernière astuce : cette fenêtre de paramètre permet également de simuler les évènements liés au touch.

Emulate devices on Google Chrome

You might not know that Google Chrome dev tools integrates a tool to emulate predefined user-agents and form-factors.

Thus, you can easily simulate a visit from an iPad or a Galaxy Nexus 10.

All you have to do is to go in the dev tools settings:

Settings in Chrome dev tools

Then, you have a tab called Overrides, which allow you to choose the user agent.

User Agent emulation

You can of course specify your own custom user agent (useful to emulate new OS like Firefox OS for example).

You can also check the Device Metrics option, and then, you window will adapt with chosen device resolution!

Device metrics Emulation

You may have to refresh the page to apply all the changings.

Final tip: this window allows you to enable the touch emulation. Useful if you want to simulate touch!

Windows Phone VS Android : 3ème manche

Introduction

2013. Android est toujours là. Windows Phone aussi. Et les développeurs sont toujours là pour défendre leur plateforme favorite ! Il était donc normal d’écrire un 3^ème article sur ces deux systèmes, du point de vue du développeur. Et en un an, il y a eu de nombreuses nouveautés !

Note : n’ayant pas Windows 8 sur mon ordinateur, et ne pouvant donc pas développer pour Windows Phone 8, j’ai demandé à Florian Rousselet de coécrire cet article. Si ça parle de WP, c’est donc lui qui tient la plume. Allez le spammer sur Twitter ou sur son blog, ça lui fera plaisir !

windows-phone-7

One Year After

2012 a été une année plutôt riche pour Android, notamment au travers de deux choses. La première est évidemment une nouvelle version (ou plutôt deux) du système : Jelly Bean, estampillé 4.
La seconde nouveauté est l’extension de la gamme Nexus, qui est désormais dotée de trois appareils : le Nexus 4, remplaçant du Galaxy Nexus, la Nexus 7 (une tablette de 7 pouces) et la Nexus 10 (équivalent en 10 pouces). Désormais, les développeurs ont des appareils de référence pour tous les formats majeurs 4.1 à sa sortie en Juin, puis 4.2 lors d’une mise à jour en Novembre. Bien que les nouveautés apportées ne soient pas réellement majeures, elles apportent clairement des ajouts bienvenus, prouvant qu’Android commence à atteindre une certaine maturité.

En une année, le monde Microsoft a aussi été marqué par plusieurs évènements majeurs. Le nouveau système d’exploitation Windows revient à la fin de l’été en version 8 avec l’intégration de l’interface Modern UI pour PC et Tablettes.

Seconde phase, quelques jours après, Microsoft nous propose Windows Phone 8. D’abord très controversée, cette nouvelle version n’étant pas disponible pour les téléphones de première génération, Windows Phone 8 frappe un grand coup en surprenant par des ventes 4 fois supérieures à celles de Windows phone 7 à la même période. La plupart des distributeurs sont en effet en rupture des téléphones phares à savoir le Nokia Lumia 920 et HTC 8X.

Les outils

En un an, de très nombreuses améliorations ont été faites au niveau des outils pour Android. Les versions 17 à 21 d’ADT sont sorties, avec à chaque fois des fonctionnalités vraiment intéressantes pour nous autres développeurs. On notera des améliorations de Lint, de nouveaux émulateurs, et de très grosses améliorations au niveau de l’éditeur d’interface. A présent, vous pouvez par exemple créer directement des fichiers de layout pour une plateforme spécifique, directement depuis le designer.

Android – Create new

Autre fonctionnalité très utile, la prévisualisation de votre layout sur plusieurs résolutions différentes. Très pratique pour éviter de switcher entre toutes les configurations possibles pour voir si vous n’avez pas de problèmes de positionnement.

Android – Preview all sizes

A noter également, l’arrivée de nouveaux assistants très pratiques lorsque vous créez votre application, ou ajoutez une nouvelle activité. Vous pouvez par exemple sélectionner des templates déjà préconstruits, pour gérer un système d’onglets par exemple, ou des paramètres.

Android – Activity wizard

Ce n’est pas encore Visual Studio, mais le temps de développement est considérablement réduit lorsqu’il s’agit d’UI à présent.

Enfin, sachez que désormais, le package d’installation du SDK contient une version spéciale d’Eclipse, dédiée à Android. Ça évite d’aller chercher une bonne version d’Eclipse pour développer. Pratique pour les débutants.

Vous pouvez consulter toutes les nouveautés d’ADT à cette adresse :

http://developer.android.com/tools/sdk/eclipse-adt.html

Coté Microsoft, une mise à jour de la suite de développement à tout faire Visual Studio, en version 2012 à présent, a été rendu disponible. Blend, pour les interfaces graphiques, est maintenant intégré au sein de la suite et ne fait plus partie du pack Expression.

Le SDK de Windows Phone est aussi mis à jour afin de pouvoir cibler Windows Phone 7.1 ou 8.0. Attention, Microsoft a pris l’option de passer ses émulateurs sous Hyper-V, cela implique donc l’utilisation de Windows 8 Pro et d’un processeur récent compatible SLAT.

Concernant ces émulateurs, avec Windows Phone 8 et ses 3 résolutions (480*800 – WVGA, 768*1280 – WXGA, 720*1280 – 720p) nous avons donc 3 nouveaux émulateurs disponibles dans Visual Studio. Pour les projets Windows Phone 7.1, nous avons en plus les émulateurs WVGA 512 et 256 Mo.
Le 22 janvier, Microsoft propose même une mise à jour des SDK 7.1.1 et 8.0 afin d’ajouter 2 nouveaux émulateurs pour WP7.8. Ça commence à faire beaucoup.

Lors du développement, maintenant le fait de fermer son appli n’arrête pas le Debug ! Certaines parties sont maintenant beaucoup plus faciles à débugger qu’avant (Tuiles secondaires par exemple).

Fonctionnalités

Avec l’arrivée de Windows Phone 8, les nouvelles fonctionnalités et API disponibles sont légions.

Nous pouvons citer pêle-mêle, le développement C++, les fonctions de Text To Speech, la personnalisation du LockScreen, les nouvelles tuiles (tailles et types), Nokia Maps, Camera Lenses et VideoRecording, le NFC et ses énormes possibilités, l’écriture dans le calendrier et les contacts, l’association de fichier, le support de la mini-SDCard, le Bluetooth ou encore l’In App Purchase.

Toutes ces fonctionnalités sont cruciales et permettent soit de rattraper la concurrence (NFC, In App Purchase), soit de proposer encore plus de fonctionnalités propres à Windows Phone comme les nouvelles tuiles ou le LockScreen personnalisable.

Afin de retrouver en détails toutes les nouveautés de Windows Phone 8, vous pouvez regarder cet article du Wiki Nokia Developper : www.developer.nokia.com/Community/Wiki/What%27s_new_in_Windows_Phone_8

Bien que les mises à jour Jelly Bean n’aient pas apporté de nouveautés majeures sur Android, quelques nouveautés bienvenues ont vu le jour. La principale nouveauté que l’on peut citer est l’ajout de nombreuses possibilités pour les notifications. En effet, vous pouvez à présent créer des notifications au design bien plus travaillé qu’auparavant, avec des options rapides (comme pouvoir marquer un message comme lu directement depuis la notification). Plusieurs options sont possibles, et l’ensemble est facile à mettre en place

Android – Jelly Bean Notifications

Google a aussi sorti la version 2 de sa librairie Google Maps, apportant enfin un vent de nouveautés pour les applications utilisant de la cartographie. Il est donc maintenant possible d’intégrer Street View, ou les bâtiments en 3D, directement dans vos applications.

https://www.youtube.com/watch?v=97HLa739rXU

Autre nouvelle fonctionnalité : les Google Play Services, qui permettent d’accéder principalement à certaines informations du profil Google + de l’utilisateur. Notez que cela requiert l’installation d’une application à part (pas très pratique donc).

http://developer.android.com/google/play-services/index.html

Enfin, une autre nouveauté encore assez peu exploitée : Dream day. Il s’agit tout simplement d’une activité dans votre application, qui pourra être lancé lorsque l’appareil est en charge ou sur un dock. Cette activité peut être simplement une animation (une sorte d’écran de veille), ou une application à part entière, avec des interactions possibles avec l’utilisateur.

http://android-developers.blogspot.co.uk/2012/12/daydream-interactive-screen-savers.html

Ecosystème

Aujourd’hui, l’écosystème Android est de plus en plus grand. Que cela soit au niveau des parts de marché, ou de l’extension de la gamme Nexus, le système est devenu totalement incontournable dans le monde mobile. Malgré cela, quelque chose manquait cruellement à Android : une véritable communauté pour les développeurs. Mais en un an, Google a fait de nombreux efforts, et la situation est aujourd’hui bien meilleure. L’exemple le plus flagrant est l’usage de Google + pour organiser des “hangouts” directement avec les membres de l’équipe Android. Ainsi, plusieurs fois par semaine, des conférences vidéo sont organisées, sur différents thèmes. Vous pouvez ainsi soumettre votre application à l’œil critique des ingénieurs de chez Google, ou encore obtenir leurs conseils en matière de design. Un vrai must à suivre pour tout développeur Android, et qui vous apprendre un tas de petites astuces très utiles au quotidien.

http://www.youtube.com/user/androiddevelopers

Avec le lancement des communautés Google +, Android a bien sûr eu le droit à sa propre assemblée de développeurs, et c’est tant mieux, car la concurrence sur Windows Phone, en tout cas au niveau francophone, était rude. Il était dommage de voir le système au bugdroid ne pas avoir la communauté qu’il mérite.

https://plus.google.com/+AndroidCommunity

https://plus.google.com/communities/106117639322093625029

Enfin, Google a très largement amélioré la console pour les développeurs. Bien que la nouvelle interface soit toujours en test, elle est bien plus agréable à utiliser. Parmi les nouveautés apportées, on peut noter la gestion de la traduction des images de l’application (pour avoir des visuels localisés), ou encore la réponse possible aux commentaires pour tous (la fonctionnalité était réservée aux “super-développeurs” auparavant).

Concernant l’écosystème Microsoft, celui-ci a énormément évolué avec une unification des interfaces (Xbox, Windows 8, Windows Phone) et du développement pour Windows 8 et Windows Phone.

Maintenant, Windows Phone 8 intègre WinPRT (Windows Phone RT) qui est un sous ensemble de WinRT (Windows Runtime) de Windows 8. Pour en savoir plus sur ce sujet, vous pouvez regarder la vidéo de la Build 2012 (http://channel9.msdn.com/Events/Build/2012/3-043R ).

Autre point important coté Microsoft, c’est la communauté de développeurs et de professionnels que possède Microsoft au travers de ces différents programmes et évènements, Accélérateur, App Campus, MSP, MVP, Hackatons, Concours et le salon Microsoft en France, les Techdays.

Vous pouvez retrouver la Communauté Windows Phone sur Facebook ici : https://www.facebook.com/groups/devwp7/

Concernant le Windows Phone Store, il permet maintenant (WP8 oblige) de gérer ses achats In App avec le type (consommable ou durable) et le coût associé mais aussi les XAP multiples afin de déployer sur Windows Phone 7.1 et 8.0.

Le compte PubCenter peut aussi être associé à son compte développeur afin de gérer ses bandeaux de publicités directement au sein du DevCenter. Les revenus et les rapports sont par contre toujours accessibles sur le portail PubCenter.

Conclusion

Sur un an, les nouveautés ont été nombreuses des deux côtés, mais pas aux mêmes niveaux. Si Google a surtout amélioré ses outils, et assez peu touché à son système suffisamment mature, Microsoft à lui voulut donner plus de possibilités aux développeurs. L’intégration de Windows Phone a son écosystème a également été mise en avant, afin d’offrir une « expérience Windows » complète et cohérente. On notera également que la communauté commence à vraiment grossir, des deux côtés, et c’est un plus considérable pour les développeurs.

En conclusion, il n’a jamais fait aussi bon d’être développeurs pour Android ou Windows Phone !

Leave a reply

Speed up your productivity on Android : Android Annotations

Introduction

As an Android developer, you might sometimes ask yourself: “Why Android, which is a very cool platform, has so many lack in productivity when you have to develop?”. Of course Android is easy to use and offers a lot of really great stuff for developers. But yes, sometimes, there is a lot of boilerplate and you lose a lot of time. Fortunately, some libraries make our developer life easier! Here’s the first article of a series about how to boost your productivity with awesome libraries. And the first one is Android Annotations !

What’s Android annotations?

Android annotations is a great open-source (and French) library to speed up your code writing (well, that’s the goal of the article, right?). How? It just simplifies a lot of stuff you don’t care about. For example, one of the most boilerplate you do as an Android developer is to get UI elements reference in your code.

TextView myTextView = (TextView) findViewById(R.id.myTextView)

Okay, that’s easy, but it takes time. If you have one or two elements, that’s okay. If you have hundreds of them, you have a real lack of productivity. Moreover, if you want to reference your element as attribute of your class, you will have to split the code in two places (one to declare the attribute, the other to get it from the view). But here comes Android Annotations!

@ViewById
TextView myTextView;

Much easier right ? Here is the strength of the library, you use annotations everywhere and your development becomes suddenly so productive! But it’s just the beginning!

Are you convinced? Then go download the library right now on Github (and fork it)

http://androidannotations.org/

Initialize your Activity

Before using all the awesome stuff of the library, you have some steps to do. First of all, you have to add the library to your project. This step is very well documented on the Github project Github. Once it’s done, you have to annotate your activity with the @EActivity annotation. Actually, this annotation will generate a subclass of your activity, which will be used in the application. Once your activity is annotated, go to your manifest, and replace the name of your Activity by the generated subclass name, which is the same, but with an underscore at the end. For example, if your activity was declared this way:

<activity
android:name=".MainActivity"/>

Now it’s:

<activity
android:name=".MainActivity_"/>

Once done, you can use all the features of Android Annotations.

Use views with Android Annotations

The @ViewById is not the only helpful annotations included in the library. A lot of stuff exists. But here is an important thing to know: don’t use your views directly in the onCreate method. Why? Because all your elements will be null and so you will think “What? This guy on the blog is a liar. It doesn’t work at all!”. Of course it works! But all your elements aren’t retrieved by the library yet. Instead, you should use them on a special method, which is annotated with @AfterViews:

@ViewById
protected TextView myTextView;

@Override
protected void onCreate(Bundle savedInstanceState)
{
     super.onCreate(savedInstanceState);
     
     //Here you have to NOT use annotated elements
}

@AfterViews
protected void useElements()
{
     //Here you can use your annotated elements
}

In this method, you can safely use your elements. By the way, you are not limited to UI elements. You can also get Animations or services with annotations!

@AnimationRes
Animation fadeIn;
	
@SystemService
ClipboardManager clipboardManager;

Use events

Okay, now you can get your elements with annotations. But it’s still not the end! The library allows you to handle events like click on your elements, without modifying the view! You just have to use the @Click annotation:

@Click({R.id.button1, R.id.button2})
protected void buttonClick() 
{
     //Do what you want here
}

It’s not a top feature in my opinion but it can be quite useful!

Background and UI threads

Thanks to JDK, using threads is easy. But anyway, you still have to use an AsyncTask, or use callbacks to call UI thread from a background thread. Not really convenient. But once again, Android Annotations offers two awesome annotations to accelerate our development:

You want to put a method in a background thread? No problem, just use @Background annotation!

@Background
protected void taskInBackground(String stuff) 
{
     //All the code of the method will not be executed in UI thread
}

Yes. That’s all. Your method is in a background thread. Just one thing to know: your method has to not be private.

And what about UI thread? Same way, use @UIThread annotation:

@UiThread
protected void taskInBackgroundCompleted(String result)
{
     Toast.makeText(this, result, Toast.LENGTH_LONG).show();
}

Now you are all done. It is more convenient than usual threads right?

Conclusion

This article is just an introduction, there is a lot more to discover on this library, like the @Rest annotation. I hope it has given you some ideas and convince you to use Android Annotations. Don’t lose time with boilerplate stuff and spend time on the core of your app, not on findViewById method.

Leave a reply