Vue.js e PWA: Futuro do frontend

Conceitos de PWA suas vantagens, mostrando Vue.JS como uma opção para uma PWA, criando um simples exemplo

Transcript

1. VueJS e PWA: Futuro do Frontend
2. Sobre Mim Sou Yan, tenho 20 anos atualmente sou Full-Stack Developer na Donuz. Estudante de Ci ncia da Computa o na ê çã Faculdade Pit goras-Betim, á amante de open source , e tamb m sei programa o é çã mobile e desktop
3. PWA PWA o acr nimo de Progressive Web é ô Application, e seu conceito fazer websites é focado na experi ncia do usu rio, usando tr s ê á ê pilares, confiabilidade,rapidez, atraente, por m é eu ainda gosto de adicionar como pilar Acessibilidade
4. Vantagens  As pwa atrav s dos seus pilares tornam a é experi ncia dos usu rios melhor. Outra ê á vantagem que estas p ginas podem ser é á acessadas offline, e atrav s do Google é Chrome, podemos adicionar ao menu principal do Smartphone ou Computador, e usar como se fossem apps pr prios para respectivas ó plataformas, sem precisar de abrir o browser
5. Por quê utilizar?  As caracter sticas deste modelo al m de í é tornar melhor a experi ncia, aumenta ê tamb m a praticidade do uso. As novas é tecnologias tendem usar isso, pelas vantagens adquiridas
6. Informações Importantes  As principais diferen as entre uma PWA para ç um site comum, o manifesto(onde o Chrome é interpreta para gerar o atalho), e o service worker, que basicamente um mecanismo é que busca os dados pro site, permitindo o uso offline, atrav s de cache na pr pria aplica o. é ó çã Para desenvolver uma pwa podemos usar o Webpack,Polymer, Vue.js entre outros.
7. VueJS  O Vue.js um framework JavaScript. é Framework um conjunto de ferramentas e é padr o utilizado para melhorar algo. O vue ã cont m diversos padr es suportados, desde é õ uma altera o simples na p gina, at uma çã á é PWA. E por isso um dos mais utilizados no é mercado. Ele um framework baseado em é componentes, tal como Angular,React,etc
8. Empresas que Usam Botman.io
9. Vantagens  Tecnologia de ponta, produtividade e principalmente facilidade em desenvolver segundo v rios padr es facilmente, mudando á õ poucas coisas. Uma comunidade ativa. Documenta o em portugu s. çã ê
10. Por quê utilizar?  Al m de suas vantagens, podemos apostar na é confiabilidade, pois grandes empresas utilizam, tais como Hotmart e diversas outras grandes empresas. Suporte total em qualquer servidor pois precisa apenas de abrir um html sem precisar rodar PHP ou qualquer outro compilador
11. Desenvolvendo: Ferramentas  Precisa instalar o Node para desenvolver  Vue-cli para gerar facilmente os templates  Vue-router para usar diversas rotas  Entre outros
12. Desenvolvendo: Templates ★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing. ★ browserify-simple - A simple Browserify + vueify setup for quick prototyping. ★ pwa - PWA template for vue-cli based on the webpack template ★ simple - The simplest possible Vue setup in a single HTML file ★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. ★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
13. Desenvolvendo: Criando uma PWA com Vue.JS • Primeiramente devemos instalar o node veja como para seu sistema operacional em https://nodejs.org/en/download/ • Após instalar o node teremos o NPM(node package manager) assim podemos então instalar o cli para simplificar a criação • Então vamos usar o comando npm install –g vue-cli Pronto Instalado vamos a prática
14. Desenvolvendo: Criando uma PWA com Vue.JS • Após instalado iremos criar o projeto usando vue new pwa nome_projeto • Agora que o template está montado vamos apenas executar com o comando npm start
15. Desenvolvendo: Criando uma PWA com Vue.JS
16. Desenvolvendo: Criando uma PWA com Vue.JS
17. Dúvidas?