JQUERY SANS
JQUERYRaphaël Rougeron / @goldoraf
JAVASCRIPT IL Y A 10 ANS
2006
JQUERY AUJOURD'HUI
92,2%
POLYFILLING
if ('querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window) {
// Go!
} else {...
MODERNIZR
if (Modernizr.localStorage) {
// Go!
} else {
// Polyfill all the things...
}
PREMIER EXEMPLE
$("button.continue").html("Next Step...")
DOCUMENT
getElementById
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll
document.querySelector
>= 8 >= 3.5 >= 1 >= 3.2 >= 10
$("button.continue").html("Next Step...");
document.querySelector("button.continue")
.innerHTML = "Next Step...";
Et que se passe t-il si le sélecteur ne correspond à aucun
élément ?
$("button.continue").html("Next Step...");
document.q...
Uncaught TypeError: Cannot set property 'innerHTML' of
null
DEUXIÈME EXEMPLE
var hiddenBox = $("#banner-message");
$("#button-container button").on("click", function(event) {
hiddenB...
addEventListener
var hiddenBox = document.getElementByID("#banner-message");
document.querySelector("#button-container but...
addEventListener
>= 9 >= 1 >= 1 >= 1 >= 7
PLUS VERBEUX ?
var $ = document.querySelector.bind(document);
Element.prototype.on = Element.prototype.addEventListener;
v...
Element.className
hiddenBox.className += ' hidden';
hiddenBox.className.replace('hidden', '');
Element.classList
hiddenBox.classList.add('hidden');
hiddenBox.classList.remove('hidden');
var hiddenBox = $("#banner-mess...
Element.classList
>= 10 >= 3.6 >= 8 >= 5.1 >= 11.5
insertAdjacentHTML
$('#box').before('<p>Test</p>');
$('#box').after('<p>Test</p>');
$('#box').append('<p>Test</p>');
$('#b...
DocumentFragment
var tags = ['foo', 'bar', 'baz'],
fragment = document.createDocumentFragment();
tags.forEach(function(tag...
TABLE API
insertRow()
deleteRow()
insertCell()
deleteCell()
createCaption()
deleteCaption()
createTHead()
...
TROISIÈME EXEMPLE
$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201
},
success: function(data) {
$("#weather-temp")....
XMLHttpRequest
var xhr = new XMLHttpRequest(),
data = [],
rawData = {
zipcode: 97201
};
for (var k in rawData) {
data.push...
XMLHttpRequest et
FormData
var xhr = new XMLHttpRequest(),
data = new FormData(),
rawData = {
zipcode: 97201
};
for (var k...
XMLHttpRequest et
FormData
var xhr = new XMLHttpRequest(),
data = new FormData(document.querySelector("#zipcode"));
xhr.op...
FormData
>= 10 >= 4 >= 7 >= 12 >= 5
CALLBACK HELL
$('#demo5').animo("rotate", { degrees:90 }, function(e) {
e.element.animo( { animation: "flipOutX", keep: tr...
JQUERY DEFERREDS
$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201
}
})
.done(function(data) {
$("#weather-temp").ht...
PROMISES/A+
getTweetsFor("goldoraf", function (err, results) {
...
});
var promiseForTweets = getTweetsFor("goldoraf");
pr...
PROMISES & XHR
function request(type, url, data) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRe...
RÉSULTAT FINAL
request("GET", "/api/getWeather", data)
.then(function(result) {
document.querySelector("#weather-temp")
.i...
CALLBACK HELL
PROMISE HEAVEN
$('#demo5').animo("rotate", { degrees:90 })
.then(function(e) {
e.element.animo({ animation: ...
ANIMATIONS
$("#book").animate({
left: "+=50"
}, 5000, function() {
// Animation complete.
});
requestAnimationFrame
>= 10 >= 4 >= 10 >= 6 >= 15
requestAnimationFrame
var start = null,
d = document.getElementById("#book");
function step(timestamp) {
var progress;
if ...
TRANSITIONS CSS3
Hello
button.foo {
font-size: 40px;
background: #C9C9C9;
transition-property: background;
-moz-transition...
ANIMATIONS CSS3
Hello
@keyframes 'my-animation' {
0% { background: #C9C9C9; }
50% { background: #61BE50; }
100% { backgrou...
transitionend
function whichTransitionEvent(el){
var t,
transitions = {
'transition':'transitionend',
'OTransition':'oTran...
transitionend
var transitionEnd = whichTransitionEvent(element);
element.addEventListener(transitionEnd, function(event) {...
WEB COMPONENTS
UNMODÈLEDECOMPOSANTPOURLE
WEB
TEMPLATES
<template id="commentTemplate">
<div>
<img src="">
<div class="comment-text"></div>
</div>
</template>
var tpl =...
DECORATORS
<decorator id="modal-controls">
<template>
<section>
<header>
<a id="toggle" href="#">Maximize</a>
<a id="close...
CUSTOM ELEMENTS
<element extends="button" name="my-button" attributes="foo bar">
<template>...</template>
<script> </scrip...
SHADOW DOM
HTML IMPORTS
<link rel="import" href="my-component.html">
WEB COMPONENTS
AVECX-TAG
>= 9 >= 5 >= 4 >= 4 >= 11
UN EXEMPLE ?
<browser-compat
ie="9"
ff="5"
cr="4"
sa="4"
op="11" />
UN EXEMPLE ?
<polymer-element name="browser-compat"
attributes="ie ff cr sa op">
<template>
<style> </style>
<table class=...
UN EXEMPLE ?
Polymer('browser-compat', {
created: function() {
switch(parseInt(this.ie)) {
case 10:
this.ie_class = 'red';...
CODEZ POUR LE FUTUR !
Copyright Steve Thomas Art & Illustration, LLC
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
jQuery sans jQuery
Prochain SlideShare
Chargement dans…5
×

jQuery sans jQuery

5 031 vues

Publié le

Une immense majorité de développeurs connaissent jQuery, mais pas vraiment JavaScript. Nous verrons comment faire en pur JS ce que vous avez l’habitude de faire avec jQuery et jQuery UI, en mettant l’accent sur le support par les navigateurs des fonctionnalités JS utilisées, et sur les polyfills disponibles.

Publié dans : Technologie, Business
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
5 031
Sur SlideShare
0
Issues des intégrations
0
Intégrations
632
Actions
Partages
0
Téléchargements
37
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

jQuery sans jQuery

  1. 1. JQUERY SANS JQUERYRaphaël Rougeron / @goldoraf
  2. 2. JAVASCRIPT IL Y A 10 ANS
  3. 3. 2006
  4. 4. JQUERY AUJOURD'HUI 92,2%
  5. 5. POLYFILLING if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // Go! } else { // Polyfill all the things... }
  6. 6. MODERNIZR if (Modernizr.localStorage) { // Go! } else { // Polyfill all the things... }
  7. 7. PREMIER EXEMPLE $("button.continue").html("Next Step...")
  8. 8. DOCUMENT getElementById getElementsByTagName getElementsByClassName querySelector querySelectorAll
  9. 9. document.querySelector >= 8 >= 3.5 >= 1 >= 3.2 >= 10
  10. 10. $("button.continue").html("Next Step..."); document.querySelector("button.continue") .innerHTML = "Next Step...";
  11. 11. Et que se passe t-il si le sélecteur ne correspond à aucun élément ? $("button.continue").html("Next Step..."); document.querySelector("button.continue") .innerHTML = "Next Step...";
  12. 12. Uncaught TypeError: Cannot set property 'innerHTML' of null
  13. 13. DEUXIÈME EXEMPLE var hiddenBox = $("#banner-message"); $("#button-container button").on("click", function(event) { hiddenBox.show(); });
  14. 14. addEventListener var hiddenBox = document.getElementByID("#banner-message"); document.querySelector("#button-container button") .addEventListener("click", function(event) { hiddenBox.setAttribute("style", "display: block"); }, false);
  15. 15. addEventListener >= 9 >= 1 >= 1 >= 1 >= 7
  16. 16. PLUS VERBEUX ? var $ = document.querySelector.bind(document); Element.prototype.on = Element.prototype.addEventListener; var hiddenBox = $("#banner-message"); $("#button-container button").on("click", function(event) { hiddenBox.setAttribute("style", "display: block"); });
  17. 17. Element.className hiddenBox.className += ' hidden'; hiddenBox.className.replace('hidden', '');
  18. 18. Element.classList hiddenBox.classList.add('hidden'); hiddenBox.classList.remove('hidden'); var hiddenBox = $("#banner-message"); $("#button-container button").on("click", function(event) { hiddenBox.classList.toggle('hidden'); });
  19. 19. Element.classList >= 10 >= 3.6 >= 8 >= 5.1 >= 11.5
  20. 20. insertAdjacentHTML $('#box').before('<p>Test</p>'); $('#box').after('<p>Test</p>'); $('#box').append('<p>Test</p>'); $('#box').prepend('<p>Test</p>'); $('#box').insertAdjacentHTML('beforebegin', '<p>Test</p>'); $('#box').insertAdjacentHTML('afterend', '<p>Test</p>'); $('#box').insertAdjacentHTML('beforeend', '<p>Test</p>'); $('#box').insertAdjacentHTML('afterbegin', '<p>Test</p>');
  21. 21. DocumentFragment var tags = ['foo', 'bar', 'baz'], fragment = document.createDocumentFragment(); tags.forEach(function(tag) { var li = document.createElement('li'); li.textContent = tag; fragment.appendChild(li); }); var ul = document.querySelector('ul'); ul.appendChild(fragment);
  22. 22. TABLE API insertRow() deleteRow() insertCell() deleteCell() createCaption() deleteCaption() createTHead() ...
  23. 23. TROISIÈME EXEMPLE $.ajax({ url: "/api/getWeather", data: { zipcode: 97201 }, success: function(data) { $("#weather-temp").html("<strong>" + data + "</strong> degrees"); } });
  24. 24. XMLHttpRequest var xhr = new XMLHttpRequest(), data = [], rawData = { zipcode: 97201 }; for (var k in rawData) { data.push(encodeURIComponent(k) + "=" + encodeURIComponent(rawData[k])); } xhr.open("GET", "/api/getWeather"); xhr.onload = function () { document.querySelector("#weather-temp") .innerHTML = "<strong>" + xhr.response + "</strong> degrees"; }; xhr.send(data.join("&"));
  25. 25. XMLHttpRequest et FormData var xhr = new XMLHttpRequest(), data = new FormData(), rawData = { zipcode: 97201 }; for (var k in rawData) { data.append(k, JSON.stringify(rawData[k])); } xhr.open("GET", "/api/getWeather"); xhr.onload = function () { document.querySelector("#weather-temp") .innerHTML = "<strong>" + xhr.response + "</strong> degrees"; }; xhr.send(data);
  26. 26. XMLHttpRequest et FormData var xhr = new XMLHttpRequest(), data = new FormData(document.querySelector("#zipcode")); xhr.open("GET", "/api/getWeather"); xhr.onload = function () { document.querySelector("#weather-temp") .innerHTML = "<strong>" + xhr.response + "</strong> degrees"; }; xhr.send(data);
  27. 27. FormData >= 10 >= 4 >= 7 >= 12 >= 5
  28. 28. CALLBACK HELL $('#demo5').animo("rotate", { degrees:90 }, function(e) { e.element.animo( { animation: "flipOutX", keep: true } ); $('#demo6').animo("rotate", { degrees:90 }, function(e) { e.element.animo( { animation: "flipOutY", keep: true } ); $('#demo7').animo("rotate", { degrees:90 }, function(e) { e.element.animo( { animation: "flipOutX", keep: true } ); $('#demo8').animo("rotate", { degrees:90 }, function(e){ e.element.animo( { animation: "flipOutY", keep: true } ); }); }); }); });
  29. 29. JQUERY DEFERREDS $.ajax({ url: "/api/getWeather", data: { zipcode: 97201 } }) .done(function(data) { $("#weather-temp").html("<strong>" + data + "</strong> degrees"); }) .fail(function() { alert("error"); });
  30. 30. PROMISES/A+ getTweetsFor("goldoraf", function (err, results) { ... }); var promiseForTweets = getTweetsFor("goldoraf"); promiseForTweets.then(function(results) { ... }); then(fulfilledHandler, errorHandler, progressHandler)
  31. 31. PROMISES & XHR function request(type, url, data) { return new Promise(function (resolve, reject) { var xhr = new XMLHttpRequest; xhr.addEventListener("error", reject); xhr.addEventListener("load", resolve); xhr.open("GET", url); xhr.send(null); }); }
  32. 32. RÉSULTAT FINAL request("GET", "/api/getWeather", data) .then(function(result) { document.querySelector("#weather-temp") .innerHTML = "<strong>" + result + "</strong> degrees"; });
  33. 33. CALLBACK HELL PROMISE HEAVEN $('#demo5').animo("rotate", { degrees:90 }) .then(function(e) { e.element.animo({ animation: "flipOutX", keep: true }); return $('#demo6').animo("rotate", { degrees:90 }); }) .then(function(e) { e.element.animo({ animation: "flipOutY", keep: true }); return $('#demo7').animo("rotate", { degrees:90 }); }) .then(function(e) { e.element.animo({ animation: "flipOutX", keep: true }); return $('#demo8').animo("rotate", { degrees:90 }); }) .then(function(e){ e.element.animo({ animation: "flipOutY", keep: true }); });
  34. 34. ANIMATIONS $("#book").animate({ left: "+=50" }, 5000, function() { // Animation complete. });
  35. 35. requestAnimationFrame >= 10 >= 4 >= 10 >= 6 >= 15
  36. 36. requestAnimationFrame var start = null, d = document.getElementById("#book"); function step(timestamp) { var progress; if (start === null) start = timestamp; progress = timestamp - start; d.style.left = Math.min(progress/100, 50) + "px"; if (progress < 5000) { requestAnimationFrame(step); } } requestAnimationFrame(step); http://www.html5rocks.com/en/tutorials/speed/rendering/
  37. 37. TRANSITIONS CSS3 Hello button.foo { font-size: 40px; background: #C9C9C9; transition-property: background; -moz-transition-property: background; -webkit-transition-property: background; -o-transition-property: background; transition-duration: 500ms; -webkit-transition-duration: 500ms; } button.foo:hover { background: #959595; color: #FFF; }
  38. 38. ANIMATIONS CSS3 Hello @keyframes 'my-animation' { 0% { background: #C9C9C9; } 50% { background: #61BE50; } 100% { background: #C9C9C9; } } button.bar:hover { background: #959595; color: #FFF; animation-name: 'my-animation'; animation-duration: 2s; animation-iteration-count: infinite; }
  39. 39. transitionend function whichTransitionEvent(el){ var t, transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' } for (t in transitions) { if (el.style[t] !== undefined) { return transitions[t]; } } }
  40. 40. transitionend var transitionEnd = whichTransitionEvent(element); element.addEventListener(transitionEnd, function(event) { // on déclenche l'animation suivante ! element.classList.add('expand'); });
  41. 41. WEB COMPONENTS UNMODÈLEDECOMPOSANTPOURLE WEB
  42. 42. TEMPLATES <template id="commentTemplate"> <div> <img src=""> <div class="comment-text"></div> </div> </template> var tpl = document.querySelector("#commentTemplate"); tpl.content.querySelector(".comment-text").innerHTML = ...; document.body.appendChild(tpl.content.cloneNode(true));
  43. 43. DECORATORS <decorator id="modal-controls"> <template> <section> <header> <a id="toggle" href="#">Maximize</a> <a id="close" href="#">Close</a> </header> <content></content> </section> </template> </decorator> .my-modal { decorator: url(#modal-controls); }
  44. 44. CUSTOM ELEMENTS <element extends="button" name="my-button" attributes="foo bar"> <template>...</template> <script> </script> </element> ...
  45. 45. SHADOW DOM HTML IMPORTS <link rel="import" href="my-component.html">
  46. 46. WEB COMPONENTS AVECX-TAG >= 9 >= 5 >= 4 >= 4 >= 11
  47. 47. UN EXEMPLE ? <browser-compat ie="9" ff="5" cr="4" sa="4" op="11" />
  48. 48. UN EXEMPLE ? <polymer-element name="browser-compat" attributes="ie ff cr sa op"> <template> <style> </style> <table class="browser-compat"> <tr> <td><img src="images/ie.png" /></td> ... </tr> <tr> <td class="{{ie_class}}">>= {{ie}}</td> ... </tr> </table> </template> <script> </script> </polymer-element> ... ...
  49. 49. UN EXEMPLE ? Polymer('browser-compat', { created: function() { switch(parseInt(this.ie)) { case 10: this.ie_class = 'red'; break; case 9: this.ie_class = 'yellow'; break; default: this.ie_class = 'green'; break; } } });
  50. 50. CODEZ POUR LE FUTUR ! Copyright Steve Thomas Art & Illustration, LLC

×