Archives par étiquette : js

Node.js & express.js for noob, premiers pas

Bien le bonjoir, je vous propose que nous découvrions nodejs ensemble. Pour ce faire, je vais reprendre le principe de Pibou en utilisant nodejs pour exposer une api que je pourrais attaquer avec différentes technologies front et/ou mobile. Mais pour commencer, parlons un peu de Node.js node_home_install

C’est quoi ?

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Pour résumer, Node.js est un wrapper autour du moteur de javascript V8 qui permet de coder du bas niveau du côté serveur en Javascript.

Événementiel et non bloquant

La programmation est orientée événementielle: chaque action possède une fonction de rappel. Contrairement à d’autres technologies, la boucle de gestion des événements est transparente pour l’utilisateur, c’est le côté non bloquant. Concrètement, si vous lancez l’exécution de plusieurs actions, elles seront traitées en parallèle, sans attendre que la précédente ait appelé sa fonction de rappel.

Écosystème

Nodejs c’est aussi tout un ensemble d’outils. La philosophie peut se résumer à « vous avez un besoin, il y a un module pour ça ». C’est bien beau me direz-vous, mais comment gérer cette foison de modules? C’est là qu’intervient NPM, le node package manager. Il est très utile pour gérer vos modules. Il existe une multitude de modules, nous en reparlerons au fur et à mesure.

Installation

Pour commencer, il faut installer node.js sur votre machine, il y a tout ce qu’il faut sur http://nodejs.org/ Nous pourrions tout coder directement, mais je préfère utiliser un module qui nous facilitera la tâche : express.js. Pour installer express globalement, nous allons nous servir de npm (installé avec node)  :

npm install express -g

Voilà, il ne reste plus qu’a utiliser la génération d’express pour avoir un aperçu de notre structure de projet.

express pibou-node

Regardons ce que ça donne :

sortie console de la commande express pibou-node

sortie console de la commande express pibou-node

Suivons les instructions, d’abord aller à la racine du projet

cd pibou-node

Puis installer les dépendances :

npm install

Puis, lancer l’application :

node app

La console nous informe que le server est lancé : server_started Il n’y a plus qu’a ouvrir un navigateur : express_default Et côté serveur : first_responses   Voilà, on a un serveur qui tourne et qui rend une page. Bon, c’est un peu « magique » pour le moment, allons jeter un œil sur le code généré.

La structure du projet

La configuration

Le fichier package.json représente la configuration du projet. Nous allons juste donner un nom et une version à notre projet, ce qui nous donne :

{
  "name": "pibou-node",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.4.x",
    "jade": "*"
  }
}

Je vous conseille de faire un tour sur http://package.json.nodejitsu.com/, c’est une très bonne documentation dynamique pour la configuration. Pour savoir quelles sont les dépendances et leur version, vérifier les packages sur https://www.npmjs.org/.

L’application

On peut voir dans la configuration que le lancement de l’application se fait par la commande « node app.js », on peut en déduire que la racine du projet est dans le fichier app.js. Décortiquons son contenu :

/**
 * Module dependencies.
 */

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

La première partie liste les dépendances vers des modules de la bibliothèque ou vers les méthodes exposées dans l’application. On retrouve les modules importés via le package.json dans le dossier pibou-node/node_modules. Vient ensuite la configuration du serveur et les éléments à utiliser.  On voit qu’on utilise le moteur de templating jade pour les vues qui sont référencées dans le répertoire pibou-node/views. Vous pouvez choisir le moteur qui vous fait plaisir, il se trouve que Express.js propose jade par défaut. Cela vous permet de générer votre réponse au format html (ou autre format à la sauce xml). Express fourni un ensemble d’outil (log, middleware, traitement du json) qui sont bien pratiques. Je vous encourage vivement à faire un tour sur la documentation d’api et le guide d’express.js

Le Routing

Le mécanisme de routing est proche de ce que vous pouvez trouver avec rails. Vous déclarez un path et vous pouvez y lier une méthode. Prenons un cas concret :

var user = require('./routes/user');
//...
app.get('/users', user.list);

