Bonjour,

J'ai un BTS SIO, pendant deux ans je n'ai fais presque que du dev web, énormément d'heure de jQuery (peut être 1000), mais très peu de JS vanilla.
Je n'étais de base pas attirer par le développement web, mais au final s'est devenu une passion. 

Le problème c'est qu'après ces deux années d'études, j'ai l'impression de n'avoir rien appris et de ne savoir rien faire, hormis faire des C/C de code trouvé sur internet ou bien simplement intégrer des composants. 

Je ne saurais même pas faire mon propre plugin JS de A à Z, même après plus de 1000 heures de dev web. Alors j'ai mes bases, mais par exemple je ne sais même pas ce qu'est une closure, ce n'est pas au programme en JS (c'est un exemple bidon, mais dans tous les cas je connais peu de terme et j'ai peu de notion en POO). 

Le fait est que j'ai un grand projet de site web, une RTA, que j'aimerais développer entièrement en JS. J'ai cru comprendre qu'avec node js c'était totalement possible, mais après avoir suivi quelques tuto pendant des heures, au moment de devoir quelque chose je suis resté figé devant mon écran. Et je me suis remis en question, j'en ai conclu que je n'étais pas du tout prêt. 

Gros problème: il n'y a rien en JS que je n'ais pas déjà fait (je parle des tuto sur internet), mais tous se ressemble, tous sont assez basique et n'apportent rien hormis de la théorie qui est en fait difficilement applicable. 

Alors j'aimerais savoir comment repartir sur de bonne base, où trouver des formations gratuites pour le moment, histoire de me former assez pour pouvoir trouver un travail le temps d'avoir un peu d'argent pour me payer des formations payantes? Parce que pour Node, les bases sont gratuites, mais avec ces bases on ne va nul part et j'ai l'impression que pour se former sur Node il faut payer pour comprendre. 

Merci

-
Edité par ThomCrb 18 juillet 2019 à 22:14:16

Bonjour,

Cadeau et cadeau. Une fois que tu aura lu ces deux tuto tu n'aura plus qu'à t’entraîner sur des micros projet.

Pour les mini-projet javascript, les classique:
 - un jeu de Chiffre mystère.
 - un jeu de Tic-Tac-Toe.
 - etc
