Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MEAN Jedi

MEAN Jedi

Curso em parceria com a Academia Jedi sobre a MEAN Stack com ênfase no front-end. Em adição ao conteúdo, falo um pouco sobre o universo front-end, ferramentas, algumas estratégias para se manter atualizado, boas práticas, HTML5, CSS3, etc.

Thulio Philipe

December 04, 2016
Tweet

More Decks by Thulio Philipe

Other Decks in Technology

Transcript

  1. JEDI
    MEAN
    Thulio Philipe @thulioph
    Web Developer

    View full-size slide

  2. (olá!)
    Apresentações

    View full-size slide

  3. Thulio Philipe @thulioph
    Web Developer
    Design Gráfico @Unibratec
    Web Apps @Unibratec

    Web Developer @Labcodes

    Team @Devbeers

    Lover @GoogleMaps

    View full-size slide

  4. (vamos lá!)
    Let's nessa

    View full-size slide

  5. Mean Stack
    Ciclo de uma aplicação MEAN

    View full-size slide

  6. Objetivo final
    goo.gl/DWIQuR

    View full-size slide

  7. (A hackable text editor for the 21st Century)
    Atom

    View full-size slide

  8. Um moderno editor de texto, uma
    ferramenta que você pode
    customizar para fazer qualquer
    coisa.
    O que é?

    View full-size slide

  9. O Criador!
    Github

    View full-size slide

  10. electron.atom.io
    Um adendo.

    View full-size slide

  11. Outro adendo.
    Hyper Zeplin Postman WebTorrent Ionic
    Creator
    Brave Soundnode Ghost Visual Studio Slack

    View full-size slide

  12. Plugins
    Temas
    Menus e notificações nativas
    Integrações
    Gerenciamento de pacotes e plugins
    Snippets
    Features

    View full-size slide

  13. Emmet
    emmet.io
    Snippets

    View full-size slide

  14. IDE
    (Integrated Development Environment)

    View full-size slide

  15. IDE
    www.jetbrains.com/phpstorm

    View full-size slide

  16. IDE
    www.visualstudio.com

    View full-size slide

  17. IDE
    developer.apple.com/xcode/ide

    View full-size slide

  18. Editor de Texto
    (Text Editor)

    View full-size slide

  19. Editor de Texto
    brackets.io

    View full-size slide

  20. Editor de Texto
    atom.io

    View full-size slide

  21. Editor de Texto
    notepad-plus-plus.org

    View full-size slide

  22. Editor de Texto
    www.sublimetext.com

    View full-size slide

  23. Plataformas
    (funciona no windows.)

    View full-size slide

  24. Custo?
    (a parte boa)

    View full-size slide

  25. Custo
    R$ 0,00 USD $0

    View full-size slide

  26. docs.emmet.io
    https://youtu.be/Y7aEiVwBAdk
    https://scotch.io/bar-talk/best-of-
    atom-features-plugins-acting-like-
    sublime-text
    https://github.com/mehcode/
    awesome-atom
    Keep walking...

    View full-size slide

  27. (Hypertext Markup Language)
    HTML

    View full-size slide

  28. O HTML foi desenvolvido para
    criação e disseminação de
    documentos na web.
    O que é?

    View full-size slide

  29. O Criador!
    Tim Berners Lee

    View full-size slide

  30. Acessibilidade
    Semântica
    API's
    Mais poderes
    Features

    View full-size slide

  31. input
    text
    e-mail
    password
    tel
    search
    atributos
    validadores
    Formulários

    View full-size slide

  32. autoplay
    controls
    loop
    muted
    preload
    Áudio

    View full-size slide

  33. autoplay
    controls
    loop
    muted
    preload
    poster
    Vídeo

    View full-size slide

  34. (Application Programming Interface)
    API's

    View full-size slide

  35. canvas
    network status
    drag-and-drop
    web storage
    geolocation
    IndexedDB
    webRTC
    file
    media capture
    Web API's

    View full-size slide

  36. canvas
    network status
    drag-and-drop
    web storage
    geolocation
    IndexedDB
    webRTC
    file
    media capture
    Web API's

    View full-size slide

  37. (nem tudo são flores..)
    Compatibilidade

    View full-size slide

  38. Compatibilidade
    caniuse.com

    View full-size slide

  39. devdocs.io
    Compatibilidade

    View full-size slide

  40. https://en.wikipedia.org/wiki/HTML5
    https://w3c.github.io/html/
    https://www.sitepoint.com/10-html5-
    apis-worth-looking/
    http://www.maujor.com/
    Keep walking...

    View full-size slide

  41. (Cascading Style Sheets)
    CSS

    View full-size slide

  42. É uma linguagem de folhas
    de estilo que definem apresentação
    de documentos escritos em uma
    linguagem de marcação.
    O que é?

    View full-size slide

  43. Os Criadores!
    Håkon Wium Lie Bert Bos

    View full-size slide

  44. folhas de estilo externa
    folhas de estilo incorporada
    folhas de estilo inline
    Folhas de estilo

    View full-size slide

  45. Incorporadas
    <br/>body {<br/>color: red;<br/>}<br/>

    View full-size slide

  46. Inline

    Qualquer texto aqui dentro irá receber o
    estilo CSS da tag.

    View full-size slide

  47. INTERações
    TRANSições
    ANIMações
    Possibilidades

    View full-size slide

  48. :hover
    // seletor:hover { propriedade: valor; }
    INTERações
    :active
    // seletor:active { propriedade: valor; }
    :focus
    // seletor:focus { propriedade: valor; }

    View full-size slide

  49. transition-delay: 0s;
    // delay antes da transição iniciar
    TRANSições
    transition-duration: 0s;
    // o tempo que a transição irá levar
    transition-property: all;
    // qual propriedade irá sofrer transição

    View full-size slide

  50. transition-timing-function: ease;
    // modo que os valores são intermediados
    transition-timing-function: linear;
    // modo que os valores são intermediados
    transition-timing-function: ease-in-out;
    // modo que os valores são intermediados
    TRANSições

    View full-size slide

  51. transition: margin-left 4s ease-in-out 1s;
    // aceita vários valores
    TRANSições

    View full-size slide

  52. animation-name: minhaAnimacao;
    // nome da animação
    ANIMações
    animation-duration: .25ms;
    // duração da animação
    animation-timing-function: ease;
    // modo que os valores são intermediados

    View full-size slide

  53. animation-delay: 0s;
    // delay antes da animação iniciar
    animation-iteration-count: infinite;
    // quantas vezes a animação vai acontecer
    animation-fill-mode: none;
    // modificador que é adicionado a animação
    ANIMações

    View full-size slide

  54. animation-direction: normal;
    // ciclo e direção da animação
    animation-play-state: running;
    // quantas vezes a animação vai acontecer
    ANIMações

    View full-size slide

  55. animation: mover 4s linear 0s infinite alternate;
    ANIMações

    View full-size slide

  56. ANIMações
    @keyframes mover {
    from {
    margin-left: -20%;
    }
    to {
    margin-left: 100%;
    }
    }

    View full-size slide

  57. ANIMações
    @keyframes mover {
    0% {
    margin-left: -20%;
    }
    50% {
    margin-left: 38%;
    } 


    100% {
    margin-left: 100%;
    }
    }

    View full-size slide

  58. responsividade
    acessibilidade
    vários tamanhos de tela
    comportamentos diferentes
    conteúdos dinâmicos
    Media-Queries

    View full-size slide

  59. @media (min-width: 768px) {
    // tablets (iPads)
    }
    @media
    @media (min-width: 992px) {
    // telas normais (notebooks)
    }
    @media (min-width: 1200px) {
    // telas grandes (desktops)
    }

    View full-size slide

  60. (primeiro mobile)
    Mobile-First

    View full-size slide

  61. (CSS com super poderes)
    Pré
    Processadores

    View full-size slide

  62. Adicionam funcionalidades legais,
    úteis e criativas para o CSS. Auxiliam
    na modularização e manutenção.
    O que é?

    View full-size slide

  63. Pop stars
    lesscss.org stylus-lang.com sass-lang.com

    View full-size slide

  64. variables
    nesting
    partials
    mixins
    extend
    operators
    Features

    View full-size slide

  65. (pra quem não sabe harmonizar as cores)
    Bibliotecas

    View full-size slide

  66. Ajudam na hora de personalizar e
    manipular o visual dos elementos.
    O que é?

    View full-size slide

  67. Pop stars
    milligram.github.io
    getbootstrap.com getmdl.io

    View full-size slide

  68. construção acelerada
    código mais limpo
    solução para problemas comuns
    compatibilidade entre os navegadores
    desenvolvendo através de um padrão
    auxilia no trabalho em grupo
    Features

    View full-size slide

  69. ter código CSS que nunca é utilizado
    curva de aprendizado mais lenta
    não está aprendendo a fazer você mesmo
    Problemas

    View full-size slide

  70. https://developer.mozilla.org/pt-BR/docs/
    tag/CSS
    https://colorlib.com/wp/free-css3-
    frameworks/
    pre-processadores.github.io/Sass-Guide
    tableless.com.br/sass-vs-less-vs-stylus-
    batalha-dos-pre-processadores
    https://edsonjunior.com/um-guia-visual-
    para-flexbox
    Keep walking...

    View full-size slide

  71. (não tem nada a ver com Java)
    Javascript

    View full-size slide

  72. O Javascript é conhecido como a
    linguagem de script para páginas
    web que suporta vários estilos:
    orientada a objetos, imperativo e
    funcional.
    O que é?

    View full-size slide

  73. Seu padrão é conhecido como
    ECMAScript.
    O que é?

    View full-size slide

  74. O Criador!
    Brendan Eich

    View full-size slide

  75. (var, let, const
    Variáveis

    View full-size slide

  76. var a;
    // undefined
    Variáveis
    var name = "simon";
    // simon

    View full-size slide

  77. (if, switch)
    Condicionais

    View full-size slide

  78. var domingo = true;

    if (domingo) {

    // vou á praia

    } else {
    // vou estudar
    }
    Condicionais
    (domingo) ? 'praia' : 'estudar';

    View full-size slide

  79. var domingo = 'praia';

    switch (domingo) {
    case 'praia':
    // vai pra praia
    break;
    case 'piscina':
    case 'churrasco':
    // vai pra piscina
    break;
    default:
    // fica em casa dormindo
    }
    Condicionais

    View full-size slide

  80. (for, for...of, for...in, while)
    Loops

    View full-size slide

  81. Loops
    var cervejas = 0;
    for (cervejas; cervejas <= 10; cervejas++) {
    console.log('Já bebi ' + cervejas + ' cervejas.');
    }

    View full-size slide

  82. Loops
    var brejas_array, breja;
    brejas_array = new Array();
    brejas_array = ['Amstel', 'Heineken', 'Eisenbahn'];
    for (breja of brejas_array) {
    console.log('Já bebi ' + breja);
    }

    View full-size slide

  83. Loops
    var brejas_obj, breja;
    brejas_obj = {
    'Amstel': 'IBU 6',
    'Heineken': 'IBU 10',
    'Eisenbahn': 'IBU 8'
    };
    for (breja in brejas_obj) {
    console.log(breja + ' = ' + brejas_obj[breja]);
    }

    View full-size slide

  84. Loops
    var cervejas = 0;
    while (cervejas <= 10) {

    console.log('Já bebi ' + cervejas + ' cervejas.');

    cervejas++;
    }
    while (true) {

    // pegadinha com o amiguinho.
    }

    View full-size slide

  85. (propriedade e tipos)
    Objetos

    View full-size slide

  86. Python (dicionários)
    Perl (hashes)
    Ruby (hashes)
    C e C++ (hash)
    Java (hashmaps)
    Parece com..

    View full-size slide

  87. Objetos
    var carro = new Object();
    carro = {
    marca: 'Volvo',
    novo: true,
    detalhes: {
    color: 'Black',
    year: '2016',
    abs: true,
    rodas: ['1', '2', '3', '4']
    }
    };

    View full-size slide

  88. Objetos
    carro['detalhes']
    // Object {color: "Black", year: "2016", abs: true,
    rodas: Array[4]}
    carro.detalhes.rodas[1]

    // "2"
    carro.marca
    // "Volvo"

    View full-size slide

  89. (new Array(), ['', '', ''])
    Arrays

    View full-size slide

  90. Arrays
    var semana = new Array();
    semana[0] = 'Domingo';
    semana[1] = 'Segunda';
    semana[2] = 'Terça';
    semana[3] = 'Quarta-Feira';
    semana[4] = 'Quinta-Feira';
    semana[5] = 'Sexta-Feira';
    semana[6] = 'Sábado';
    semana.length
    // 7

    View full-size slide

  91. Arrays
    var semana = [
    'Domingo',
    'Segunda',
    'Terça',
    'Quarta-Feira',
    'Quinta-Feira',
    'Sexta-Feira',
    'Sábado'
    ];
    semana.length
    // 7

    View full-size slide

  92. Arrays
    semana[0]
    // 'Domingo'
    semana[5]
    // 'Sexta'
    semana[semana.length - 1]
    // 'Sábado'

    View full-size slide

  93. Arrays
    semana.forEach(function(item, index, array) {
    console.log(item, index);
    });

    View full-size slide

  94. Arrays
    semana.unshift('Primeiro Dia');
    semana.push('Último Dia');
    semana.pop();
    // remove o 'Último Dia';
    semana.shift();
    // remove o 'Primeiro Dia';

    View full-size slide

  95. Arrays
    var posicao;
    posicao = semana.indexOf('Terça');
    // 3
    semana.splice(posicao, 1);
    // ['Terça']

    View full-size slide

  96. (function() {};)
    Funções

    View full-size slide

  97. Funções
    function [nome]([param] [, param] [..., param]) {
    instruções
    }

    View full-size slide

  98. Funções
    function multiply(x, y) {
    console.log(arguments);
    return x * y;
    }
    multiply(4, 9);
    // 36

    View full-size slide

  99. Funções
    function add() {
    var sum, i, j;
    sum = 0;
    i = 0;
    j = arguments.length;
    for (i; i < j; i++) {
    sum += arguments[i];
    }
    return sum;
    }
    add(2, 3, 4, 5); // ?

    View full-size slide

  100. Funções
    function Celular(marca, modelo, ano) {
    this.marca = marca;
    this.modelo = modelo;
    this.ano = ano;
    }
    var iPhone = new Celular('iPhone', '5s', 2016);
    iPhone
    // ?

    View full-size slide

  101. Funções
    function Pessoa(nome, idade, sexo, aparelho) {
    this.nome = nome;
    this.idade = idade;
    this.sexo = sexo;
    this.aparelho = aparelho;
    }
    var Thulio = new Pessoa('Thulio', 26, 'M', iPhone);
    Thulio
    // ?

    View full-size slide

  102. javascript.crockford.com/javascript.html
    https://developer.mozilla.org/pt-BR/docs/
    Web/JavaScript/A_re-
    introduction_to_JavaScript
    https://developer.mozilla.org/pt-BR/docs/
    Web/API
    https://developer.mozilla.org/pt-BR/docs/
    Web/JavaScript/Guide
    Keep walking...

    View full-size slide

  103. (MVVM)
    AngularJS

    View full-size slide

  104. O AngularJS é um framework
    javascript, que permite estender a
    sintaxe HTML.
    O que é?

    View full-size slide

  105. Framework JavaScript open-source,
    mantido pelo Google, que auxilia na
    execução e criação
    de SPA's.
    O que é?

    View full-size slide

  106. time de desenvolvimento da Google
    O criador!

    View full-size slide

  107. Data-binding

    View full-size slide

  108. data-binding
    MVC
    separação de responsabilidades
    testes
    adoção da comunidade
    SPA
    Google
    Mercado
    Porque usar?

    View full-size slide

  109. (conhecendo por dentro..)
    Anatomia

    View full-size slide

  110. modules
    directives
    model
    controller
    services
    Features

    View full-size slide

  111. ( angular.module() )
    Modules

    View full-size slide

  112. angular.module('myApp');
    // obtém um módulo
    Modules

    // aqui dentro vem seu código

    angular.module('myApp', []);
    // cria um módulo

    View full-size slide

  113. ( angular.directive() )
    Directives

    View full-size slide

  114. ng-init
    // inicia os dados de uma aplicação
    Directives
    ng-model
    // realiza o bind entre view - controller
    ng-app
    // inicia uma aplicação angular

    View full-size slide

  115. ng-click
    // instância do evento de click, onClick
    Directives
    ng-controller
    // especifica um controller
    ng-class
    // classes dinâmicas

    View full-size slide

  116. ng-show / ng-hide
    // mostra ou esconde um elemento
    Directives
    ng-if
    // responsável por condicionais
    ng-repeat
    // responsável pelo loop em um array

    View full-size slide

  117. ng-include
    // incluir um conteúdo HTML
    Directives
    ng-view
    // responsável pela manipulação de rotas
    ng-submit
    // evento de submit para formulários

    View full-size slide

  118. (ng-model)
    Model

    View full-size slide

  119. Model





    // HTML

    View full-size slide

  120. Model
    function myCtrl() {
    var vm;
    vm = this;
    vm.name = '';
    vm.name2 = 'Shawlin';
    }
    angular
    .module('myApp', [])
    .controller('myCtrl', myCtrl);
    // script

    View full-size slide

  121. Model


    Name: {{vm.name}}
    Name 2: {{vm.name2}}


    // resultado

    View full-size slide

  122. ( angular.controller() )
    Controller

    View full-size slide

  123. Controller


    Primeiro Nome: 



    Último Nome: 




    // HTML

    View full-size slide

  124. function myCtrl() {
    var vm;
    vm = this;
    vm.firstName = 'Shawlin';
    vm.lastName = 'Manju';
    }
    angular
    .module('myApp', [])
    .controller('myCtrl', myCtrl);
    // script
    Controller

    View full-size slide



  125. Nome completo: 

    {{vm.firstName}} + {{vm.lastName}}


    // HTML
    Controller

    View full-size slide

  126. ( angular.service() )
    Services

    View full-size slide

  127. function myService($http) {
    function getData() {
    return $http.get(url).then().catch();
    }
    return {
    get: getData
    };
    }
    myService.$inject = ['$http'];
    angular
    .module('myApp', [])
    .service('myService', myService);
    Services

    View full-size slide

  128. Services
    function myCtrl(myService) {
    var vm;
    vm = this;
    vm.lista = myService.get();
    }
    myCtrl.$inject = ['myService'];
    angular
    .module('myApp', [])
    .controller('myCtrl', myCtrl);

    View full-size slide

  129. (o divisor de águas.)
    Versões

    View full-size slide

  130. Versões
    v1.js v2.ts
    renderização no server
    compilação para
    linguagem nativa
    renderização em diversos
    ambientes
    multiplataforma
    compilação nativa
    velocidade, desempenho

    View full-size slide

  131. (não!)
    Só existe
    Angular?

    View full-size slide

  132. Só existe angular?
    vuejs.org
    backbonejs.org emberjs.com
    facebook.github.io/react

    View full-size slide

  133. https://angularjs.org
    https://angular.io
    aprendaangular2.online
    http://pt.slideshare.net/gustavocostaw/
    angularjs-estado-atual
    http://www.typescriptlang.org/play/
    Keep walking...

    View full-size slide

  134. (NoSQL com par de chave e valor)
    MongoDB

    View full-size slide

  135. database === database
    table === collections
    rows === documents json
    query === query
    index === index
    partition === shard
    SQL / MongoDB

    View full-size slide

  136. quando seu banco de dados relacional não
    aguenta mais requisições crescentes e o
    servidor ja está no seu máximo, utilize um
    banco NoSQL.
    quando necessitar de alta escalabilidade ou
    disponibilidade.
    Onde usar?

    View full-size slide

  137. MemcacheDB
    Redis
    SimpleBD
    Project Voldemort
    MongoDB
    Maior escalabilidade?

    View full-size slide

  138. orientado a documentos (JSON/BSON)
    escalável / baixo custo
    de alto desempenho
    código aberto
    schemaless
    cluster / sharding / réplica / GridFs
    Features

    View full-size slide

  139. 4-byte é o timestamp
    3-byte é o identificador da máquina
    2-byte é o id do processo
    3-byte é o contador que começa com valor
    randômico
    ObjectID

    View full-size slide

  140. (escalabilidade com baixo custo)
    Cluster

    View full-size slide

  141. (distribuição de dados em grandes volumes)
    Sharding

    View full-size slide

  142. (espelhamento dos dados entre servidores)
    Réplica

    View full-size slide

  143. (armazenamento dos arquivos binários)
    GridFs

    View full-size slide

  144. Sistema de armazenamento dos
    arquivos binários, que podem ser
    distribuídos pelos servidores.
    GridFs

    View full-size slide

  145. (mongod e mongo)
    Comandos

    View full-size slide

  146. Comandos
    database.coleção.função()

    View full-size slide

  147. use teste
    // criando um database
    show dbs
    // listando um database
    Comandos

    View full-size slide

  148. db.teste.insert({ a: true })
    // inserindo diretamente via parametro
    var obj = { b: 'número 2' }
    db.teste.insert(obj)
    // inserindo via variável
    var meuArray = [{}, {}, {}]
    db.teste.insert(meuArray)
    // inserindo com array
    Comandos

    View full-size slide

  149. Comandos
    db.teste.find()
    // lista todos os dados de uma coleção
    var query = { a : true }
    db.teste.find(query)
    // lista um registo passando uma variável

    View full-size slide

  150. Comandos
    var query = { a : true }
    var obj = db.teste.findOne(query)
    obj.a = false
    db.teste.save(obj)
    // edita um dado da coleção

    View full-size slide

  151. Comandos
    db.teste.remove({})
    // apaga os dados e mantém coleção
    db.teste.drop()
    // apaga a coleção
    db.dropDatabase()
    // apaga o banco

    View full-size slide

  152. operadores aritméticos
    operadores lógicos
    $or, $nor, $and, $ne
    busca em arrays
    operadores de alteração em arrays
    $push, $pull
    count
    ordenação
    relacionamento
    Tem mais...?

    View full-size slide

  153. https://docs.mongodb.com/
    https://youtu.be/leYxsEAL_yY
    meumysql.blogspot.com.br/2011/06/o-que-e-
    um-banco-de-dados-em-cluster.html
    Keep walking...

    View full-size slide

  154. (javascript all the things)
    NodeJS

    View full-size slide

  155. É um interpretador de código
    JavaScript que funciona em
    qualquer coisa que você imaginar.
    O que é?

    View full-size slide

  156. Seu objetivo é ajudar
    programadores na criação de
    aplicações de alta escalabilidade.
    O que é?

    View full-size slide

  157. E é capaz de manipular dezenas de
    milhares de conexões simultâneas,
    numa única máquina física.
    O que é?

    View full-size slide

  158. se apaixonou?
    O que é?

    View full-size slide

  159. I/O assíncrono
    single thread
    event loop
    filesystem
    network
    other
    funções assíncronas por padrão
    Features

    View full-size slide

  160. O Criador!
    Ryan Dahl

    View full-size slide

  161. (fila infinita)
    Event Loop

    View full-size slide

  162. Não é mágica!

    View full-size slide

  163. (síncrono, assíncrono, restaurante e garçom)
    I/O

    View full-size slide

  164. assíncrono.

    View full-size slide

  165. assíncrono.

    View full-size slide

  166. (anywhere)
    Onde usar?

    View full-size slide

  167. automação residencial
    sites
    sistemas web
    aplicativos para celular
    aplicativos para desktop
    Onde usar?

    View full-size slide

  168. (um pessoal aí..)
    Alguém usa?

    View full-size slide

  169. umas empresas ai..

    View full-size slide

  170. umas empresas ai..

    View full-size slide

  171. (Node Package Manager)
    NPM

    View full-size slide

  172. npm init
    // inicia um package.json
    NPM
    npm install --save
    // instala um pacote no projeto
    npm install -g
    // instala um pacote globalmente

    View full-size slide

  173. https://github.com/creationix/nvm
    https://nodejs.org
    nodebr.com
    brazil.nodeconf.com
    https://youtu.be/OgfO37F6mdg
    Keep walking...

    View full-size slide

  174. (continue caminhando...)
    Keep walking...

    View full-size slide

  175. Developer
    Tools

    View full-size slide

  176. Chrome DevTools

    View full-size slide

  177. Firefox DevTools

    View full-size slide

  178. Safari DevTools

    View full-size slide

  179. Task
    Runner,
    Module
    Bundler

    View full-size slide

  180. GruntJS GulpJS

    View full-size slide

  181. Web
    Analytics

    View full-size slide

  182. gtmetrix.com

    View full-size slide

  183. Google PageSpeed

    View full-size slide

  184. Google Analytics

    View full-size slide

  185. Share and
    Deploy

    View full-size slide

  186. Github Pages

    View full-size slide

  187. Be an expert.

    View full-size slide

  188. A List Apart
    '

    View full-size slide

  189. HTML5 Rocks
    '

    View full-size slide

  190. Smashing Magazine
    '

    View full-size slide

  191. Leo Balter
    @leobalter
    Diego Eis
    @diegoeis
    Zeno Rocha
    @zenorocha
    Eduardo Shiota
    @shiota
    Jean Carlo Emer
    @jcemer
    Sérgio Lopes
    @sergio_caelum
    Davidson Fellipe
    @davidsonfellipe
    Juarez Filho
    @juarezpaf
    Ciro Nunes
    @cironunesdev
    Eduardo Lundgren
    @eduardolundgren
    Almir Filho
    @almirfilho
    Caio Gondim
    @caio_gondim

    View full-size slide

  192. BrazilJS Weekly
    &

    View full-size slide

  193. Frontend Focus
    '

    View full-size slide

  194. Javascript Weekly
    '

    View full-size slide

  195. (muuuuito mais...)
    Tem mais...

    View full-size slide

  196. Híbridos Nativos

    View full-size slide

  197. baixo custo
    desenvolvimento mais rápido
    desenvolvimento multi-plataforma
    comunidade
    pouca "mão-de-obra"
    Híbrido

    View full-size slide

  198. Nativos
    custo elevado
    desenvolvimento mais demorado
    restrito a uma única plataforma

    View full-size slide

  199. Thulio Philipe @thulioph
    Web Developer
    goo.gl/cFtIoA
    Obrigado!

    View full-size slide