Vous dites que vous allez appeler la méthode ‘list’ exportée de pibou-node/routes/user.js. Si on regarde le fichier user.js ;

/*
 * GET users listing.
 */

exports.list = function(req, res){
  res.send("respond with a resource");
};

Le « exports. » est utilisé pour exporter la méthode, la rendre visible par require. La fonction se contente de répondre avec le texte « respond with a resource » sur une requête en get sur l’url http://localhost:3000/users.

Le templating

Nous avons parlé de jade, nous pouvons voir son utilisation dans le fichier routes/index.js.

/*
 * GET home page.
 */

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

C’est la partie render qui va appeler la vue correspondante, ici ça sera pibou-node/views/index.jade et lui passer un objet { title: ‘Express’ }. C’est la configuration dans pibou-node/app.js qui a défini pibou-node/views comme répertoire de référence pour les templates. L’appel à render précise de récupérer le fichier pibou-node/views/index dont l’extension est déterminée par le moteur de templating choisi, « .jade » dans notre cas. Allons regarder ce fichier de template :

extends layout

block content
  h1= title
  p Welcome to #{title}

Le vous laisse lire la documentation pour la syntaxe. Le fichier défini une structure html et utilise une variable pour rendre le titre. Nous avons vu qu’il suffit de passer un objet avec les propriétés attendues pour qu’il soit utilisable dans le template. En ce qui concerne le layout, si on suit la logique précédente, il suffit d’ouvrir le fichier /views/layout.jade :

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

Il s’agit tout simplement de la structure de base d’une page html qui référence une CSS de base.

Et la suite ?

Je vous laisse découvrir ces technologies, générer votre projet et explorer la configuration du package.json. Notre prochaine étape nous fera manipuler le code et découvrir de nouveaux modules. @Bientôt

Références

Codecademy – L’école des padawans développeurs

Aujourd’hui, je vais vous parler de Codecademy, une plateforme d’apprentissage de développement en ligne.

Premiers pas

Vous pouvez attaquer votre apprentissage de deux façons :

  • Soit un cours parmi une liste  (Javascript, HTML/CSS, PHP, Python ,Ruby, APIs)
  • Soit réaliser des mini projets

Le cours

J’ai testé le cours de javascript :

  • Chaque chapitre représente une grande notion
  • Un chapitre propose une série d’exercices ciblés
  • Chaque passage de notion propose un exercice plus complet
  • Le cours est progressif et parfaitement adapté pour les débutants

Les mini projets

Il s’agit d’une suite d’exercices pour réaliser un mini projet en 30 min max. Le but est de vous familiariser avec la syntaxe et certaines particularités de la technologie.

Vous pouvez également réaliser et partager vos propres expérimentations.

Gamification & profil

Badges & points vous sont décernés au fur et à mesure de votre progression.
Vous pouvez évidemment partager vos victoires sur vos réseaux sociaux préférés 😉

Vous recevez un mail sur certaines actions et certains succès, tout est fait pour vous encourager dans l’utilisation de la plateforme.

Page de profil, ou y trouve les points, les bagdes et la progression

Page de profil, ou y trouve les points, les badges et la progression

 

Quand l’élève devient maître

Vous pouvez participer à l’évolution de la plateforme en proposant vos propres cours. Je n’ai malheureusement pas expérimenté cette partie. Il semble que vous pouvez vous créer une certaine réputation en proposant des cours de qualité.

Conclusion

Cette plateforme permet de partager et d’évoluer aussi bien en tant qu’élève qu’en tant que professeur. Le cours de JS est une bonne introduction et l’interface permet d’essayer rapidement son code. Mon seul bémol concerne la traduction très partielle et de qualité variable suivant la langue choisie. Si vous débutez dans une des technologies proposées ou que vous voulez revoir les bases, n’hésitez pas à vous inscrire et essayer ce service.

Brackets, l’éditeur web expérimental à expérimenter !

Profile

logo de l'éditeur Brackets

Découverte

C’est lors d’une discussion qu’on me conseilla Brackets (merci Sylvain). C’est un éditeur Cross plateforme, simple, gratuit avec une communauté active, fait par et pour des développeurs web.

