A Web do Futuro - Progressivamente

Conheça a Web do Futuro e saiba em que tecnologias investir seu tempo, grandes empresas já estão utilizando essas tecnologias e este é só o começo. Saiba os grandes diferenciais dessas tecnologias e como utilizar as mesmas para turbinar sua carreira e entregar resultados rápidos na Web e em Apps.

Código fonte da apresentação com notas do apresentador: https://github.com/filipenevola/reveal.js/blob/web/index.html

Transcript

1. A Web do Futuro - A Web do Futuro - Progressivamente Progressivamente @FilipeNevola
2. Progressivamente? Progressivamente?
3. Janeiro de ... 2007 Janeiro de ... 2007 Extract from Steve Jobs speech at Macworld 2007 And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today
4. Maio de ... 2016 Maio de ... 2016 Google I/O em San Francisco Progressive Web App - conceito é apresentado
5. Maio de ... 2017 Maio de ... 2017 Twitter / Google Estudo de caso Twitter PWA: ✓ 65% mais páginas por sessão ✓ 75% mais Tweets enviados ✓ 20% menos abandono
6. E a loja? E a loja?
7. Abril de ... 2018 Abril de ... 2018 Microsoft Primeiros Windows 10 PWAs são publicados na loja
9. ? ?
10. 24 de Julho de ... 2018 24 de Julho de ... 2018 Pinterest Pinterest PWA aumentou em 156% os usuários semanais no Brasil ( 312% na India )
12. Quer mais? Quer mais? ✓ 53% do tempo de usuários comprando é na Web ✓ 51% dos usuários não baixam nenhum app por mês Google I/O 2018
13. O que dá pra fazer com PWA? O que dá pra fazer com PWA? ✓ O ine ✓ Bluetooth ✗ NFC ✗ Acessar SMS/Contatos ✓ Ícone na Home ✓ Push Noti cation whatwebcando.today
15. JavaScript JavaScript ✓ A única linguagem que roda no navegador ✓ TC39 - Aberta e em plena evolução ✓ Service Worker ✓ Comunidade grande e ativa (até demais)
16. Excesso de Bibliotecas e Excesso de Bibliotecas e Frameworks Frameworks Não reinvente a roda Tenha foco
19. Escolhas ... Escolhas ... MongoDB NodeJS Meteor ReactJS 2013
20. ... e continuo ... e continuo GraphQL Flexbox Material UI
21. Como Escolher? Como Escolher? ✓ Siga no GitHub ✓ Issues e PRs ✓ Downloads ✓ Con ra contra indicações
22. Veja vagas abertas mas pense Veja vagas abertas mas pense no no futuro futuro! !
23. Se gosta de Se gosta de empreender empreender, se , se arrisque! arrisque!
25. JavaScript JavaScript
26. Falsy Values Falsy Values if (false) // false if (0) // false if ('') // false if ("") // false if (null) // false if (undefined) // false if (NaN) // false
27. Conditions Conditions 'Texto' && false // 'Texto' false && 'Texto' // false 'Texto' || false // 'Texto' false || 'Texto' // 'Texto' false || '' // '' false && 10 // false false || 10 // 10 true || '' // true
28. Template Strings Template Strings // passado const tituloEmail = 'Olá ' + nome + ', bem-vindo!'; // presente const tituloEmail = `Olá ${nome}, bem-vindo!`;
29. Functions Functions // passado function gerarEmail(nome) { return 'Olá ' + nome + ', bem-vindo!'; } // presente const gerarEmail = (nome) => { return `Olá ${nome}, bem-vindo!`; } // presente - encurtado const gerarEmail = nome => { return `Olá ${nome}, bem-vindo!`; } // presente - mais encurtado const gerarEmail = nome => `Olá ${nome}, bem-vindo!`;
30. Objects Objects const pessoa = { nome: 'Denilson', idade: 20, }; const pedido = { pessoa: pessoa, valor: 100.50, }; // object shorthand const pedido2 = { pessoa, valor: 100.50, }; // encurtado com return de objeto const gerarPedido = pessoa, valor => ({pessoa, valor});
31. Object Operations Object Operations const pedido = { pessoa, valor: 100.50, quantidade: 5, }; // passado const valor = pedido.valor; // presente const { valor } = pedido; const { pessoa, ...restante } = pedido; // restante === { valor: 100.50, quantidade: 5}
32. Arrays Arrays const array = [1, 2, 3, 4, 5]; // passado const temCinco = array.indexOf(5) !== -1; // presente const temCinco = array.includes(5);
33. Funcional Funcional const array = [1, 2, 3, 4, 5]; const somentePar = array .filter(e => e % 2 === 0); // [2, 4] const imparEmDobro = array .filter(e => e % 2 !== 0) .map(e => e * 2); // [2, 6, 10]
34. Modules Modules // numeros.js export const numeros = [1, 2, 3, 4, 5]; // filtro.js import { numeros } from 'numeros.js'; const somentePar = numeros .filter(e => e % 2 === 0);
35. Promises e Async Promises e Async const obterDados = async () => { return rp('api.movies.com'); } obterDados() .then(dados => { console.log(dados); }) .catch(erro => console.error('Problema', erro))
36. Promises e Async/Await Promises e Async/Await const obterDados = async () => { return rp('api.movies.com'); } const dados = await obterDados() console.log(dados);
37. MongoDB MongoDB ✓ Utiliza JavaScript ✓ Coleções e documentos ✓ Sem normalização e esquema ✓ Fácil de escalar (cluster) mlab.com
38. MeteorJS MeteorJS ✓ Convenção ao invés de con guração ✓ Fácil deploy `meteor deploy` ✓ Cliente e servidor integrado ✓ API isomór ca ✓ Build integrado de Apps Nativos ✓ Hot Code Push
39. MeteorJS + MongoDB MeteorJS + MongoDB ✓ Mini Mongo ✓ Publication / Subscription ✓ Escalável com Redis
40. Inserindo Inserindo const Pedidos = new Mongo.Collection('pedidos'); const pedido = { pessoa, valor: 100.50, quantidade: 5, produtos: [ { _id: 1, nome: 'Sabonete', valor: 5.5, quantidade: 3 }, { _id: 2, nome: 'Azeite', valor: 84.0, quantidade: 4 }, ] }; const _id = Pedidos.insert(pedido);
41. Removendo Removendo const Pedidos = new Mongo.Collection('pedidos'); Pedidos.remove(_id);
42. Buscando Buscando const Pedidos = new Mongo.Collection('pedidos'); const pedidosCaros = Pedidos.find({ value: { $gt: 50.0 } }); const pedidosComAzeite = Pedidos.find({ produtos: { $elemMatch: { nome: 'Azeite' } } });
43. Atualizando Atualizando const Pedidos = new Mongo.Collection('pedidos'); const produto = { _id: 3, nome: 'Macarrão', valor: 8.0, quantidade: 3 }; Pedidos.update(_id, { $addToSet: { produtos: produto } });
44. Atualizando 2 Atualizando 2 const Pedidos = new Mongo.Collection('pedidos'); const produtos = [ { _id: 4, nome: 'Farinha', valor: 4.0, quantidade: 10}, { _id: 5, nome: 'Fermento', valor: 7.5, quantidade: 1} ]; Pedidos.update(_id, { $set: { produtos } // produtos: produtos, lembra? });
45. NextJS NextJS * Alternativa ao Meteor ✓ Foco em SSR ✓ Fácil deploy com `now` ✓ Integração com CDN
47. Como separar bem Como separar bem cliente cliente e e servidor servidor? ?
48. REST? REST?
52. GraphQL GraphQL ✓ Capacidades e Necessidades ✓ Fortemente Tipado ✓ Formato Exato ✓ Auto documentado ✓ Auto descobrimento
55. Como criar componentes Como criar componentes reusáveis reusáveis de verdade de verdade? ?
56. ReactJS ReactJS ✓ Comunidade gigante ✓ Sintaxe facilitada ✓ Baseado em Funções ✓ Fácil de modularizar
57. JSX JSX babeljs.io/repl
62. Material Design Material Design ✓ Imitar o mundo real ✓ Google como criador ✓ Ícones ✓ Animações Material UI
63. CSS CSS ✓ Alinhamento ✓ Distribuição ✓ Cores exbox.io cssgrid.io
64. Mobile Mobile ✓ Mobile First ✓ @media queries ✓ Responsivo
66. .app { display: flex; flex-direction: column; height: 100vh; } .main { display: flex; flex-direction: column; flex-grow: 1; overflow: auto; }
67. .app-header { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main::-webkit-scrollbar { width: 0; height: 0; background: inherit; }
68. Nativo, Híbrido ou PWA Nativo, Híbrido ou PWA Nativo: Swift & Object C | Kotlin & Java Nativo com JavaScript: React Native Híbrido: Cordova PWA: Web
69. Comece pelo problema e Comece pelo problema e como resolver ele da forma como resolver ele da forma mais mais simples simples possível possível
70. PWA: manifest.json PWA: manifest.json { "name": "Wantch", "short_name": "Wantch", "start_url": "/", "display": "standalone", "background_color": "white", "lang": "pt-BR", "theme_color": "#315481", "orientation": "portrait" }
71. Quais seriam suas escolhas Quais seriam suas escolhas hoje? hoje? PWA MongoDB MeteorJS ReactJS
72. Agora é contigo, mas conte com nossa ajuda! Agora é contigo, mas conte com nossa ajuda! CodeFTW
73. Obrigado ! Obrigado ! @FilipeNevola