Angular: SSR vs SSG

pamelakelly0023 — Thu, 03 Jun 2021 19:13:49 +0000

Server Side Render (SSR)

Nesse modelo a renderização fica a cargo do servidor, o que torna o carregamento da aplicação mais eficiente. Além de possibilitar melhor performance, nesse modelo também podemos lidar com alguns problemas de SEO (como indexação).

Vantagens

Indexação: é possível definir o conteúdo que será carregado a partir do servidor, sendo assim, este conteúdo seria indexado nos motores de busca.
Aparelho do usuário: como a renderização acontece do lado do servidor, ocorre uma menor exigência do dispositivo do usuário.
Performance: Na maioria dos casos tem boa performance e bons resultados na experiência por parte do usuário.

Desvantagens

Time to first byte maior, já que o servidor irá preparar o conteúdo a ser carregado.
Reload nas mudanças de rota.

Angular Universal (SSR)

Como indicação para desenvolver com SSR no Angular, indicamos o Angular Universal, inclusive o mais recomendado pela comunidade.

Bons resultados com SEO, se quisermos atingir todos os motores de buscas. Possui rastreadores de mídia social e melhora de performance.

Static Site Generation (SSG)

As vezes a utilização do modo estático para criação de páginas é o mais recomendado. Exatamente se você tiver uma aplicação que raramente sofre algum tipo de alteração em seu conteúdo. Ex: Site Institucional.

Vantagens

Pouco uso do servidor.
Pode ser usado como CDN.
Ótimo SEO.
Baixo consumo de memória, processador, etc.

Desvantagens

Não usar caso a aplicação seja muito grande ou é alterada com frequência.

Scully (SSG)

Recomendamos o Scully caso você queira investir na criação de uma aplicação estática. O mesmo encontra-se nos padrões de boas práticas do JAMStack.

O Scully explora as rotas da sua aplicação e cria uma estrutura listada com as rotas e gera um index.html para cada uma.

Através do Scully é possível evitar longo tempo de carregamento e o tamanho da aplicação é até mesmo reduzido.

Conta também com um sistema de plugins que podem tornar sua aplicação estática mais poderosa.

Qual usar?💻

Depende.

Depende do objetivo da aplicação.
Para um site simples sem grandes modificações, recomendamos o uso do SSG. Entretanto, se o seu site tem dinamismo, você tem preocupação com indexação nos motores de busca e experiência do usuário, o ideal seria o SSR.

Conceitos básicos de programação orientada a objetos (POO)

pamelakelly0023 — Mon, 07 Dec 2020 18:21:46 +0000

É um método de desenvolvimento de software que reúne um conjunto de componentes para resolução do problema. Esses componentes são OBJETOS.

Segundo Melo (2004, p.15), um objeto é qualquer coisa, em forma concreta ou abstrata, que exista física ou apenas conceitualmente no mundo real.

Por exemplo: cliente, professor, caneta, carro.
Sendo que esses objetos possuem características e comportamentos.

Classes

Uma classe é uma abstração de um conjunto de objetos que possuem os mesmos tipos, características e comportamentos.

class Livro {
    titulo: string
    autor: string
}

Temos uma Classe do objeto Livro, com os seus atributos (características), título e autor, ambos do tipo string.

Uma Classe possui também pode possuir métodos.

Métodos

São as atividades que uma instância de uma classe pode executar. Quando ele é chamado, então se executa um conjunto de instruções que foram previamente programadas dentro desse método.

class Livro {
    titulo: string
    autor: string
    adicionarLivro(){
    //cadastro de novo livro
    }
}

Nem todos os atributos e métodos devem ser visíveis para todos, então temos a…

Visibilidade

Serve para indicar o seu nível de acessibilidade.

(+) publico -> a classe atual e todas as outras tem acesso.

(-) privada -> somente a classe atual tem acesso.

(#) protegido -> a classe atual e todas suas sub-classses tem acesso.

Herança

A herança permite que as classes compartilhem atributos e métodos. Significa que os objetos da subclasse podem ser utilizados em qualquer local em que a superclasse ocorra, mas não vice-versa. A subclasse herda as propriedades da classe-mãe. A vantagem de se utilizar herança é a reutilização de código.

Polimorfismo

Ocorre quando uma subclasse redefine um método existente na superclasse, ou seja, quando temos os métodos sobrescritos (overriding).

class Mamifero {
    //SuperClasse
    locomoverSe() {
    // A ser implementado em alguma subclasse. 
     }
 }

SubClasses herdam e sobrescrevem o método citado da seguinte forma:

SubClasse Macaco:

locomoverSe() {
 pulandoDeGalhoEmGalho; 
}

SubClasse Baleia:

locomoverSe() {
 nadando;
}

DEV Community: pamelakelly0023

Angular: SSR vs SSG

Server Side Render (SSR)

Vantagens

Desvantagens

Angular Universal (SSR)

Static Site Generation (SSG)

Vantagens

Desvantagens

Scully (SSG)

Qual usar?💻

Conceitos básicos de programação orientada a objetos (POO)

Classes

Métodos

Visibilidade

Herança

Polimorfismo