Développement web avancé

Séance 1

Simon Cleriot

@scleriot

cleriotsimon@gmail.com

Directeur Technique  @

Sujet du cours

Vue.js

Frontend

Vue.js ?

  • Framework Javascript
  • "Réactif"
  • Orienté composant
  • Forte communauté

 

  • Coeur du framework léger (30Ko)
  • Librairies officielles

 

  • V3 sortie en 2020

Rappels sur le langage

Le langage

  • Interprété (pas de compilation)
  • Haut niveau
  • Faible typage
  • "Orienté objet"
  • Différents types de programmation :
    • Impérative
    • Event-driven
    • Fonctionnelle

Types de programmation

  • Impérative

Chaque instruction modifie l'état du programme et sont exécutées les unes à la suite des autres.

console.log("Hello World")
alert("Coucou")
document.getElementById("text").innerHTML = "Hello !"

Types de programmation

  • Impérative

  • Event-driven

Le sens (flow) du programme est défini par les évènements (click d'une souris, message depuis un autre processus, etc...).

Les instructions sont donc exécutées dans un sens indéfini au lancement du programme.

console.log("Hello 1")
button.on("click", function(event) {
    console.log("Button clicked")
})
console.log("Hello 2")

Types de programmation

  • Impérative

  • Event-driven

  • Fonctionnelle

Un language où tout est fonction.

Map, reduce, filter etc...

var arr = [1,2,3,4]
var is_pair = arr.map(function(x){
    return x%2==0;
}) // -> [false,true,false,true]

Map

var arr = [1,2,3,4]
var is_even = arr.map(function(x){
    return x%2==0;
}) // -> [false,true,false,true]

Filter

var arr = [1,2,3,4]
var array_even_number = arr.filter(function(x){
    return x%2==0;
}) // -> [2,4]

Reduce

var arr = [1,2,3,4]
var addition = arr.reduce(function(accumulator, currentValue){
    return accumulator + currentValue;
}, 0) // -> 10

Versions du langage

  • ECMAScript 5 (ES5) : implémenté par tout les navigateurs
  • ECMAScript 6 (ES6) / ECMAScript 2015 (ES2015) : nouvelle génération

 

Comment écrire du code ES6 et le faire tourner dans les navigateurs actuels ?

En le compilant !

Versions du langage

  • ECMAScript 5 (ES5) : implémenté par tout les navigateurs
  • ECMAScript 6 (ES6) / ECMAScript 2015 (ES2015) : nouvelle génération

 

Comment écrire du code ES6 et le faire tourner dans les navigateurs actuels ?

//ES6
[1, 2, 3].map(x => x**2)

//Output ES5
[1, 2, 3].map(function (x) {
  return Math.pow(x, 2);
});

TD 1

https://scleriot.github.io/web-dawin/

Développement web avancé - Séance 1

By Simon Cleriot

Made with Slides.com

Développement web avancé - Séance 1

  • 598

More from Simon Cleriot