javascript - example - mean stack tutorial español pdf

Diferencia entre MEAN.js y MEAN.io (5)

Aquí hay una comparación lado a lado de varios arrancadores / generadores de aplicaciones y otras tecnologías que incluyen MEAN.js, MEAN.io y cleverstack. Sigo agregando alternativas a medida que encuentro tiempo y, a medida que eso sucede, la lista de beneficios potencialmente proporcionados también sigue creciendo. Hoy es aproximadamente 1600. Si alguien quiere ayudar a mejorar su precisión o integridad, haga clic en el siguiente enlace y haga un cuestionario sobre algo que sepa.

Proyecto de comparación de tecnologías de aplicaciones.

Desde esta base de datos, el sistema genera informes como los siguientes:

Informe de compensación entre MeanJS y MeanIO

Quería usar el MEAN JavaScript Stack, pero noté que hay dos pilas diferentes con su propio sitio web y métodos de instalación: mean.js y mean.io. Así que se me ocurrió esta pregunta: "¿Cuál uso?".

Entonces, para responder a esta pregunta, le pregunto a la comunidad si podría explicar cuáles son las diferencias entre estos dos. Y si es posible pros y contras? Porque se parecen mucho a mí.

En primer lugar, MEAN es un acrónimo de M ongoDB, E xpress, A ngular y N ode.js.

Identifica genéricamente el uso combinado de estas tecnologías en una "pila". No existe tal cosa como " El marco MEAN".

Lior Kesos en Linnovate aprovechó esta confusión. Compró el dominio MEAN.io y puso un código en https://github.com/linnovate/mean

Afortunadamente recibieron mucha publicidad, y cada vez hay más artículos y videos sobre MEAN. Cuando Google "framework de medios", mean.io es el primero en la lista.

Desafortunadamente, el código en https://github.com/linnovate/mean parece mal diseñado .

En febrero caí yo mismo en la trampa. El sitio mean.io tenía un diseño atractivo y el repositorio de Github tenía más de 1000 estrellas. La idea de cuestionar la calidad ni siquiera pasó por mi mente. Comencé a experimentar con él, pero no tardé demasiado en tropezar con cosas que no funcionaban, y piezas de código desconcertantes.

El historial de cometer también fue bastante preocupante. Ellos rediseñaron el código y la estructura del directorio varias veces, y la fusión de los nuevos cambios lleva demasiado tiempo.

Lo bueno de los códigos mean.io y mean.js es que vienen con la integración Bootstrap. También vienen con autenticación en Facebook, Github, Linkedin, etc. a través de PassportJs y un ejemplo de un modelo (artículo) en el backend en MongoDB que se sincroniza con el modelo de frontend con AngularJS.

Según el sitio web de Linnovate:

Linnovate es la empresa líder de código abierto en Israel, con el equipo más experimentado del país, dedicado a la creación de soluciones de código abierto de gama alta. Linnovate es la única compañía en Israel que brinda servicios de AZ para empresas para construir y mantener su próximo proyecto web.

Desde el sitio web parece que su conjunto de habilidades principales es Drupal (un sistema de administración de contenido de PHP) y solo últimamente comenzaron a usar Node.js y AngularJS.

Últimamente estaba leyendo el here y las cosas se here . Tengo entendido que el principal desarrollador de Javascript (Amos Haviv) dejó a Linnovate para trabajar en Mean.js dejando el proyecto MEAN.io con personas que son desarrolladores novatos de Node.js que están ralentizando la comprensión de cómo se supone que funcionan las cosas.

En el futuro, las cosas pueden cambiar, pero por ahora evitaría usar mean.io. Si está buscando una placa de calderas para un arranque rápido, Mean.js parece una mejor opción que mean.io.

Me sorprende que nadie haya mencionado el generador de Yeoman de ángulo-lleno . Es el generador número uno de la comunidad Yeoman, con actualmente 1490 estrellas en la página del generador frente a las 81 estrellas de Mean.js (es cierto que no es una comparación justa dado lo nuevo que es MEANJS). Parece que se mantiene activamente y está en la versión 2.05 mientras escribo esto. A diferencia de MEANJS, no usa Swig para crear plantillas. Se puede andar con pasaporte incorporado.

Son esencialmente lo mismo ... Ambos usan tragos para crear plantillas, ambos usan karma y mocha para las pruebas, la integración de pasaportes, nodemon, etc.

¿Por qué tan similar? Mean.js es una bifurcación de Mean.io y ambas iniciativas fueron iniciadas por el mismo tipo ... Mean.io está ahora bajo el paraguas de la compañía Linnovate y parece que el tipo (Amos Haviv) detuvo su colaboración con esta compañía y comenzó Mean.js. Puedes leer más sobre las razones here .

