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 Slide

  2. (olá!)
    Apresentações

    View Slide

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

    Web Developer @Labcodes

    Team @Devbeers

    Lover @GoogleMaps

    View Slide

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

    View Slide

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

    View Slide

  6. Objetivo final
    goo.gl/DWIQuR

    View Slide

  7. View Slide

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

    View Slide

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

    View Slide

  10. O Criador!
    Github

    View Slide

  11. electron.atom.io
    Um adendo.

    View Slide

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

    View Slide

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

    View Slide

  14. Emmet
    emmet.io
    Snippets

    View Slide

  15. IDE
    (Integrated Development Environment)

    View Slide

  16. IDE
    www.jetbrains.com/phpstorm

    View Slide

  17. IDE
    www.visualstudio.com

    View Slide

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

    View Slide

  19. Editor de Texto
    (Text Editor)

    View Slide

  20. Editor de Texto
    brackets.io

    View Slide

  21. Editor de Texto
    atom.io

    View Slide

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

    View Slide

  23. Editor de Texto
    www.sublimetext.com

    View Slide

  24. Plataformas
    (funciona no windows.)

    View Slide

  25. Plataformas

    View Slide

  26. Custo?
    (a parte boa)

    View Slide

  27. Custo
    R$ 0,00 USD $0

    View Slide

  28. 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 Slide

  29. View Slide

  30. (Hypertext Markup Language)
    HTML

    View Slide

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

    View Slide

  32. O Criador!
    Tim Berners Lee

    View Slide

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

    View Slide

  34. < tags />

    View Slide








  35. Estruturais

    View Slide

  36. View Slide

  37. View Slide

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

    View Slide

  39. autoplay
    controls
    loop
    muted
    preload
    Áudio

    View Slide

  40. autoplay
    controls
    loop
    muted
    preload
    poster
    Vídeo

    View Slide

  41. (Application Programming Interface)
    API's

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. Compatibilidade
    caniuse.com

    View Slide

  46. devdocs.io
    Compatibilidade

    View Slide

  47. 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 Slide

  48. View Slide

  49. (Cascading Style Sheets)
    CSS

    View Slide

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

    View Slide

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

    View Slide

  52. Anatomia

    View Slide

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

    View Slide

  54. Externas

    View Slide

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

    View Slide

  56. Inline

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

    View Slide

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

    View Slide

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

    View Slide

  59. 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 Slide

  60. 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 Slide

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

    View Slide

  62. 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 Slide

  63. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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


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

    View Slide

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

    View Slide

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

    View Slide

  70. (primeiro mobile)
    Mobile-First

    View Slide

  71. View Slide

  72. (CSS com super poderes)
    Pré
    Processadores

    View Slide

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

    View Slide

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

    View Slide

  75. variables
    nesting
    partials
    mixins
    extend
    operators
    Features

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  79. 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 Slide

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

    View Slide

  81. 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 Slide

  82. View Slide

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

    View Slide

  84. 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 Slide

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

    View Slide

  86. O Criador!
    Brendan Eich

    View Slide

  87. (var, let, const
    Variáveis

    View Slide

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

    View Slide

  89. (if, switch)
    Condicionais

    View Slide

  90. var domingo = true;

    if (domingo) {

    // vou á praia

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

    View Slide

  91. 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 Slide

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

    View Slide

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

    View Slide

  94. 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 Slide

  95. 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 Slide

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

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

    cervejas++;
    }
    while (true) {

    // pegadinha com o amiguinho.
    }

    View Slide

  97. (propriedade e tipos)
    Objetos

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

  102. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  111. 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 Slide

  112. 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 Slide

  113. 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 Slide

  114. 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 Slide

  115. View Slide

  116. (MVVM)
    AngularJS

    View Slide

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

    View Slide

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

    View Slide

  119. time de desenvolvimento da Google
    O criador!

    View Slide

  120. Data-binding

    View Slide

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

    View Slide

  122. (conhecendo por dentro..)
    Anatomia

    View Slide

  123. modules
    directives
    model
    controller
    services
    Features

    View Slide

  124. ( angular.module() )
    Modules

    View Slide

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

    // aqui dentro vem seu código

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

    View Slide

  126. ( angular.directive() )
    Directives

    View Slide

  127. 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 Slide

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

    View Slide

  129. 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 Slide

  130. 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 Slide

  131. (ng-model)
    Model

    View Slide

  132. Model





    // HTML

    View Slide

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

    View Slide

  134. Model


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


    // resultado

    View Slide

  135. ( angular.controller() )
    Controller

    View Slide

  136. Controller


    Primeiro Nome: 



    Último Nome: 




    // HTML

    View Slide

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

    View Slide



  138. Nome completo: 

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


    // HTML
    Controller

    View Slide

  139. ( angular.service() )
    Services

    View Slide

  140. 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 Slide

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

    View Slide

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

    View Slide

  143. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  147. View Slide

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

    View Slide

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

    View Slide

  150. 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 Slide

  151. MemcacheDB
    Redis
    SimpleBD
    Project Voldemort
    MongoDB
    Maior escalabilidade?

    View Slide

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

    View Slide

  153. 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 Slide

  154. (escalabilidade com baixo custo)
    Cluster

    View Slide

  155. Cluster?

    View Slide

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

    View Slide

  157. Shardings?

    View Slide

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

    View Slide

  159. Réplica?

    View Slide

  160. (armazenamento dos arquivos binários)
    GridFs

    View Slide

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

    View Slide

  162. (mongod e mongo)
    Comandos

    View Slide

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

    View Slide

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

    View Slide

  165. 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 Slide

  166. 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 Slide

  167. 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 Slide

  168. 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 Slide

  169. 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 Slide

  170. 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 Slide

  171. View Slide

  172. (javascript all the things)
    NodeJS

    View Slide

  173. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  177. se apaixonou?
    O que é?

    View Slide

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

    View Slide

  179. O Criador!
    Ryan Dahl

    View Slide

  180. (fila infinita)
    Event Loop

    View Slide

  181. Não é mágica!

    View Slide

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

    View Slide

  183. síncrono.

    View Slide

  184. síncrono.

    View Slide

  185. assíncrono.

    View Slide

  186. assíncrono.

    View Slide

  187. (anywhere)
    Onde usar?

    View Slide

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

    View Slide

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

    View Slide

  190. umas empresas ai..

    View Slide

  191. umas empresas ai..

    View Slide

  192. (Node Package Manager)
    NPM

    View Slide

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

    View Slide

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

    View Slide

  195. (continue caminhando...)
    Keep walking...

    View Slide

  196. Developer
    Tools

    View Slide

  197. View Slide

  198. Chrome DevTools

    View Slide

  199. Firefox DevTools

    View Slide

  200. Safari DevTools

    View Slide

  201. Generators

    View Slide

  202. View Slide

  203. yeoman.io

    View Slide

  204. Task
    Runner,
    Module
    Bundler

    View Slide

  205. GruntJS GulpJS

    View Slide

  206. Webpack

    View Slide

  207. Web
    Analytics

    View Slide

  208. gtmetrix.com

    View Slide

  209. Google PageSpeed

    View Slide

  210. Google Analytics

    View Slide

  211. Share and
    Deploy

    View Slide

  212. Github Pages

    View Slide

  213. Heroku

    View Slide

  214. Firebase

    View Slide

  215. Be an expert.

    View Slide

  216. View Slide

  217. Tableless
    &

    View Slide

  218. W3C
    &

    View Slide

  219. MDN
    &

    View Slide

  220. BrazilJS
    &

    View Slide

  221. CSS Tricks
    '

    View Slide

  222. A List Apart
    '

    View Slide

  223. HTML5 Rocks
    '

    View Slide

  224. Smashing Magazine
    '

    View Slide

  225. View Slide

  226. 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 Slide

  227. View Slide

  228. BrazilJS Weekly
    &

    View Slide

  229. CSS Weekly
    '

    View Slide

  230. Frontend Focus
    '

    View Slide

  231. Javascript Weekly
    '

    View Slide

  232. (muuuuito mais...)
    Tem mais...

    View Slide

  233. Híbridos Nativos

    View Slide

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

    View Slide

  235. View Slide

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

    View Slide

  237. View Slide

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

    View Slide