15
Desarrollo Full Stack Javascript MEAN Desarrollo en JavaScript de principio a fin: Frontend, Backend y Base de Datos. El acrónimo MEAN viene de (M)ongo + (E)xpress + (A)ngular + (N)ode Mismo lenguaje, mismos objetos: {“_id”:ObjectId(“5333f43ca1edc7794c8c134f”), “username”:”joe”} {“_id”:“5333f43ca1edc7794c8c134f”, “username”:”joe”} {“_id”:“5333f43ca1edc7794c8c134f”, “username”:”joe”}

Full Stack Javascript (MEAN) (Betabeers ZGZ)

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Full Stack Javascript (MEAN) (Betabeers ZGZ)

Desarrollo Full Stack Javascript !MEAN

• Desarrollo en JavaScript de principio a fin: Frontend, Backend y Base de Datos.

• El acrónimo MEAN viene de (M)ongo + (E)xpress + (A)ngular + (N)ode !

• Mismo lenguaje, mismos objetos:

{“_id”:ObjectId(“5333f43ca1edc7794c8c134f”), “username”:”joe”}

{“_id”:“5333f43ca1edc7794c8c134f”, “username”:”joe”}

{“_id”:“5333f43ca1edc7794c8c134f”, “username”:”joe”}

Page 2: Full Stack Javascript (MEAN) (Betabeers ZGZ)

MongoDB• Base de datos no relacional (NoSQL) • Orientada a documentos • Javascript based query syntax • Formato BSON: Binary JSON • Schema-less • Permite consultas avanzadas • Preparado para escalar horizontalmente

Conceptos básicos!!• Database ====> Database !

• Table ====> Collection !

• Record ====> Document

Page 3: Full Stack Javascript (MEAN) (Betabeers ZGZ)

MongoDB

• Objeto JSON guardado internamente como BSON • Flexible • Está compuesto por campos, sin un formato predefinido • Soporta subdocumentos y arrays !Esto es un documento:

¿Qué es un documento?

Page 4: Full Stack Javascript (MEAN) (Betabeers ZGZ)

MongoDB

• CRUD: insert, find, update, remove • Operadores condicionales: $gt, $lt, $gte, $lte • $or, $not, $in, $in • Expresiones regulares db.users.find({"name" : /joe/i}) • Operaciones sobre arrays: $all, $size, $slice, $push, $pull • Consultas sobre documentos embebidos • Limit, skip, sorts • …..

Operaciones

Page 5: Full Stack Javascript (MEAN) (Betabeers ZGZ)

A programar!

npm install -g yo!npm install -g generator-angular-fullstack!yo angular-fullstack

Page 6: Full Stack Javascript (MEAN) (Betabeers ZGZ)

Node.js• Javascript en el backend • Basado en el motor V8 • Orientado a eventos, asíncrono, no bloqueante • Todo tu código se ejecuta en un único thread…. • …aunque todo se ejecuta en paralelo, salvo tu código

Page 7: Full Stack Javascript (MEAN) (Betabeers ZGZ)

ExpressJS• Framework por encima de NodeJS • Aporta todo lo necesario para crear un servidor web • Middleware, routing, templating, static-files, cookies,

tokens… • Perfecto para crear API REST de forma sencilla • Inspirado en Sinatra (Ruby) • Asíncrono

Page 8: Full Stack Javascript (MEAN) (Betabeers ZGZ)

ExpressJSConfiguración

Page 9: Full Stack Javascript (MEAN) (Betabeers ZGZ)

ExpressJSRutas

Page 10: Full Stack Javascript (MEAN) (Betabeers ZGZ)

ExpressJSMiddleware

Page 11: Full Stack Javascript (MEAN) (Betabeers ZGZ)

ExpressJSY mucho mas…

• View rendering • Template engines • Sesiones (cookies, redis…) • Manejo de errores • ……

Page 12: Full Stack Javascript (MEAN) (Betabeers ZGZ)

AngularJS• Framework Javascript • MVC • Inyección de dependencias • Pensado para ser probado (Karma) • Two-way data binding

Page 13: Full Stack Javascript (MEAN) (Betabeers ZGZ)

AngularJSModelo Vista Controlador

Lógica de negocio para interactuar con la vista

Page 14: Full Stack Javascript (MEAN) (Betabeers ZGZ)

AngularJSOtros conceptos importantes

• Modulos • Servicios:

• Factory, Service, Constant, Value • Singleton • Reutilizables • Inyectables

• Filtros • Directivas (Manipulación del DOM)

Page 15: Full Stack Javascript (MEAN) (Betabeers ZGZ)

Raúl Novoa!Co-founder at @10labs & @fidelizoo Javascript Developer/iOS Developer @raul_novoa http://linkedin.com/in/raulnovoa