Différence entre MEAN.js et MEAN.io
Je voulais utiliser la pile JavaScript MEAN, mais j'ai remarqué qu'il existe deux piles différentes avec leur propre site Web et leurs propres méthodes d'installation: mean.js et mean.io. Je suis donc venu me poser cette question: "Lequel dois-je utiliser?".
Donc, pour répondre à cette question, je demande à la communauté si vous pouvez expliquer quelles sont les différences entre ces deux-là. Et si possible le pour et le contre? Parce qu'ils me ressemblent beaucoup.
Ils sont essentiellement les mêmes ... Ils utilisent tous les deux swig pour la modélisation, le karma et le moka pour les tests, l’intégration de passeports, la Nodemon, etc.
Pourquoi si semblable? Mean.js est un fork de Mean.io et les deux initiatives ont été lancées par le même gars ... Mean.io est maintenant sous l'égide de la société Linnovate et ressemble au gars (Amos Haviv) a cessé sa collaboration avec cette société et a lancé Mean.js. Vous pouvez en savoir plus sur les raisons ici .
Maintenant ... les principales (ou petites) différences que vous pouvez voir sont les suivantes:
ECHAFAUDAGE ET GENERATION DE PLAQUE DE CHAUDIERE
Mean.io utilise un outil client personnalisé nommé 'moyen'
Mean.js utilise des générateurs Yeoman
MODULARITÉ
Mean.io utilise une modularité de paquets de nœuds plus autonome avec des fichiers client et serveur dans les modules.
Mean.js utilise des modules juste à l’avant (pour angular), et les connecte avec Express. Bien qu'ils travaillaient aussi sur des modules verticaux ...
BUILD SYSTEM
Mean.io a récemment déménagé à avaler
Mean.js utilise grunt
DÉPLOIEMENT
Tous les deux ont des fichiers Docker dans leurs dépôts respectifs, et Mean.io a une installation en un clic sur Google Compute Engine , tandis que Mean.js peut également être déployé avec installation en un clic sur Digital Ocean .
DOCUMENTATION
Mean.io a la documentation correcte
Mean.js a une documentation impressionnante
COMMUNAUTÉ
Mean.io a une plus grande communauté depuis que c'était la chaudière originale
Mean.js a moins de dynamique mais une croissance soutenue
Sur le plan personnel, j'aime davantage la philosophie et l'ouverture de MeanJS et plus l'approche de traction et de modules/packages de MeanIO. Les deux sont gentils, et vous finirez probablement par les modifier, vous ne pouvez donc pas vous tromper en choisissant l'un ou l'autre. Prenez-les simplement comme point de départ et comme exercice d'apprentissage.
SOLUTIONS ALTERNATIVES "MOYENNES"
MEAN est un moyen générique (inventé par Valeri Karpov ) pour décrire un bâti/châssis standard qui prend "Mongo + Express + Angular + Nœud" comme base de la pile. Avec cette pile, vous pouvez trouver des frameworks qui utilisent d’autres dénominations, certaines très utiles pour RAD (développement rapide d’applications) et la création de SPA. Par exemple:
- météore. Maintenant avec officiel support angulaire , représente un grande pile MEAN
- StrongLoop Loopback (contributeurs principaux de Node.js et mainteneurs Express )
- Generator Angular Fullstack
- Sails.js
- Cleverstack
- Deployd, etc (il y en a plus)
Vous avez également Hackathon Starter . Il n'a pas A de MOYENNE (c'est 'MEN'), mais ça déchire ..
S'amuser!
Tout d'abord, MEAN est un acronyme pour M ongoDB, E xpress, A ngular et N ode.js.
Il identifie de manière générique l'utilisation combinée de ces technologies dans une "pile". Il n’existe pas de " le cadre MEAN".
Lior Kesos à Linnovate a profité de cette confusion. Il a acheté le domaine MEAN.io et a mis du code sur https://github.com/linnovate/mean
Ils ont heureusement reçu beaucoup de publicité et il y a de plus en plus d'articles et de vidéos sur MEAN. Lorsque vous utilisez Google "framework", mean.io est le premier de la liste.
Malheureusement, le code sur https://github.com/linnovate/mean semble mal conçu .
En février je suis tombé dans le piège moi-même. Le site mean.io avait un design accrocheur et le dépôt Github comptait plus de 1000 étoiles. L'idée de remettre en question la qualité ne m'a même pas traversé l'esprit. J'ai commencé à expérimenter avec, mais il n'a pas fallu trop longtemps pour trébucher sur des choses qui ne fonctionnaient pas et sur des morceaux de code déroutants.
L’histoire du commit était également jolie. Ils ont réorganisé le code et la structure de répertoires plusieurs fois, et la fusion des nouvelles modifications prend trop de temps.
Le bon côté des codes mean.io et mean.js est qu’ils viennent avec l’intégration Bootstrap. Ils viennent également avec une authentification Facebook, Github, Linkedin etc. via PassportJs et un exemple de modèle (Article) sur le backend de MongoDB synchronisé avec le modèle frontal avec AngularJS.
Selon le site Web de Linnovate:
Linnovate est la principale société open source en Israël, avec l'équipe la plus expérimentée du pays, dédiée à la création de solutions open source haut de gamme. Linnovate est la seule société en Israël à fournir des services AZ aux entreprises pour la construction et la maintenance de leur prochain projet Web.
D'après le site Web, leur ensemble de compétences de base est Drupal (un système de gestion de contenu PHP) et ce n'est que récemment qu'ils ont commencé à utiliser Node.js et AngularJS.
Dernièrement, je lisais le Mean.js Blog et les choses sont devenues plus claires. D'après ce que je sais, le développeur principal de Javascript (Amos Haviv) a quitté Linnovate pour travailler sur Mean.js en quittant le projet MEAN.io avec des développeurs novices de Node.js qui ralentissent leur compréhension du fonctionnement supposé des choses.
À l'avenir, les choses pourraient changer, mais pour le moment, j'éviterais d'utiliser mean.io. Si vous recherchez un passe-partout pour un démarrage rapide, Mean.js semble être une meilleure option que mean.io.
Voici une comparaison côte à côte de plusieurs démarreurs/générateurs d’application et d’autres technologies, notamment MEAN.js, MEAN.io et cleverstack. Je continue d’ajouter des alternatives au fur et à mesure que je trouve le temps et la liste des avantages potentiels apportés ne cesse de s'allonger. Aujourd'hui, il est environ 1600. Si quelqu'un veut aider à améliorer son exactitude ou son exhaustivité, cliquez sur le lien suivant et remplissez un questionnaire à propos de quelque chose que vous connaissez.
Projet de comparaison de technologies d'application
À partir de cette base de données, le système génère des rapports tels que:
La feuille de compromis de démarrage de mon tableur de comparaison propose des comparaisons individuelles détaillées entre chaque générateur. Il n’est donc plus nécessaire de choisir de façon distordue de belles choses à dire sur votre chanson préférée.
Voici celui entre générateur-angular-fullstack et MEAN.js. Les pourcentages sont des valeurs pour chaque avantage basées sur mes pondérations personnelles, où un générateur parfait serait 100%
générateur- angulaire- fullstack offre 8% que MEANJS.org ne
- 1,9% tests de bout en bout côté client
- 0,6% en usine
- 0.5% fournisseur
- 0,4% de SASS
- 0.4% MOINS
- 0.4% Compass
- 0,4% décorateur
- 0.4% sous-générateur de point final
- 0.4% Commentaires
- 0,3% FontAwesome
- 0.3% Exécuter le serveur en mode débogage
- 0.3% Enregistrer les réponses du générateur dans un fichier
- 0,2% constant
- 0.2% Script de développement: ...... remplacer les dépôts de tiers par des versions CDN
- 0.2% Authentification - Cookie
- Authentification à 0,2% - Jeton Web JSON (JWT)
- 0,2% de journalisation côté serveur
- 0.1% Script de développement: exécuter des tâches en parallèle pour l'accélérer
- 0.1% Script de développement: Renomme les fichiers d'actif pour empêcher la mise en cache du navigateur.
- 0.1% Script de développement: tests exécutés de bout en bout
- 0.1% Script de production: pré-minification sécurisée
- 0.1% Script de production: ajout des préfixes de vendeurs CSS
- Automatisation du déploiement de Heroku à 0,1%
- 0,1% valeur
- 0,1% de jade
- 0,1% de café
- 0,1% restriction de route authentifiée par le serveur
- Version SASS de Twitter Bootstrap à 0,1%
- 0.1% Script de production: compresser les images
- 0.1% d'automatisation du déploiement OpenShift
MeanJS.org. offre 9% que générateur-angulaire-fullstack ne
- 3,7% Groupe d'utilisateurs dédiés/interrogeables: temps de réponse généralement inférieur à un jour
- 0.4% Générer des itinéraires
- 0.4% Authentification - Oauth
- 0.4% config
- 0.4% i18n, localisation
- 0,4% profil d'application d'entrée
- 0.3% FEATURE (module ak, une entité, crud-mock)
- 0,3% système de menus
- 0.3% Options pour la création de sous-composants
- 0,3% test - côté client
- 0.3% de performances Javascript
- 0.3% Script de production: création de pages statiques pour le référencement
- 0,2% installation rapide?
- 0,2% groupe d'utilisateurs dédiés/interrogeables
- 0.1% Script de développement: recharger le fichier après modification
- 0.1% Script de développement: fichiers café compilés pour JS
- 0,1% contrôleur - côté serveur
- 0,1% modèle - côté serveur
- 0,1% route - côté serveur
- 0,1% test côté serveur
- 0.1% Swig
- 0.1% sûr de l'usurpation d'adresse IP
- 0,1% Script de production: uglification
- 0.0% Approche des vues: les URL commencent par "#!"
- 0,0% Approche des services frontaux et des appels ajax: utilise $ resource
Voici celui entre MEAN.io et MEAN.js dans un format plus lisible
<table border="1" cellpadding="10"><tbody><tr><td valign="top" width="33%"><br><br><h1>MeanJS.org. provides these benefits that MEAN.io. doesn't</h1><br><br><b>Help</b>:<br> * Dedicated/searchable user group for questions, using github issues<br> * There's a book about it<br><b>File Organization</b>:<br> * Basic sourcecode organization, module(->submodule)->side<br> * Module directories hold directives<br><b>Code Modularization</b>:<br> * Approach to AngularJS modules, Only one module definition per file<br> * Approach to AngularJS modules, Don’t alter a module other than where it is defined<br><b>Model</b>:<br> * Object-relational mapping<br> * Server-side validation, server-side example<br> * Client side validation, using Angular 1.3<br><b>View</b>:<br> * Approach to AngularJS views, Directives start with "data-"<br> * Approach to data readiness, Use ng-init<br><b>Control</b>:<br> * Approach to frontend routing or state changing, URLs start with '#!'<br> * Approach to frontend routing or state changing, Use query parameters to store route state<br><b>Support for things</b>:<br> * Languages, LESS<br> * Languages, SASS<br><b>Syntax, language and coding</b>:<br> * JavaScript 5 best practices, Don't use "new"<br><b>Testing</b>:<br> * Testing, using Mocha<br> * End-to-end tests<br> * End-to-end tests, using Protractor<br> * Continuous integration (CI), using Travis<br><b>Development and debugging</b>:<br> * Command line interface (CLI), using Yeoman<br><b>Build</b>:<br> * Build configurations file(s)<br> * Deployment automation, using Azure<br> * Deployment automation, using Digital Ocean, screencast of it<br> * Deployment automation, using Heroku, screencast of it<br><b>Code Generation</b>:<br> * Input application profile<br> * Quick install?<br> * Options for making subcomponents<br> * config generator<br> * controller (client side) generator<br> * directive generator<br> * filter generator<br> * route (client side) generator<br> * service (client side) generator<br> * test - client side<br> * view or view partial generator<br> * controller (server side) generator<br> * model (server side) generator<br> * route (server side) generator<br> * test (server side) generator<br><b>Implemented Functionality</b>:<br> * Account Management, Forgotten Password with Resetting<br> * Chat<br> * CSV processing<br> * E-mail sending system<br> * E-mail sending system, using Nodemailer<br> * E-mail sending system, using its own e-mail implementation<br> * Menus system, state-based<br> * Paypal integration<br> * Responsive design<br> * Social connections management page<br><b>Performance</b>:<br> * Creates a favicon<br><b>Security</b>:<br> * Safe from IP Spoofing<br> * Authorization, Access Contol List (ACL)<br> * Authentication, Cookie<br> * Websocket and RESTful http share security policies<br><br><br></td><td valign="top" width="33%"><br><br><h1>MEAN.io. provides these benefits that MeanJS.org. doesn't</h1><br><br><b>Quality</b>:<br> * Sponsoring company<br><b>Help</b>:<br> * Docs with flatdoc<br><b>Code Modularization</b>:<br> * Share code between projects<br> * Module manager<br><b>View</b>:<br> * Approach to data readiness, Use state.resolve()<br><b>Control</b>:<br> * Approach to frontend code loading, Use AMD with Require.js<br> * Approach to frontend code loading, using wiredep<br> * Approach to error handling, Server-side logging<br><b>Client/Server Communication</b>:<br> * Centralized event handling<br> * Approach to XHR calls, using $http and $q<br><b>Syntax, language and coding</b>:<br> * JavaScript 5 best practices, Wrap code in an IIFE (SEAF, SIAF)<br><b>Development and debugging</b>:<br> * API introspection report and testing interface, using Swagger<br> * Command line interface (CLI), using Independent command line interface<br><b>Build</b>:<br> * Development build, add IIFEs (SEAF, SIAF) to executable copies of code<br> * Deployment automation<br> * Deployment automation, using Heroku<br><b>Code Generation</b>:<br> * Scaffolding undo (mean package -d <name>)<br> * FEATURE (a.k.a. module, entity) generator, Menu items added for new features<br><b>Implemented Functionality</b>:<br> * Admin page for users and roles<br> * Content Management System (Use special data-bound directives in your templates.<br>Switch to edit mode and you can edit the values right where you see them)<br> * File Upload<br> * i18n, localization<br> * Menus system, submenus<br> * Search<br> * Search, actually works with backend API<br> * Search, using Elastic Search<br> * Styles, using Bootstrap, using UI Bootstrap AngularJS directives<br> * Text (WYSIWYG) Editor<br> * Text (WYSIWYG) Editor, using medium-editor<br><b>Performance</b>:<br> * Instrumentation, server-side<br><b>Security</b>:<br> * Serverside authenticated route restriction<br> * Authentication, using Oauth, Link multiple Oauth strategies to one account<br> * Authentication, JSON Web Token (JWT)<br><br><br></td><td valign="top" width="33%"><br><br><h1>MEAN.io. and MeanJS.org. both provide these benefits</h1><br><br><b>Quality</b>:<br> * Version Control, using git<br><b>Platforms</b>:<br> * Client-side JS Framework, using AngularJS<br> * Frontend Server/ Framework, using Node.JS<br> * Frontend Server/ Framework, using Node.JS, using Express<br> * API Server/ Framework, using NodeJS<br> * API Server/ Framework, using NodeJS, using Express<br><b>Help</b>:<br> * Dedicated/searchable user group for questions<br> * Dedicated/searchable user group for questions, using Google Groups<br> * Dedicated/searchable user group for questions, using Facebook<br> * Dedicated/searchable user group for questions, response time mostly under a day<br> * Example application<br> * Tutorial screencast in English<br> * Tutorial screencast in English, using Youtube<br> * Dedicated chatroom<br><b>File Organization</b>:<br> * Basic sourcecode organization, module(->submodule)->side, with type subfolders<br> * Module directories hold controllers<br> * Module directories hold services<br> * Module directories hold templates<br> * Module directories hold unit tests<br> * Separate route configuration files for each module<br><b>Code Modularization</b>:<br> * Modularized Functionality<br> * Approach to AngularJS modules, No global 'app' module variable<br> * Approach to AngularJS modules, No global 'app' module variable without an IIFE<br><b>Model</b>:<br> * Setup of persistent storage<br> * Setup of persistent storage, using NoSQL db<br> * Setup of persistent storage, using NoSQL db, using MongoDB<br><b>View</b>:<br> * No XHR calls in controllers<br> * Templates, using Angular directives<br> * Approach to data readiness, prevents Flash of Unstyled/compiled Content (FOUC)<br><b>Control</b>:<br> * Approach to frontend routing or state changing, example of it<br> * Approach to frontend routing or state changing, State-based routing<br> * Approach to frontend routing or state changing, State-based routing, using ui-router<br> * Approach to frontend routing or state changing, HTML5 Mode<br> * Approach to frontend code loading, using angular.bootstrap()<br><b>Client/Server Communication</b>:<br> * Serve status codes only as responses<br> * Accept nested, JSON parameters<br> * Add timer header to requests<br> * Support for signed and encrypted cookies<br> * Serve URLs based on the route definitions<br> * Can serve headers only<br> * Approach to XHR calls, using JSON<br> * Approach to XHR calls, using $resource (angular-resource)<br><b>Support for things</b>:<br> * Languages, JavaScript (server side)<br> * Languages, Swig<br><b>Syntax, language and coding</b>:<br> * JavaScript 5 best practices, Use 'use strict'<br><b>Tool Configuration/customization</b>:<br> * Separate runtime configuration profiles<br><b>Testing</b>:<br> * Testing, using Jasmine<br> * Testing, using Karma<br> * Client-side unit tests<br> * Continuous integration (CI)<br> * Automated device testing, using Live Reload<br> * Server-side integration & unit tests<br> * Server-side integration & unit tests, using Mocha<br><b>Development and debugging</b>:<br> * Command line interface (CLI)<br><b>Build</b>:<br> * Build-time Dependency Management, using npm<br> * Build-time Dependency Management, using bower<br> * Build tool / Task runner, using Grunt<br> * Build tool / Task runner, using gulp<br> * Development build, script<br> * Development build, reload build script file upon change<br> * Development build, copy assets to build or dist or target folder<br> * Development build, html page processing<br> * Development build, html page processing, inject references by searching directories<br> * Development build, html page processing, inject references by searching directories, injects js references<br> * Development build, html page processing, inject references by searching directories, injects css references<br> * Development build, LESS/SASS/etc files are linted, compiled<br> * Development build, JavaScript style checking<br> * Development build, JavaScript style checking, using jshint or jslint<br> * Development build, run unit tests<br> * Production build, script<br> * Production build, concatenation (aggregation, globbing, bundling) (If you add debug:true to your config/env/development.js the will not be <br>uglified)<br> * Production build, minification<br> * Production build, safe pre-minification, using ng-annotate<br> * Production build, uglification<br> * Production build, make static pages for SEO<br><b>Code Generation</b>:<br> * FEATURE (a.k.a. module, entity) generator (README.md<br>feature css<br>routes<br>controller<br>view<br>additional menu item)<br><b>Implemented Functionality</b>:<br> * 404 Page<br> * 500 Page<br> * Account Management<br> * Account Management, register/login/logout<br> * Account Management, is password manager friendly<br> * Front-end CRUD<br> * Full-stack CRUD<br> * Full-stack CRUD, with Read<br> * Full-stack CRUD, with Create, Update and Delete<br> * Google Analytics<br> * Menus system<br> * Realtime data sync<br> * Realtime data sync, using socket.io<br> * Styles, using Bootstrap<br><b>Performance</b>:<br> * Javascript performance thing<br> * Javascript performance thing, using lodash<br> * One event-loop thread handles all requests<br> * Configurable response caching (Express plugin<br><b>https</b>://www.npmjs.org/package/apicache)<br> * Clustered HTTP sessions<br><b>Security</b>:<br> * JavaScript obfuscation<br> * https<br> * Authentication, using Oauth<br> * Authentication, Basic (With Passport or others)<br> * Authentication, Digest (With Passport or others)<br> * Authentication, Token (With Passport or others)<br></td></tr></tbody></table>Je suis surpris que personne n'ait mentionné le générateur Yeoman angular-fullstack . Il s'agit du premier générateur de communauté Yeoman, avec actuellement 1490 étoiles sur les étoiles) de la page --- (Générateur vs. Les 81 étoiles de Mean.js (ce qui n'est certes pas une comparaison juste compte tenu de la nouvelle valeur de MEANJS). Il semble être activement maintenu et est dans la version 2.05 au moment où j'écris ceci. Contrairement à MEANJS, Swig n’est pas utilisé pour la création de modèles. Il peut être échafaudé avec passeport intégré.