Upload
denis-vieira
View
272
Download
3
Embed Size (px)
Citation preview
Desenvolvendo uma aplicação
Full Javascript
DENIS VIEIRA
DJANILSON ALVES
JOÃO VICTOR BERTA
• SINGLE-PAGE
APPLICATION
• BANCO DE DADOS NOSQL
• ARQUITETURA MVC
• API RESTFUL
• WEBSOCKET
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).
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).
Memcached/ Key
Value-Store
MongoDb
Join
Transações
Relational
SGBD
• Desenvolvido em C++
• Interface em JS
• Orientado a documentos JSON
• Genérico
• Schemaless
• Replica
• Sharding
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
• Event Driven;
• Single-Threaded;
• Event-loop;
• Asynchronous I/O.
EVENT DRIVEN
Single-Threaded / Event-loop
Asynchronous I/O
• I/O era o gargalo das aplicações
• Não espera as operações de I/O acabarem
para continuar executando.
Asynchronous I/O
Callback Listeners
• Gerenciador de Pacotes
• Repositório
WEB SERVER
• 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.
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.
Automatize seu Workflow
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!
Instalação
Gulpfile.js
• Importe o gulp e os plugins associados às
tarefas que deseja automatizar
5 fatos importantes para criar e executar
suas tarefas do gulpfile.js
gulp.task(glob, [deps], fn)
• Define uma tarefa com dependências opcionais
Executando o gulpfile.js
• Default, engloba todas as outras tarefas. Será executada
ao entrar Gulp na linha de comando sem parâmetros
adicionais.
Gulpfile watch
• Watch, mantem o gulp rodando e esperando por eventos
para tratá-los
Pré-Processadores CSS
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.
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
Don’t Repeat Yourself
(DRY CSS)
• Mude a cor de uma variável e o compilador faz o
resto.
CSS Aninhado
MIXINS
Funções
@Import “fileName”;
SASS + GULP
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
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!
Utilização
POWERS
http://curran.github.io/screencasts/introToAngular/exampleViewer
DEMONSTRAÇÃO
MVP
https://gitlab.com/fromdenisvieira/projetointegrador
Gerenciamento do Projeto
Controle de Versão
Hospedagem da API
O CHECKIN
HORÁRIO
O CHAT
• 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
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/
•
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
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
OBRIGADO !