Introduction

Meteor.js est un framework web de “nouvelle-génération” développé en Javascript et basé sur Node.js, du côté serveur. Le projet remet totalement en question la manière de considérer les architectures client-serveur.

Plus qu’un framework, Meteor est un écosystème complet qui embarque un gestionnaire de paquets, un web serveur, etc. Il est même possible de déployer sont application sur les infrastructures de Meteor en une ligne commande.

Avec Meteor tout est entièrement dynamique et la base de données est accessible autant du côté serveur, que du côté client. La base données MongoDB est aussi livrée par défaut avec Meteor. Nous allons donc rapidement voir ce que ce concept implique et les possibilités qu’il nous offre.

Démarrer en un éclair !

L’installation de Meteor est vraiment très simple, il suffit d’exécuter cette commande :

curl https://install.meteor.com | /bin/sh

Pour créer un nouveau projet, utilisez cette commande :

meteor create myapp

Puis vous pouvez démarrer le serveur local et naviguer à l’adresse http://localhost:3000/ :

cd myapp && meteor

MongoDB sur le client et le serveur ?

Tout d’abord, il faut bien comprendre que le code tourne par défaut sur le client et le serveur. Pour forcer l’exécution sur l’un des deux côté, nous pourrons tester dans quel environnement l’on se trouve, comme ceci:

myapp.js
1
2
3
4
5
6
7
8
9
// Code qui tourne sur le client et le serveur

if (Meteor.isClient) {
  // Code du client
}

if (Meteor.isServer) {
  // Code de serveur
}

Tout ce qui est défini est dehors de ces deux bloque sera exposé du côté client et serveur. Pour mieux comprendre le principe de “database everywhere”, nous allons créer une simple collection, en haut du fichier myapp.js :

myapp.js
1
Posts = new Meteor.Collection("posts");

Ensuite il nous faut créer un “template”, dans le bloque de code du client, pour afficher notre collection :

myapp.js
1
2
3
Template.post_list.posts = function () {
  return Posts.find({}, {sort: { title: 1}});
};

Meteor se charge de mettre à jour la page en temps réel. En d’autres termes, nous allons gagner énormément de temps, car nous n’aurons pas d’AJAX ou de manipulation du DOM a écrire. Enfin, il nous suffit donc d’utiliser notre “template” dans le fichier myapp.html :

myapp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
<body>
  {{> post_list}}
</body>

<template name="post_list">
  <h1>Posts List!</h1>
  <ul>
  {{#each posts}}
    <li>{{title}}</li>
  {{/each}}
  </ul>
</template>
...

Et voilà, c’est fini. Nous pouvons commencer à ajouter des données et les regarder apparaitre dynamiquement. Pour ce faire, ouvrez votre navigateur et les outils de développement. Dans la section console, entrez ceci :

1
Posts.insert({title: "hello world"});

Si vous ouvrez deux fenêtres de navigation vous pourrez constater que les changements se reflètent chez tous les clients. Meteor est magique, peut être un peu trop. Mais c’est tout de même plutôt cool de pouvoir développer une page si dynamique avec très peu de code.

J’espère que cet article vous aura donné envie de jeter au moins un coup d’oeil à ce projet. Mais attention, Meteor est encore en développement, la version 1.0 devrais arriver d’ici quelques mois, il n’est donc pas recommandé de l’utiliser en production pour le moment.

Voir les commentaires

Le contexte

Il y a un peu plus d’un an, deux proches amis ont débuté un voyage participatif autour du monde appelé You Make My Trip. Le principe est simple, environ une fois par mois, ils proposent aux internautes de voter pour l’un des quatre défis proposés. Une fois le challenge terminé, ils publient une vidéo, sous forme de mini documentaire. En tant qu’amis et supporteur, j’ai souhaité les aider en développant une application mobile.

Jusqu’à maintenant, la seule solution pour lire des vidéos hébergées chez Vimeo.com était de charger leur Universal Player dans un “widget” UIWebView. Le problème avec cette solution, est que le lecteur retourne souvent une erreur indiquant que la vidéo demandée n’est pas disponible sur mobile. Bien sûr, c’est faux, toutes les vidéos sont encodées en trois versions, dès lors qu’elles sont “uploadées”.

J’ai donc développé une tout autre solution, inspirée par PlayVimeo, qui exploite les redirections (faille?) du lecteur de Vimeo.

Juste deux fichiers

YTVimeoExtractor va vous permettre de récupérer l’adresse des fichiers mp4 lisible dans le lecteur natif de iOS. Il est même possible de choisir la qualité de la vidéo. Trois options sont disponibles, mobile, standard et haute définition. YTVimeoExtractor est compatible avec iOS 4.0 et plus, car il utilise ARC.

Mais le plus cool dans tout ça, c’est que YTVimeoExtractor n’utilise aucun “widget” UIWebView, ce qui le rend léger et rapide.

L’installation

Je recommande d’utiliser CocoaPods pour l’installation car c’est de loin la solution la plus rapide. Ajoutez cette ligne à votre Podfile :

1
pod 'YTVimeoExtractor'

Puis, exécutez la commande: pod install

Autrement, vous pouvez aussi copier le dossier YTVimeoExtractor dans votre projet.

Dans tous les cas, il vous faudra aussi importer la classe dans votre controlleur :

1
#import "YTVimeoExtractor.h"

Comment l’utiliser?

YTVimeoExtractor peut être utilisé de deux façons différentes. Je vous recommande d’utiliser les Blocks car la syntaxe est plus déclarative et expressive :

1
2
3
4
5
6
7
8
[YTVimeoExtractor fetchVideoURLFromURL:@"http://vimeo.com/58600663"
                               quality:YTVimeoVideoQualityMedium
                               success:^(NSURL *videoURL) {
    // Initializer le lecteur
}
failure:^(NSError *error) {
    // Gérer les erreurs ici!
}];

Vous pouvez aussi, simplement créer une instance de YTVimeoExtractor et définir le ”delegate” :

1
2
3
4
self.extractor = [[YTVimeoExtractor alloc] initWithURL:@"http://vimeo.com/58600663"
                                               quality:YTVimeoVideoQualityHigh];
self.extractor.delegate = self;
[self.extractor start];

Puis implémentez ces deux “callbacks” pour répondre aux évènements de YTVimeoExtractor :

1
2
3
4
5
6
7
8
9
10
11
12
- (void)vimeoExtractor:(YTVimeoExtractor *)extractor didSuccessfullyExtractVimeoURL:(NSURL *)videoURL
{
    // On initialize le lecteur directement avec l'url retournée
    self.playerViewController = [[MPMoviePlayerViewController alloc] initWithContentURL:videoURL];
    [self.playerViewController.moviePlayer prepareToPlay];
    [self presentViewController:self.playerViewController animated:YES completion:nil];
}

- (void)vimeoExtractor:(YTVimeoExtractor *)extractor failedExtractingVimeoURLWithError:(NSError *)error;
{
    // Gérer les erreurs ici!
}

Si nécessaire, vous trouverez plus de détails sur l’implémentation dans l’application sample.

TODO ?

Je pensais éventuellement ajouter l’option “YTVimeoVideoQualityAuto” qui pourrait suivre ces règles :

  • Wifi : Haute définition
  • 4G : Haute définition ou standard
  • 3G : Standard ou mobile

Le choix de la qualité pourrait aussi être dictée par la version de l’iphone, retina ou pas ? Votre avis ?

Voir les commentaires