MOWEBDO

MEAN.IO

Mean.io est une solution full-stack JavaScript pour la création d’applications Web. Elle permet de construire des applications rapidement, robuste et facile à maintenir.

MEAN signifie MongoDB, Express, AngularJS et NodeJS.

Elle s’appuie également sur les framework Grunt, Bower et NPM. Ce sont des outils de management de projet technique. NPM et Bower permettent de récupérer les dépendances. Bower sert plus spécifiquement à obtenir les composants front-end tels que HTML, CSS et JS. Grunt, est un outil JavaScript de type Task Runner. Il permet par exemple de compresser des fichiers, vérifier la bonne syntaxe des fichiers JavaScript ou encore minifier les fichiers JavaScripts et CSS. Ces outils permettent d’avoir une plateforme de développement robuste.

MEAN.io permet d’éviter du travail inutile et des pièges courants (tout en gardant l’application organisée). De plus, il fournit des bonnes pratiques concernant la structure des fichiers.

Comment travailler avec Mean.io ?

En fait, avec 2-3 commandes, toute la structure du projets est posée :
– sudo npm install -g meanio@latest // Get the mean cmdline
– mean init myApp // create your first app
– cd myApp && npm install // Install dependencies
– grunt // Launch mean
On ne passe pas 1 journée à poser toute la structure du projet. Ceci est déjà fait et on peut directement se focaliser sur la création de modules pour l’application.

En moins de 30 min, une application de test est prête (CRUD en plus). Cela permet d’obtenir une application prototype rapidement.

Avec une commande supplémentaire (« mean package myModule »), on peut créer automatiquement les fichiers nécessaires (html, css, js) pour son propre module. MEAN prend en compte automatiquement ce nouveau module et l’intègre automatique dans l’application. On peut directement faire les modifications pour les besoins spécifiques.

MEAN.io unifie Front End et Back End (utilisation de Express pour le serveur). Avec cette technologie, seul le language JavaScript est requis. Pas besoin d’autres compétences (sauf peut être HTML et CSS).

MEAN.io intègre par défaut le framework PassportJS qui est un framework d’authentification JavaScript. On ne se préoccupe ainsi pas d’authentification, tout est déjà mis en place.

On trouve maintenant divers frameworks pour différents besoins (exemple: framework de mail avec du templating HTML+velocity : nodemailer + email-templates). Avec NPM et Bower, ces frameworks sont facilement intégrés à l’application. Plus besoin d’aller les chercher sur leurs sites respectifs, ils sont automatiquement téléchargé dans la bonne version.

La partie qui nous a pris le plus de temps a été la conception HTML du site avec Bootstrap.

Mean.io ou Mean.js ?

Les 2 solutions sont identiques sauf pour la structure des fichiers du projets.

AngularJS est un framework JavaScript libre et open-source développé par Google.

AngularJS est fondé sur l’extension du langage HTML par de nouvelles balises (tags) et attributs pour aboutir à une définition déclarative des pages web, par opposition à l’utilisation systématique de l’élément ‘div’ et à la définition des éléments de présentation en javascript. Le code HTML étendu représente alors la partie vue du patron de conception logicielle (design pattern) MVC (Modèle-vue-contrôleur), ou MVW (Model, Vue, Whatever]) auquel AngularJS adhère, avec des modèles appelé «scopes» et des contrôleurs permettant de définir des actions en code javascript impératif. AngularJS utilise une boucle de dirty-checking (qui consiste à surveiller et à détecter des modifications sur un objet JavaScript) pour réaliser un data-binding bidirectionnel permettant la synchronisation automatique des modèles et des vues.

AngularJS embarque un sous-ensemble de la bibliothèque open source jQuery appelé jQLite, mais peut aussi utiliser jQuery si elle est chargée.

Outre le patron logiciel MVC et le code HTML étendu déclaratif, AngularJS est fondé sur un certain nombre de patrons et principes de conception qu’il convient de relever:

Séparation des préoccupations avec le découplage des manipulations du DOM et de la logique métier.
Injection de dépendances.
Les promises, reprises du langage Q.

HTML5 les principales nouveautés

Les nouvelles balises structurantes HTML5 permettent d’ordonner le contenu d’une page de façon plus spécifique. Les principales sont :

< header > Balise dédiée à l’en-tête d’une page, généralement vouée plus à sa présentation qu’à son contenu.

< footer > Même logique que précédent, mais concernant le pied de page, partie où se trouvent communément les informations de moindre importance, comme le site-map, les coordonnées extérieures, les mentions légales …

< nav > Spécifique pour la navigation interne du site web, le plus souvent en barre horizontale ou latérale.

< section > Permet de définir les grandes parties d’une page. Comme par exemple celles des articles, des actualités, des réseaux sociaux ou une présentation générale …

< article > Balise spéciale concernant l’emplacement d’un article de type blog, comme élément entier. Plusieurs articles pouvant être présents dans une section.

< aside > Elle concerne les éléments présents dans la barre latérale, qui servent habituellement à une navigation secondaire, un accès rapide aux contenus associés, ou bien à des call-to-action.

< embed > Sert à déclarer un contenu externe qui est chargé à l’intérieur de la page, tel qu’une vidéo, un encart publicitaire, une offre partenaire, etc.

C'est quoi un site responsive ?

Le Responsive Web Design est une notion de conception de sites web qui regroupe différents principes et technologies dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation.

L'utilisateur peut ainsi consulter le même site web à travers une large gamme d'appareils (moniteurs d'ordinateur, smartphones, tablettes, TV, etc.) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui peuvent parfois dégrader l'expérience utilisateur.