Fresh from the Hive

Tech and Passion with love from Studio Melipone

Angular + Rails. Avec Turbolinks, en CoffeeScript. (Bisous Sprockets)

gdurelle's avatar le 24 avril 2014

Angular c’est cool. Ça bind le HTML aux datas qu’on manipule en JS.

Rails c’est super-mega-giga-peta cool, surtout avec Turbolinks qui permet de ne charger les assets (JS, CSS, images, fonts, etc) qu’une seule fois et Sprockets qui va compiler+minifier tout ça.

CoffeeScript aussi c’est cool, il y a des facilités de développement pour aller plus vite, c’est plus lisible et ça permet d’avoir du JS bien propre.

Mais quand on mélange tout ça - au premier abord - ça devient vite beaucoup moins cool, un peu comme un hot-dog chocolat-saumon (encore que…).

Pré-requis

On ne va pas tout ré-expliquer, donc je vais passer sur ce que vous savez déjà et qui est nécessaire pour notre cas présent.

  1. Vous connaissez Rails et savez ce que fait Turbolinks, même sans en connaître les détails.
  2. Vous codez en CoffeeScript et vous avez entendu parler d’AngularJS - en avoir déjà fait est un bon plus ;).

Turbolinks

Va recharger le body uniquement, vous écoutez donc des évènements différents de dom-ready à présent.

Quand on va demander la nouvelle page :

$(document).on "page:fetch", ->
  $("#lejoliloader").show()

Et quand la page est arrivée et parsée :

$(document).on "page:change", ->
  $("[autofocus]").focus()
  $("#lejoliloader").hide()

Il existe d’autres événements, mais la doc de Turbolinks explique ça très bien ;).

NB: J’en parle rapidement ici car nous allons revenir dessus à la fin, c’est important.

À l’attaque.

Configuration

Le truc c’est que lorsque Sprockets va compiler et minifier vos fichiers CoffeeScript il va renommer les classes et variables. Ce qui pour charger les modules manuellement après les avoir déclarés va complètement pas-marcher.

Donc on va désactiver le renommage de classes et variables ce qui n’est pas grave hein.

config.assets.js_compressor = Uglifier.new(mangle: false)

Angular

Installation

J’ai séparé mes fichiers comme suit :

-assets
  - javascripts
    - rocket
      - angular        # hiérarchie classique de notre appli Angular
        - controllers
        - directives
        - services
      angular.js       # le source angularjs
      apps.js.coffee   # **C'est ici que la magie va se passer**
    rocket_manifest.js

Et on va charger tout ça dans l’ordre dans un joli manifest :

//= require ./rocket/angular
//= require_tree ./rocket/angular
//= require ./rocket/app

On charge dans l’ordre la source, puis l’appli qui est une suite de déclarations de fonctions et en dernier le chargement des modules.

Apps.js.coffee

Une appli Angular classique se charge automatiquement grâce aux directives ng-app que vous placeriez en attribut de votre body.

Ici on va déclarer manuellement notre module, nos controllers, directives et services :

mon_appli = angular.module "rocket", []
mon_appli.controller "TodoCtrl", @TodoCtrl
mon_appli.factory 'todoStorage', @todoStorage
mon_appli.directive 'todoFocus', @todoFocus
mon_apli.directive 'todoEscape', @todoEscape

Précision : les variables en @ tel @todoStorage sont déclarées et chargées en premier via votre manifest. Un exemple du contenu de ces fichiers en annexe (plus bas).

Turbolinks + Angular

On va attendre l’évènement de chargement de la page pour initialiser le binding Angular avec le DOM :

$(document).on 'page:change', ->
  angular.bootstrap document.body, ['rocket']

Et voilà !!!

Votre application Rails continuera à ne charger le JS qu’une seule fois tout en ayant le binding DOM/JS d’Angular.

L’initialisation des fonctions déjà toutes chargées dans le module Angular étant déjà effectuée, seul le binding avec le nouveau DOM est rechargé à chaque 'page:change', mais son coût est infinitésimal comparé au chargement de tous vos JS/CSS/font/images ;)

