SlideShare uma empresa Scribd logo
Web Apps
Modernas
AMP Roadshow
Dan Vitoriano
PagSeguro
Engenheiro de Software
Community Manager
FIAP
Professor MBA Mobile Development
Professor MBA Fullstack Developer
@dnvtrn
WEB APPS
MODERNAS
PWA
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
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
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
PWA - Cases
+ https://pwa.rocks/
PWA - Exemplo
Angular
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
Angular + AMP
+ https://youtu.be/-_ZAR21qrP0
Vue
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/
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)
React
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/
React + Next + AMP
+ https://blog.amp.dev/2016/09/20/amp-and-reactredux-why-not/
Outras tecnologias
Outras tecnologias para WebApps modernas
Polymer
React Native
Stelve
Flutter
Web Components
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/
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
Svelte
Svelte
+ https://svelte.dev/
React Native
Create native apps for Android and
iOS using React
+ https://facebook.github.io/react-native/
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/
Obrigado!
https://github.com/danvitoriano
https://pt.slideshare.net/idmansp
https://twitter.com/dnvtrn
https://www.linkedin.com/in/danvitoriano

Mais conteúdo relacionado

Mais procurados

Curso de ReactJS
Curso de ReactJSCurso de ReactJS
Curso de ReactJS
Gustavo Lopes
 
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com BlazorMSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
Gustavo Bellini Bigardi
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
José Barbosa
 
Desenvolvendo para WordPress com Docker, Git e WP-CLI
Desenvolvendo para WordPress com Docker, Git e WP-CLIDesenvolvendo para WordPress com Docker, Git e WP-CLI
Desenvolvendo para WordPress com Docker, Git e WP-CLI
Rudá Almeida
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + Angular
Diego Narducci
 
Descomplicando o Mobile com Ionic Framework
Descomplicando o Mobile com Ionic FrameworkDescomplicando o Mobile com Ionic Framework
Descomplicando o Mobile com Ionic Framework
Yan Borowski Machado
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
Stefan Horochovec
 
PHP no Windows Azure
PHP no Windows AzurePHP no Windows Azure
PHP no Windows Azure
Priscila Mayumi
 
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Bruno Rodrigo S. Souza
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
Jefferson Mariano de Souza
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APICriando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma API
Jessica Zanelato Soares
 
GWT - RIA baseada em AJAX
GWT - RIA baseada em AJAXGWT - RIA baseada em AJAX
GWT - RIA baseada em AJAX
MJV Tecnologia & Inovação
 
JavaCE Conference 2012: ExtJS 4 + VRaptor
JavaCE Conference 2012: ExtJS 4 + VRaptorJavaCE Conference 2012: ExtJS 4 + VRaptor
JavaCE Conference 2012: ExtJS 4 + VRaptor
Loiane Groner
 
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
E-Commerce Brasil
 
Introdução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações webIntrodução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações web
Rodrigo Branas
 
Javascript para adultos
Javascript para adultosJavascript para adultos
Javascript para adultos
Guilherme Blanco
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicação
WordCamp Floripa
 
Por que devo aprender JavaScript?
Por que devo aprender JavaScript?Por que devo aprender JavaScript?
Por que devo aprender JavaScript?
Breno Alves
 
Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
Alvaro Viebrantz
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front end
Douglas Matoso
 

Mais procurados (20)

Curso de ReactJS
Curso de ReactJSCurso de ReactJS
Curso de ReactJS
 
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com BlazorMSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
 
Desenvolvendo para WordPress com Docker, Git e WP-CLI
Desenvolvendo para WordPress com Docker, Git e WP-CLIDesenvolvendo para WordPress com Docker, Git e WP-CLI
Desenvolvendo para WordPress com Docker, Git e WP-CLI
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + Angular
 
Descomplicando o Mobile com Ionic Framework
Descomplicando o Mobile com Ionic FrameworkDescomplicando o Mobile com Ionic Framework
Descomplicando o Mobile com Ionic Framework
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
PHP no Windows Azure
PHP no Windows AzurePHP no Windows Azure
PHP no Windows Azure
 
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APICriando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma API
 
GWT - RIA baseada em AJAX
GWT - RIA baseada em AJAXGWT - RIA baseada em AJAX
GWT - RIA baseada em AJAX
 
