Previously, in Code me, I’m Famo.us

Famo.us a récemment sorti une nouvelle version de son FamousEngine, au programme des nouveautés :

• Le mixed mode
• La compatibilité ES2015
• Une façon de structurer une application
• …

Je vous propose donc à travers une série de trois posts de prendre en main cette nouvelle version et de réaliser cette petite démo que nous appellerons Flog ( Famo.us + blog ). Entrons sans plus attendre dans le vif du sujet.

Installation

Pour installer FamousEngine, il suffit de suivre les instructions décrites ici. Une fois que tout est bien installé et que le serveur est lancé, il suffit de se rendre sur http://localhost:1618, afin de vérifier que tout fonctionne. Si tel est le cas, vous devriez voir le logo Famo.us apparaître.

Avant de continuer plus loin, je vous conseille de lire cet article pour comprendre les principes de FamousEngine, car j’utiliserai souvent des termes comme noeuds (node) ou composants (component).

Et bien codons maintenant

Ouvrez maintenant le projet dans un IDE, les fichiers javascript iront dans le dossier src/ et les assets et feuilles de styles dans public/.

Notez que nous utiliserons ici la notation ES2015, pour plus d’informations à ce propos, vous pouvez aller là.

index.js

Nous allons commencer par modifier ce fichier.

// Famous dependencies
import FamousEngine from 'famous/core/FamousEngine'

// Our dependencies
import Flog from './Flog'

// Initialize the FamousEngine to start the rendering process
FamousEngine.init()

// Create a scene for the FamousEngine to render and add a child in it
var scene = FamousEngine.createScene().addChild(new Flog())

Ici rien de bien complexe, les commentaires parlent d’eux même : )

Flog.js

Maintenant créons le composant qui sera notre noeud principal, tous les autres composants seront ajoutés dans ce dernier.

import Node from 'famous/core/Node'
import Author from './Author'

// The array containing the authors
let authors = [
    { id : 0, name : 'Julien Boulevart', image : 'julien.jpg' },
    { id : 1, name : 'Nicolas Labbé', image : 'nico.jpg' },
    { id : 2, name : 'Fabrice Labbé', image : 'fabrice.jpg' },
    { id : 3, name : 'Fabien Logarinho', image : 'fabien.jpg' },
    { id : 4, name : 'John Doe', image : 'julien.jpg' },
    { id : 5, name : 'Eric Apple', image : 'nico.jpg' },
    { id : 6, name : 'Cindy Schmidt', image : 'fabrice.jpg' },
    { id : 7, name : 'Oli Sykes', image : 'fabien.jpg' }
]

class Flog extends Node {
  constructor() {
    super()
    this.createAuthors()
  }

  // When the size of the node change, emit an event
  onSizeChange() {
    this.emit('window:resize', { width : window.innerWidth, countAuthors : authors.length })
  }
  
  // Add the bubbles into the dom
  createAuthors() {
    for(var i = 0; i < authors.length; i++) {
      this.addChild(new Author(authors[i]))
    }
  }
}

export default Flog;

Ici rien de compliqué si ce n’est la méthode onSizeChange, qui en fait est héritée de Node car c’est le composant que Flog étends  : class Flog extends Node . Ainsi lorsque la taille de notre noeud change, ce dernier envoie un évènement à tous ses noeuds enfants.

Author.js

Créons maintenant le fichier Author.js dans src/.

Ce fichier gérera l’affichage de la bulle représentant un auteur, sa position ainsi que son animation.

import Node from 'famous/core/Node'
import DOMElement from 'famous/dom-renderables/DOMElement'
import Transitionable from 'famous/transitions/Transitionable'

var currentWidth = window.innerWidth

class Author extends Node {
  constructor(options) {
    super()
    this.options = options

    // Creating the DOM element
    // with some properties
    var element = new DOMElement(this, {
      classes : ['author'],
      properties : {
        'border-radius' : radius + 'px',
        'background-image' : 'url(images/' + options.image + ')',
        'background-size' : 'cover'
      }
    })

    // We set a size for the node, a mount point and an alignment
    this
      .setSizeMode('absolute', 'absolute')
      .setAbsoluteSize(radius, radius)
      .setMountPoint(0.5, 0.5)
      .setAlign(null, 0.5)
  }
  
  // When we receive an event, we catch it and do some actions depending on the event
  onReceive(event, payload) {
    if(event === 'window:resize') {
      currentWidth = payload.width
      var countAuthors = payload.countAuthors
      var start = currentWidth/countAuthors
      var posX = (start * this.options.id) + (start/2) 
      this.setPosition(posX, null)
    }
  }

Wow, ça en fait du code, pas de panique je vous explique en détails :

var element = new DOMElement(this, {
      classes : ['author'],
      properties : {
        'border-radius' : radius + 'px',
        'background-image' : 'url(images/' + options.image + ')',
        'background-size' : 'cover'
      }
    })

Ici on crée un élément qui sera ajouté dans le DOM, par défaut l’élément est un DIV, mais il est tout à fait possible d’ajouter n’importe quel tag HTML. Je vous invite à consulter l’article suivant afin de comprendre comment fonctionne la création d’élément DOM.

this
      .setSizeMode('absolute', 'absolute')
      .setAbsoluteSize(radius, radius)
      .setMountPoint(0.5, 0.5)
      .setAlign(null, 0.5)

Famous permet de spécifier différents paramètres sur un noeud comme l’alignement ou encore le point d’origine. Pour en apprendre plus, vous pouvez vous rendre ici.

Il est important de noter qu’ici nous agissons sur le noeud et non sur l’élément du DOM que nous avons crée avant.

onReceive(event, payload) {
    if(event === 'window:resize') {
      currentWidth = payload.width
      var countAuthors = payload.countAuthors
      var start = currentWidth/countAuthors
      var posX = (start * this.options.id) + (start/2) 
      this.setPosition(posX, null)
    }

La méthode onReceive est héritée de la classe Node, souvenez-vous dans notre composant Flog il y avait une méthode onSizeChange, qui émettait un évènement ainsi que des données. Flog étant notre composant parent, il permet d’émettre des évènements à tous ses enfants.

Ici grâce à la méthode onReceive, on récupère tous les évènements (émis par le parent, mais aussi les clics, …), on vérifie quel est l’évènement reçu et on réparti nos bulles sur la largeur de l’écran.

Voilà c’est tout ce que nous allons voir pour le moment. Vous pouvez déjà constater que les bulles s’affichent comme il faut.

Dans le prochain post, nous verrons comment animer les bulles et déclencher l’apparition de l’article au clic.