Cocinando Meteor en Salsa de Angular con ES6

+

=

Juan David Maldonado

  • Fullstack Developer
  • Front-End

maldo.s@hotmail.com

@jdmaldonado06

https://github.com/jdmaldonado06

  • Node.js.
  • Tiempo Real.
  • Compartir código.
  • MongoDB.
  • Cordova.
  • Multiplataforma.

https://www.meteor.com

http://guide.meteor.com/

Blaze

Angular

React

Ventajas:

https://www.meteor.com

http://guide.meteor.com/

Desventajas

  • Múltiples suscripciones a una misma Colección.
  • Manejo de Eventos.
Template.body.events({
    'submit .new-task'(event) {

        event.preventDefault();
        // do something
    }
});
 
  • 2007 (10gen)
  • NoSQL
  • Código Abierto
  • Documentos
  • JSON - BSON
db.products.insert( { item: "card", qty: 15 } );

db.products.update(
   { _id: 1 },
   {
     $set: {
       item: "other card",
       qty: 20
     }
   }
);

db.products.remove( { _id : 1 } );
  • Collections
ProductsCollection = new Mongo.Collection('Products');
ProductsCollection.insert({ field1: value1, field2: value2 });

ProductsCollection.findOne(id);

ProductsCollection.find({ field: value });

ProductsCollection.update(id, { $set: {  field1: value1, field2: value2 }  });

ProductsCollection.remove(id);

ProductsCollection.remove({ field: value});

Publicaciones

Suscripciones

Meteor.publish("Products", function(){
  return ProductsCollection.find();
});
Meteor.subscribe("Products");
  • Paginar Siempre
  • Variables de Sesión
  • Variables Reactivas

Métodos

Meteor.methods({ 
  methodName1:(params) => { 
     return result;
  },
  methodName2:(params) => { 
     return result;
  }
});
Meteor.call("methodName1", Object / params, (error, result) => { 
  if(error){ 
    console.log("error", error); 
  } 
  if(result){ 
     // Use Data
  } 
});
  • Función en Servidor
  • Comunicación / Ejecución
  • Asíncrono
  • Seguridad

Características y Ventajas

  • Google
  • MVC
  • DOM
  • Testing
  • Directivas
  • $scope

Directivas y $scope .... muertos ?

Desventajas

  • Performance
    • Two-way-data-binding
    • Evaluar cada variable
  • Inyección de dependencias
    • Carga TODOS los módulos
  • Shared State
    • ​$scope (árbol)
    • root scope (hijos)
    • reutilización ^
  • isolated scope
    • Directivas

Módulos

angular
    .module('app', [
        'ngAnimate',
        'ngRoute',
        'app.shared',
        'app.dashboard'
    ]);
angular
    .module('app')
    .controller('MyCtrl', MyCtrl);

function MyCtrl() {
    // Do something...
}

Declare

Getter

<div ng-app="app">
    <div>
        <!-- App Content --> 
    <div>
</div>

Controladores

function CustomerController($scope) {
    $scope.name = {};
    $scope.sendMessage = function() { };
}
function CustomerController() {
    var vm = this;
    vm.name = {};
    vm.sendMessage = sendMessage;
    
    function sendMessage(){
        // Do something...
    }
}

Directivas

angular
    .module('sales.order')
    .directive('myDirective', myDirective);

function myDirective() {
    /* implementation details */
}
  • Encapsular
  • Reutilizar
  • "Mantenibilidad"

La palabra mantenibilidad no está en el Diccionario.

ECMAScript2015

ECMA ... What ?

European Computer Manufactures Association

Junio 2015

Arrow

var data = [{...}, {...}, ...];  
data.forEach(function(elem){  
    console.log(elem)
});

var funcion = function(num) {  
    return num + num;
}
var data = [{...}, {...}, ...];  
data.forEach(elem => {  
    console.log(elem);
});

var funcion = (num) => num + num; 

ES5

ES6

class LibroTecnico extends Libro {  
    constructor(tematica, paginas) {
        super(tematica, paginas);
        this.capitulos = [];
        this.precio = "";
        // ...
    }
    metodo() {
        // ...
    }
}
(function() {
    if(true) {
        let x = "hola mundo";
    }
    console.log(x); //Error
})();

(function() {
    const PI = 3.15; // Asignar
    PI = 3.14159; // Error
})();

Clases

let - const

ES6

//File: lib/person.js
module "person" {  
    export function hello(nombre) {
        return nombre;
    }
}

Módulos

ES6

//File: app.js
import { hello } from "person";  
var app = {  
    foo: function() {
        hello("Carlos");
    }
}
export app;  

Y sin más preámbulos...

El Poder de Meteor y la simplicidad y el eco-sistema de AngularJS

$reactive

  • Servicio
  • Meteor Data
  • $scope
  • this
import Conferences from '../../../shared/collections'

class ConferencesController {

    constructor($scope, $reactive) {
        $reactive(this).attach($scope);

        this.searchText = '';
        this.sort = { name: 1 }

        this.subscribe('GetConferences', () => {
            return [
                {
                    sort: this.sort
                },
                this.getReactively('searchText')
            ]
        });

        this.helpers({
            conferences: () => {
                return Conferences.find({}, {
                    sort: this.sort
                });
            }
        })
    }
}

ConferencesController.$inject = ['$scope', '$reactive']

export default ConferencesController

$getReactively

  • Monitorear
  • ReactiveContext
    • autorun
    • helper
    • suscriptions
import Conferences from '../../../shared/collections'

class ConferencesController {

    constructor($scope, $reactive) {
        $reactive(this).attach($scope);

        this.searchText = '';
        this.sort = { name: 1 }

        this.subscribe('GetConferences', () => {
            return [
                {
                    sort: this.sort
                },
                this.getReactively('searchText')
            ]
        });

        this.helpers({
            conferences: () => {
                return Conferences.find({}, {
                    sort: this.sort
                });
            }
        })
    }
}

ConferencesController.$inject = ['$scope', '$reactive']

export default ConferencesController

$auth

  • Servicio
  • angular-meteor-auth
  • Autenticación
$stateProvider
    .state({
        template: '<my-component></my-component>',
        resolve: {
          user: ($auth) => {
            return $auth.requireUser();
          }
        }
    });
  • waitForUser()
  • requireUser()
  • requireValidateUser()
  • currentUser
  • loggingIn

Consejos

  • Métodos
    • Insert
    • Update
    • Remove
    • Find
  • Componentes Web
    • ​.component()
  • Paginar
    • ​limit
    • skip

Esctructura de Código

Muchas Gracias!

Angular-Meteor-ES6

By Juan David Maldonado

Angular-Meteor-ES6

Meteor + Angular + ES6

  • 215
Loading comments...