desenvolvendo uma aplicacao full javascript

57
Desenvolvendo uma aplicação Full Javascript

Upload: denis-vieira

Post on 16-Apr-2017

271 views

Category:

Software


3 download

TRANSCRIPT

Page 1: Desenvolvendo uma aplicacao Full Javascript

Desenvolvendo uma aplicação

Full Javascript

Page 2: Desenvolvendo uma aplicacao Full Javascript

DENIS VIEIRA

DJANILSON ALVES

JOÃO VICTOR BERTA

Page 3: Desenvolvendo uma aplicacao Full Javascript

• SINGLE-PAGE

APPLICATION

• BANCO DE DADOS NOSQL

• ARQUITETURA MVC

• API RESTFUL

• WEBSOCKET

Page 4: Desenvolvendo uma aplicacao Full Javascript
Page 5: Desenvolvendo uma aplicacao Full Javascript
Page 6: Desenvolvendo uma aplicacao Full Javascript

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

Page 7: Desenvolvendo uma aplicacao Full Javascript

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

Page 8: Desenvolvendo uma aplicacao Full Javascript

Memcached/ Key

Value-Store

MongoDb

Join

Transações

Relational

SGBD

Page 9: Desenvolvendo uma aplicacao Full Javascript

• Desenvolvido em C++

• Interface em JS

• Orientado a documentos JSON

• Genérico

• Schemaless

• Replica

• Sharding

Page 10: Desenvolvendo uma aplicacao Full Javascript

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

Page 11: Desenvolvendo uma aplicacao Full Javascript

• Event Driven;

• Single-Threaded;

• Event-loop;

• Asynchronous I/O.

Page 12: Desenvolvendo uma aplicacao Full Javascript

EVENT DRIVEN

Page 13: Desenvolvendo uma aplicacao Full Javascript

Single-Threaded / Event-loop

Page 14: Desenvolvendo uma aplicacao Full Javascript

Asynchronous I/O

• I/O era o gargalo das aplicações

• Não espera as operações de I/O acabarem

para continuar executando.

Page 15: Desenvolvendo uma aplicacao Full Javascript

Asynchronous I/O

Callback Listeners

Page 16: Desenvolvendo uma aplicacao Full Javascript

• Gerenciador de Pacotes

• Repositório

Page 17: Desenvolvendo uma aplicacao Full Javascript

WEB SERVER

Page 18: Desenvolvendo uma aplicacao Full Javascript
Page 19: Desenvolvendo uma aplicacao Full Javascript

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

Page 20: Desenvolvendo uma aplicacao Full Javascript
Page 21: Desenvolvendo uma aplicacao Full Javascript

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.

Page 22: Desenvolvendo uma aplicacao Full Javascript

Automatize seu Workflow

Page 23: Desenvolvendo uma aplicacao Full Javascript

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!

Page 24: Desenvolvendo uma aplicacao Full Javascript

Instalação

Page 25: Desenvolvendo uma aplicacao Full Javascript

Gulpfile.js

• Importe o gulp e os plugins associados às

tarefas que deseja automatizar

Page 26: Desenvolvendo uma aplicacao Full Javascript

5 fatos importantes para criar e executar

suas tarefas do gulpfile.js

Page 27: Desenvolvendo uma aplicacao Full Javascript

gulp.task(glob, [deps], fn)

• Define uma tarefa com dependências opcionais

Page 28: Desenvolvendo uma aplicacao Full Javascript

Executando o gulpfile.js

• Default, engloba todas as outras tarefas. Será executada

ao entrar Gulp na linha de comando sem parâmetros

adicionais.

Page 29: Desenvolvendo uma aplicacao Full Javascript

Gulpfile watch

• Watch, mantem o gulp rodando e esperando por eventos

para tratá-los

Page 30: Desenvolvendo uma aplicacao Full Javascript

Pré-Processadores CSS

Page 31: Desenvolvendo uma aplicacao Full Javascript

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.

Page 32: Desenvolvendo uma aplicacao Full Javascript

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

Page 33: Desenvolvendo uma aplicacao Full Javascript

Don’t Repeat Yourself

(DRY CSS)

• Mude a cor de uma variável e o compilador faz o

resto.

Page 34: Desenvolvendo uma aplicacao Full Javascript

CSS Aninhado

Page 35: Desenvolvendo uma aplicacao Full Javascript

MIXINS

Page 36: Desenvolvendo uma aplicacao Full Javascript

Funções

Page 37: Desenvolvendo uma aplicacao Full Javascript

@Import “fileName”;

Page 38: Desenvolvendo uma aplicacao Full Javascript
Page 39: Desenvolvendo uma aplicacao Full Javascript

SASS + GULP

Page 40: Desenvolvendo uma aplicacao Full Javascript

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

Page 41: Desenvolvendo uma aplicacao Full Javascript
Page 42: Desenvolvendo uma aplicacao Full Javascript
Page 43: Desenvolvendo uma aplicacao Full Javascript

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!

Page 44: Desenvolvendo uma aplicacao Full Javascript

Utilização

Page 45: Desenvolvendo uma aplicacao Full Javascript

POWERS

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

Page 46: Desenvolvendo uma aplicacao Full Javascript

DEMONSTRAÇÃO

MVP

https://gitlab.com/fromdenisvieira/projetointegrador

Page 47: Desenvolvendo uma aplicacao Full Javascript
Page 48: Desenvolvendo uma aplicacao Full Javascript

Gerenciamento do Projeto

Controle de Versão

Hospedagem da API

Page 49: Desenvolvendo uma aplicacao Full Javascript

O CHECKIN

Page 50: Desenvolvendo uma aplicacao Full Javascript

HORÁRIO

Page 51: Desenvolvendo uma aplicacao Full Javascript

O CHAT

Page 52: Desenvolvendo uma aplicacao Full Javascript
Page 53: Desenvolvendo uma aplicacao Full Javascript

• 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

Page 54: Desenvolvendo uma aplicacao Full Javascript

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/

Page 55: Desenvolvendo uma aplicacao Full Javascript

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

Page 56: Desenvolvendo uma aplicacao Full Javascript

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

Page 57: Desenvolvendo uma aplicacao Full Javascript

OBRIGADO !