JavaCE Conference 2012: ExtJS 4 + VRaptor
JavaCE Conference 2012: ExtJS 4 + VRaptorJavaCE Conference 2012: ExtJS 4 + VRaptor
JavaCE Conference 2012: ExtJS 4 + VRaptor
 
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
 
Introdução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações webIntrodução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações web
 
Javascript para adultos
Javascript para adultosJavascript para adultos
Javascript para adultos
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicação
 
Por que devo aprender JavaScript?
Por que devo aprender JavaScript?Por que devo aprender JavaScript?
Por que devo aprender JavaScript?
 
Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front end
 

Semelhante a AMP Roadshow SP 2019 - Web Apps Modernas

WebAssembly além da Web - Casos de Uso em IoT
WebAssembly além da Web - Casos de Uso em IoTWebAssembly além da Web - Casos de Uso em IoT
WebAssembly além da Web - Casos de Uso em IoT
GDGFoz
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Leonardo Balter
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
João Vitor Paes de Barros do Ca
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
João Maciel
 
Browser Mobile - Opera
Browser Mobile - OperaBrowser Mobile - Opera
Browser Mobile - Opera
Renato Bongiorno Bonfanti
 
TDC2017 | São Paulo - Trilha Modern Web How we figured out we had a SRE team ...
TDC2017 | São Paulo - Trilha Modern Web How we figured out we had a SRE team ...TDC2017 | São Paulo - Trilha Modern Web How we figured out we had a SRE team ...
TDC2017 | São Paulo - Trilha Modern Web How we figured out we had a SRE team ...
tdc-globalcode
 
Progressive Web Apps: Um novo mundo
Progressive Web Apps: Um novo mundoProgressive Web Apps: Um novo mundo
Progressive Web Apps: Um novo mundo
Andre Baltieri
 
Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...
Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...
Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...
Marcus Garcia
 
Trabalhando com ALM na nuvem
Trabalhando com ALM na nuvemTrabalhando com ALM na nuvem
Trabalhando com ALM na nuvem
Adriano Bertucci
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
Valmir Justo
 
Quasar Framework - Front end de alto desempenho
Quasar Framework - Front end de alto desempenhoQuasar Framework - Front end de alto desempenho
Quasar Framework - Front end de alto desempenho
Patrick Monteiro
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Diego Cavalca
 
T18_LM3: Ajax
T18_LM3: AjaxT18_LM3: Ajax
T18_LM3: Ajax
Carlos Santos
 
Opções de Backends para seus apps móveis: Análise e Arquiteturas
Opções de Backends para seus apps móveis: Análise e ArquiteturasOpções de Backends para seus apps móveis: Análise e Arquiteturas
Opções de Backends para seus apps móveis: Análise e Arquiteturas
Jose Papo, MSc
 
Migrando de Applets para JavaFX, e Modelos de Distribuição de Apps
Migrando de Applets para JavaFX, e Modelos de Distribuição de AppsMigrando de Applets para JavaFX, e Modelos de Distribuição de Apps
Migrando de Applets para JavaFX, e Modelos de Distribuição de Apps
Bruno Borges
 
Desenvolvendo Sistema Cloud e Web Full-stack Developer
Desenvolvendo Sistema Cloud e Web Full-stack DeveloperDesenvolvendo Sistema Cloud e Web Full-stack Developer
Desenvolvendo Sistema Cloud e Web Full-stack Developer
Cesar Romero
 
Abordagens modernas no desenvolvimento web
Abordagens modernas no desenvolvimento webAbordagens modernas no desenvolvimento web
Abordagens modernas no desenvolvimento web
Wemerson Januario
 
Netbeans Slides
Netbeans SlidesNetbeans Slides
Netbeans Slides
Renato Puccini
 
Java Nuvem Appengine
Java Nuvem AppengineJava Nuvem Appengine
Java Nuvem Appengine
Mario Jorge Pereira
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
Rodrigo Valerio
 

Semelhante a AMP Roadshow SP 2019 - Web Apps Modernas (20)

WebAssembly além da Web - Casos de Uso em IoT
WebAssembly além da Web - Casos de Uso em IoTWebAssembly além da Web - Casos de Uso em IoT
WebAssembly além da Web - Casos de Uso em IoT
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Browser Mobile - Opera
Browser Mobile - OperaBrowser Mobile - Opera
Browser Mobile - Opera
 
