As novas tecnologias para desenvolver webapps modernas

1. Web Apps
Modernas
AMP Roadshow

2. Dan Vitoriano
PagSeguro
Engenheiro de Software
Community Manager
FIAP
Professor MBA Mobile Development
Professor MBA Fullstack Developer
@dnvtrn

3. WEB APPS
MODERNAS

4. PWA

5. Metodologia de desenvolvimento que torna a
experiência de uso de uma página web pelo
celular semelhante a de um aplicativo mobile.
• São verdadeiras WebApps
• Não precisam de AppStore ou GooglePlay
• Requer um manifesto
PWA

6. Confiável
Rápido
Envolvente
PWA - Vantagens
Carregue instantaneamente e nunca mostre o dinossauro do Chrome,
mesmo em condições de rede incertas.
Responda rapidamente às interações do usuário com animações
suaves e sem rolagem.
Sinta-se como em um aplicativo natural no dispositivo, com uma
experiência imersiva do usuário.
+ https://developers.google.com/web/progressive-web-apps

7. PWA - Checklist
• Site is served over HTTPS
• Pages are responsive on tablets & mobile devices
• All app URLs load while offline
• Metadata provided for Add to Home screen
• First load fast even on 3G
• Site works cross-browser
• Page transitions don't feel like they block on the network
• Each page has a URL
+ https://developers.google.com/web/progressive-web-apps/checklist

8. PWA - Cases
+ https://pwa.rocks/

9. PWA - Exemplo

10. Angular

11. Angular
• DEVELOP ACROSS ALL PLATFORMS
• Progressive Web Apps
• Native - NativeScript, Cordova, Ionic
• Desktop
• SPEED & PERFORMANCE
• Universal - SSR
• Code Splitting
+ https://angular.io/features
• PRODUCTIVITY TOOLING
• Templates
• Angular CLI
• IDEs Plugins
• WIDE ECOSYSTEM
• Testing
• Animation
• Accessibility

12. Angular + AMP
+ https://youtu.be/-_ZAR21qrP0

13. Vue

14. Vue
Acessível
Já conhece HTML, CSS e JavaScript? Comece a criar aplicações
sem perder tempo!
Versátil
Ecossistema com adoção incremental, escala de uma simples
biblioteca a um framework completo.
Performático
20KB min+gzip Runtime
Virtual DOM Incrivelmente Rápido
Esforço Mínimo para Otimizações
+ https://br.vuejs.org/

15. Vue - AMP, SSR, PWA...
• Nuxt.js
• Quasar Framework SSR + PWA
• TypeScript
• Usar Vue em HTML simples
• Rápida Prototipação
• Vue CLI
• Vue UI
• ElectronVue
• Vue-Native
• Generating AMP Pages with JavaScript and
Vue.js (AMP Conf '19)

16. React

17. React
• Biblioteca declarativa para criar componentes de interfaces
• Desenvolvida pelo Facebook
• Stateful/Stateless
• VirtualDOM
• SPA
• create-react-app
• PWA nativo
• Super popular
• JSX
• SSR - Next
• Hooks
+ https://reactjs.org/

18. React + Next + AMP
+ https://blog.amp.dev/2016/09/20/amp-and-reactredux-why-not/

19. Outras tecnologias

20. Outras tecnologias para WebApps modernas
Polymer
React Native
Stelve
Flutter
Web Components

21. Web Components
São uma suíte de diferentes tecnologias que permite a criação de elementos customizados
reutilizáveis — com a funcionalidade separada do resto do seu código.
Mozilla Web Components Guideline
https://developer.mozilla.org/pt-BR/docs/Web/Web_Components
Google Web Components Guidelines
https://developers.google.com/web/fundamentals/web-components
Especificações, componentes, libs, PWA:
https://www.webcomponents.org/
+ https://amp.dev/documentation/components/

22. Polymer
AMP version of the News App made with Polymer
+ https://polymer-library.polymer-project.org/1.0/docs/apps/news-case-study#amp-version-of-the-news-app

23. Svelte

24. Svelte
+ https://svelte.dev/

25. React Native
Create native apps for Android and
iOS using React
+ https://facebook.github.io/react-native/

26. Flutter
Flutter is Google’s UI toolkit for building beautiful, natively compiled
applications for mobile, web, and desktop from a single codebase.
+ https://flutter.dev/

27. Obrigado!
https://github.com/danvitoriano
https://pt.slideshare.net/idmansp
https://twitter.com/dnvtrn
https://www.linkedin.com/in/danvitoriano