MEAN JavaScript 스택을 사용하고 싶었지만 자체 웹 사이트 및 설치 방법이있는 두 가지 스택이 있습니다. mean.js 및 mean.io. 그래서 나는 "나는 어느 것을 사용해야합니까?"라는 질문을 스스로에게 내놓았습니다.
이 질문에 답하기 위해이 두 가지의 차이점이 무엇인지 설명 할 수 있는지 커뮤니티에 문의하십시오. 그리고 가능한 장단점? 그들은 나에게 매우 비슷하게 보이기 때문에.
답변:
그들은 본질적으로 동일합니다 ... 둘 다 템플릿 화를 위해 swig를 사용하고 테스트, 여권 통합, nodemon 등을 위해 카르마와 모카를 사용합니다.
왜 그렇게 비슷한가요? Mean.js는 Mean.io의 포크이며 두 이니셔티브는 같은 사람에 의해 시작되었습니다 ... Mean.io는 이제 Linnovate 회사의 우산 아래에 있으며 그 사람 (Amos Haviv) 이이 회사와의 협력을 중단 한 것처럼 보입니다. Mean.js를 시작했습니다. 이유에 대한 자세한 내용은 여기를 참조하십시오 .
자 ... 지금 당장 볼 수있는 주요한 차이점은 다음과 같습니다.
비계 및 보일러 생성
Mean.io는 'mean'이라는 사용자 지정 cli 도구를 사용합니다.
Mean.js는 Yeoman Generators를 사용합니다
모듈성
Mean.io는 모듈 내부의 클라이언트 및 서버 파일과 함께보다 독립적 인 노드 패키지 모듈성을 사용합니다.
Mean.js는 프론트 엔드 (각도)에서 모듈을 사용하고 Express와 연결합니다. 그들은 수직 모듈에서도 일하고 있었지만 ...
빌딩 시스템
Mean.io는 최근에 꿀꺽 꿀꺽
움직였습니다.
전개
둘 다 각각의 저장소에 Dockerfile을 가지고 있으며 Mean.io는 Google Compute Engine 에 한 번의 클릭으로 설치되는 반면, Mean.js는 Digital Ocean에 한 번의 클릭으로 설치할 수 있습니다 .
선적 서류 비치
Mean.io에 확인 된 문서가 있음
Mean.js에 대한 훌륭한 문서가 있음
커뮤니티
원래 상용구 이후 Mean.io 더 큰 공동체들이있다
Mean.js 덜 모멘텀하지만 꾸준한 성장을 가지고
개인적으로, 나는 MeanJS의 철학과 개방성을 더 좋아하고 MeanIO의 견인력 및 모듈 / 패키지 접근법을 더 좋아합니다. 둘 다 좋으며 아마도 수정을 끝내므로 둘 중 하나를 잘못 선택하지 않아도됩니다. 시작점과 학습 연습으로 사용하십시오.
MEAN은 "Mongo + Express + Angular + Node"를 스택의 기반으로하는 상용구 / 프레임 워크를 설명 하는 일반적인 방법입니다 ( Valeri Karpov에 의해 공동으로 ). 이 스택에서 다른 명칭을 사용하는 프레임 워크를 찾을 수 있습니다. 그 중 일부는 RAD (Rapid Application Development) 및 SPA 구축에 정말 좋습니다. 예 :
또한 Hackathon Starter 도 있습니다 . 그것은 MEAN ( 'MEN')이 없지만 흔들린다 ..
즐기세요!
우선 MEAN 은 M ongoDB, E xpress, A ngular 및 N ode.js의 약어입니다.
그것은 일반적으로 는 A "스택"이러한 기술의 사용 결합하여 식별합니다. "와 같은 어떤 그런 일이 없습니다 MEAN 프레임 워크".
리 오르 Kesos 에서 Linnovate는 이 혼란을 이용했다. 그는 도메인 MEAN.io를 구입하고 https://github.com/linnovate/mean에 코드를 넣었습니다.
그들은 다행스럽게도 많은 홍보를 받았으며, MEAN에 관한 기사와 비디오가 점점 많아지고 있습니다. Google "평균 프레임 워크"인 경우 mean.io가 목록에서 첫 번째입니다.
불행히도 https://github.com/linnovate/mean 의 코드 는 제대로 엔지니어링되지 않은 것 같습니다 .
2 월에 나는 함정에 빠졌다. 사이트 mean.io는 눈에 띄는 디자인을 가지고 있었고 Github 저장소는 1000 개 이상의 별을 가졌습니다. 품질에 의문을 제기하는 아이디어는 내 마음을 통과하지 못했습니다. 나는 그것을 실험하기 시작했지만 작동하지 않는 것들과 수수께끼를 푸는 데 너무 오래 걸리지 않았습니다.
커밋 히스토리도 꽤 중요했습니다. 코드와 디렉토리 구조를 여러 번 다시 엔지니어링했으며 새로운 변경 사항을 병합하는 데 너무 많은 시간이 걸립니다.
mean.io 및 mean.js 코드의 장점은 부트 스트랩 통합과 함께 제공된다는 것입니다. 또한 PassportJs를 통한 Facebook, Github, Linkedin 등의 인증 과 MongoDB의 백엔드에있는 모델 (Article)의 예가 AngularJS를 사용하여 프런트 엔드 모델과 동기화됩니다.
Linnovate의 웹 사이트에 따르면 :
Linnovate는 이스라엘에서 가장 오픈 소스 회사이며, 가장 경험이 풍부한 팀이 있으며 최고급 오픈 소스 솔루션 제작에 전념하고 있습니다. Linnovate는 이스라엘에서 유일하게 다음 웹 프로젝트를 구축하고 유지 관리하기 위해 AZ 서비스를 제공하는 회사입니다.
웹 사이트에서 핵심 기술 세트는 Drupal (PHP 컨텐츠 관리 시스템)이며 최근에는 Node.js 및 AngularJS를 사용하기 시작했습니다.
최근에 Mean.js 블로그를 읽고 있었고 상황이 더 명확 해졌습니다. 내 주요 이해는 주요 자바 스크립트 개발자 (Amos Haviv)가 Linnovate가 Mean.js를 떠나 MEAN.io 프로젝트를 떠나 초보 Node.js 개발자 인 사람들이 일을 어떻게해야하는지 이해하는 데 어려움을 겪고 있다는 것을 의미합니다.
미래에는 상황이 바뀔 수 있지만 지금은 mean.io를 사용하지 않는 것이 좋습니다. 빠른 시작을위한 상용구를 찾고 있다면 Mean.js가 mean.io보다 더 나은 옵션 인 것 같습니다.
다음은 여러 애플리케이션 스타터 / 제너레이터와 MEAN.js, MEAN.io 및 cleverstack을 포함한 기타 기술을 나란히 비교 한 것입니다. 시간을 찾음에 따라 대안을 계속 추가하고 있으며 그에 따라 잠재적으로 제공되는 혜택 목록도 계속 증가하고 있습니다. 오늘날의 정확성은 약 1600입니다. 누구나 정확성이나 완전성을 향상 시키려면 다음 링크를 클릭하고 알고있는 것에 대한 설문지를 작성하십시오.
이 데이터베이스에서 시스템은 다음과 같은 보고서를 생성합니다.
비교 스프레드 시트 의 스타터 트레이드 오프 시트 에는 각 생성기 간의 포괄적 인 일대일 비교가 있습니다. 따라서 더 이상 좋아하는 것에 대해 좋은 말을 왜곡 할 필요가 없습니다.
다음은 generator-angular-fullstack과 MEAN.js 사이의 것입니다. 백분율은 개인 가중치를 기준으로 각 혜택에 대한 값이며, 완벽한 발전기는 100 %입니다.
generator-angular-fullstack은 MEANJS.org가 제공하지 않는 8 %를 제공합니다
MeanJS.org. 제너레이터-풀 스택이 제공하지 않는 9 % 제공
다음은 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 generator angular-fullstack을 언급 한 사람이 아무도 없습니다 . Yeoman 커뮤니티 생성기 중 1 위이며, 현재 발전기 페이지 에 1490 개의 별 과 Mean.js의 81 개의 별이 있습니다 (새로운 MEANJS가 어떻게되는지에 대한 공정한 비교는 아닙니다). 적극적으로 유지 관리되는 것으로 보이며 이것을 작성할 때 버전 2.05에 있습니다. MEANJS와 달리 템플릿에 Swig를 사용하지 않습니다. 여권이 내장 된 발판이 될 수 있습니다.