Share
Lo que vas a crearMeteor le proporciona un flujo de trabajo de desarrollo rápido que creará aplicaciones web isomorfas que "simplemente funcionan". La arquitectura de Meteor es verdaderamente hermosa, ya que actualizará todos los clientes conectados a su aplicación simultáneamente, de manera inmediata. Esto tiene enormes implicaciones para crear aplicaciones web reactivas..
Meteor está construido teniendo en cuenta la facilidad de uso, y afortunadamente esta filosofía se lleva a cabo desde el principio..
La instalación es tan simple como ejecutar el siguiente comando en sistemas Linux / Mac OS X:
Curl https://install.meteor.com/ | sh
Los usuarios de Windows pueden descargar el instalador oficial..
Esto se hace en la línea de comando a través de la meteorito herramienta. Para crear una nueva aplicación llamada my_meteor_app en su directorio de inicio, haga lo siguiente:
$ meteor create ~ / my_meteor_app $ cd ~ / my_meteor_app $ meteor
Ahora podrá acceder a su aplicación meteor a través de http: // localhost: 3000-port 3000 es el predeterminado.
Por defecto tendrás los siguientes archivos creados:
~ / my_meteor_app: ├── my_meteor_app.css ├── my_meteor_app.html └── my_meteor_app.js
los my_meteor_app.html El archivo contiene el marcado requerido para mostrar la página. Meteor utiliza una sintaxis de estilo entre corchetes y manillar. Todo el código en sus archivos HTML se compila con el compilador de Meteor's Spacebars. Barra espaciadora utiliza declaraciones rodeadas por llaves dobles como #cada y #Si para permitirle agregar lógica y datos a sus vistas.
Puede pasar datos a plantillas desde su código de JavaScript definiendo ayudantes, y para iterar matrices podemos usar #todos.
los my_meteor_app.js El archivo contiene el JavaScript necesario para iniciar el cliente y el servidor. Cualquier evento para el cliente o directivas se puede especificar en este archivo.
los css El archivo es para diseñar su aplicación y, de forma predeterminada, está en blanco..
Meteor analiza todos los archivos HTML en la carpeta de su aplicación e identifica tres etiquetas de nivel superior: , , y .
Todo dentro de cualquier las etiquetas se agregan a la sección principal del HTML enviado al cliente, y todo lo que está dentro Las etiquetas se agregan a la sección del cuerpo, al igual que en un archivo HTML normal.
Todo dentro Las etiquetas se compilan en plantillas Meteor, que se pueden incluir dentro de HTML con > nombre de plantilla o referenciado en su JavaScript con Template.templateName.
Reemplace el HTML predeterminado con lo siguiente:
Mi lista de tareas Mi lista de tareas
Construido utilizando Meteor Framework!
# cada tarea > tarea / cada uno
texto
Aquí especificamos una modelo y #cada bucle para crear una lista de puntos de bala. Termina el ejemplo agregando a la my_meteor_app.js:
if (Meteor.isClient) // El código aquí solo se ejecuta en el cliente // Asigne algunas tareas para completar sus datos Template.body.helpers (tareas: [texto: "Plante pepinos en estiércol fresco", texto: "Mover los aguacates a ollas más grandes", texto: "Ir a pescar con Ben", texto: "Llevar a la esposa al yoga", texto: "Cancelar la suscripción a la televisión"]);
Echa un vistazo en tu navegador al resultado final. Ahora podemos ir más lejos al implementar datos persistentes con una colección MongoDB.
Meteor facilita el trabajo con datos. Con las colecciones, los datos están disponibles en cualquier parte de su código, ya que tanto el cliente como el servidor pueden acceder a ellos. Esto hace que sea muy fácil escribir alguna lógica de vista y hacer que la página se actualice automáticamente.
En Meteor, cualquier componente de vista que esté vinculado a una recopilación de datos mostrará automáticamente los últimos cambios en los datos, por lo que es reactivo en tiempo real.
Cambia tu my_meteor_app.js Archivo para utilizar MongoDB con lo siguiente:
Accentsconagua
Tareas = new Mongo.Collection ("tareas"); if (Meteor.isClient) // Este código solo se ejecuta en el cliente Template.body.helpers (tasks: function () return Tasks.find ();); La línea Tareas = new Mongo.Collection ("tareas"); le dice a Meteor que configure una colección MongoDB llamada Tareas. La repercusión de esto en Meteor es que en el cliente crea una conexión en caché a la colección del servidor..
Para insertar datos podemos utilizar la consola de servidores. Para iniciarlo desde una nueva ventana de terminal, discos compactos en el directorio de su aplicación y ejecute (esto debe hacerse mientras meteor se ejecuta en una pestaña separada):
$ meteor mongo
Ahora, dentro de la consola para Mongo DB de su aplicación, agregue un registro con:
db.tasks.insert (text: "New task from mongo!", createdAt: new Date ());
Echa un vistazo dentro del navegador ahora para ver las actualizaciones. Abra las herramientas de desarrollador y en la consola ejecute lo siguiente:
Tasks.insert (text: "straight to mongo from console", createdAt: new Date ());
Su lista ahora se actualizará dinámicamente en la pantalla. Abra una ventana de navegador separada en una nueva instancia en su escritorio. Ejecutar otra inserción en la consola..
Verá que ambas instancias se actualizan en tiempo real sin tener que actualizar la página. Imagine las implicaciones ahora de actualizar la base de datos y Meteor actualizando todos los clientes..
Por eso Meteor es fácil para crear una experiencia de aplicación realmente reactiva. Los usuarios podrán ver la actualización de los datos en tiempo real de forma colaborativa en el navegador.
El proyecto meteorito tiene un servidor de paquetes público de isobuild paquetes Esto le permite agregar rápidamente funcionalidad a su aplicación Meteor simplemente instalando un paquete a través de añadir meteoro sintaxis.
Meteor también puede agregar npm paquetes a través de la añadir meteoro sintaxis. Hagamos nuestra pantalla un poco mejor en nuestro ejemplo anterior agregando el momentos paquete para formato de fecha fácil.
$ meteor add add momentjs: moment
Ahora que tienes un momento disponible en tu aplicación, puedes usarlo. No necesitas hacer nada incluyéndote a ti mismo..
Edite la plantilla HTML de esta manera:
Mi lista de tareas Mi lista de tareas
> todo# cada tarea
- text createdAt
/cada
Ahora actualizamos nuestras funciones de ayuda en el my_meteor_app.js expediente:
Tareas = new Mongo.Collection ("tareas"); if (Meteor.isClient) // Este código solo se ejecuta en el cliente Template.todo.helpers (tasks: function () return Tasks.find ();, createdAt: function () return moment (this .createdAt) .fromNow ();); Cambie a la ventana de su navegador, y siempre que meteorito El comando aún se está ejecutando en el terminal. Verá su lista actualizada con momentos que proporcionan la medición del tiempo. Bonito!
Agregar autenticación OAuth a tu aplicación ahora es realmente simple. Se puede lograr simplemente agregando dos paquetes a través del siguiente comando:
$ meteor agregar cuentas-google $ meteor agregar cuentas-ui
Una vez que estos paquetes se agregan a su aplicación, simplemente puede agregar el > loginButtons plantilla incorporada a su my_meteor_app.html expediente. Al recargar en un navegador, verá un botón para configurar la función de inicio de sesión de Google. Siga los pasos provistos y estará listo para comenzar, es así de fácil.
Meteor es un marco fantástico que está ganando cada vez más popularidad, y creo que es fácil ver por qué, debido al diseño simple y la implementación de paquetes. La creación rápida de prototipos de aplicaciones en una semana no es un gran problema cuando tiene Meteor en su caja de herramientas.
Si desea obtener más información sobre Meteor, continúe leyendo en línea con su excelente documentación..
