ENSINANDO A SER MAU COM MEAN STACK

Palestrante: Rogério Fontes / @rogeriofontes

Sobre o palestrante:

APAIXONADO EM MANEIRAS E FORMAS ÁGEIS DE CRIAR CÓDIGO FONTE. PROGRAMANDO SEMPRE TOMANDO UM BOM CAFÉ E ESCUTANDO UM BELO E PESADO ROCK`N ROLL. TRABALHA A MAIS DE 10 ANOS COM JAVA E LINUX, PASSANDO POR ANDROID, PYTHON, PHP E AGORA COM O CORAÇÃO NO ANGULAR.JS E NODE.JS. PROFESSOR UNIVERSITÁRIO DE REDES DE COMPUTADORES, JAVA E DISPOSITIVOS MÓVEIS. JUGLEADER E CO-FUNDADOR DO UAIJUG (GRUPO DE USUÁRIOS DO TRIÂNGULO MINEIRO) E DO TRIÂNGULO HACKERSPACE. ALÉM DISSO AVENTURANDO COMO EMPREENDEDOR E ARQUITETO DE SOFTWARE DO COMDOMINIODIGITAL, PROJETO DA DIGITOS.

Estrutura de requisições

Componentes do MEAN

MongoDB, Banco de dados orientado a documentos
Express.js, Framework de desenvolvimento web que roda sobre o Node.js
Angular.js, Framework MVC para JavaScript
Node.js, Ambiente de execução JavaScript, para event-driven, server-side e aplicações em Redes.

Porque MEAN?

MEAN é um acronimo cunhado por Valeri Karpov, desenvolvedor do MongoDB developer. [Saiba mais]

MongoDB

Banco de dados NoSQL (Not Only SQL), orientado a documentos, ou seja, guarda os dados em uma estrutura de Documento em um formato baseado em JSON(JavaScript Object Notation).

ExpressJs

Framework web, leve e flexível, para NodeJs. É responsável pelo server side, criando e gerenciando rotas e REST Endpoints, que serão consumidos pela parte no lado do cliente, usando o AngularJS. É o back-end da aplicação, adicionando middlewares ao servidor Node, tudo usando JavaScript.


AngularJS

É o Site propriamente didos. É um framework front-end MVC que manipula o DOM(Document Object Model), utilizando JavaScript, HTML e CSS na criação de Single Page Applications(SPA). Alguns principais recursos do Angular são as injeções de dependências, possibilidade da criação de componentes(diretivas), dentre várias facilidades e agilidades para o programador.


NodeJs

Ambiente de execução JavaScript, criado a partir do ambiente JavaScript que roda no Google Chrome (chamado de V8). Feito para construir aplicações escaláveis de forma assíncrona, várias conexões são realizadas de forma simultânea. Para gerenciar essas funções assíncronas, é utilizado um loop de eventos, e uma única thread. É open source, e com uma vasta diversidade de bibliotecas criadas pela comunidade podendo ser utilizado a partir de seu gerenciador de pacotes (npm), Node.js.


Gerando Seu projeto Rapidamente

Iniciar mongoDB

mongo_start.sh 

#!/bin/bash

sudo mongod --dbpath /data/db

Para instalar o mongoDB: instalacao-do-mongodb

Yeoman angular-fullstack generator.

Instalar o gerador full stack e suas dependencias:

$ npm install -g yo grunt-cli gulp-cli bower generator-angular-fullstack

Yeoman angular-fullstack generator.

Instalar omente o gerador full stack:

$ npm install -g generator-angular-fullstack

Yeoman angular-fullstack generator.

Criar Projeto:

mkdir attendee-frontend-day
cd attendee-frontend-day
$ yo angular-fullstack

Yeoman angular-fullstack generator.

Executar o Projeto:

$ grunt serve

Yeoman angular-fullstack generator.

Rodar o Projeto no navegador:

http://localhost:9000/#/

Estrutura do projeto

├── client
│   ├── app               - All of our app specific components go in here
│   ├── assets            - Custom assets: fonts, images, etc… 
│   ├── components        - Our reusable components, non-specific to to our app
│ 
├── e2e                   - Our protractor end to end tests
│
└── server
	├── api               - Our apps server api
	├── auth              - For handling authentication with different auth strategies
	├── components        - Our reusable or app-wide components
	├── config            - Where we do the bulk of our apps configuration
	│   └── local.env.js  - Keep our environment variables out of source control.
	│   └── environment   - Configuration specific to the environment the server is being run in
	└── views             - Server rendered views

Seja ninja

Referências:

https://addyosmani.com/blog/full-stack-javascript-with-mean-and-yeoman
http://stackoverflow.com/questions/28751792/how-to-deploy-yeoman-angular-fullstack-project
https://github.com/angular-fullstack/generator-angular-fullstack
http://tylerhenkel.com/building-an-angular-node-comment-app-using-yeoman