SCC0219 - Introdução ao Desenvolvimento Web (2022)

1 - Framework Name: React

2 - Student List:

Matheus Bermudes Viana - 11849797 (Editor)

Luísa Balleroni Shimabucoro - 11832385 (Coordenadora)

Érica Ribeiro Filgueira dos Santos - 11836351

Pedro Henrique Raymundi - 11795634 (Apresentador)

Johnny Batista da Silva - 11371350 (Apresentador)

Wictor Dalbosco Silva - 11871027 

Jônatas Alves Lopes - 11796552

Alexandre Lima Palles Rocha - 11797038

Erick Patrick Andrade Barcelos - 11345562 (Apresentador)

Pedro Martelleto Bressane Rezende - 11795641

Alexandre Brito Gomes - 11857323

3 - Features:

JSX:

JSX é uma combinação de HTML com Javascript. Ele permite a inserção de código Javascript dentro de elementos HTML. Além disso, JSX torna os códigos fáceis e compreensíveis. É fácil de aprender se você souber HTML e JavaScript.

Components:

O React divide a página Web em vários componentes, pois é baseada em componentes. Cada componente é uma parte do design da interface do usuário que possui sua própria lógica e design. Portanto, a lógica do componente que é escrita em JavaScript, executando de forma mais rápida, além de poder ser reutilizável.

One-way Data Binding:

Vinculação de dados unidirecionais, como o próprio nome diz, é um fluxo unidirecional. Os dados em React fluem apenas em uma direção, ou seja, os dados são transferidos de cima para baixo, de componentes pai para componentes filhos. As propriedades (props) no componente filho não podem retornar os dados ao componente pai, mas podem se comunicar com os componentes pai para modificar os estados de acordo com as entradas fornecidas. Este é o processo de trabalho de vinculação de dados unidirecional. Isso mantém a aplicação mais modularizada e mais rápida.

Extensions:

O React possui muitas extensões que podem ser utilizadas para criar aplicativos completos com interface de usuário.  Ele suporta o desenvolvimento de aplicativos móveis e fornece renderização do lado do servidor. O React pode trabalhar com Flux, Redux, React Native, entre outros, o que nos ajuda a criar uma interface de usuário bonita.

Conditional Statements:

JSX nos permite escrever declarações condicionais. Os dados no navegador são exibidos de acordo com as condições fornecidas dentro do JSX. Por exemplo:

const age = 12;

if (age >= 10){ 

    <p> Greater than { age } </p>;

} else { 

    <p> { age } </p>;

}

Virtual DOM:

Um objeto DOM virtual é uma representação do objeto DOM original. Sempre que o aplicativo é modificado ou atualizado, toda a interface do usuário é renderizada novamente pelo DOM virtual. Em seguida, ele verifica a diferença entre a representação anterior do DOM e o novo DOM, e o DOM real atualiza apenas os componentes que foram modificados. Isso torna o aplicativo mais rápido e não há desperdício de memória, reduzindo o custo de desenvolvimento.

Performance:

Por utilizar um DOM virtual para escrever os componentes antes de inseri-los no DOM real, o React apresenta um desempenho mais rápido e suave. 

4 - Vantagens: 

Permite a combinação de elementos e criação de templates:

Usando  framework como o React é possível dividir o código dos elementos de uma página HTML em componentes customizáveis, assim é possível utilizar esses componentes e integrá-los de diversas formas nas páginas. Isso faz com que o código fique bem mais escalável e flexível. É utilizado o JSX na criação de templates em React, que garantem essa flexibilidade, utiliza sintaxe de tags como o HTML para geração de subcomponentes.

É uma solução declarativa:

No react o elemento DOM  é declarativo, o que isso quer dizer? Que podem ser feitas Interfaces de Usuário (UI) interativas, mudando os estados dos componentes utilizados, e o React cuida de fazer as alterações no DOM de acordo com o que foi feito. Isso significa que não é necessário que o dev interaja com o DOM. Dessa forma fica muito mais fácil projetar a UI e fazer um debug eficiente. Pode-se somente realizar uma mudança no estado do programa e ver instantaneamente como a UI vai ficar dado um tempo particular. Isso torna o código muito mais previsível e fácil de debugar.

Reusabilidade do código: 

Novas features do react podem ser feitas sem ter que reescrever códigos já existentes. Também é possível fazer renderizações no servidor usando NodeJs e potencializar aplicações Mobile usando React Native. Dessa forma pode-se criar aplicações IOS, no Android e até mesmo aplicações Web simultaneamente. Em suma, o react permite alta reusabilidade de código entre as diversas plataformas suportadas.

É simples e fácil de aprender:

A abordagem baseada em componentes e renderização em tempo real fazem com que o React seja de fácil aprendizado e uso para criação e manutenção de aplicações web. A curva de aprendizado é bem direta, o que facilita a adoção do framework.