Made with ♥ and JavaScript

Je le télécharge, l’installe, et…. ça ne fait pas tout ce qu’on m’a promis! Point d’inquiétude cependant car mon conseilleur me dit : « ça marche avec un système d’extensions, je vais te filer les miennes ». OK, en fait les extensions se trouvent et se téléchargent directement depuis l’éditeur.

capture de l'écran de gestion des extensions 

Utilisation

Extensions

Je vous donne une petite liste d’extensions que j’utilise :

  • Annotate : génération d’annotations de jsdoc
  • Beautify : format JS, HTML& CSS
  • Brackets Key Remapper : permet de modifier le mapping des raccourcis
  • Brackets Snippets : une extension pour créer et utiliser des snippets
  • brackets-code-folding : extension pour avoir du code folding
  • Display Shortcuts : montre les raccourcis en bas de l’écran
  • Interactive Linter : remonte les erreurs à partir de JSHint/JSLint/CoffeeLint en temps réel
  • HTMLHint : support htmlLint
  • Jade : support de jade.js
  • Reload in Browser : pour recharger le browser avec un raccourci clavier
  • Simple JS Code Hints : support un peu moins contraignant que le JSLint d’origine
  • Themes for Brackets : fourni une liste de thèmes pour personnaliser l’éditeur
  • Theseus for Brackets : debugging JS dans Chrome pour Node.js
  • Todo : gestion des todo du projet
  • Various improvements : tout est dans le nom

Les mises à jours sont régulières et sont en évidence dans le gestionnaire d’extensions.
J’ai eu un problème avec l’extension des thèmes, il suffit de recharger Brackets (F5 ou Deboguer>Recharger Brackets)
Le linter JS interactif est parfois capricieux, la plupart du temps, il suffit de sauvegarder et de formater le code (ctrl+alt+l).
Il existe bien d’autres extensions, je ne vous ai pas listé toutes celles que je teste, mais je vous laisse le plaisir de la découverte.

Sur un projet

Capture d'écran de barckets sur un fichier app.js (node.js)

J’ai découvert Brackets en créant mon premier projet Node.js.
Avec les extensions et une console, c’est plutôt confortable.
On peut ouvrir un dossier représentant le projet et l’arborescence est accessible dans un volet.
Les code linters interactifs permettent de limiter les problèmes syntaxiques.
Le formatage et la coloration syntaxique sont plus que correct.
J’ai regretté l’impossibilité de splitter la fenêtre, finalement je lance plusieurs instances de Brackets.

Capture d'écran d'édition de css avec Brackets
J’ai été un peu déçu par par Theseus qui ne propose pas une exploration des objets en profondeur, mais je vous en reparlerai dans un article ultérieur.

Il y a quand même pas mal d’instabilité mais comme les technos sont récentes et les mises à jours très régulières, c’est tout à fait normal et supportable.

Conclusion

Les moins

  • L’instabilité des extensions. C’est l’apanage de la jeunesse.
  • Le foisonnement d’extensions peut perdre un peu le néophyte (que je suis).
  • L’état BETA. Il manque des choses basiques comme le split d’écran.
  • La politique d’Adobe. On a vu comment ont fini certains projets, on peut légitimement se demander ce qu’ils vont faire de cet éditeur

Les plus

  • L’esprit. On voit la même inspiration que pour Sublime Text
  • L’ouverture. On peut suivre les évolutions, partager nos remarques, participer au développement
  • La communauté vraiment active, des mises à jours régulières et des extensions bien pensées
  • La mise à jour en live du navigateur sur les modifications dans l’éditeur
  • Les aides d’éditions (choix des couleurs, modification des CSS etc..)
  • Les interactions éditeur/Chrome (affichage en live des appels de méthode d’un serveur node avec Theseus)

En bref

Brackets est un éditeur vraiment prometteur. Si cet esprit reste et que la gestion produit est bonne, on aura certainement un des meilleurs éditeurs du marché. La seule ombre au tableau est le doute quand à la politique d’Adobe. Je vous encourage vivement à le tester si vous bossez sur du JS, HTML et CSS.