TDC2017 | São Paulo - Trilha Modern Web How we figured out we had a SRE team ...
TDC2017 | São Paulo - Trilha Modern Web How we figured out we had a SRE team ...TDC2017 | São Paulo - Trilha Modern Web How we figured out we had a SRE team ...
TDC2017 | São Paulo - Trilha Modern Web How we figured out we had a SRE team ...
 
Progressive Web Apps: Um novo mundo
Progressive Web Apps: Um novo mundoProgressive Web Apps: Um novo mundo
Progressive Web Apps: Um novo mundo
 
Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...
Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...
Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...
 
Trabalhando com ALM na nuvem
Trabalhando com ALM na nuvemTrabalhando com ALM na nuvem
Trabalhando com ALM na nuvem
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Quasar Framework - Front end de alto desempenho
Quasar Framework - Front end de alto desempenhoQuasar Framework - Front end de alto desempenho
Quasar Framework - Front end de alto desempenho
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
T18_LM3: Ajax
T18_LM3: AjaxT18_LM3: Ajax
T18_LM3: Ajax
 
Opções de Backends para seus apps móveis: Análise e Arquiteturas
Opções de Backends para seus apps móveis: Análise e ArquiteturasOpções de Backends para seus apps móveis: Análise e Arquiteturas
Opções de Backends para seus apps móveis: Análise e Arquiteturas
 
Migrando de Applets para JavaFX, e Modelos de Distribuição de Apps
Migrando de Applets para JavaFX, e Modelos de Distribuição de AppsMigrando de Applets para JavaFX, e Modelos de Distribuição de Apps
Migrando de Applets para JavaFX, e Modelos de Distribuição de Apps
 
Desenvolvendo Sistema Cloud e Web Full-stack Developer
Desenvolvendo Sistema Cloud e Web Full-stack DeveloperDesenvolvendo Sistema Cloud e Web Full-stack Developer
Desenvolvendo Sistema Cloud e Web Full-stack Developer
 
Abordagens modernas no desenvolvimento web
Abordagens modernas no desenvolvimento webAbordagens modernas no desenvolvimento web
Abordagens modernas no desenvolvimento web
 
Netbeans Slides
Netbeans SlidesNetbeans Slides
Netbeans Slides
 
Java Nuvem Appengine
Java Nuvem AppengineJava Nuvem Appengine
Java Nuvem Appengine
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
 

Mais de Dan Vitoriano

Workshop React Hooks
Workshop React HooksWorkshop React Hooks
Workshop React Hooks
Dan Vitoriano
 
JavaScript das Ruas
JavaScript das RuasJavaScript das Ruas
JavaScript das Ruas
Dan Vitoriano
 
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan VitorianoCSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
Dan Vitoriano
 
Times digitais de alta performance - Tera e Endeavor
Times digitais de alta performance - Tera e EndeavorTimes digitais de alta performance - Tera e Endeavor
Times digitais de alta performance - Tera e Endeavor
Dan Vitoriano
 
GraphQL - A Graph Query Language to your API
GraphQL - A Graph Query Language to your APIGraphQL - A Graph Query Language to your API
GraphQL - A Graph Query Language to your API
Dan Vitoriano
 
Mobile First e Offline First
Mobile First e Offline FirstMobile First e Offline First
Mobile First e Offline First
Dan Vitoriano
 
React Native
React NativeReact Native
React Native
Dan Vitoriano
 
Pdsp #3
Pdsp #3Pdsp #3
Pdsp #3
Dan Vitoriano
 
Pdsp #2
Pdsp #2Pdsp #2
Pdsp #2
Dan Vitoriano
 
Meetup Processos de Desenvolvimento São Paulo - Gamestorming
Meetup Processos de Desenvolvimento São Paulo - GamestormingMeetup Processos de Desenvolvimento São Paulo - Gamestorming
Meetup Processos de Desenvolvimento São Paulo - Gamestorming
Dan Vitoriano
 
Unit Test JavaScript
Unit Test JavaScriptUnit Test JavaScript
Unit Test JavaScript
Dan Vitoriano
 
Untraceable electronic mail, return addresses and digital pseudonyms - David ...
Untraceable electronic mail, return addresses and digital pseudonyms - David ...Untraceable electronic mail, return addresses and digital pseudonyms - David ...
Untraceable electronic mail, return addresses and digital pseudonyms - David ...
Dan Vitoriano
 
