sans lib

Pour le designer

Pour le développeur

“JavaScript est un langage exigeant faussement facile qui nécessite d’aimer le bricolage, l’artisanat.“

@olivierpenhoat (source)

Et aussi

Les features

en pratique

on met des Sprites partout

Un exemple de code AS3

// Créer et afficher un sprite:
var sprite:Sprite = new Sprite();
parentSprite.addChild(sprite);

// Dessiner sur le sprite:
sprite.graphics.beginFill(0x666666);
sprite.graphics.drawCircle(100, 100, 50);
sprite.graphics.endFill();

// Tracer le sprite sur une Bitmap:
var bitmapData:BitmapData = new BitmapData(200, 200, true, 0x0);
bitmapData.draw(sprite);
var bitmap:Bitmap = new Bitmap(bitmapData);

// Remplacer le rendu par la Bitmap:
parentSprite.removeChild(sprite);
parentSprite.addChild(bitmap);

Au final

C'est quoi?

À quoi ça sert?

Un exemple d'utilisation de Canvas

// Récupérer le contexte du canvas:
var canvas = document.getElementById('myCanvas'),
    context = canvas.getContext('2d');

// Dessiner sur le canvas:
context.fillStyle = '#666666';
for (var i = 0; i < 10000; i++)
  context.fillRect(
    Math.floor(Math.random() * canvas.width),
    Math.floor(Math.random() * canvas.height),
    1,
    1
  );

En pratique

C'est bien

C'est mal

C'est quoi?

À quoi ça sert?

Un exemple d'utilisation de SVG

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     width="400" height="300">
  <circle id="myCircle" cx="100" cy="100" r="50" />
</svg>

// Récupérer le cercle SVG:
var circle = document.getElementById('myCircle');

// Déplacer le cercle:
circle.setAttribute('cx', 50);
circle.setAttribute('cy', 50);

En pratique

C'est bien

C'est mal

C'est quoi?

Mais pourquoi ne pas utiliser SVG???

Un cas d'usage

#barchart {
  width: 100px;
  height: 100px;
  position: relative;
}

.bar {
  bottom: 0;
  width: 10px;
  position: absolute;
  background: #666666;
}

// Les données et le container:
var data = [12, 3, 189, 134, 56],
    barchart = document.getElementById('barchart'),
    width = barchart.offsetWidth,
    height = barchart.offsetHeight,
    barWidth = Math.floor(width / data.length) - 1;

// On trouve le maximum:
var max = Math.max.apply(Math, data);

// On trace le graphique:
data.forEach(function(value, i) {
  var bar = document.createElement('DIV');
  barchart.appendChild(bar);

  bar.setAttribute('class', 'bar');
  bar.style.width = barWidth + 'px';
  bar.style.left = (i * (barWidth + 1)) + 'px';
  bar.style.top = (width - value * width / max) + 'px';
});

En pratique

C'est bien

C'est mal

Comment choisir

Il est pratiquement toujours possible de faire mieux en combinant ces différentes solutions qu'avec les bibliothèques existantes

même si ça demande un investissement certain.

Crédits:

Quelques liens:

Merci beaucoup!

http://jacomyal.github.io/html5paris-201403