Enjoy !

Annexe

todoStorage.js

#global todomvc
"use strict"
@todoStorage = ->
  STORAGE_ID = "todos-angularjs-perf"
  get: ->
    JSON.parse localStorage.getItem(STORAGE_ID) or "[]"
  put: (todos) ->
    localStorage.setItem STORAGE_ID, JSON.stringify(todos)
    return

Sources

http://todomvc.com/ Une Mine d’or de frameworks JS. Les sources de cet article en sont en large majorité inspiré.

Stackoverflow : Angular+Turbolinks Une réponse très bien fournie sur le sujet

http://gaslight.co/blog/4-lessons-learned-doing-angular-on-rails Retour d’expérience sur Angular et Rails.

Quels outils pour gérer nos projets ?

gdurelle's avatar le 07 avril 2014

Chez Studio Melipone on travaille avec de nombreux clients, tous très différents, parfois en prestation simple, parfois en association, parfois un mix des deux.

Ce qui amène des personnalités différentes, des méthodes différentes et aussi des outils différents.

Pour gérer nos projets, les listes de fonctionnalités à implémenter, les discutions, etc, on a testé pas mal de d’applications Web (Basecamp, PivotalTracker, Trello, Asana, ProjectFlow, Teambox, Producteev, …) et nous utilisons encore certains d’entre eux.

Petit tour d’horizon :

Basecamp La base. Fait simple et… simplement : listes de tâches, documents écrits et un calendrier basique. Le tout étant commentable.

Pivotal est axé sur la méthode SCRUM et fait ça très bien. Le fait de changer le statut d’une tâche rend les choses bien visibles à tous points de vue (devs, clients, product owners)

Mais il ne vous laisse rien faire d’autre. Et la quantité de boutons un peu partout donne au final une interface plutôt indigeste. Less is better s’appliquerait parfaitement ici.

Trello donne quelque chose d’assez cool avec son système de cartes en colonnes et beaucoup de fonctionnalités qui ne rendent pas l’interface horrible.

Mais l’expérimentation nous a montré qu’avec un grand nombre de tâches à accomplir, le scroll horizontal n’est vraiment pas un usage naturel.

Asana a des bons concepts, notamment le fait de pouvoir mettre un tag sur une tâche, mais au final on est revenu sur Basecamp car ça devenait vite rébarbatif de le faire à chaque fois sur chaque tâche.

ProjectFlow Inspiré de Trello en ultra light donc plutôt cool mais vraiment trop limité pour notre usage.

RedBooth (anciennement Teambox) veux tout faire (tasks, time tracking, planning, chat’, gantt, le café, …) mais au final il y en a tellement partout que ce n’est pas du tout pratique à utiliser. On est donc revenu à Basecamp comme avec les autres.

Au final on a jamais rien trouvé de mieux que Basecamp, tout en ayant un petit manque au niveau visibilité sur le futur.

Si notre nouvel outil de planning nous aide (article ici et beta privée ici), il n’est pas du tout envisagé pour la gestion de projet.

Nous avons besoin de voir les tâches à accomplir sur l’ensemble de nos projets. L’expérimentation sur les tags nous a aussi donné quelques idées…

On est jamais mieux servi que par soi-même !

On aimait l’idée de tags, de colonnes et on avait besoin pour nous même de voir plusieurs projets à la fois.

On a donc commencé à travailler sur OrbitalBoard.

On met quoi dedans ?

La base + nos 2 besoins spécifiques :

  • Dashboard : voir les prochaines tâches des différents projets en cours sur une même vue.
  • Tags : que les tâches importantes pour nous soient mises en valeur.

Du coup on en a profité pour rajouter une synchro avec Basecamp, une gestion de statuts de tâche et un poil de flexibilité sur la présentation.

