com AWS Lambda com Vuejs/Nuxt.js Side …...2019/05/17  · AWS Lambda Serviço Serverless da AWS...

Serverless Side-Rendering com Vuejs/Nuxt.js com AWS Lambda

www.blueticket.com.br

Quem sou eu?

▪ Nome: Júlio César Ferreira Guedes.▪ Trabalho: Blueticket.▪ Função: Analista/Desenvolvedor Front-end.

Linkedin: https://www.linkedin.com/in/julioguedes/

www.blueticket.com.br

Blueticket▪ +2M de usuários cadastrados

▪ +600 mil usuários únicos mês

▪ +1 milhão de acessos no total

▪ 200 á 20 mil usuários simultâneos

www.blueticket.com.br

Show Guns N Roses

www.blueticket.com.br

Show Guns N Roses - EC2

www.blueticket.com.br

Como fica o Auto-Scale ?

▪ Não daria tempo de subir máquinas tão rápido em um servidor tradicional

▪ Servidor em carga máxima seria caríssimo

www.blueticket.com.br

Vue.jsVuejs é um framework simples para a construção de interfaces de usuário.

fonte: vuejs.org

www.blueticket.com.br

React

Github

Angular

Vuejs

www.blueticket.com.br

Vuejs + Cloudfront + S3 bucket ?

www.blueticket.com.br

Problemas com SEO!

www.blueticket.com.br

Nuxtjs (SSR)É um framework para criação de aplicações Vue.js, seja ela universal, gerada estaticamente ou single page application.fonte: nuxtjs.org

www.blueticket.com.br

Github

Nuxtjs

www.blueticket.com.br

Instalação

www.blueticket.com.br

Instalação - Várias opções

▪ Qual framework Server-Side quer usar ?

▪ Qual framework UI quer usar ?

▪ Qual framework de test quer usar ?

▪ Axios, eslint, prettier...

www.blueticket.com.br

Features

www.blueticket.com.br

Nuxtjs - Features

▪ Routing system baseado em pastas e arquivos

▪ Hierarquia layout/página (propriedades head nas páginas)

▪ Middlewares

▪ Plugins

▪ AsyncData/Fetch

www.blueticket.com.br

Nuxtjs - Routing (Feature)

▪ Basic routing

▪ Dynamic routing

www.blueticket.com.br

Nuxtjs - Hierarquia Layout/Página (Feature)

www.blueticket.com.br

Nuxtjs - Middlewares (Feature)

▪ São funções customizáveis que são executadas antes de renderizar uma página

▪ Ficam localizados na pasta /middleware

www.blueticket.com.br

▪ São usados antes mesmo da inicialização da instância do Vue, para justamente poder ter algo injetado na aplicação.

▪ Ficam localizados na pasta /plugins

Nuxtjs - Plugins (Feature)

www.blueticket.com.br

▪ Fazem a requisição no server-side antes de carregar a página

▪ A página só é carregada após o retorno da requisição

Nuxtjs - AsyncData/Fetch (Feature)

www.blueticket.com.br

Fluxo de uma requisição Nuxtjs

www.blueticket.com.br

▪ Grande performance (melhores práticas nodejs).

▪ Mais de 50 módulos (PWA, SPA e etc…)

▪ Soluções preparadas para sistemas complexos

Nuxtjs - Vantagens

www.blueticket.com.br

Nuxtjs - Módulos de Renderização

▪ Single Page Applications (SPA)

▪ Static Generated (Pre Rendering)

▪ Server Rendered (Universal SSR)

www.blueticket.com.br

▪ É o modo mais popular do Nuxt

▪ Preparado para receber o SEO

▪ Comunicação Server Side/Client Side

Server Side Rendered (Universal SSR)

www.blueticket.com.br

Este é o tradicional Single Page Application do Vue.js.

Single Page Applications (SPA)

www.blueticket.com.br

É o melhor dos dois mundos:

▪ Não há necessidade de um servidor nodejs rodando

▪ Benefício do SEO configurado no seu site.

Static Generated (Pre Rendering)

www.blueticket.com.br

Nuxtjs - Resumindo

▪ Você tem 3 aplicações complexas em um só sistema.

▪ Mude a medida de sua necessidade.

www.blueticket.com.br

Nuxt + AWS LambdaServerless ? Sim!

www.blueticket.com.br

Primeiro: O que éServerless ?

www.blueticket.com.br

ServerlessExistem:▪ Serverless Computing

▪ Serverless (framework)

www.blueticket.com.br

Serverless Computing

▪ Veio para simplificar o deployment do código em produção

▪ Não precisa provisionar ou gerenciar o servidor

▪ Aplicativos ganham escalabilidade automaticamente

▪ Foco no desenvolvimento da aplicação.

www.blueticket.com.br

www.blueticket.com.br

É um framework serverless que ajuda no build, deploy e auto-scaling do seu sistema baseado em funções.

É free e Open Source!

Serverless(Framework)

www.blueticket.com.br

Como Funciona esse Serverless Framework?

www.blueticket.com.br

▪ Passo 1: Você seleciona um Servidor Provider: AWS, Google Cloud, Azure..

▪ Passo 2: Autenticação.

▪ Passo 3: Build & deploy!

Serverless(Framework) - Passos

www.blueticket.com.br

AWS Lambda ▪ Serviço Serverless da AWS▪ Modelo do tipo "pay-as-you-go", ou seja,

pague o que usar▪ Acionado por eventos▪ Execução ilimitada de execuções paralelas▪ Suporte a várias linguagens, exemplo:

java, python, nodejs, e etc...

www.blueticket.com.br

AWS Lambda - Quanto custa?

www.blueticket.com.br

www.blueticket.com.br

Como o Nuxt se comunica com o AWS Lambda ?

www.blueticket.com.br

Através de uma função handler

www.blueticket.com.br

www.blueticket.com.br

Pode se usar em todas as aplicações ?

www.blueticket.com.br

Tem alguns caso que Não.

www.blueticket.com.br

Quais os casos que NÃO se deve usar ?

Em todos os casos de conexões persistentes como websockets, stream, social real-time chat e etc...

www.blueticket.com.br

Em todos os outros… Sim!

www.blueticket.com.br

Em resumo...▪ Você paga apenas o que usar▪ Menos tempo cuidando do servidor▪ Expectativa de economia de +50%

em comparação

Dúvidas ?

Email: julio.guedes@blueticket.com.brLinkedin: https://www.linkedin.com/in/julioguedes/

Fim!Obrigado pela

atenção!