bloodyowl

Bienvenue dans la deuxième partie du tutoriel sur les Observables.

Résumé de partie 1

Dans la première partie, nous avons vu que les Observables nous permettent de traiter des données synchrones et asynchrones. Aussi, nous avons vu la méthode subscribe() à laquelle nous appliquons notre Observer afin de consulter les données. Enfin dans le dernier exemple, une méthode unsubscribe() qui va nous permettre en tant que Observer d'avoir la possibilité de decider de ne plus écouter les données émises.

Vous l’aurez compris, les Observables sont surtout utilisés dans l’objectif de manipuler de la donnée asynchrone. Nous allons donc essayer de comprendre, comment est-ce que les données reçue peuvent être manipulées.

Prenons un cas concret pour illustrer notre problématique :

bloodyowl

POC: minimal Backbone subset written in ES6/ES7

bloodyowl

b=0;$=x=>(p,i="_"+b++,u=($[i]=q=>eval(i).innerHTML=x(p,$[q],u),z=>($[++b]=z,`$.${i}(${b})`)))=>`<c id=${i}>${x(p,[]._,u)}</c>`

bloodyowl

var minify = require("minify")
  , fs = require("fs")
  , htmlRegExp = /\.html$/
  , options = {encoding:"utf-8"}
  
fs.readdirSync("./dist").filter(isHTML).forEach(write)

function isHTML(item){
  return htmlRegExp.test(item)
}

bloodyowl

Smallest HTML5 shim ever

130 bytes, that's what it takes.

Script

"header footer section aside nav article figure figcaption hgroup time main".replace(/\w+/g,function(a){document.createElement(a)})

bloodyowl

.Block
  &-element
    color: #000
    &--modifier
      color: #c33
  &--modifier
    position: relative

bloodyowl

;(function(win){
  var doc = win.document
    , i = keys(doc.body.appendChild(doc.createElement("iframe")).contentWindow)
  return keys(win).filter(function(a){return i.indexOf(a) == -1})
})(window)

bloodyowl

/* goodbye chrome crap */
input[type=date]::-webkit-clear-button, 
input[type=date]::-webkit-inner-spin-button
input[type=date]::-webkit-calendar-picker-indicator {
  display: none
}

bloodyowl

function getRelativeCoords(target, evt){
  var clientRect = target.getBoundingClientRect()
  
  return {
      x : evt.clientX - clientRect.left
    , y : evt.clientY - clientRect.top
  }
}

bloodyowl

var klass = (function(){
  
  var k = {}
    , createObject = 
        typeof Object.create == "function" ?
        function(object){
          return Object.create(object)
        } : 
        function(object){
          function F(){}