Ahora ... las principales (o pequeñas) diferencias que puedes ver ahora son:

Andamiaje y generación de calderas.

Mean.io usa una herramienta cli personalizada llamada ''mean''
Mean.js usa los generadores Yeoman

MODULARIDAD

Mean.io utiliza una modularidad de paquetes de nodos más autocontenidos con archivos de clientes y servidores dentro de los módulos.
Mean.js usa módulos solo en el extremo frontal (para angular) y los conecta con Express. Aunque también estaban trabajando en módulos verticales ...

Construir sistema

Mean.io se ha mudado recientemente a trago
Mean.js usa gruñido

DESPLIEGUE

Ambos tienen Dockerfiles en sus repositorios respectivos, y Mean.io tiene instalación con un solo clic en Google Compute Engine , mientras que Mean.js también se puede implementar con una instalación con un solo clic en Digital Ocean .

DOCUMENTACIÓN

Mean.io tiene ok docs
Mean.js tiene documentos IMPRESIONANTES

COMUNIDAD

Mean.io tiene una comunidad más grande ya que era la placa original.
Mean.js tiene menos impulso pero un crecimiento constante.

A nivel personal, me gusta más la filosofía y apertura de MeanJS y más el enfoque de tracción y módulos / paquetes de MeanIO. Ambos son agradables, y es probable que termines de modificarlos, por lo que realmente no puedes equivocarte al elegir uno u otro. Solo tómalos como punto de partida y como ejercicio de aprendizaje.

ALTERNATIVAS SOLUCIONES DE “MEDIO”

MEAN es una forma genérica (acuñada por Valeri Karpov ) para describir un modelo / marco que toma "Mongo + Express + Angular + Node" como la base de la pila. Puede encontrar marcos con esta pila que usan otra denominación, algunos de ellos realmente buenos para RAD (Rapid Application Development) y para construir SPA. P.ej:

Meteor Ahora con soporte Angular oficial, representa una gran pila de MEAN
StrongLoop Loopback (colaboradores principales de Node.js y mantenedores Express )
Generador Angular Fullstack
Sails.js
Cleverstack
Deployd, etc (hay más)

También tienes Hackathon Starter . No tiene una A de SIGNIFICADO (es ''HOMBRES''), pero oscila ..

¡Que te diviertas!

La hoja de Compromisos de inicio de mi hoja de cálculo de comparación tiene comparaciones completas de uno a uno entre cada generador. Por lo tanto, ya no es necesario elegir de forma distorsionada las mejores cosas que decir sobre tu favorito.

Aquí está el que se encuentra entre generator-angular-fullstack y MEAN.js. Los porcentajes son valores para cada beneficio según mis ponderaciones personales, donde un generador perfecto sería 100%

generator- angular- fullstack ofrece un 8% que MEANJS.org no lo hace

1.9% pruebas de extremo a extremo del lado del cliente
0,6% de fábrica
0.5% proveedor
0.4% de SASS
0.4% MENOS
Brújula 0.4%
Decorador 0.4%
Subgenerador de punto final 0.4%
0,4% de comentarios
0.3% FontAwesome
0.3% Ejecutar servidor en modo de depuración
0.3% Guardar las respuestas del generador a un archivo
Constante del 0.2%
0.2% del script de compilación de desarrollo: ...... reemplazar los departamentos de terceros con versiones CDN
0.2% de autenticación - Cookie
Autenticación del 0.2% - JSON Web Token (JWT)
0.2% de registro del lado del servidor
0.1% Desarrollo de secuencia de comandos de desarrollo: ejecutar tareas en paralelo para acelerarlo
0.1% Desarrollo de secuencia de comandos de desarrollo: cambia el nombre de los archivos de activos para evitar el almacenamiento en caché del navegador
0.1% Desarrollo de secuencia de comandos de desarrollo: ejecutar pruebas de extremo a extremo
0.1% Secuencias de compilación de producción: pre-minificación segura
0.1% Secuencias de compilación de producción: agregar prefijos de proveedor de CSS
0,1% de automatización de despliegue Heroku
0.1% del valor
0.1% Jade
0.1% Coffeescript
0.1% Restricción de ruta autenticada en el lado del servidor
Versión 0.1% SASS de Twitter Bootstrap
0.1% del script de construcción de producción: comprimir imágenes
0,1% de automatización de la implementación de OpenShift

MeanJS.org. ofrece un 9% que generador-angular-fullstack no lo hace

