O documento discute o desenvolvimento de uma aplicação full stack JavaScript usando MongoDB, Express, AngularJS e Node.js. Ele explica como usar essas tecnologias juntas, incluindo o uso de bancos de dados NoSQL, arquitetura MVC, APIs RESTful e WebSockets. Além disso, discute ferramentas como Gulp para automatizar tarefas.

1. Desenvolvendo uma aplicação
Full Javascript

2. DENIS VIEIRA
DJANILSON ALVES
JOÃO VICTOR BERTA

3. •SINGLE-PAGE
APPLICATION
•BANCO DE DADOS NOSQL
•ARQUITETURA MVC
•API RESTFUL
•WEBSOCKET

6. NoSQL ( Non Relational DB)
• Bancos de dados que não utilizam o mesmo
esquema de tabelas que os SGBDs
comuns;
• Altamente escaláveis;
• Tipos: Documentos(MongoDb), Chave-
Valor(Redis), Grafos(Neoj4).

7. COMPARAÇÃO
SQL
• Armazena os dados no
formato de tabelas, em
colunas e linhas;
• Realiza Joins entre as
Diferentes tabelas;
• Utiliza os princípios
ACID;
• Possui o controle de
transações.
NOSQL
• Armazena os dados
em diversos formatos
a depender do
objetivo;
• Não possui estrutura
pré-definida;
• Escalabilidade
horizontal(Sharding).

8. Memcached/ Key
Value-Store
MongoDb
Join
Transações
Relational
SGBD

9. • Desenvolvido em C++
• Interface em JS
• Orientado a documentos JSON
• Genérico
• Schemaless
• Replica
• Sharding

10. Node.js is a platform built on Google’s V8 JavaScript engine for easily
building fast scalable network applicatioons. Node.js uses an event-driven,
non-blocking I/O model that makes it lightweight and efficient, data-
intensive real-time applications that run across distributed devices

11. •Event Driven;
•Single-Threaded;
•Event-loop;
•Asynchronous I/O.

12. EVENT DRIVEN

13. Single-Threaded / Event-loop

14. Asynchronous I/O
• I/O era o gargalo das aplicações
• Não espera as operações de I/O acabarem
para continuar executando.

15. Asynchronous I/O
Callback Listeners

16. • Gerenciador de Pacotes
• Repositório

17. WEB SERVER

19. • Utilizado para aplicação que necessitam de
comunicação em tempo real;
• Abstrai a complexidade dos WebSockets;
• Fornece uma API simples para a aplicação
cliente se comunicar.

21. PROS/CONTRAS
PROS
• Aplicação em
tempo real;
• Chat;
• Aplicação Web;
• Banco de dados
não relacionais;
• Data streaming;
CONTRAS
• Cpu intensive;
• Necessidade de
utilizar bancos
relacionais.

22. Automatize seu Workflow

23. Por que usar GULP ?
• Eficiente
• Gulp usa o poder de streams do NodeJs, o que permite
builds muitos mais rápidos.
• Fácil de usar
• Código para definir as configuração, o Gulp mantém as
coisas simples e faz tarefas complexas gerenciável.
• Fácil de aprender
• Com uma API mínima, aprende-se a trabalhar com o
Gulp quase que na hora!

24. Instalação

25. Gulpfile.js
• Importe o gulp e os plugins associados às
tarefas que deseja automatizar

26. 5 fatos importantes para criar e executar
suas tarefas do gulpfile.js

27. gulp.task(glob, [deps], fn)
• Define uma tarefa com dependências opcionais

28. Executando o gulpfile.js
• Default, engloba todas as outras tarefas. Será executada
ao entrar Gulp na linha de comando sem parâmetros
adicionais.

29. Gulpfile watch
• Watch, mantem o gulp rodando e esperando por eventos
para tratá-los

30. Pré-Processadores CSS

31. Pré-Processadores CSS
• Um pré-processador é um programa que
recebe texto e efetua conversões léxicas
nele.
•
• As conversões podem incluir substituição
de macros, inclusão condicional e inclusão
de outros ficheiros.

32. Premissas
• Syntactically
Awesome Style
Sheets
• (Folhas de estilo
sintaticamente incríveis)
• Don’t Repeat
Yourself (DRY CSS)
• CSS
'componentizado'
Features
• Variáveis
• Mixins
• Operacionais
• Condicionais
• loops

33. Don’t Repeat Yourself
(DRY CSS)
• Mude a cor de uma variável e o compilador faz o
resto.

34. CSS Aninhado

35. MIXINS

36. Funções

37. @Import “fileName”;

39. SASS + GULP

40. Estrutura de arquivos
Componetizando:
Pra cada projeto uma
public_html diferente mas
a mesma SCSS.
No geral o que mais muda
é o diretório pages

43. Por que usar ?
• Data Binding de 2
vias
• Separação Lógica e
Visão
• Testabilidade
• Componentização
• Filtros, ordenação, etc.
• Extensa documentação
e components de
terceiros
• SPA, Single Page
Application
• Comunidade Ativa
• Mantenedor: Google!

44. Utilização

45. POWERS
http://curran.github.io/screencasts/introToAngular/exampleViewer

46. DEMONSTRAÇÃO
MVP
https://gitlab.com/fromdenisvieira/projetointegrador

48. Gerenciamento do Projeto
Controle de Versão
Hospedagem da API

49. O CHECKIN

50. HORÁRIO

51. O CHAT

53. • A Complete Guide to MEAN Stack :
• https://github.com/ericdouglas/MEAN-
Learning
•
• Get Started : https://hackhands.com/how-
to-get-started-on-the-mean-stack/
•
• Mastering MEAN :
• https://masteringmean.com/
•
• Palestra Be Mean( Jean Carlo “Suissa” ):
http://www.infoq.com/br/presentations/be-
mean#downloadPdf

54. Guia MongoDB
• Mongo Db - https://www.mongodb.com/
• NoSql / Non Relational DB :
https://www.mongodb.com/nosql-explained
• Curso Gratuito :
https://university.mongodb.com/
• NPM e Modulos - https://www.npmjs.com/
• Express - http://expressjs.com/
•

55. Guia SASS
• Repositorio do Gulp no github
• https://github.com/gulpjs
• Travismaynard - Get started with Gulp
• https://travismaynard.com/writing/getting-
started-with-gulp
• Repositório do Sass no github
• https://github.com/sass/sass
• Sass guide
• http://sass-lang.com/guide

56. Guia AngularJS
• Aprenda AngularJS com estes 5 Exemplos Práticos: -
http://javascriptbrasil.com/2013/10/23/aprenda-angularjs-com-estes-5-exemplos-
praticos/
• Guia Definitivo para se aprender AngularJS em um dia: -
http://javascriptbrasil.com/2013/10/18/guia-definitivo-para-aprender-angularjs-em-
um-dia/
• Tutorial de um CRUD Básico: http://www.youtube.com/watch?v=iCQ3qic_nGg
• Lista de muitos e muitos recursos, vídeos e tutoriais:
https://github.com/jmcunningham/AngularJS-Learning
• Tutorial Oficial do AngularJS: http://docs.angularjs.org/tutorial
• AngularJS Guide: http://docs.angularjs.org/guide/overview
• Diversos tutoriais de varias features do AngularJS:
https://egghead.io/technologies/angularjs
• Design Patterns and Best Practices : http://trochette.github.io/Angular-Design-
Patterns-Best-Practices/#/intro

57. OBRIGADO !