Group Discussion: React, Vue and Others
Students will work in groups to create a Wiki comparing major client-side JavaScript frameworks: React, Vue and others. If you did not work before with Moodle Wikis, see this small video (3:36 min.) on the Wiki activity page.
Our goal here is to compare the three main client-side JavaScript frameworks, React, Vue, and two newcomers (Svelte or Flutter or Elm or Rust Yew or Blazor). There will be four groups, one for each framework. They will create a wiki with the following content:
- Framework name
- Student List (with name and USP id)
- Main Framework Features (Explain how to start an app)
- Framework Advantages
- Framework Disadvantages
- Main Application Niches
- Future Perspectives
They will also make a 22 minutes presentation of their work to the class.
Each group has to choose:
- Coordinator: To coordinate the discussions and group activities. He also has to control the time to make sure the group will post its results on time.
- Editor: To write down the group's contents to the wiki.
- Two or Three Presenters: To present the work to the class
A group may divide the work among subgroups, but, in this case, it is recommended that you plan some time to join the work of each subgroup.
Tip: If you use Google Docs or Slides to create your work, you may just link it to the group's wiki page. But remember to make it readable by everyone and copy its text to the wiki (just as a backup).
React
Documento da discussao: link do notion no grupo do telegram!!
----------------------------------------------------------------------------------------------------------
Lista de alunos
Adalton de Sena Almeida Filho - 12542435
Bernardo Rodrigues Tameirão Santos - 12733212
Gabriel dos Santos Brito - 10284250
Felipi Yuri Santos - 11917292
Igor Cardozo Martins - 10387515
Vinicus Carneiro Macedo - 11915752
Yuri Fernandes Pereira - 13730127
Editor: Vinicius
Coordenador: Yuri
Apresentadores: Adalton, Gabriel, Igor
Principais atributos do Framework
- Components: O React permite a criação e utilização de componentes independentes que permite a reutilização do mesmo componente em diversas partes do projeto. Para se ter uma boa funcionalidade desses componentes é necessário seguir algumas diretrizes do próprio React com o uso de Hooks e Props.
- Interface independente do Servidor: Com React a Interface se torna independente do Servidor e utiliza somente o navegador para gerar a interface, além disso possui um DOM Virtual que é quem recebe as mudanças que ocorrem através do usuário. A partir disso compara-se o DOM Virtual com o Real e somente as diferenças entre os dois são modificadas no Real.
- JSX: Permite a mistura entre HTML e JavaScript, isso faz com que a codificação se torne de certa forma simples e escalonável.
- Renderização Condicional: Com React é possível condicionalizar através do JSX o que será exibido para o usuário, isso facilita na criação de componentes que possam ser diferentes dependendo das informações que recebe.
- Typescript: React permite a utilização de Typescript para codificação diminuindo a quantidade de erros possíveis por falta de tipagem em um grande projeto, não há restrições em utilizar somente JavaScript
- Fluxo Unidirecional de Dados: O React é projetado de forma que pode suportar apenas uma direção de fluxo de informação. Caso necessite de fluir em outra direção, será necessário extensões adicionais.
Vantagens do Framework
- Fácil de ler e de ser usado: Qualquer desenvolvedor que possui um background em JavaScript pode rapidamente entender a framework e começar a criar aplicações dentro de poucos dias, pois o React conta com uma grande quantidade de conteúdos disponíveis na web, além de muitos pacotes prontos. Além disso, ainda possui a vantagem de a biblioteca JavaScript User Interface(UI) library ser de código aberto, o que facilita na execução de alguma tarefa.
- Componentes reutilizáveis: Uma aplicação React é feita de múltiplos componentes, e cada componente tem sua própria lógica. Estes componentes são responsáveis pelo output de um pequeno trecho de código HTML que pode ser reutilizado onde for necessário. Os códigos reutilizáveis facilitam o desenvolvimento e a manutenção das aplicações.
- Aprimoramento de perfomance: Muitos desenvolvedores enfrentavam problemas quando a árvore DOM era atualizada, pois atualizar a árvore toda diminuía a perfomance da aplicação. O React resolveu esse problema introduzindo o virtual DOM. O virtual DOM existe inteiramente na memória e é uma representação do DOM no browser. Quando escrevemos um componente React, nós não estamos escrevemos diretamente no DOM, mas sim em componentes virtuais que o React transformará em DOM posteriormente, atualizando somente os elementos necessários e possibilitando uma perfomance suave e mais rápida.
- Suporte de ferramentas úteis: O React adquiriu muita popularidade devido à presença de um amplo conjunto de ferramentas úteis. Estas ferramentas tornam as tarefas dos desenvolvedores mais compreensíveis e fáceis. O React Developer Tools foi projetado como uma extensão Chrome e Firefox e permite inspecionar a hierarquia de componentes React no virtual DOM. Também permite selecionar componentes específicos e examinar e editar suas props e o state.
- Integração com outras Frameworks: O React permite a utilização de componentes Vue e vice-versa, isso é possível através da biblioteca https://github.com/akxcv/vuera vuera. Muitos desenvolvedores trabalham tanto em projetos Vue como em projetos React, e existem momentos em que um desenvolvedor precisa criar um componente no React que já foi implementado em outro projeto Vue. Ele poderia reescrever o componente do zero ou simplesmente plugar o componente Vue no seu projeto em React.
Desvantagens do Framework
- Alta taxa de Atualizações: React sofre muitas atualizações seguidas, isso por um lado é bom pois mostra comprometimento da empresa com a sua manutenção mas por outro lado dificulta a adaptação de programadores com os atualizações.
- Documentação pobre: Pelo fato de React sofrer muitas atualizações seguidas acaba ficando muitas vezes sem a documentação necessária para cada atualização, complicando para quem programa.
- UI Part: React se preocupa somente com UI e nada mais, então é necessário fazer o uso de extensões para se conseguir uma aplicação mais completa.
- JSX é uma barreira: Alguns membros da comunidade de desenvolvedores consideram o JSX uma barreira, especialmente para desenvolvedores novatos, pois apesar de a abordagem de misturar HTML com JavaScript trazer alguns benefícios, ela também dificulta a curva de aprendizado devido à sua complexidade.
Principais Nichos de Aplicação
- Aplicações rápidas e escaláveis: Várias empresas utilizam:
- Netflix
- Dropbox
- Paypal
- Desenvolvimento Web: É amplamente usado para desenvolver aplicações de web dinâmicas e interativas. Ele permite aos desenvolvedores criar componentes UI reutilizáveis e os renderizar e atualizar de forma eficiente quando os dados mudam.
- Single-Page Applications (SPAs): É utilizado na construção de Aplicações de Página Única em que a aplicação inteira roda em uma única página web. A arquitetura baseada em componentes do React facilita a criação de um código modular e fácil de manter para UIs complexas.
- Desenvolvimento Mobile: React Native, um framework feito utilizando o React, permite desenvolvedores construírem aplicações mobile para iOS e Android usando JavaScript. Compartilhamento de código entre plataformas é possível, habilitando um desenvolvimento e manutenção eficientes.
- Bibliotecas de Componentes UI: A arquitetura baseada em componentes do React permite criar componentes UI e bibliotecas reutilizáveis. Portanto, existem bibliotecas que provém componentes pré-feitos que desenvolvedores podem usar, acelerando desenvolvimento de uma aplicação.
- Visualização de Dados: A habilidade de atualizar a UI de forma eficiente do React o torna adequado para aplicações de visualização de dados. A arquitetura de componentes do React permite uma integração fluída dos dados nas aplicações web.
- Progressive Web Applications (PWAs): Pode ser utilizado para desenvolver Aplicações de Web Progressivas, que são aplicações de web que oferecem uma experiência nativa, incluindo ferramentas offline, notificações e um comportamento parecido com um app
Perspectivas Futuras
- Migração de muitas aplicações para React Native para progrmaçaõ Mobile.
- Framework mais utilizado do mundo em pesquisa realizada pela JetBrains e StackOverflow
- Suporte Oferecido pela empresa META, não se sabe ao certo como se dará a continuação do react.
Referências
React Futures. Disponível em: https://www.javatpoint.com/react-features.
Pros and Cons of ReactJS. Disponível em: https://www.javatpoint.com/pros-and-cons-of-react
The Best Guide to Know What is React. Disponível em: https://www.simplilearn.com/tutorials/reactjs-tutorial/what-is-reactjs#reactjs_advantages