jQuery sans jQuery

  • 3,712 views
Uploaded on

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 …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,712
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
34
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JQUERY SANS JQUERYRaphaël Rougeron / @goldoraf
  • 2. JAVASCRIPT IL Y A 10 ANS
  • 3. 2006
  • 4. JQUERY AUJOURD'HUI 92,2%
  • 5. POLYFILLING if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // Go! } else { // Polyfill all the things... }
  • 6. MODERNIZR if (Modernizr.localStorage) { // Go! } else { // Polyfill all the things... }
  • 7. PREMIER EXEMPLE $("button.continue").html("Next Step...")
  • 8. DOCUMENT getElementById getElementsByTagName getElementsByClassName querySelector querySelectorAll
  • 9. document.querySelector >= 8 >= 3.5 >= 1 >= 3.2 >= 10
  • 10. $("button.continue").html("Next Step..."); document.querySelector("button.continue") .innerHTML = "Next Step...";
  • 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. Uncaught TypeError: Cannot set property 'innerHTML' of null
  • 13. DEUXIÈME EXEMPLE var hiddenBox = $("#banner-message"); $("#button-container button").on("click", function(event) { hiddenBox.show(); });
  • 14. addEventListener var hiddenBox = document.getElementByID("#banner-message"); document.querySelector("#button-container button") .addEventListener("click", function(event) { hiddenBox.setAttribute("style", "display: block"); }, false);
  • 15. addEventListener >= 9 >= 1 >= 1 >= 1 >= 7
  • 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. Element.className hiddenBox.className += ' hidden'; hiddenBox.className.replace('hidden', '');
  • 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. Element.classList >= 10 >= 3.6 >= 8 >= 5.1 >= 11.5
  • 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. 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. TABLE API insertRow() deleteRow() insertCell() deleteCell() createCaption() deleteCaption() createTHead() ...
  • 23. TROISIÈME EXEMPLE $.ajax({ url: "/api/getWeather", data: { zipcode: 97201 }, success: function(data) { $("#weather-temp").html("<strong>" + data + "</strong> degrees"); } });
  • 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. 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. 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. FormData >= 10 >= 4 >= 7 >= 12 >= 5
  • 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. JQUERY DEFERREDS $.ajax({ url: "/api/getWeather", data: { zipcode: 97201 } }) .done(function(data) { $("#weather-temp").html("<strong>" + data + "</strong> degrees"); }) .fail(function() { alert("error"); });
  • 30. PROMISES/A+ getTweetsFor("goldoraf", function (err, results) { ... }); var promiseForTweets = getTweetsFor("goldoraf"); promiseForTweets.then(function(results) { ... }); then(fulfilledHandler, errorHandler, progressHandler)
  • 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. RÉSULTAT FINAL request("GET", "/api/getWeather", data) .then(function(result) { document.querySelector("#weather-temp") .innerHTML = "<strong>" + result + "</strong> degrees"; });
  • 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. ANIMATIONS $("#book").animate({ left: "+=50" }, 5000, function() { // Animation complete. });
  • 35. requestAnimationFrame >= 10 >= 4 >= 10 >= 6 >= 15
  • 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. 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. 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. 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. transitionend var transitionEnd = whichTransitionEvent(element); element.addEventListener(transitionEnd, function(event) { // on déclenche l'animation suivante ! element.classList.add('expand'); });
  • 41. WEB COMPONENTS UNMODÈLEDECOMPOSANTPOURLE WEB
  • 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. 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. CUSTOM ELEMENTS <element extends="button" name="my-button" attributes="foo bar"> <template>...</template> <script> </script> </element> ...
  • 45. SHADOW DOM HTML IMPORTS <link rel="import" href="my-component.html">
  • 46. WEB COMPONENTS AVECX-TAG >= 9 >= 5 >= 4 >= 4 >= 11
  • 47. UN EXEMPLE ? <browser-compat ie="9" ff="5" cr="4" sa="4" op="11" />
  • 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. 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. CODEZ POUR LE FUTUR ! Copyright Steve Thomas Art & Illustration, LLC