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 and Flutter. 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).

Astro2

Índice analítico

1. Features [editar]

2. Advantages [editar]

3. Disadvantages [editar]

4. Niches [editar]

5. Perspectives [editar]

Web Frontend Framework - Astro

Lista de membros

- Editor Clara Ernesto de Carvalho 14559479

- Presenter Augusto Cavalcante Barbosa Pereira 14651531

- Thiago Zero Araújo 11814183

- Coordinator Gabriel Barbosa dos Santos 14613991

- Presenter Gabriel Antunes Afonso de Araujo 14571077

- Bruno Figueiredo Lima 14562383

- Felipe Carneiro Machado 14569373

- Presenter Renan Parpinelli Scarpin 14712188

Features [editar]

AD_4nXfhKHQUV3PydQwW73zAyYlE8OASIrqTU18W7fVd_rhMv_H5bDIqXk7loQu9VDOHsW9F1tBGm224GQB318TdvxEB-WJSt2M7Ud3lXOLVEBVlGcKWNBbohDMKiI-EkBHNLJgLJXYkrA?key=OcqvMU9N7VfJYNbaMciXOQ

Ilhas: ilha é um componente de UI interativo em uma página

É executada de forma independente das outras ilhas, mas podem compartilhar informações. Essa flexibilidade permite que Astro suporte múltiplos frameworks de UI como React, Vue, Svelte, Solid... O maior benefício é performance: a maior parte do seu site é convertido em HTML estático e rápido, carregando JavaScript apenas para os componentes individuais que realmente precisam.

Server first: Componentes .astro não renderizam no lado do cliente! Eles são convertidos para HTML no momento do build ou sob demanda usando renderização no lado do servidor (SSR).

Zero JS: Menos (ou nenhum) JavaScript do lado do cliente. Consequência direta de ser Server First. O resultado é um site mais rápido, sem nenhum JavaScript adicionado por padrão.

Coleções de conteúdo: Organiza, valida e oferece segurança de tipos do TypeScript para seus conteúdos em Markdown ou MDX.

Customizável: Suporte nativo a Tailwind, MDX e centenas de integrações para escolher. Tem plugins para imagens, sitemap, i18n, analytics e muito mais.

Advantages [editar]

Agilidade devido a limitar execução no cliente com uso de ilhas de cliente e ilhas de servidor, com hidratação seletiva
Torna o conteúdo mais legível para crawlers, possivelmente aumentando a relevância do site em mecanismos de pesquisa, devido a conversão de diversos documentos componentes para HTML e CSS puro
Alta compatibilidade e adaptação de componentes de outros frameworks

Disadvantages [editar]

Não é recomendado para sites que precisem de interações complexas e pesadas no client-side
É um framework Multi-Page Application. Não recomendado para sites SPA que necessitem que o client-side faça um router (“roteamento”) grande

Exige uma diferenciação maior de o que será client-side ou server-side na estruturação do seu projeto

Niches [editar]

O nicho do Astro são websites orientados a conteúdo como blogs, sites de notícias, portfólios digitais e catálogos de lojas. Durante a construção da aplicação o Astro tenta transformar o máximo possível de páginas em HTML estáticos, pré-computando fetches, interpretando markdown e reduzindo a quantidade de JavaScript interpretado no cliente.

Com isso, o site fica muito mais leve para o cliente e crawlers de engine de pesquisas podem mais facilmente compreender o conteúdo, assim tornando seu website mais provável de se tornar relevante.

Perspectives [editar]

Os desenvolvedores do Astro estão constantemente implementando novas funcionalidades e otimizando o Framework para minimizar suas desvantagens. Por exemplo: