background preloader

Vanilla JS

Facebook Twitter

Vanilla JS est µn framework rapide, léger et multi-plateforme pour créer d'incroyables et puissantes applications JavaScript. (Source :

Choosing Vanilla JavaScript in 2016 – Andrew Rabon. HTML templating with <template> and ECMAScript 2015 template strings The HTML5 <template> tag has been around for a few years and is fairly well-known and implemented.

Choosing Vanilla JavaScript in 2016 – Andrew Rabon

Elements inside a <template> tag are considered inert and do not get rendered or instantiated. The pattern is that your JavaScript will clone the elements inside when it wants to render them: <template class="hello-template"> <div class="hello"> Hello, world! </div></template> <script> var helloTemplate = document.querySelector('.hello-template'); var helloDiv = document.importNode(helloTemplate.content, true); document.querySelector('body').appendChild(helloDiv);</script> It’s a little verbose but still useful when you have bits of reusable markup in your document. Var firstName = 'Andrew';var lastName = 'Wizard';var fullName = `<div class="full-name"> <em>${firstName}</em><strong>${lastName}</strong></div>`;document.querySelector('body').innerHTML = fullName; Template strings are useful for a bunch of reasons: Who has it?

Parlons dev : Se passer de Jquery avec Vanilla JS. By Thomas Moreira Après avoir fait ses gammes au sein d'un (vraiment) (très) gros groupe industriel, il optimise le développement de votre site, qu'il voit et conçoit comme un outil commercial à votre service !

Parlons dev : Se passer de Jquery avec Vanilla JS

Contact email / Google+ / Facebook / Twitter Si vous vous demandez déjà "mais c'est quoi Vanilla ? ", pas de soucis, vous en avez déjà fait. Et beaucoup même, si vous avez déjà fait du javascript (je l'espère pour vous). Alors Vanilla c'est quoi ? Et pourquoi je devrais changer moi d'abord ? Les arguments pour vous convaincre sont assez simples : Vanilla est déjà implémenté dans tous les navigateurs aujourd'hui donc pas de bibliothèque supplémentaire à charger! Sur le site de Vanilla JS on trouve des comparaisons des vitesses d'exécution qui vont finir de vous convaincre : Vous pensez peut-être que vous gagnez du temps côté dev grâce à Jquery ? De jQuery à Vanilla JS. Oui alors jQuery, c'est sûrement très bien, ça simplifie pas mal de choses et le chaining est intéressant mais eeeest-ce que vous connaissez l'équivalent en pur JavaScript ?

De jQuery à Vanilla JS

Pas sûr hein. Ce petit article vous propose de quoi peut-être vous faire changer d'avis sur la bibliothèque qui pèse tout de même environ ~80ko. Note : Vanilla JS n'est pas un framework mais veut simplement dire "à nu", c'est du JavaScript sans bibliothèque. C'est parti ! #Table des matières #Évènements // jQuery $(document).ready(function() { // code }) // Vanilladocument.addEventListener('DOMContentLoaded', function() { // code }) // jQuery $('a').click(function() { // code… }) // Vanilla [].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // code… }) }) #Sélecteurs // jQueryvar divs = $('div') // Vanillavar divs = document.querySelectorAll('div') Vanilla JS. Vanilla JS en français. Vanilla JS Vanilla JS est un framework rapide, léger et multi-plateforme pour créer d'incroyables et puissantes applications JavaScript Introduction L'équipe de Vanilla JS maintient le moindre petit octet de code du framework et travaille dur chaque jour pour être sûr qu'il reste léger et intuitif.

Vanilla JS en français

Qui utilise Vanilla JS ? Content que vous vous le demandiez ! Google Facebook YouTube Yahoo Wikipedia Windows Live Twitter Amazon LinkedIn MSN eBay Microsoft Tumblr Apple Pinterest PayPal Reddit Netflix Stack Overflow En fait, Vanilla JS est déjà utilisé sur plus de sites que jQuery, Prototype JS, MooTools, YUI, et Google Web Toolkit - réunis. Télécharger Prêt à utiliser Vanilla JS ? Options Témoignages « Le support natif de HTML5 et les autres technologies modernes on fait de Vanilla JS mon préféré, petit à petit. » « Vanilla JS est un concentré d'objet, il est taillé pour des applications JavaScript Orientées Objet. »