The computer for the 21st century - Mark Weiser, 1991
The computer for the 21st century - Mark Weiser, 1991The computer for the 21st century - Mark Weiser, 1991
The computer for the 21st century - Mark Weiser, 1991
Dan Vitoriano
 
Especificações UX/UI CMA Tablet
Especificações UX/UI CMA TabletEspecificações UX/UI CMA Tablet
Especificações UX/UI CMA Tablet
Dan Vitoriano
 
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
Dan Vitoriano
 
Fullcircle papers - Sobre Blogs
Fullcircle papers - Sobre BlogsFullcircle papers - Sobre Blogs
Fullcircle papers - Sobre Blogs
Dan Vitoriano
 
Apresentação FEMUG-ABC
Apresentação FEMUG-ABCApresentação FEMUG-ABC
Apresentação FEMUG-ABC
Dan Vitoriano
 
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
Dan Vitoriano
 
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web componentsGoogle Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
Dan Vitoriano
 
Google Material design
Google Material designGoogle Material design
Google Material design
Dan Vitoriano
 

Mais de Dan Vitoriano (20)

Workshop React Hooks
Workshop React HooksWorkshop React Hooks
Workshop React Hooks
 
JavaScript das Ruas
JavaScript das RuasJavaScript das Ruas
JavaScript das Ruas
 
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan VitorianoCSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
 
Times digitais de alta performance - Tera e Endeavor
Times digitais de alta performance - Tera e EndeavorTimes digitais de alta performance - Tera e Endeavor
Times digitais de alta performance - Tera e Endeavor
 
GraphQL - A Graph Query Language to your API
GraphQL - A Graph Query Language to your APIGraphQL - A Graph Query Language to your API
GraphQL - A Graph Query Language to your API
 
Mobile First e Offline First
Mobile First e Offline FirstMobile First e Offline First
Mobile First e Offline First
 
React Native
React NativeReact Native
React Native
 
Pdsp #3
Pdsp #3Pdsp #3
Pdsp #3
 
Pdsp #2
Pdsp #2Pdsp #2
Pdsp #2
 
Meetup Processos de Desenvolvimento São Paulo - Gamestorming
Meetup Processos de Desenvolvimento São Paulo - GamestormingMeetup Processos de Desenvolvimento São Paulo - Gamestorming
Meetup Processos de Desenvolvimento São Paulo - Gamestorming
 
Unit Test JavaScript
Unit Test JavaScriptUnit Test JavaScript
Unit Test JavaScript
 
Untraceable electronic mail, return addresses and digital pseudonyms - David ...
Untraceable electronic mail, return addresses and digital pseudonyms - David ...Untraceable electronic mail, return addresses and digital pseudonyms - David ...
Untraceable electronic mail, return addresses and digital pseudonyms - David ...
 
The computer for the 21st century - Mark Weiser, 1991
The computer for the 21st century - Mark Weiser, 1991The computer for the 21st century - Mark Weiser, 1991
The computer for the 21st century - Mark Weiser, 1991
 
Especificações UX/UI CMA Tablet
Especificações UX/UI CMA TabletEspecificações UX/UI CMA Tablet
Especificações UX/UI CMA Tablet
 
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
User experience guidelines for Universal Windows Platform (UWP) appsUwp app d...
 
Fullcircle papers - Sobre Blogs
Fullcircle papers - Sobre BlogsFullcircle papers - Sobre Blogs
Fullcircle papers - Sobre Blogs
 
Apresentação FEMUG-ABC
Apresentação FEMUG-ABCApresentação FEMUG-ABC
Apresentação FEMUG-ABC
 
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
Planejamento estratégico de comunicação digital - Dados sobre internet e mobi...
 
Google Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web componentsGoogle Material Design - Conceito, aplicações, código e web components
Google Material Design - Conceito, aplicações, código e web components
 
Google Material design
Google Material designGoogle Material design
Google Material design
 

AMP Roadshow SP 2019 - Web Apps Modernas

  • 2. Dan Vitoriano PagSeguro Engenheiro de Software Community Manager FIAP Professor MBA Mobile Development Professor MBA Fullstack Developer @dnvtrn
  • 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/
  • 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/
  • 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
  • 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/