(pour aller plus loin, une fois tout fini tu peut les optimiser afin d'avoir un code le plus léger&rapide possible)

Pour node.js je te conseille de développer un mini bot discord pour te faire la main.
Parce que, le bot discord ne nécessite pas de front-end, donc tu peut te concentrer sur la manipulation de modules (etc) (tu trouvera la doc du module discord.js ici).

Ensuite tu fait un micro site de blog, c'est a dire un site qui affiche une dizaine de "message/post" sur lequel tu peut te connecter (admin peut poster des messages/ajouter des commentaire, utilisateur peut like les messages/ajouter des commentaire).
Pour un maximum d'interaction (connection, affichage des messages par pages en async) tu passe par de l'ajax (donc soit directement avec XMLHttpRequest, soit en passant par l'api fetch)
Pour corser un peu le projet (parce que tel quel c'est un peu izi) pour les échanges entre ton front-end et ton back-end tu peut/devrais passer par un système d'API (tu trouvera des infos ici, NB n'étant pas une api publique mais une api interne, pas besoin de faire de doc ni de suivre toute les contrainte [du moment que c'est sécurisé et fonctionnel]

Pour aller plus loin tu peut t'amuser avec les socket et le traitement en temps réel (pour les like&commentaire)

Edit: normalement une fois que tu aura vu/fait tout ça tu devrais être capable de faire tout ce que tu veut en javascript/HTML/CSS.
Ps: la sécurité d'un site web c'est important.

-
Edité par Angelisium 19 juillet 2019 à 3:33:25

Merci beaucoup d'avoir pris le temps de me répondre. 

Je suis actuellement sur le cours JS de OCR, je l'avais réaliser il y a trois an. Pour te dire, j'ai même la version livre que j'ai jamais lu (au moins j'ai payé ma redevance à OCR ^^). C'est démotivant lorsque tu réalises les TP et que tu compares ton code, de te dire qu'après des centaines d'heures de développement, ton code est mal foutu, tu comptes tes lignes, tu en a 150 alors que la correction n'en a que 50. J'ai l'impression de n'avoir jamais progressé même si j'essais d'y mettre du miens. J'ai un énorme manque d'organisation et c'est pourtant un élément clé essentiel de la réussite d'un développeur. C'est pas la motivation qui manque, vraiment, mais au bout d'un moment on se demande si on est fait pour ça.

Mais je vais persister et finir ce cours, et le recommencer si nécessaire, jusqu'à vomir des lignes de codes. Je réaliserais les divers petits jeux, et je recommencerais jusqu'à avoir un code optimisé à souhait, mais là où c'est compliqué, c'est qu'un débutant/amateur a très peu d'éléments de comparaisons, du coup c'est compliqué de savoir si tu as bien fais les choses, si ton code est optimisé, si ta structure et ta logique est bonne... C'est ce qui me bloque le plus je pense. 

Merci pour la partie Node, j'avais pas la moindre idée de par où commencer ni quel projet réaliser pour apprendre. 

Je sais ce que j'ai à faire maintenant. 

-
Edité par ThomCrb 19 juillet 2019 à 4:43:32

Yop, si tu le souhaite, je peut t'inviter sur mon serveur discord privée ainsi je pourrais te montrer comment moi j'aurais fait tel ou tel chose.

Actuellement je lis http://javascript.info/ c'est vraiment très bien fait.

J'ai appris à coder en auto-didacte, ce qui est une manière très lente de faire, mais je suis incapable de faire autrement XD

C'était il y a quelques années donc j'aurais bien du mal à te conseiller de la lecture. Clairement, il faut que tu apprennes Javascript, pas jQuery. Après les cours de base, j'ai commencé par regarder des trucs comme ça https://www.youtube.com/watch?v=hQVTIJBZook (totalement obsolète, mais c'est un point de départ, en tout cas ça met sur la bonne voie - il parle d'un cas d'utilisation de closure à un moment que j'utilise encore à outrance aujourd'hui). Ma référence quotidienne encore aujourd'hui c'est MDN (Mozilla Developer Network) : ils ont une documentation extraordinaire, et aussi des tutoriels (je ne peux pas trop juger de leur qualité mais si c'est aussi bon que la doc, fonce dessus).

Connaître le langage intimement, ce n'est pas être expressif avec ce langage pour autant. Tu parles de faire des copier-collers : il faut que tu apprennes à programmer, que tu te lances dans un projet, même très simple, mais qui te demande de réfléchir à des algorithmes, à de la logique. Je me suis personnellement créé des outils pour améliorer ma productivité dans mon métier (bon toi tu bosses pas encore), j'ai aussi créé une appli de notes, de flux RSS, ce genre de trucs. Des trucs dont j'avais besoin, qui répondaient à mes désirs. On est très motivé pour s'aider soi-même.

Être expressif n'est pas tout, il faut aussi être maintenable, clair pour soi-même et pour les autres. Des règles simples qui peuvent aider à débuter :

• Ne pas se répéter plus que de raison. Si tu te répètes, c'est peut-être une fonctionnalité générique, donc crée une fonction dédiée.
• Décompose ton code. Créer des fonctions c'est bien, mais pas n'importe comment. Découpe un problème compliqué multi-variables en plusieurs problèmes logiques plus simples avec moins de variables. Chaque fonction doit avoir un but compréhensible sans que le lecteur ait besoin de connaître les particularités de l'application ou de lire la fonction en détail. Il devrait être facile de trouver un nom à la fonction.
• Penser de façon abstraite, généraliser. La plupart du temps, ce que tu mets en place pour résoudre un problème précis peut aussi résoudre un problème similaire appliqué à un autre cas. Découpler tes fonctions de leur contexte permet de les rendre plus facilement réutilisables et te met dans un état d'esprit plus compatible avec la résolution de problèmes.
• Rendre le code modulaire. Si tu as deux objets qui dépendent l'un de l'autre, tu es dans la merde car modifier un des deux objets pourrait avoir des répercutions sur le fonctionnement du second, qui attend par exemple une propriété que tu as renommée ou supprimée. On crée des objets pour les utiliser et il n'y a rien de mal à les utiliser en combinaison, c'est une très bonne chose, mais il faut leur donner des paramètres génériques.
• Créer des interfaces. Dans la même logique que ce qui précède : ton code est amené à changer, tu n'as pas envie qu'un changement dans la structure de ta base de donnée par exemple oblige à réécrire toutes les parties du code qui utilisent les données. Des fonctionnalités distinctes doivent être isolées et communiquer entre elles par une interface, de façon à ne modifier que l'interface si besoin.

-
Edité par tabouretBleu 20 juillet 2019 à 4:38:45

Salut,

perso, j'ai fait un bts sio, et après une license en alternance dans un iut, et j'ai 10 fois plus appris à l'iut qu'en bts, donc je peut que le conseiller.

Pour ce qui est du js vanilla, oublie, plus personne ne travaille comme ça, regarde plutôt du coté des frameworks js comme vuejs/angular.

Après si tu as des questions, genre closure, je te conseille de lister toutes les questions que tu as en tête, de les organiser un minimum et de les poster aussi, tu trouvera toujours des gens pour te répondre.

Si tu coince sur un script, pareil, met le sur jsfiddle/codepen poste le ici, t'aura toutes les réponses qu'il faut.

Pour ce qui est d'une closure, c'est une fonction qui est généralement passée en paramètre, qui à accès à l'environnement du script qui l'a crée.En général le script qui reçoit la closure, l'execute quand c'est nécessaire, et cette closure va effectuer un traitement dans le script d'origine de la closure. Donc en gros tu crée une fonction mais tu délégue son execution a un script tiers.

C'est essentiellement utilisé pour les communications asynchrones entre différentes parties de l'application.

Et je te conseille de suivre des cours sur la gestion de projet, si tu ne sais pas comment t'y prendre, comment démarrer, quoi faire, c'est que ta gestion de projet ne va pas. Tu devrais avoir une liste de tâches et de solutions techniques définies clairement avant de commencer à developper.

-
Edité par lk77 20 juillet 2019 à 14:33:13

Les bibliothèques, frameworks et CMS ne dispensent absolument pas de savoir programmer. Javascript peut faire bien plus que des interfaces utilisateur.

Personne n'as demandé ce qu'était une closure '-'

-
Edité par Angelisium 20 juillet 2019 à 15:10:27

L'auteur à donné comme exemple les closures, donc je lui répond.

Et je n'ai jamais dit qu'apprendre un framwork dispensait d'apprendre le javascript loin de là. Mais pour trouver un emploi, il faut maitriser au moins un framework js. Aucun gros projet n'est développé en js vanilla. On peut tout faire en js, ça n'est pas la question, mais un framework est nécessaire d'un point de vue économique, une entreprise est là pour gagner de l'argent, et les framework accélèrent clairement le développement.

Et je considère en tant que professionnel, qu'une personne qui traite les autres de grosses merde n'a rien à faire sur ce forum. Je reçois beaucoup de candidats en entretien, et même s'il n'ont pas le niveau, je ne me fous pas de leur gueule, ça s'appelle le respect.

edit: HS.

-
Edité par Angelisium 20 juillet 2019 à 15:10:17

lk77 a écrit:

Pour ce qui est d'une closure, c'est une fonction qui est généralement passée en paramètre, qui à accès à l'environnement du script qui l'a crée.En général le script qui reçoit la closure, l'execute quand c'est nécessaire, et cette closure va effectuer un traitement dans le script d'origine de la closure. Donc en gros tu crée une fonction mais tu délégue son execution a un script tiers.

Je trouve ça hyper confusant comme explication et rigoureusement faux.

Toutes les fonctions ont accès à leur environnement, là on a l'impression que c'est une propriété des closures. Une closure n'est pas exécutée "quand c'est nécessaire" (ça veut dire quoi ? Qui décide quand c'est "nécessaire" ?), elle est exécutée comme n'importe quelle fonction. Ton histoire de script d'origine et de délégation à un script tiers, je trouve ça compliqué et le vocabulaire utilisé n'est pas adapté (tout se passe dans un seul script).

Une closure c'est une fonction et ce n'est rien de plus que ça. On l'appelle closure quand on s'en sert pour isoler des variables. C'est une description de l'usage qu'on en fait. Pas de sa nature.

Dans l'exemple suivant on aurait envie de logger 0, 1, 2, 3, 4, mais c'est pas ce qui se passe.

for(var i = 0; i < 5; i += 1) {
    setTimeout(function () {
   
------> console.log(i); // = 5, 5, 5, 5, 5
        //ce truc loggera 5 fois la valeur 5 parce que,
        //1000 millisecondes après l'exécution de la boucle,
        //i a été incrémenté et vaut bien 5
       
    }, 1000);
};

Pour résoudre le problème on peut copier la valeur courante de i dans une autre variable, qui elle ne bougera pas

function closure(capturée) {
    setTimeout(function () { 

 -----> console.log(capturée); // = 0, 1, 2, 3, 4
        //ici il n'y a aucune raison pour que capturée
        //n'ait plus la même valeur qu'à sa création

    }, 1000);
}

for(var i = 0; i < 5; i += 1) {
--> closure(i);
    //ici on passe la valeur de i à une fonction
    //tant qu'elle vaut encore sa valeur courante
};

On appelle cette fonction une closure parce que son contenu est isolé de ce qui se passe dans la boucle (vu que c'est une copie), mais on voit bien que c'est une fonction tout à fait normale. Il n'y a rien de mystique.

Trois notes :

ici i est un nombre, donc on passe bien une copie de la valeur à la fonction closure, mais si ça avait été un objet, ça n'aurait pas fonctionné, parce que quand on passe un objet en paramètre à une fonction, on passe une référence qui pointe vers l'objet.

function closure(capturée) {
    setTimeout(function () { 
        console.log(capturée.j); // = 5, 5, 5, 5, 5
    }, 1000);
}

for(var i = {j:0}; i.j < 5; i.j += 1) {
    closure(i) ;
};

Ici la valeur de i n'est pas remplacée par la boucle for, mais le contenu de i (le paramètre j), oui. On voit bien que dans la fonction closure, on n'a pas fait un clone de i, on utilise l'objet original dont le contenu a été modifié. Ça prend souvent les débutants en traître.

Deuxième note : plus haut, j'utilise une fonction nommée que j'ai appelé closure, mais on utilise plus souvent des fonctions anonymes (aussi appelées lambda) que l'on exécute immédiatement. la syntaxe est bizarre mais il faut bien comprendre que ce n'est pas cette syntaxe qui en soit constitue la closure. C'est simplement comme ça qu'on écrit du code moche pour se la péter (je veux dire : qu'on exécute immédiatement une fonction)

Les exemples qui suivent sont rigoureusement équivalents

for(var i = 0; i < 5; i += 1) {

    function closure(capturée) {
        setTimeout(function () { 
            console.log(capturée);
        }, 1000);
    }

    closure(i) ;

};


for(var i = 0; i < 5; i += 1) {

    (function closure(capturée) {
        setTimeout(function () { 
            console.log(capturée);
        }, 1000);
    }(i));

};


for(var i = 0; i < 5; i += 1) {

    (function (capturée) {
        setTimeout(function () { 
            console.log(capturée);
        }, 1000);
    }(i));

};


for(var i = 0; i < 5; i += 1) {

    (function (i) {
        setTimeout(function () { 
            console.log(i);
        }, 1000);
    }(i));

};

À noter que dans le dernier exemple, on appelle la variable capturée de la même façon que i, ce qui peut prêter à confusion et que je ne recommande pas, mais ce sont bien deux variables différentes. Quand il y a une collision de noms comme ça dans des fonctions imbriquées, l'interpréteur considère la variable du contexte courant et ignore la variable de la fonction parente, donc ça ne pose pas de problème.

Troisème note : avec les mots clés let et const, on n'aurait pas besoin de créer une fonction ici.

for(let i = 0; i < 5; i += 1) {

    setTimeout(function () { 
        console.log(i); // = 0, 1, 2, 3, 4
    }, 1000);

};

Ça fonctionne parce que, à chaque tour de boucle, l'interpréteur va détruire la précédente variable i et en recréer une autre, parce que let et const sont locales non plus seulement aux fonctions mais aussi aux blocs, or for est un bloc et donc ce n'est pas le même i qui est passé au console.log()

Dernière chose : ik77 évoquait les fonctions asynchronmes (ici setTimeout), mais perso j'utilise énormément les closure pour avoir des variables locales à une fonction sans pour autant les recréer à chaque appel de la fonction.

Les deux exemples suivants sont équivalents à l'usage mais ont des propriétés différentes

function A(param) {
    var machin_lourd = "un truc très lourd à créer";
    faire_un_truc_avec(machin_lourd, param);
}


var A = (function () {
    var machin_lourd = "un truc très lourd à créer";
    
    return function (param) {
        faire_un_truc_avec(machin_lourd, param);
    }
}());

Les deux versions de la fonction A ont accès à une variable machin_lourd qui n'est pas accessible en dehors de A, mais dans le second cas la variable n'est crée qu'une seule fois. Ne pas utiliser de closure aurait rendu la variable machin_lourd globale, ce qui pose des problèmes de collision de noms de variables. À noter qu'avec les modules en Javascript, je ressens moins le besoin de le faire car les variables globales sont locales au module, ce qui allège mon code de ces syntaxes moches. Mais ça peut quand même servir.

C'est pour moi capital de comprendre bien ce genre de notion. Les frameworks c'est en PLUS de javascript. Comparer les deux n'a pas de sens, c'est absolument indispensable de connaître le langage dans lequel on programme. Point barre. Autrement on tombe dans des pièges comme ceux évoqués au dessus. Et il y en a bien d'autres. Par aeilleurs, si tu veux utiliser WebGL, Angular tu en as rien à carrer. Si tu veux utiliser plusieurs cores du processeur, Angular tu en as rien à carrer, si tu veux créer une application web, Angular ça va t'aider à faire quoi, l'interface, c'est tout, il reste tout le reste de l'application à programmer.

Le JS "vanilla" il n'est obsolète que dans la gestion du DOM. Là effectivement, plus personne ne travaille comme ça. Et encore, dans des cas particuliers Angular ou Vue ou autre est trop lent et une solution ad hoc sera plus pertinente. Il faudra savoir la coder...

Dans tous les cas c'est bête de proner l'ignorance des bases. Les frameworks, bibliothèques et CMS vont et viennent, mais la compréhension du langage ne sera jamais une perte de temps.

-
Edité par tabouretBleu 20 juillet 2019 à 16:27:56

Je n'ai jamais dit qu'une closure était une fonction particulière, différente des autres, c'est une fonction. point. J'essaie d'expliquer, peut-être maladroitement, le cas d'utilisation typique d'une closure. Et je n'ai jamais dit qu'une closure ne pouvait pas être utilisé au sein d'un même script, c'est juste plus simple d'expliquer les choses en prenant l'example d'une comunication entre deux scripts.

Quand à l'environnement toutes les fonctions y ont accès, mais c'est important de comprendre dans le cas d'une closure, l'environnement dont il est question, car il en existe souvent plusieurs, et certains ne comprennent pas pourquoi ils n'ont pas accés à l'environnement de la classe/fonction/script à qui ils ont passé la closure.

Généralement une closure n'est pas éxécutée tout de suite, d'ou le terme "nécessaire". C'est la fonction à qui j'ai passé la closure en paramètre qui decidera de quand et comment elle appelle la closure, avec quels paramètres. Une fonction qui fait une requête appellera la closure  quand la réponse du serveur sera revenue ce genre de choses.

La closure peut être appellée après le retour de la fonction à qui ont à passé la closure, ce qui peut perturber certains.

J'ai cité angular mais ça pourrait être express.js, n'importe quel framework adapté aux besoins.On choisi pas les memes outils pour faire une api que pour faire une interface client. Vu qu'il parle de jquery je suis parti naturellement coté front.

 Sans javascript impossible d'apprendre un framework js, mais sans framework js impossible ou très difficile de travailler en tant que développeur web, la plus part des entreprises ont des prérequis assez sévère. Par exemple dans mon entreprise, on embauche pas les gens qui ne maitrisent pas parfaitement laravel/vuejs ou symphony/angular vu qu'il est plus facile d'en apprendre un deuxiéme quand on en maitrise un premier.. En septembre on va surement recaler tous ceux qui sortent de bts sio malheureusement, ils n'ont pas le niveau.

Enfin bon c'est pas le débat^^

-
Edité par lk77 20 juillet 2019 à 17:03:22

Mon explication détaillée était à destination de Thom parce que la tienne me semblait inintelligible, mais j'imagine bien ce que tu as pu vouloir dire. Cela dit je note que tu n'as pas critiqué mon laïus sur la nécessité d'apprendre le langage donc j'imagine qu'on est d'accord sur ce point et que des phrases comme "pour ce qui est du js vanilla, oublie" ne traduisent pas vraiment tes opinions non-plus. D'autant qu'il se transforme beaucoup ce langage et qu'il va devenir une joie à utiliser. Les gens n'apprenaient pas Javascript parce que c'était un langage pété, mais c'est carrément en train de changer et cette attitude de dédain m'exaspère parce que ça crée des développeurs qui ne sont pas assez compétents pour improviser.

lk77 a écrit:

Une fonction qui fait une requête appellera la closure  quand la réponse du serveur sera revenue ce genre de choses.

Là tu décris un callback ou une promise (qui pour le coup n'est pas le même genre d'objet), pas une closure.

On dirait que je joue sur les mots et que je fais mon grincheux, mais j'ai perdu trop de temps à rattraper des bêtises et à lever des ambiguïtés.

Alors une closure et une callback sont deux notions qui peuvent coexister. Une closure peut être une callback. Si une callback utilise le contexte alors c'est aussi une closure.

Une promise, c'est différent, je vais pas rentrer dans le sujet^^ 

-
Edité par lk77 20 juillet 2019 à 17:25:55

On est d'accord, mais dans ce cas je pourrais dire qu'elle appelle un objet, parce qu'en JS les fonctions sont des objets, et j'aurai fait de la mauvaise communication parce que le fait qu'un callback soit aussi un objet n'est pas intéressant dans ce contexte, et en plus on peut imaginer tout à fait légitimement que je parle d'un objet littéral ou d'un objet instancié XD

Quand on me dit "closure", je comprends à raison "l'aspect saillant de ma communication c'est que j'essaie d'isoler une variable", et quand j'entends "callback" je comprends à raison "l'aspect saillant de ma communication c'est que j'attends que quelque chose se termine".

On a un métalangage riche et expressif, je trouve dommage de ne pas s'en servir avec précision. Et clairement, tu ne peux pas attendre ça d'un gosse qui ne sait pas ce qu'est une closure parce que dans son école on ne jure que par les bibliothèques, les CMS et les frameworks et personne n'a eu l'intelligence de faire un cours dessus. Moi je trouve ça effrayant. Ça ne m'étonne pas mais ça m'effraie.

Merci pour le cours sur la closure  

J'ai voulu continuer en LP Web et Mobile, malheureusement malgré de bons résultats, j'ai une année de pause pendant laquelle je ne veux pas arrêter la programmation pour avoir une longueur d'avance dans la cas où je continuerais les études. 

Je sais que le JS Vanilla est presque obsolète, mais mon but est de pouvoir comprendre et manipuler les différents framework JS tout en sachant créer mes propres modules/plugin, je ne veux plus utiliser ce que les autres partagent (seulement ce qui est essentiel et trop long a développer seul). C'est pour ça que je veux commencer directement à la base, j'espère pouvoir comprendre toutes les spécificités du langage pour ne pas être ralenti lors de l'apprentissage de Node par exemple. Je connais trop de développeur qui ne se contente plus que de réutiliser ce qui a déjà été fait sans chercher a comprendre le fonctionnement, et je ne veux pas devenir ce genre de développeur. Je veux faire partie de ce qui créer et pas de ce qui utilisent. 

En tout cas vous m'avez bien avancer sur la façon d'apprendre et j'ai bien compris que seul ça allait être assez long et compliquer. Mais on a rien sans rien, et j'espère avoir une année riche en découvertes