3.7% Grupo de usuarios dedicado / con capacidad de búsqueda: tiempo de respuesta mayoritariamente en menos de un día
0.4% Generar rutas.
0.4% de autenticación - Oauth
Config 0.4%
0,4% i18n, localización
0.4% de entrada de perfil de aplicación
0.3% DE LA FUNCIÓN (también conocido como módulo, entidad, simulacro)
Sistema de menús del 0,3%.
0.3% Opciones para hacer subcomponentes.
0.3% de prueba - lado del cliente
Cosa del 0,3% de rendimiento de Javascript
0.3% de script de construcción de producción: hacer páginas estáticas para SEO
0.2% Instalación rápida?
0.2% grupo de usuarios dedicado / investigable
0.1% Desarrollo de script de compilación: volver a cargar el archivo de compilación al cambiar
0.1% Desarrollo de script de compilación: archivos de café compilados a JS
Controlador 0.1% - lado servidor
Modelo 0.1% - lado servidor
Ruta 0.1% - lado servidor
0.1% de prueba - lado del servidor
0.1% Swig
0,1% seguro de IP Spoofing
0.1% del script de construcción de producción: uglification
0.0% Enfoque a las vistas: las URL comienzan con "#!"
Enfoque del 0.0% a los servicios de frontend y ajax llamadas: usa $ recurso

Aquí está el uno entre MEAN.io y MEAN.js en un formato más legible