Amigável com (SEO) Search Engine Optimization:

O React é bom para SEO quando aliado à server-side rendering e static-site generator. A ideia é pré-renderizar o site para que o crawler da search engine consiga encontrar os campos relevantes com maior facilidade. SSR e SSG também são vantajosos devido à velocidade da renderização inicial, não necessidade de depender de search engine que renderiza o JS, e redução de TTI (time to be interactive.

Rápido e eficiente:

Possui padrões pré-definidos e funções que podem ser combinadas para construir blocos de código que criam projetos web eficientes, elegantes e escaláveis, mais rápido do que se fosse escrito linha por linha.

Conjunto de ferramentas para desenvolvedores:

A extensão React Developer Tools permite que os desenvolvedores observem hierarquias de componentes reativos, descubram componentes filho e pai e inspecionem seu estado atual.

Estabilidade de código aprimorada:

O fluxo de dados descendente no React Js garante que a estrutura pai não seja afetada pelas alterações feitas na estrutura filho. Para alterar um objeto, o desenvolvedor só precisa editar seus estados e fazer as devidas modificações; desta forma, apenas um determinado componente será atualizado enquanto os outros permanecerão inalterados. Consequentemente, há uma melhor estabilidade do código e o desempenho do aplicativo é muito mais suave.

Suporte da Comunidade:

Existem inúmeros desenvolvedores React que enviam tutoriais de texto e vídeo online, respondem a perguntas em vários fóruns e sites de controle de qualidade e assim por diante. Eles contribuem para melhorar o framework e torná-lo ainda mais fácil para outros desenvolvedores.

5 - Desvantagens: Pedro e Bermudes

Exige ferramentas externas:

React apenas se preocupa com o estado de coordenação e renderização que se comunica com o DOM, então criar aplicações com o React requerem o uso de biblioteca adicionais para routing assim como funcionalidades para o client-side.

Documentação:

Existem muitas ferramentas e bibliotecas para melhorar a performance do React. Além disso, devido ao alto número de desenvolvedores e usuários, o React frequentemente é atualizado. Essa grande carga de conteúdo em pouco tempo torna difícil documentar tudo com boa qualidade, deixando os desenvolvedores com uma documentação mínima e esparsa que, muitas vezes, não cobre detalhes.

Curva de aprendizado dificultada pelo JSX:

ReactJS usa JSX. É uma extensão de sintaxe que permite misturar HTML com JavaScript. Essa abordagem tem seus próprios benefícios, mas alguns membros da comunidade de desenvolvimento consideram o JSX como uma barreira, especialmente para novos desenvolvedores, devido à sua complexidade na curva de aprendizado.

6 - Main Application Niches: 

O react é majoritariamente utilizado em aplicações web, sendo essa a sua principal função no mercado, no entanto, pode ser empregado no desenvolvimento de aplicativos mobile e desktop, porém nestes casos apresenta grandes diferenças de desempenho se comparado com outras tecnologias usadas atualmente. 

7 - Future Perspectives:

Segundo uma pesquisa do Statista de 2021, o React mantém 40.14% do market share. Assim, tem uma boa perspectiva de suporte - tanto da visão de domínio de mercado quanto pelo fato de ser mantido e usado pela Meta, uma das “Big Techs”.

O React 18, lançado em 29 de março de 2022, mostra um avanço no caminho de concorrência. Segundo um blog post de março, react de fazer cada vez mais processos de renderização off-screen, fazendo componentes ficarem prontos antes mesmo do usuário navegar para certas páginas. Essa ideia não é nova do react. Na SwiftUI do iOS, por exemplo, é possível fazer off-screen rendering no GPU usando uma função chamada drawingGroup, que então acelera significativamente a renderização na tela principal do app.

Como a ideia de renderização offscreen e a adição de concorrência built-in são features são mudanças grandes no sistema, a ideia é fazer uma mudança gradual. Funcionalidades mais simples e desacopladas como startTransition, para navegar entre telas sem bloquear input do user, e useDeferredValue, para acelerar re-renderizações caras, já podem ser adotadas. O Meta objetiva que as frameworks lentamente adotem essas features dentro delas, não necessitando de muito trabalho manual do usuário para usufruir do ganho de performance resultante da concorrência.

Outra feature é Server Components, que ainda está em desenvolvimento. O React procura ir no caminho do Next.js, criando componentes que se estendem do servidor ao cliente. O resultado é trazer os benefícios de server-side rendering com a interatividade rica presente no cliente.

Por fim, uma última feature importante é Automatic Batching. Antes, somente eventos do React (ex. onMouseDown) automaticamente faziam batch do state update. Agora, eventos fora do React (ex. setTimeout) também fazem batch do state update. Por exemplo,

const algumEvento = () => {

setCount(2);

setEnabled(true);

}

setCount e setEnabled são “juntados”, fazendo o state update de uma vez só.