Installer NestJs sur MacOS Catalina

Par défaut

NestJS est un framework pour construire des applications node performants et scalables. J’ai voulu la tester, et la première chose est de suivre la documentation officielle, et comme ca arrive, ca ne passe pas forcément comme prévu ;(

Après avoir essayé

npm i -g @nestjs/cli

Pas de message d’erreur. Nest aurait du etre installé globalement, mais en essayant

nest --version

La commande est inconnu !

Je vérifie si nest est bien installé globalement, et oui, c’est bien le cas.

(base) Ajmals-MacBook-Pro:node_modules ajmal$ npm list -g --depth=0

/Users/ajmal/.npm-packages/lib

├── @angular/cli@9.0.5

└── @nestjs/cli@6.14.2

(base) Ajmals-MacBook-Pro:~ ajmal$ cd /Users/ajmal/

(base) Ajmals-MacBook-Pro:~ ajmal$ cd node_modules/

(base) Ajmals-MacBook-Pro:node_modules ajmal$ cd bin

(base) Ajmals-MacBook-Pro:node_modules ajmal$ ls

ansi-styles color-name has-flag

axios debug is-buffer

chalk escape-string-regexp ms

color-convert follow-redirects supports-color

(base) Ajmals-MacBook-Pro:node_modules ajmal$ cd /Users/ajmal/.npm-packages/lib/

(base) Ajmals-MacBook-Pro:lib ajmal$ ls

node_modules

(base) Ajmals-MacBook-Pro:lib ajmal$ cd node_modules/

(base) Ajmals-MacBook-Pro:node_modules ajmal$ ls

@angular @nestjs

(base) Ajmals-MacBook-Pro:node_modules ajmal$ cd @nestjs/

(base) Ajmals-MacBook-Pro:@nestjs ajmal$ ls

cli

(base) Ajmals-MacBook-Pro:@nestjs ajmal$ cd cli

(base) Ajmals-MacBook-Pro:cli ajmal$ ls

LICENSE actions commands node_modules

README.md bin lib package.json

(base) Ajmals-MacBook-Pro:cli ajmal$ cd bin

(base) Ajmals-MacBook-Pro:bin ajmal$ ls

Les 2 fichiers présents

nest.d.ts nest.js

Je récupère le chemin

(base) Ajmals-MacBook-Pro:bin ajmal$ pwd

/Users/ajmal/.npm-packages/lib/node_modules/@nestjs/cli/bin

Je crée un alias

(base) Ajmals-MacBook-Pro:bin ajmal$ alias nest="/Users/ajmal/.npm-packages/lib/node_modules/@nestjs/cli/bin/nest.js"

(base) Ajmals-MacBook-Pro:bin ajmal$ nest --version

6.14.2

Nest peut maintenant être utilisé dans ce terminal

Mais si ouvrez un nouveau terminal, cet alias sera inconnu. Donc pour pouvoir persister la définition de cet alias, il va faloir le renseigner dans votre bash profile

  1. Lancer le terminal
  2. Tappez la commande cd ~/ pour naviguer vers votre repertoire principal
  3. Faites touch .bash_profile pour ouvrir ou créer le fichier
  4. Editer .bash_profile avec votre éditeur ou faites open -e .bash_profile pour ouvrir dans gedit
  5. Rajouter la ligne suivant alias nest= »/Users/[votre nom utilisateur]/.npmpackages/lib/node_modules/@nestjs/cli/bin/nest.js »
  6. Tapez commande . .bash_profile pour recharger le .bash_profile et mettre à jour les alias.
  7. Ouvrez un nouveau terminal et refaites nest –version pour vérifier que nest est maintenant correctement installé.

React – Installation et mise en route rapide

Par défaut

React est un framework très en vogue en ce moment.

Sur internet on peut trouver des tutoriels sur l’installation de ce framework mais beaucoup sont déjà obsoletes à l’heure du publication de ce blog. En effet, au lieu d’utiliser webpack et avoir des soucis de dépendances liés aux différents packages, on peut facilement installer ce framework en suivant juste les étapes suivantes. Il faut avoir préalablement installés node et npm. Les dernières version sont recommandés.

Dans votre repertoire de travail, faites

npm install -g create-react-app

Une fois terminée, faites

create-react-app monapplireact

Si vous avez le message Success, alors l’installation s’est correctement passé !

npm va vous conseiller de lancer l’appli en utilisant les commandes suivantes

cd monapplireact

npm start

Screen Shot 2018-04-19 at 01.15.32

Le navigateur va se lancer automatiquement

Screen Shot 2018-04-19 at 01.16.16

Voila, vous pouvez commencer à coder ! Avec un éditeur comme Atom, ajouter le repertoire du projet .

Screen Shot 2018-04-19 at 01.21.18

 

Quelques patrons de conception en Javascript et optimisation

Par défaut

Les patrons de conception sont des solutions réutilisables aux problèmes courants dans la conception de logiciels. Ils sont à la fois passionnants et fascinants à explorer dans n’importe quel langage de programmation. Une des raisons de cela est qu’ils nous aident à tirer parti de l’expérience combinée de nombreux développeurs qui nous ont précédés et à nous assurer de structurer notre code de manière optimisée, répondant aux besoins des problèmes que nous essayons de résoudre. Les modèles de conception nous fournissent également un vocabulaire commun pour décrire les solutions. Cela peut être significativement plus simple que de décrire la syntaxe et la sémantique lorsque nous essayons de transmettre un mode de structuration d’une solution sous forme de code à d’autres. Dans ce blog, je vais vous décrire quelques unes de ces patrons de conception en javascript.

Dans les exemples qui suivent, je vous montre comment travailler avec un objet ‘individu’ qui contient les propriétés age, nom et ville en utilisant les différents patrons de conception.

Le patron de conception ‘Factory’ (usine)

Le Factory est un patron de conception créatif qui concerne la notion de création d’objets. Là où il diffère des autres modèles dans sa catégorie, c’est qu’il ne nous oblige pas explicitement à utiliser un constructeur. Au lieu de cela, un Factory ( l’usine ) peut fournir une interface générique pour créer des objets, où nous pouvons spécifier le type d’objet que nous souhaitons créer.

Imaginez que nous avons une usine UI où nous sommes invités à créer un type de composant UI. Plutôt que de créer ce composant directement en utilisant le nouvel opérateur ou via un autre constructeur créatif, nous demandons plutôt un objet Factory pour un nouveau composant. Nous informons l’usine quel type d’objet est requis (p. Ex. « Bouton », « Panneau ») et il l’instancie, nous le renvoyant pour l’utiliser.

Un example

[code language= »javascript »]

var individuFactory = function(age, nom, ville) {
//les fonctions servent un peu le role de classes
//on crée un objet vide dans cet objet

var temp = {};
temp.age = age;
temp.nom = nom;
temp.ville = ville;

temp.AfficherIndividu = function() {
console.log(this.age + "," + this.nom + "," + this.ville)

};

return temp;
};

Individu1 = individuFactory(15, ‘Jean’, ‘Paris’);
Individu2 = individuFactory(18, ‘Pascal’, ‘Toulouse’);
Individu3 = individuFactory(19, ‘Pierette’, ‘Marseille’);
Individu4 = individuFactory(35, ‘Michael’, ‘Lille’);

//Ajouter ces individus à un tableau et les afficher

var individus = [];
individus.push(Individu1, Individu2, Individu3, Individu4);

for (var i = 0; i < individus.length; i++) {
console.log(individus[i].age + "," + individus[i].nom + "," + individus[i].ville);
}

[/code]

Le patron de conception ‘Constructeur’

Dans les langages de programmation classiques orientés objet, un constructeur est une méthode spéciale utilisée pour initialiser un objet nouvellement créé une fois que la mémoire lui a été attribuée. En JavaScript, comme presque tout est un objet, nous nous intéressons le plus souvent aux constructeurs d’objets.

Les constructeurs d’objets sont utilisés pour créer des types spécifiques d’objets: à la fois la préparation de l’objet à utiliser et l’acceptation des arguments qu’un constructeur peut utiliser pour définir les valeurs des propriétés et des méthodes du membre lorsque l’objet est créé.

Un example

[code language= »javascript »]

//Patron de conception : Constructeur

//Identique au precedent, cette fois ci, on utilise un constructeur.

var individuConstructeur = function(age, nom, ville) {
// au lieu d’utiliser un objet temp, comme les fonctions sont aussi des objets, on peut leur ajouter des proprietes.
// en utilisant ‘this’

this.age = age;
this.nom = nom;
this.ville = ville;

this.Afficher = function() {
console.log(this.age + "," + this.nom + "," + this.ville)
};

};

//Contrairement au patron de conception Factory, comme on ne retourne pas d’objet, il faut creer d’autres objet
// a partir de cet objet lui meme
// Il faut utiliser un constructeur.

var individu_c1 = new individuConstructeur(48, ‘Marine Le Pen’, ‘Henin Beaumont’);
var individu_c2 = new individuConstructeur(39, ‘Emmanuel Macron’, ‘Paris’);
var individu_c3 = new individuConstructeur(63, ‘Francois Fillon’, ‘Sartre’);
var individu_c4 = new individuConstructeur(49, ‘Benoit Hamon’, ‘Paris’);
var individu_c5 = new individuConstructeur(62, ‘Jean LaSalle’, ‘Pyrenees Atlantiques’);
var individu_c6 = new individuConstructeur(75, ‘Jacques Cheminade’, ‘Mars’);
var individu_c7 = new individuConstructeur(64, ‘Jean Luc Melenchon’, ‘Montpellier’);

individu_c1.Afficher();

//Le probleme avec le patron de conception Constructeur c’est que chaque objet a sa propre methode
// Afficher
//Donc si on cree des milliers d’objets, ca fera beaucoup et c’est donc de la redondance.

[/code]

Le patron de conception ‘Prototype’

Le GoF se réfère au prototype en tant que celui qui crée des objets en fonction d’un modèle d’un objet existant par clonage.

Nous pouvons penser que le modèle de prototype est basé sur l’héritage où nous créons des objets qui constituent des prototypes pour d’autres objets. L’objet prototype lui-même est effectivement utilisé comme modèle pour chaque objet créé par le constructeur. Si le prototype de la fonction constructeur utilisé contient une propriété appelée nom par exemple (selon l’exemple de code plus bas), chaque objet créé par ce même constructeur aura également cette même propriété.

L’un des avantages de l’utilisation du prototype est que nous travaillons avec les fonctionnalités que JavaScript offre de manière native plutôt que tenter d’imiter les fonctionnalités d’autres langues.

Non seulement le modèle est un moyen simple d’implémenter les héritages, mais il peut également aussi y avoir une amélioration des performances: lors de la définition d’une fonction dans un objet, ils sont tous créés par référence (de sorte que tous les objets enfants désignent la même fonction) Au lieu de créer leurs propres copies individuelles.Les objets créés sont des clones (clones peu profonds) de l’objet d’origine qui sont transmis. Un cas d’utilisation du modèle prototype effectue une opération de base de données étendue pour créer un objet utilisé pour d’autres parties de l’application. Si un autre processus doit utiliser cet objet, au lieu d’avoir à effectuer cette opération de base de données substantielle, il serait avantageux de cloner l’objet précédemment créé.

[code language= »javascript »]

//Patron de conception : Prototype

//Permet de resoudre les problematiques lies au prototype Constructeur.
//On cree d’abord un objet vide

//Nous allons ajouter des proprietes et des fonctions

var individuPrototype = function() {

};

individuPrototype.prototype.age = 0;
individuPrototype.prototype.nom = "pas de nom";
individuPrototype.prototype.ville = "pas de ville";
individuPrototype.prototype.Afficher = function() {
console.log(this.age + "," + this.nom + "," + this.ville);
}

individuPrototype.prototype.Afficher();

var individu_p1 = new individuPrototype();
individu_p1.age = 45;
individu_p1.nom = ‘Pierre’;
individu_p1.ville = ‘Marseille’;
individu_p1.Afficher();

// Des tests pour determiner si un objet a ou non des proprietes definis a l’interieur
console.log(‘age’ in individu_p1);
console.log(individu_p1.hasOwnProperty(‘nom’));

// Les désavantages, c’est que, a chaque fois, il faut créer un objet vide
// redondance de code même si l’objet crée est plutôt ‘léger’

[/code]

Le patron de conception ‘Prototype’ : Optimisation

[code language= »javascript »]
// Patron de conception : Prototype Dynamique

var individuPrototypeDynamqique = function(age, nom, ville) {
//Comme pour le patron de conception Constructeur
this.age = age;
this.nom = nom;
this.ville = ville;

//Seule difference dans la fonction
//Un test pour determiner ou non la presence de la fonction Afficher
// Si elle n’existe pas, on la cree, mais au lieu de la creer ici, on la cree
// dans l’espace prototype
// La fonction est cree UNE SEULE FOIS lors de la creation du premier objet
// Quand le second objet sera cree, on n’aura pas besoin de la creer une deuxieme fois.

if (typeof this.Afficher !== ‘function’) {
individuPrototypeDynamqique.prototype.Afficher = function() {
console.log(this.age + "," + this.nom + "," + this.ville);
}
}
}

var individu_d1 = new individuPrototypeDynamqique(33, ‘Ajmal’, ‘Ile Maurice’);
var individu_d2 = new individuPrototypeDynamqique(30, ‘Pauline’, ‘Paris’);

individu_d1.Afficher();
individu_d2.Afficher();

[/code]

Conclusion

Si on veut un seul objet, on peut utiliser le patron de conception ‘Constructeur’
Si on veut créer plusieurs objets, le patron de conception Prototype Dynamique convient le mieux.

Vous pouvez retrouver le code sur JSFiddle

https://jsfiddle.net/2jmhL0r2/