<table border="1" cellpadding="10"><tbody><tr><td valign="top" width="33%"> <h1>MeanJS.org. provides these benefits that MEAN.io. doesn''t</h1> Help:     * Dedicated/searchable user group for questions, using github issues     * There''s a book about it File Organization:     * Basic sourcecode organization, module(->submodule)->side     * Module directories hold directives Code Modularization:     * Approach to AngularJS modules, Only one module definition per file     * Approach to AngularJS modules, Don’t alter a module other than where it is defined Model:     * Object-relational mapping     * Server-side validation, server-side example     * Client side validation, using Angular 1.3 View:     * Approach to AngularJS views, Directives start with "data-"     * Approach to data readiness, Use ng-init Control:     * Approach to frontend routing or state changing, URLs start with ''#!''     * Approach to frontend routing or state changing, Use query parameters to store route state Support for things:     * Languages, LESS     * Languages, SASS Syntax, language and coding:     * JavaScript 5 best practices, Don''t use "new" Testing:     * Testing, using Mocha     * End-to-end tests     * End-to-end tests, using Protractor     * Continuous integration (CI), using Travis Development and debugging:     * Command line interface (CLI), using Yeoman Build:     * Build configurations file(s)     * Deployment automation, using Azure     * Deployment automation, using Digital Ocean, screencast of it     * Deployment automation, using Heroku, screencast of it Code Generation:     * Input application profile     * Quick install?     * Options for making subcomponents     * config generator     * controller (client side) generator     * directive generator     * filter generator     * route (client side) generator     * service (client side) generator     * test - client side     * view or view partial generator     * controller (server side) generator     * model (server side) generator     * route (server side) generator     * test (server side) generator Implemented Functionality:     * Account Management, Forgotten Password with Resetting     * Chat     * CSV processing     * E-mail sending system     * E-mail sending system, using Nodemailer     * E-mail sending system, using its own e-mail implementation     * Menus system, state-based     * Paypal integration     * Responsive design     * Social connections management page Performance:     * Creates a favicon Security:     * Safe from IP Spoofing     * Authorization, Access Contol List (ACL)     * Authentication, Cookie     * Websocket and RESTful http share security policies </td><td valign="top" width="33%"> <h1>MEAN.io. provides these benefits that MeanJS.org. doesn''t</h1> Quality:     * Sponsoring company Help:     * Docs with flatdoc Code Modularization:     * Share code between projects     * Module manager View:     * Approach to data readiness, Use state.resolve() Control:     * Approach to frontend code loading, Use AMD with Require.js     * Approach to frontend code loading, using wiredep     * Approach to error handling, Server-side logging Client/Server Communication:     * Centralized event handling     * Approach to XHR calls, using $http and $q Syntax, language and coding:     * JavaScript 5 best practices, Wrap code in an IIFE (SEAF, SIAF) Development and debugging:     * API introspection report and testing interface, using Swagger     * Command line interface (CLI), using Independent command line interface Build:     * Development build, add IIFEs (SEAF, SIAF) to executable copies of code     * Deployment automation     * Deployment automation, using Heroku Code Generation:     * Scaffolding undo    (mean package -d <name>)     * FEATURE (a.k.a. module, entity) generator, Menu items added for new features Implemented Functionality:     * Admin page for users and roles     * Content Management System    (Use special data-bound directives in your templates. Switch to edit mode and you can edit the values right where you see them)     * File Upload     * i18n, localization     * Menus system, submenus     * Search     * Search, actually works with backend API     * Search, using Elastic Search     * Styles, using Bootstrap, using UI Bootstrap AngularJS directives     * Text (WYSIWYG) Editor     * Text (WYSIWYG) Editor, using medium-editor Performance:     * Instrumentation, server-side Security:     * Serverside authenticated route restriction     * Authentication, using Oauth, Link multiple Oauth strategies to one account     * Authentication, JSON Web Token (JWT) </td><td valign="top" width="33%"> <h1>MEAN.io. and MeanJS.org. both provide these benefits</h1> Quality:     * Version Control, using git Platforms:     * Client-side JS Framework, using AngularJS     * Frontend Server/ Framework, using Node.JS     * Frontend Server/ Framework, using Node.JS, using Express     * API Server/ Framework, using NodeJS     * API Server/ Framework, using NodeJS, using Express Help:     * Dedicated/searchable user group for questions     * Dedicated/searchable user group for questions, using Google Groups     * Dedicated/searchable user group for questions, using Facebook     * Dedicated/searchable user group for questions, response time mostly under a day     * Example application     * Tutorial screencast in English     * Tutorial screencast in English, using Youtube     * Dedicated chatroom File Organization:     * Basic sourcecode organization, module(->submodule)->side, with type subfolders     * Module directories hold controllers     * Module directories hold services     * Module directories hold templates     * Module directories hold unit tests     * Separate route configuration files for each module Code Modularization:     * Modularized Functionality     * Approach to AngularJS modules, No global ''app'' module variable     * Approach to AngularJS modules, No global ''app'' module variable without an IIFE Model:     * Setup of persistent storage     * Setup of persistent storage, using NoSQL db     * Setup of persistent storage, using NoSQL db, using MongoDB View:     * No XHR calls in controllers     * Templates, using Angular directives     * Approach to data readiness, prevents Flash of Unstyled/compiled Content (FOUC) Control:     * Approach to frontend routing or state changing, example of it     * Approach to frontend routing or state changing, State-based routing     * Approach to frontend routing or state changing, State-based routing, using ui-router     * Approach to frontend routing or state changing, HTML5 Mode     * Approach to frontend code loading, using angular.bootstrap() Client/Server Communication:     * Serve status codes only as responses     * Accept nested, JSON parameters     * Add timer header to requests     * Support for signed and encrypted cookies     * Serve URLs based on the route definitions     * Can serve headers only     * Approach to XHR calls, using JSON     * Approach to XHR calls, using $resource (angular-resource) Support for things:     * Languages, JavaScript (server side)     * Languages, Swig Syntax, language and coding:     * JavaScript 5 best practices, Use ''use strict'' Tool Configuration/customization:     * Separate runtime configuration profiles Testing:     * Testing, using Jasmine     * Testing, using Karma     * Client-side unit tests     * Continuous integration (CI)     * Automated device testing, using Live Reload     * Server-side integration & unit tests     * Server-side integration & unit tests, using Mocha Development and debugging:     * Command line interface (CLI) Build:     * Build-time Dependency Management, using npm     * Build-time Dependency Management, using bower     * Build tool / Task runner, using Grunt     * Build tool / Task runner, using gulp     * Development build, script     * Development build, reload build script file upon change     * Development build, copy assets to build or dist or target folder     * Development build, html page processing     * Development build, html page processing, inject references by searching directories     * Development build, html page processing, inject references by searching directories, injects js references     * Development build, html page processing, inject references by searching directories, injects css references     * Development build, LESS/SASS/etc files are linted, compiled     * Development build, JavaScript style checking     * Development build, JavaScript style checking, using jshint or jslint     * Development build, run unit tests     * Production build, script     * Production build, concatenation (aggregation, globbing, bundling)    (If you add debug:true to your config/env/development.js the will not be uglified)     * Production build, minification     * Production build, safe pre-minification, using ng-annotate     * Production build, uglification     * Production build, make static pages for SEO Code Generation:     * FEATURE (a.k.a. module, entity) generator    (README.md feature css routes controller view additional menu item) Implemented Functionality:     * 404 Page     * 500 Page     * Account Management     * Account Management, register/login/logout     * Account Management, is password manager friendly     * Front-end CRUD     * Full-stack CRUD     * Full-stack CRUD, with Read     * Full-stack CRUD, with Create, Update and Delete     * Google Analytics     * Menus system     * Realtime data sync     * Realtime data sync, using socket.io     * Styles, using Bootstrap Performance:     * Javascript performance thing     * Javascript performance thing, using lodash     * One event-loop thread handles all requests     * Configurable response caching    (Express plugin https://www.npmjs.org/package/apicache)     * Clustered HTTP sessions Security:     * JavaScript obfuscation     * https     * Authentication, using Oauth     * Authentication, Basic    (With Passport or others)     * Authentication, Digest    (With Passport or others)     * Authentication, Token    (With Passport or others) </td></tr></tbody></table>