我想使用MEAN JavaScript堆栈,但我注意到有两个不同的堆栈,它们都有自己的网站和安装方法:MEAN .js和MEAN .io。所以我开始问自己这个问题:“我该用哪一个?”
所以为了回答这个问题,我问社区是否可以解释这两者之间的区别?如果可能的话,有利有弊?因为他们在我看来很像。
我想使用MEAN JavaScript堆栈,但我注意到有两个不同的堆栈,它们都有自己的网站和安装方法:MEAN .js和MEAN .io。所以我开始问自己这个问题:“我该用哪一个?”
所以为了回答这个问题,我问社区是否可以解释这两者之间的区别?如果可能的话,有利有弊?因为他们在我看来很像。
当前回答
首先,MEAN是MongoDB、Express、Angular和Node.js的首字母缩写。
它通常在“堆栈”中标识这些技术的组合使用。没有所谓的“均值框架”。
Linnovate的Lior Kesos利用了这种混乱。他买了域名MEAN。IO,并把一些代码放在https://github.com/linnovate/mean
幸运的是,他们得到了大量的宣传,关于MEAN的文章和视频越来越多。当你谷歌“mean framework”时,mean。IO是列表中的第一个。
不幸的是,https://github.com/linnovate/mean上的代码似乎设计得很糟糕。
今年2月,我自己也掉进了陷阱。站点意味着。io有一个吸引人的设计,Github回购有1000+星。我根本没想过要质疑它的品质。我开始用它做实验,但没过多久就发现了一些不能工作的东西,以及一些令人费解的代码。
提交历史也非常令人担忧。他们多次重新设计代码和目录结构,合并新的更改太费时了。
两者的优点都意味着。i . io和mean.js代码的优点是它们带有Bootstrap集成。它们还带有Facebook, Github, Linkedin等通过PassportJs和MongoDB后端模型(文章)的示例进行身份验证,与AngularJS的前端模型同步。
Linnovate网站显示:
Linnovate是以色列领先的开源公司 在国内经验丰富的团队,致力于打造高端 开源解决方案。Linnovate是以色列唯一一家 为企业提供全方位的建设和维护服务 他们的下一个网络项目。
从网站上看,他们的核心技能是Drupal(一个PHP内容管理系统),直到最近他们才开始使用Node.js和AngularJS。
最近我在看Mean.js博客,事情变得更清楚了。我的理解是,主要的Javascript开发人员(Amos Haviv)离开Linnovate去做MEAN. js。io项目的开发人员是Node.js的新手,他们正在慢慢理解事情是如何工作的。
将来情况可能会改变,但现在我会避免使用mean.io。如果你正在寻找一个快速入门的样板文件,Mean.js似乎比mean.io更好。
其他回答
我的比较电子表格的初始权衡表在每个生成器之间进行了全面的一对一比较。所以没有必要再扭曲地挑选你最喜欢的东西来谈论。
这里是generator-angular-fullstack和MEAN.js之间的一个。百分比是基于我个人权重的每个收益的值,其中完美的生成器将是100%
generator- angular- fullstack提供了8%,这是MEANJS.org所没有的
1.9% Client-side end-to-end tests 0.6% factory 0.5% provider 0.4% SASS 0.4% LESS 0.4% Compass 0.4% decorator 0.4% Endpoint subgenerator 0.4% Comments 0.3% FontAwesome 0.3% Run server in debug mode 0.3% Save generator answers to a file 0.2% constant 0.2% Development build script: ...... replace 3rd party deps with CDN versions 0.2% Authentication - Cookie 0.2% Authentication - JSON Web Token (JWT) 0.2% Server-side logging 0.1% Development build script: run tasks in parallel to speed it up 0.1% Development build script: Renames asset files to prevent browser caching 0.1% Development build script: run end to end tests 0.1% Production build script: safe pre-minification 0.1% Production build script: add CSS vendor prefixes 0.1% Heroku deployment automation 0.1% value 0.1% Jade 0.1% Coffeescript 0.1% Serverside authenticated route restriction 0.1% SASS version of Twitter Bootstrap 0.1% Production build script: compress images 0.1% OpenShift deployment automation
MeanJS.org。提供generator- angle -fullstack所没有的9%
3.7% Dedicated/searchable user group: response time mostly under a day 0.4% Generate routes 0.4% Authentication - Oauth 0.4% config 0.4% i18n, localization 0.4% Input application profile 0.3% FEATURE (a.k.a. module, entity, crud-mock) 0.3% Menus system 0.3% Options for making subcomponents 0.3% test - client side 0.3% Javascript performance thing 0.3% Production build script: make static pages for SEO 0.2% Quick install? 0.2% Dedicated/searchable user group 0.1% Development build script: reload build file upon change 0.1% Development build script: coffee files compiled to JS 0.1% controller - server side 0.1% model - server side 0.1% route - server side 0.1% test - server side 0.1% Swig 0.1% Safe from IP Spoofing 0.1% Production build script: uglification 0.0% Approach to views: URLs start with "#!" 0.0% Approach to frontend services and ajax calls: uses $resource
这是MEAN之间的一个。io和MEAN.js的格式
<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>
我很惊讶没有人提到Yeoman生成器角-全栈。 它是第一个Yeoman社区生成器,目前生成器页面上有1490颗星,而Mean.js只有81颗星(诚然,考虑到MEANJS是多么新的,这个比较并不公平)。在我写这篇文章时,它似乎正在积极维护,并且在2.05版本中。与MEANJS不同,它不使用Swig来创建模板。它可以搭在脚手架上,内置护照。
这里是几个应用程序启动器/生成器和其他技术的并排比较,包括MEAN.js, MEAN。Io,和cleverstack。只要有时间,我就会不断添加替代方案,而在这种情况下,潜在的好处也在不断增加。今天已经上升到1600左右。如果有人想帮助提高准确性或完整性,请点击下一个链接,就你知道的事情做一份问卷调查。
比较应用技术项目
从这个数据库中,系统生成如下报告:
MeanJS vs MeanIO权衡报告
首先,MEAN是MongoDB、Express、Angular和Node.js的首字母缩写。
它通常在“堆栈”中标识这些技术的组合使用。没有所谓的“均值框架”。
Linnovate的Lior Kesos利用了这种混乱。他买了域名MEAN。IO,并把一些代码放在https://github.com/linnovate/mean
幸运的是,他们得到了大量的宣传,关于MEAN的文章和视频越来越多。当你谷歌“mean framework”时,mean。IO是列表中的第一个。
不幸的是,https://github.com/linnovate/mean上的代码似乎设计得很糟糕。
今年2月,我自己也掉进了陷阱。站点意味着。io有一个吸引人的设计,Github回购有1000+星。我根本没想过要质疑它的品质。我开始用它做实验,但没过多久就发现了一些不能工作的东西,以及一些令人费解的代码。
提交历史也非常令人担忧。他们多次重新设计代码和目录结构,合并新的更改太费时了。
两者的优点都意味着。i . io和mean.js代码的优点是它们带有Bootstrap集成。它们还带有Facebook, Github, Linkedin等通过PassportJs和MongoDB后端模型(文章)的示例进行身份验证,与AngularJS的前端模型同步。
Linnovate网站显示:
Linnovate是以色列领先的开源公司 在国内经验丰富的团队,致力于打造高端 开源解决方案。Linnovate是以色列唯一一家 为企业提供全方位的建设和维护服务 他们的下一个网络项目。
从网站上看,他们的核心技能是Drupal(一个PHP内容管理系统),直到最近他们才开始使用Node.js和AngularJS。
最近我在看Mean.js博客,事情变得更清楚了。我的理解是,主要的Javascript开发人员(Amos Haviv)离开Linnovate去做MEAN. js。io项目的开发人员是Node.js的新手,他们正在慢慢理解事情是如何工作的。
将来情况可能会改变,但现在我会避免使用mean.io。如果你正在寻找一个快速入门的样板文件,Mean.js似乎比mean.io更好。
它们本质上是一样的……他们都使用swig作为模板,他们都使用karma和mocha进行测试,护照集成,nodemon等。
为什么如此相似?js是Mean的一个分支。IO和这两个项目都是由同一个人发起的…的意思。io现在在Linnovate公司的保护伞下,看起来就像那个家伙(Amos Haviv)停止了与该公司的合作,并开始了Mean.js。你可以在这里读到更多的原因。
现在…你现在可以看到的主要(或小)差异是:
脚手架和样板生成
的意思。IO使用自定义命令行工具'mean' js使用Yeoman生成器
模块化
的意思。IO使用更独立的节点包模块性,在模块中包含客户端和服务器文件。 js只在前端使用模块(用于angular),并将它们与Express连接起来。尽管他们也在研究垂直模块……
构建系统
的意思。IO最近转向了gulp js使用grunt
部署
它们在各自的repo和Mean中都有Dockerfiles。io在谷歌计算引擎上有一键式安装,而Mean.js也可以在Digital Ocean上一键式安装部署。
文档
的意思。IO有ok文档 Mean.js有很棒的文档
社区
的意思。IO有一个更大的社区,因为它是最初的样板 Mean.js的势头较弱,但增长稳定
就个人而言,我更喜欢MeanJS的理念和开放性,而更喜欢MeanIO的吸引力和模块/包方法。两者都很好,最后你可能会修改它们,所以选择其中一个不会错。把它们作为一个起点,作为一个学习练习。
替代的“均值”解决方案
MEAN是一种通用的方法(由Valeri Karpov创造),用来描述以“Mongo + Express + Angular + Node”为栈基础的样板文件/框架。您可以找到使用其他名称的具有此堆栈的框架,其中一些非常适合RAD(快速应用程序开发)和构建spa。例如:
流星。现在有了官方的Angular支持,它代表了一个很棒的MEAN堆栈 环回(主要Node.js核心贡献者和Express维护者) Generator Angular Fullstack Sails.js Cleverstack 部署,等等(还有更多)
你还有Hackathon Starter。它没有“MEAN”(它是“MEN”),但它很酷。
玩得开心!