Web

Interfaces du Futur

//madsgraphics.github.io/prez/web_interfaces_du_futur.html

MAD MAD

Dev UI

JavaScript Ninja

Buildings

Changez vos pratiques

The
JS part

2013 : What's Up, Doc?

Webapp vs Websites

//jeremie.patonnier.net/experiences/parisweb2013/

Frameworks ?

  • jQuery (1.10.x / 2.x)
  • Zepto
  • Sproutcore
  • Dojo

Please
Kill Me!

querySelector / querySelectorAll Cross-document messaging dataset & data-* attributes getElementsByClassName classList (DOMTokenList) matches() DOM method
IE 8 9 10 11 8 9 10 11 8 9 10 11 8 9 10 11 8 9 10 11 8 9 10 11
Firefox 22 23 24 25 22 23 24 25 22 23 24 25 22 23 24 25 22 23 24 25 22 23 24 25
Chrome 28 29 30 31 28 29 30 31 28 29 30 31 28 29 30 31 28 29 30 31 28 29 30 31
Safari 6.0 7.0 6.0 7.0 6.0 7.0 6.0 7.0 6.0 7.0 6.0 7.0
Opéra 17 17 17 17 17 17
Safari Mobile 4 5 6 7 4 5 6 7 4 5 6 7 4 5 6 7 4 5 6 7 4 5 6 7
Android Browser 3.0 4.0 4.1 4.2 3.0 4.0 4.1 4.2 3.0 4.0 4.1 4.2 3.0 4.0 4.1 4.2 3.0 4.0 4.1 4.2 3.0 4.0 4.1 4.2
IE Mobile 10 10 10 10 10 10

Can I Use… DOM

Web API Interfaces

Function.prototype.
bind


var Loader = function (src) {
  var img = new Image();
  img.onload = this.onload.bind(this);
  img.src = src;
};

Loader.prototype.thumb = 150;

Loader.prototype.onload = function (e) {
  var img = e.target;
  img._width = this.thumb;
  img._height = img.height * this.thumb / img.width;
};

var l = new Loader('http://localhost/img/mad.jpg');
          

var sum = function (a, b) {
  return a + b;
};

var add20to = sum.bind(undefined, 20);

var i = sum(6, 3);
var j = add20to(3);
          

JSON


var json = '{"str":"Hello World!","valid":true,"data":{"err":false,"msg":"No problem","code":200}}';

var d = JSON.parse(json);
d.data.code = 404;
d.data.err = true;

json = JSON.stringify(d);
          

Element.dataset


<body>
  <div id="player" data-src='{"ogv":"/vids/myvideo.ogv",
                              "webm":"/vids/myvideo.webm",
                              "m4v":"/vids/myvideo.m4v"}'>
    <img src="/imgs/myvideo-poster.jpg">
  </div>
</body>
          

var player = document.getElementById('player');
var medias = JSON.parse(player.dataset.src);
          

XHR


function request(type, url, opts, callback) {
  var xhr = new XMLHttpRequest(), fd;

  if (typeof opts === 'function') {
    callback = opts;
    opts = null;
  }
  if (type === 'POST' && opts) {
    fd = new FormData();
    for (var key in opts) { fd.append(key, JSON.stringify(opts[key])); }
  }

  xhr.open(type, url);
  xhr.onload = function () { callback(JSON.parse(xhr.response)); };
  xhr.send(opts ? fd : null);
}

var get = request.bind(this, 'GET');
var post = request.bind(this, 'POST');
          

requestAnimationFrame


window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function (callback) {
            window.setTimeout(callback, 1000 / 60);
          };
})();

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();
          

Support

  • IE : 9+
  • FF : 4+
  • Chrome : ∞
  • Safari : ∞
  • iOS : 3+
  • Android : 2+
  • IE Mobile : 10

Selectors API

querySelector


var el = document.body.querySelector("style[type='text/css'], style:not([type])");
          

querySelectorAll


var $ = document.querySelectorAll.bind(document);
Element.prototype.on = Element.prototype.addEventListener;

$('#somelink')[0].on('click', clickHandler);
          

classList


document.body.className += ' js';
          

☹ !


document.body.classList.add('js');
document.body.classList.remove('no-js');

document.body.classList.toggle('animate');

document.body.classList.contains('visible');
          

Support

  • IE : 10+
  • FF : 4+
  • Chrome : ∞
  • Safari : ∞
  • iOS : 3+
  • Android : 2+
  • IE Mobile : 10

DOM 4

Full JS

bye, bye, Java… ✌

Core

  • document.attributes : URL / charset / contentType
  • document.getElementsByClassName
  • document.createRange
  • TreeWalker

Element

  • parentElement
  • contains
  • classList
  • dataset
  • prepend / append / before / after / replace / remove

Events

Basés sur DOM 3

Constructeurs !

Types

  • UIEvent
  • MouseEvent
  • KeyboardEvent
  • WheelEvent

Abandon de
EventException

CustomEvents !

(Winning)

Amélioration du
Bubbling

HasFeature !

Support

  • IE : ╳
  • FF : ╳
  • Chrome : ╳
  • Safari : ╳
  • iOS : ╳
  • Android : ╳
  • IE Mobile : ╳

Next!

Alors ? Qu'est-ce qu'on fait ?

Amélioration progressive

Polyfills

Webperfs

À vous !

Merci !

//madsgraphics.github.io/prez/soyez_responsables__construisez_votre_api.html

Questions ?

Crédits

Fonts
Images