Palestra da Semana de Integração do IFAL, onde demonstramos o case do S.I. Check. Uma aplicação construída totalmente em JS, tanto no back-end quanto no Front-end. Utilizamos o projeto de uma matéria a fim de explorar o conceito MEAN (MongDB, Express, Angular e NodeJS). Partindo desse objetivo, criamos o SI Check um app para alunos da nossa graduação durante a semana de integração dos calouros.

1. Desenvolvendo uma
aplicação Full Javascript
JS

2. DENIS VIEIRA
DJANILSON ALVES
JOÃO VICTOR BERTA

3. O QUE É ?
•MONGODB
•EXPRESS
•ANGULARJS
•NODEJS

5. 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).

6. 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).

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

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

9. 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

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

11. EVENT DRIVEN

12. Single-Threaded / Event-loop

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

14. Asynchronous I/O
Callback Listeners

15. • Gerenciador de Pacotes
• Repositório

16. WEB SERVER

18. • 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.

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

21. Automatize seu Workflow

22. 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!

23. Instalação

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

25. 5 fatos importantes a saber para criar
e executar suas tarefas do gulpfile.js

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

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

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

29. Pré-Processadores CSS

30. 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.

31. 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

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

33. CSS Aninhado

34. MIXINS

35. Funções

36. @Import “fileName”;

38. SASS + GULP

39. 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

40. Referências
• 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

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

43. Alguns
poderes do
AngularJS
https://github.com/fromdenisvieira/angularjs-examples

44. Guia Essencial ANGULARJS
• Aprenda AngularJS com estes 5 Exemplos Práticos:
-http://javascriptbrasil.com/2013/10/23/aprenda-angularjs-com-estes-5-exemplos-p
raticos/
• 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

45. Prática !!!

46. A APLICAÇÃO
•SINGLE-PAGE APPLICATION
•BANCO DE DADOS NOSQL
•ARQUITETURA MVC
•API RESTFUL
•WEBSOCKET

47. JUNTANDO TUDO

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

49. DEMONSTRAÇÃO

50. OBRIGADO !