Il est ou ton environnement de travail ? Dans ton cloud!

Dans de précédents articles (IDE rails la suiteAptana, finalement pas) , nous avons abordé différents IDE pour faire du développement rails sous Windows. Le choix d’outils en fonction de l’environnement est incontournable pour tout développeur. L’installation de l’IDE et la configuration de votre environnement n’est plus une fatalité, il existe une alternative: le cloud !

Je vous propose de découvrir deux outils  Koding et Cloud9 IDE online. Ce sont tous deux des environnements de développement intégrés utilisables directement dans votre navigateur favori.

Koding

C’est une plateforme de développement orientée réseau social. Quand vous vous connectez, vous tombez sur l’activité de tous les usagers. Sachant qu’à l’heure ou j’écris cet article, il y a 44 144 utilisateurs (d’après leur page membres), ça pollue passablement votre flux. Mais n’ayez crainte, vous pouvez configurer tout ça.

Coté développement, il y a de quoi s’amuser un peu. Il s’agit d’une VM avec un CentOS et des éléments de base: un terminal pour manipuler la vm, un éditeur de texte avec une coloration syntaxique et quelques applications.

J’ai testé un créateur de projet rails qui semble fonctionner sans problème. J’avoue avoir été un peu perdu une fois le projet créé, j’ai cherché comment l’utiliser car le viewer ne le permet pas.  Après plusieurs tentatives infructueuses et un peu de googling, je suis tombé sur la marche à suivre : http://kwiki.koding.com/wiki/RoR. Bon c’est un peu basique mais ça fonctionne ;). J’ai également récupéré mes projets depuis mon compte github sans aucun soucis.

Conclusion

Le message est clair, c’est une beta avec pas mal de « coming soon », de choses assez basiques  et de plantages réguliers (ralentissements, impossibilité d’utiliser la console). Cependant, on peut s’en sortir avec quelques recherches sur google et la lecture des documents proposés par les utilisateurs. L’orientation application  à la façon market encourage la communauté dans l’amélioration des services de la plateforme. On peut toutefois se demander sous quelle forme ce service sera monétisé et dans quelle mesure on pourra utiliser son compte « gratuit ».

Cloud9

Plus ancien, il est aussi plus abouti et bien documenté. La version gratuite permet une utilisation « basique » avec des espaces de travail publiques et alloue un espace de 123M. La version payante (12$/mois) permet, entre autre, 6 espaces privés, votre propre VM et un nombre illimité de collaborateurs. Pour mon test, je me suis connecté sur mon compte github et j’ai récupérer quelques projets. Pour le projet rails, j’ai suivi cette documentation. L’utilisation m’a parue plus simple que Koding et l’environnement moins « fouillis ». On comprend rapidement comment lancer son application.

Conclusion

Cloud9 propose un environnement efficace et clair. Il est plus mature, possède également une formule payante plus complète. Je n’ai pas eu de soucis particulier, ces quelques heures d’utilisation m’ont convaincue. Je pense continuer dans mon exploration, voir développer un ou deux petits projets avec, histoire d’en voir un peu plus. La version gratuite me suffit car je n’ai que peu de projets et ils sont tous open-source. Un passage à la version payante se justifierait avec un projet non open source ou des besoins plus importants (plus d’informations).

Le mot de la fin

A mon sens, Koding est clairement plus orienté plateforme communautaire alors que Cloud9 propose un environnement développement pur et dur. Les deux permettent de développer une application en gardant un œil sur le résultat et une console ouverte pour l’exécution des commandes et autres scripts.

Dans les deux cas, l’avantage de ne pas avoir à installer son environnement de travail est incontestable  Vous pouvez développer de n’importe où, il vous suffit d’un navigateur. L’inconvénient est bien-sur le besoin d’une connexion internet et l’ouverture vers l’extérieur qui peut soulever des problèmes de sécurité.

N’hésitez pas à partager vos expériences sur ces outils ou d’autres environnements. Il me reste deux invitations pour Koding si ça tente quelqu’un 😉

@bientôt