Et on obtient :

  • Des listes à la basecamp mais qu’on peut «retailler» en 2 ou 3 colonnes pour en voir plus d’un coup.
  • Des Statuts light sur les tâches qui changent en 1 clic.
  • Des Tags intelligents qu’on définit une seule fois et qui trouvent eux mêmes ce qu’il faut mettre en exergue.
  • Nos fameux dashboards : voir autant de listes de différents projets qu’on veut dans une seule et même vue ! Avec le même système de listes/colonnes que les projets.
  • Et pour finir : une Connexion/Synchronisation Basecamp qui permet de continuer à utiliser notre outil préféré.

Et comme on aime beaucoup ParisWeb on a gardé tout ça responsive, accessible et bisous compatible !

Je vous invite à tester OrbitalBoard c’est complètement gratuit pour l’instant.

On prévoit le paiement par Stripe et Bitpay. Oui ! On aime aussi les Bitcoins ;)

Tadaam !

loic-guitaut's avatar le 25 février 2014

Qu’est-ce que c’est ?

Tadaam est un planning d’entreprise qui se veut simple et devait répondre aux besoins que nous avons chez Studio Melipone (comprendre relativement basiques).

Pourquoi ?

Nous sommes une petite équipe (quatre personnes) mais nous avons besoin de savoir facilement en un coup d’œil qui travaille sur quoi et quand.

Nous nous sommes alors mis en quête de trouver l’outil répondant à notre besoin, à savoir :

  • Visualisation des tâches planifiées sur le mois en cours
  • Découpage du temps à la demi-journée
  • Gestion des jours travaillés par personne
  • Gestion des vacances
  • Avoir quelques statistiques sur le temps passé par projets

Nous avons trouvé divers outils, très bien au demeurant, mais qui faisaient toujours beaucoup trop ou qui étaient trop complexes. On ne veut absolument pas un outil de gestion de projet ni un GANTT !

La solution

Comme vous pouvez vous en douter, nous avons donc opté pour la création de notre propre outil répondant aux points cités ci-dessus.

Avant d’opter pour la création d’une application, nous gérions tout ça avec un document Google partagé mais ce n’était pas très évident à utiliser au final, il y avait beaucoup trop de choses à faire manuellement.

L’application que nous avons mise en place est réalisée en Rails 4 (logique ;)) et nous l’utilisons depuis début janvier de manière sérieuse. Nous la faisons évoluer au fur et à mesure bien évidemment mais nous pensons être en mesure à l’heure actuelle de pouvoir la faire tester à un public extérieur d’où le passage en beta privée !

Ce que fait Tadaam

Le planning est découpé en demi-journées représentant un mois complet. Les weekends, les jours non travaillés, les jours fériés et le jour courant sont tous mis en valeur avec des couleurs différentes.

L’accès se fait via un compte pour une entreprise ou une équipe donnée et non pas pour chaque utilisateur. Ainsi tout le monde peut facilement éditer le planning sachant que les modifications sont répercutées en temps réel grâce à des websockets (billet à venir).

La création d’une tâche se veut simple : un cliquer/déplacer de la date de départ à la date de fin et une modal s’ouvre permettant alors la sélection du projet désiré ainsi que l’emplacement où se déroule la tâche. Tous les utilisateurs ont un emplacement par défaut (le bureau par exemple) et c’est cet emplacement qui est utilisé automatiquement lors de la création d’une nouvelle tâche. Le modifier permettra de savoir facilement que la personne n’est pas à son lieu habituel.

Pour ce qui est de la modification d’une tâche, il suffit de cliquer dessus, là aussi une modal apparaîtra permettant de modifier les informations y compris les dates de début et de fin.

Chaque utilisateur possède sa propre configuration pour ses jours travaillés. Le projet spécial « Congés » en tient compte lors du calcul automatique des jours de congés posés.

Pour ce qui est des autres projets, on fait simple, à savoir que tout est décompté que ce soit en semaine, sur le weekend ou autre.

Tester Tadaam

Si vous êtes intéressé par Tadaam suite à ce petit billet, rendez-vous sur https://tada.am et laissez nous votre adresse email. Vous serez prévenu quand votre compte sera activé et nous espérons que vous apprécierez l’application autant que nous ;)