Fresh from the Hive

Tech and Passion with love from Studio Melipone

Rocket List !

gdurelle's avatar le 26 juin 2014

Salut, Nous venons de sortir RocketList.

  1. Pas d’inscription.
  2. Gratuit.
  3. Partageable.

En détails:

  1. Allez sur https://orbitalboard.com/rocket_list.
  2. Ajouter des tâches. Si vous rechargez la page ils sont encore là !
  3. Vous pouvez utiliser les états comme dans OrbitalBoard

C’est pour faire quoi ?

A peu près tout quand vous avez besoin d’une liste rapide à créer et utiliser. Rien de sophistiqué, juste une liste, comme pour faire vos courses, la liste des fournitures scolaires, ou les dernières idées que vous ne voulez pas oublier…

Give it a try at https://orbitalboard.com/rocket_list.

Du nouveau sur OrbitalBoard !

gdurelle's avatar le 19 juin 2014


OrbitalBoard grandit, lentement mais surement, comme l'univers ;)

Voici les ajouts de cette nouvelle versions  :

Plus d’intégration : Github

On a commencé avec une seule intégration, celle de Basecamp, maintenant nous avec aussi Github, et on réfléchi à d’autres !

Se connecter avec Github créera un projet “Github” dans votre compte OrbitalBoard et des tâches pour chaque “issue” des projets que vous administrez.

Accessibilité

Meilleure navigation au clavier pour les menus, suppression des aria-roles inutiles.

Plus d’aide

L’aide a été mise à jour pour vous donner plus d’informations sur quoi fait quoi et ou.

Pilote

Simple mais puissant:

Nommez un pilote pour un projet afin que chaque membres sâche a qui se référer pour les questions relatives à ce projet.

Lorsque quelqu’un crée un projet, il est par défaut sélectionné comme pilote de celui-ci.

RocketList

Une liste : Gratuite. Facile. Partageable.

Allez simplement sur https://www.orbitalboard.com/rocket_list et ajoutez/modifiez/supprimez des tâches d’une simple liste de tâches sauvegardée localement.


En espérant que vous aimerez ces petites nouveautés, nous réfléchissons à plus d’intégration, si vous avez des besoins spécifiques, demandez nous ;)

Des suggestions ?

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.