desenvolvendo uma aplicacao full javascript

Download Desenvolvendo uma aplicacao Full Javascript

Post on 16-Apr-2017

265 views

Category:

Software

3 download

Embed Size (px)

TRANSCRIPT

  • Desenvolvendo uma aplicao

    Full Javascript

  • DENIS VIEIRA

    DJANILSON ALVES

    JOO VICTOR BERTA

  • SINGLE-PAGE

    APPLICATION

    BANCO DE DADOS NOSQL

    ARQUITETURA MVC

    API RESTFUL

    WEBSOCKET

  • NoSQL ( Non Relational DB)

    Bancos de dados que no utilizam o mesmo

    esquema de tabelas que os SGBDs

    comuns;

    Altamente escalveis;

    Tipos: Documentos(MongoDb), Chave-

    Valor(Redis), Grafos(Neoj4).

  • COMPARAO

    SQL

    Armazena os dados no

    formato de tabelas, em

    colunas e linhas;

    Realiza Joins entre as

    Diferentes tabelas;

    Utiliza os princpios

    ACID;

    Possui o controle de

    transaes.

    NOSQL

    Armazena os dados

    em diversos formatos

    a depender do

    objetivo;

    No possui estrutura

    pr-definida;

    Escalabilidade

    horizontal(Sharding).

  • Memcached/ Key

    Value-Store

    MongoDb

    Join

    Transaes

    Relational

    SGBD

  • Desenvolvido em C++

    Interface em JS

    Orientado a documentos JSON

    Genrico

    Schemaless

    Replica

    Sharding

  • Node.js is a platform built on Googles 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 aplicaes

    No espera as operaes de I/O acabarem

    para continuar executando.

  • Asynchronous I/O

    Callback Listeners

  • Gerenciador de Pacotes

    Repositrio

  • WEB SERVER

  • Utilizado para aplicao que necessitam de

    comunicao em tempo real;

    Abstrai a complexidade dos WebSockets;

    Fornece uma API simples para a aplicao

    cliente se comunicar.

  • PROS/CONTRAS

    PROS

    Aplicao em

    tempo real;

    Chat;

    Aplicao Web;

    Banco de dados

    no 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 rpidos.

    Fcil de usar

    Cdigo para definir as configurao, o Gulp mantm as

    coisas simples e faz tarefas complexas gerencivel.

    Fcil de aprender

    Com uma API mnima, aprende-se a trabalhar com o

    Gulp quase que na hora!

  • Instalao

  • 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 dependncias opcionais

  • Executando o gulpfile.js

    Default, engloba todas as outras tarefas. Ser executada

    ao entrar Gulp na linha de comando sem parmetros

    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 converses lxicas

    nele.

    As converses podem incluir substituio

    de macros, incluso condicional e incluso

    de outros ficheiros.

  • Premissas

    Syntactically

    Awesome Style

    Sheets (Folhas de estilo

    sintaticamente incrveis)

    Dont Repeat

    Yourself (DRY CSS)

    CSS

    'componentizado'

    Features

    Variveis

    Mixins

    Operacionais

    Condicionais

    loops

  • Dont Repeat Yourself

    (DRY CSS)

    Mude a cor de uma varivel e o compilador faz o

    resto.

  • CSS Aninhado

  • MIXINS

  • Funes

  • @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 diretrio pages

  • Por que usar ?

    Data Binding de 2

    vias

    Separao Lgica e

    Viso

    Testabilidade

    Componentizao

    Filtros, ordenao, etc.

    Extensa documentao

    e components de

    terceiros

    SPA, Single Page

    Application

    Comunidade Ativa

    Mantenedor: Google!

  • Utilizao

  • POWERS

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

  • DEMONSTRAO

    MVP

    https://gitlab.com/fromdenisvieira/projetointegrador

  • Gerenciamento do Projeto

    Controle de Verso

    Hospedagem da API

  • O CHECKIN

  • HORRIO

  • 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

    Repositrio do Sass no github

    https://github.com/sass/sass

    Sass guide

    http://sass-lang.com/guide

  • Guia AngularJS

    Aprenda AngularJS com estes 5 Exemplos Prticos: -

    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 Bsico: http://www.youtube.com/watch?v=iCQ3qic_nGg

    Lista de muitos e muitos recursos, vdeos 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 !