- \n
- Changement des m\u00e9thodes de travail\/organisation pour une \u00e9quipe en charge de d\u00e9ploiements pour une multitude d’applications cross-platform en front.
Source : Deploying JavaScript Applicationshttps:\/\/alexsexton.com\/blog\/2013\/03\/deploying-javascript-applications\/<\/a><\/li>\n<\/ul>\nDes applications modernes pour des navigateurs modernes<\/h4>\n
Une petite parenth\u00e8se sur l’assortiment MEAN<\/b> qui contient \u00e0 lui seul de quoi rebattre les cartes d’un univers encore domin\u00e9 aujourd’hui domin\u00e9 par LAMP.<\/p>\n
La fait de choisir Node \u00e9mancipe totalement cette technologie de la notion de plate-forme et m\u00eame de la notion de serveur. En effet, Node tourne sur n’importe quelle plateforme et remplace litt\u00e9ralement apache. Le javascript s’ex\u00e9cute c\u00f4t\u00e9 serveur et c\u00f4t\u00e9 client.<\/p>\n
En fait c’est le tout en un, d\u00e9ployer votre application sur un serveur, c’est aussi d\u00e9ploy\u00e9 un application avec le serveur.<\/p>\n
La voie ouverte par MEAN donne aussi \u00e0 d\u00e9couvrir un ensemble encore plus vaste de technologies dont notamment Grunt.<\/p>\n
- \n
- Yeoman qui est une combinaisons de 3 outils pour le scaffolding (Yo), la gestion scripts (Grunt) ou la gestion de d\u00e9pendances (Bower).<\/li>\n
- Bootstrap: le c\u00e9l\u00e9brissime ensemble de CSS, pr\u00eat \u00e0 l’emploi, qui fait de votre projet, un projet imm\u00e9diatement responsive.<\/li>\n
- Les BDD NoSQL type MongoDB : le basculement d’une BDD traditionnelle \u00e0 une base NoSQL peut repr\u00e9senter un gain de temps consid\u00e9rable : moins de temps \u00e0 \u00e9crire des requ\u00eates SQL et plus de temps \u00e0 \u00e9crire des fonctions map\/reduce en JavaScript. Moins de probl\u00e8me dans la logique de transformation des donn\u00e9es en effet MongoDB produit nativement et directement du JSON par cons\u00e9quent vous ne concevez plus seulement une base mais directement des services web d’une RESTful API.<\/li>\n<\/ul>\n
Basculer de LAMP \u00e0 MEAN c’est changer d’orientation dans le d\u00e9veloppement. De la traditionnelle cr\u00e9ation de page c\u00f4t\u00e9 serveur, on passe \u00e0 la cr\u00e9ation de page unique c\u00f4t\u00e9 client (connu sous le nom de SPA, Single-Page Application). C’est aussi un double changement de perspective dans le d\u00e9veloppement : (i) D’un mode synchrone, on passe essentiellement \u00e0 un mode “event-driven” et asynchrone ; (ii) D’une conception ax\u00e9e autour d’un \u00e9cran ou d’une page, on passe \u00e0 une conception ax\u00e9e autour de composants.<\/p>\n
MEAN rime avec LEAN<\/h4>\n
Ces avantages techniques ont d’ailleurs des r\u00e9percussions sur le mode de gestion des projets. Cela va de pair avec l’adoption d’une gestion de projet de mani\u00e8re it\u00e9rative, articul\u00e9 autour d’un concept de minimum viable product (MVP). En effet, l’un des b\u00e9n\u00e9fices imm\u00e9diat de MEAN, c’est l’extr\u00eame rapidit\u00e9 dans la r\u00e9alisation d’un prototype en plus du fait que vous pouvez imm\u00e9diatement prototyp\u00e9 pour \u00eatre cross-plaform : laptops, smartphones et tablettes m\u00eame t\u00e9l\u00e9 connect\u00e9es.<\/p>\n
En outre, le fait d’utiliser MongoDB appartienne au technologie NoSQL permet de changer rapidement et de modifier la couche de donn\u00e9es sans avoir \u00e0 se soucier des migrations. Un avantage tr\u00e8s utile lorsque on tache de construire un produit sans sp\u00e9cifications claires, c’est qui est le cas de nombreux.<\/p>\n
Tous ces technologies r\u00e9sonnent avec insistance autour des termes suivants : prototype, souplesse, agilit\u00e9, incertitude, retour d’usage. MEAN est clairement en phase avec la boucle vertueuse de LEAN : learn, build, mesure.<\/b><\/p>\n
- \n
- Une suite de 4 excellents articles, tr\u00e8s bonne entr\u00e9e en mati\u00e8re sur MEAN Mastering MEAN: Introducing the MEAN stack<\/a><\/li>\n<\/ul>\n
Utiliser Grunt<\/h4>\n
On va faire un survol rapide de Grunt. Ce qui suppose au pr\u00e9alable de cr\u00e9er un r\u00e9pertoire pour notre projet, r\u00e9pertoire que l’on nomme TestForGrunt<\/b>.<\/p>\n
Via la console, on se place en suite dans ce r\u00e9pertoire.
cd \/[path-to-your-project]\/TestForGrunt<\/code>. Il faut ensuite installer Grunt pour une installation globale par exemple \u00e0 l’aide de cette commande.<\/b><\/p>\nnpm install -g grunt-cli<\/code><\/p>\n![\"Grunt,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2015\/02\/using_grunt_1.jpg\")
<\/p>\nOn peut \u00e0 toutes fins utiles, v\u00e9rifier la version de Grunt<\/b>
\ngrunt --v<\/code><\/p>\n![\"Grunt,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2015\/02\/using_grunt_2.jpg\")
<\/p>\nVous pouvez passer \u00e0 la cr\u00e9ation proprement dite de votre projet SampleGrunt<\/b>.<\/p>\n
Il faut pour cela pr\u00e9parer un fichier
package.json<\/code><\/b><\/p>\n\r\n\t\r\n\t{\r\n\t \"name\": \"SampleGrunt\",\r\n\t \"version\": \"0.1.0\",\r\n\t \"author\": \"Bruno Flaven\",\r\n\t \"private\": true,\r\n\t \"devDependencies\": {\r\n\t \"grunt\": \"~0.4.0\",\r\n\t \"grunt-contrib-cssmin\": \"*\",\r\n\t \"grunt-contrib-imagemin\": \"^0.9.3\",\r\n\t \"grunt-contrib-sass\": \"*\",\r\n\t \"grunt-contrib-uglify\": \"*\",\r\n\t \"grunt-contrib-watch\": \"*\",\r\n\t \"grunt-cssc\": \"*\",\r\n\t \"grunt-htmlhint\": \"*\",\r\n\t \"matchdep\": \"*\"\r\n\t }\r\n\t}\r\n\t\r\n<\/pre>\nUne fois, le fichier \u00e0 la racine de votre r\u00e9pertoire SampleGrunt<\/b>. Lancer la commande
npm install<\/code>. Cela indique \u00e0 npm les d\u00e9pendances \u00e0 installer et \u00e0 placer dans un dossier qui sera cr\u00e9e nomm\u00e9node_modules<\/code>.<\/p>\nTous les fichiers du projet sont dans un r\u00e9pertoire nomm\u00e9
assets<\/code>, il existe 3 sous-r\u00e9pertoire \u00e0 l’int\u00e9rieur de ce r\u00e9pertoire principal : images, js, sass<\/b>.<\/p>\nPour de plus amples explications, je vous invite \u00e0 lire cette article ne anglais tr\u00e8s bien fait dont je me suis inspir\u00e9 \ud83d\ude42 Un peu feignant je suis. http:\/\/www.smashingmagazine.com\/2013\/10\/29\/get-up-running-grunt\/<\/a>.<\/p>\n
Compression des images avec Grunt<\/b>
\n![\"Grunt,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2015\/02\/using_grunt_3.jpg\")
<\/p>\nCompression des images avec Grunt<\/b>
\n![\"Grunt,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2015\/02\/using_grunt_4.jpg\")
<\/p>\nLe fichier
gruntfile.js<\/code> complet<\/b><\/p>\n\r\n\tmodule.exports = function(grunt){\r\n\r\n\trequire(\"matchdep\").filterDev(\"grunt-*\").forEach(grunt.loadNpmTasks);\r\n\r\n\t\t\/*\r\n\t grunt.initConfig({\r\n\t pkg: grunt.file.readJSON('package.json')\r\n\t });\r\n\t\t*\/\r\n\tgrunt.initConfig({\r\n\t pkg: grunt.file.readJSON('package.json'),\r\n\t htmlhint: {\r\n\t build: {\r\n\t options: {\r\n\t 'tag-pair': true,\r\n\t 'tagname-lowercase': true,\r\n\t 'attr-lowercase': true,\r\n\t 'attr-value-double-quotes': true,\r\n\t 'doctype-first': true,\r\n\t 'spec-char-escape': true,\r\n\t 'id-unique': true,\r\n\t 'head-script-disabled': true,\r\n\t 'style-disabled': true\r\n\t },\r\n\t src: ['index.html']\r\n\t }\r\n\t },\r\n\t\t\/* watch task *\/\r\n\t\twatch: {\r\n\t\t html: {\r\n\t\t files: ['index.html'],\r\n\t\t tasks: ['htmlhint']\r\n\t\t }\r\n\t\t},\r\n\t\tuglify: {\r\n\t\t build: {\r\n\t\t files: {\r\n\t\t 'build\/js\/base.min.js': ['assets\/js\/base.js']\r\n\t\t }\r\n\t\t }\r\n\t\t},\r\n\t\twatch: {\r\n\t\t js: {\r\n\t\t files: ['assets\/js\/base.js'],\r\n\t\t tasks: ['uglify']\r\n\t\t }\r\n\t\t},\r\n\t\t\/* scss *\/\r\n\t\r\n\t\tcssc: {\r\n\t\t build: {\r\n\t\t options: {\r\n\t\t consolidateViaDeclarations: true,\r\n\t\t consolidateViaSelectors: true,\r\n\t\t consolidateMediaQueries: true\r\n\t\t },\r\n\t\t files: {\r\n\t\t 'build\/css\/master.css': 'build\/css\/master.css'\r\n\t\t }\r\n\t\t }\r\n\t\t},\r\n\r\n\t\tcssmin: {\r\n\t\t build: {\r\n\t\t src: 'build\/css\/master.css',\r\n\t\t dest: 'build\/css\/master.css'\r\n\t\t }\r\n\t\t},\r\n\r\n\t\tsass: {\r\n\t\t build: {\r\n\t\t files: {\r\n\t\t 'build\/css\/master.css': 'assets\/sass\/master.scss'\r\n\t\t }\r\n\t\t }\r\n\t\t},\r\n\t\r\n\t\timagemin: {\r\n\t\t dynamic: {\r\n\t\t files: [{\r\n\t\t expand: true,\r\n\t\t cwd: 'assets\/images\/',\r\n\t\t src: ['**\/*.{png,jpg,gif,JPG}'],\r\n\t\t dest: 'build\/images'\r\n\t\t }]\r\n\t\t }\r\n\t\t}\r\n\t\r\n\t}); \/* grunt init *\/\r\n\r\n\r\n\t\tgrunt.loadNpmTasks('grunt-contrib-imagemin');\r\n\t grunt.registerTask('default', ['imagemin']);\r\n\t\tgrunt.registerTask('buildcss', ['sass', 'cssc', 'cssmin']);\r\n\r\n\t};\r\n<\/pre>\nEn savoir plus<\/h2>\n
- \n
- Install Grunt JS on a Mac \u2013 Tutorial
http:\/\/www.codebelt.com\/javascript\/install-grunt-js-on-a-mac\/<\/a><\/li>\n- Grunt Tricks: Part One
http:\/\/dontkry.com\/posts\/code\/grunt-tricks.html<\/a><\/li>\n- Supercharging your Gruntfile
http:\/\/www.html5rocks.com\/en\/tutorials\/tooling\/supercharging-your-gruntfile\/<\/a><\/li>\n- Optimizing Images with Grunt
http:\/\/blog.grayghostvisuals.com\/grunt\/image-optimization\/<\/a><\/li>\n- Rien \u00e0 voir mais int\u00e9ressant quand m\u00eame pour les primatologues en herbe: Chimps learn new grunt for ‘apple’
http:\/\/www.bbc.com\/news\/science-environment-31128237<\/a><\/li>\n- Getting started de gruntjs.com
http:\/\/gruntjs.com\/getting-started<\/a><\/li>\n- Introducing Grunt
http:\/\/bocoup.com\/weblog\/introducing-grunt\/<\/a><\/li>\n- How to Setup Bower in Your Next Project
http:\/\/code.tutsplus.com\/tutorials\/how-to-setup-bower-in-your-next-project–cms-20526<\/a><\/li>\n- Grunt pour ceux qui pensent que Grunt est compliqu\u00e9. Version fran\u00e7aise de l’article ci-dessous
http:\/\/la-cascade.ghost.io\/grunt-pour-ceux-qui-pensent-que-grunt-est-complique\/<\/a><\/li>\n- Grunt for People Who Think Things Like Grunt are Weird and Hard
http:\/\/24ways.org\/2013\/grunt-is-not-weird-and-hard\/<\/a><\/li>\n- Pour utiliser le plugin LiveReload, parfois utile pour voir les changements en temps r\u00e9els effectu\u00e9s \u00e0 l’aide de Grunt
http:\/\/feedback.livereload.com\/knowledgebase\/articles\/86242-how-do-i-install-and-use-the-browser-extensions-<\/a><\/li>\n- Un tr\u00e8s bon exemple pour “Minify PNG and JPEG images”
https:\/\/github.com\/gruntjs\/grunt-contrib-imagemin<\/a><\/li>\n- Get Up And Running With Grunt
http:\/\/www.smashingmagazine.com\/2013\/10\/29\/get-up-running-grunt\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"En fait l’origine de ce billet \u00e9tait de tirer profit de MEAN.JS ou de MEAN.IO bref de toutes des facilit\u00e9s et nouveaut\u00e9s offertes par cet… <\/p>\n
- Grunt Tricks: Part One
- Install Grunt JS on a Mac \u2013 Tutorial
- Une suite de 4 excellents articles, tr\u00e8s bonne entr\u00e9e en mati\u00e8re sur MEAN Mastering MEAN: Introducing the MEAN stack<\/a><\/li>\n<\/ul>\n