Reactive Web | A próxima geração de Web Apps

Reactive Web
A próxima geração de Web Apps

André Siébra
andre.siebra@outsystems.combr

Principais Novidades
• Reactive Web: A próxima geração de Web Apps
• AI-Assisted Development (Service Studio Beta)
• Experience Builder / Workflow Builder
• Architeture Dashboard
• Theme Editor
• Progressive Web Apps
• AI Infused Apps
3

Reactive Web: A próxima geração de Web Apps
Reactive web apps oferece o melhor das aplicações mobile com melhorias que fazem
a criação de aplicações web e mobile muito mais fáceis.
4

Todos os elementos UI nas aplicações
reactive web atualizam imediatamente
quando os dados aos quais eles estão
associados mudam, alterando instanta-
neamente a interface. Ajax Refresh não
é mais necessário; as apps são
inteligentes o suficiente para entender
o que precisa ser atualizado.
5
Melhorias de Performanca

Nas aplicações reactive web, toda lógica client-side pode ser
visualmente modelada. OutSystems gera por baixo REST APIs
seguras para suportar a comunicação entre o browser e o
servidor, utilizando somente o mínimo de largura de banda
necessária para a transferência de dados atual.
6
Lógica Client-side
Responsividade
Escalabilidade
OutSystems sugere alternativas para melhorar a performance
das suas aplicações (warnings).
Assincronismo na comunicação com o servidor.

Arquitetura Runtime
7

Consulta a Dados
8

Unificação do OutSystems UI framework
9
Reactive Web: Novos Recursos

Melhorias no escopo de Screen Aggregates e Data Actions
10
Screen Aggregates e Data Actions agora estão disponíveis no escopo de outros Screen
Aggregates e Data Actions.

Consulta sob Demanda
11
Agora você pode implementar patterns como
master/detail com uma excelente performance e UX.

Client Variables
12
Isto será útil para armazenar estados da interface,
como um filtro ou fazer cache de informações do
usuário que você não quer obter toda vez do servidor.

Default Buttons
13
Button widgets no mobile e aplicações reactive web
agora tem a propriedade Is Form Default, que você
pode configurar como Yes para submeter os dados do
formulário relacionado ao form quando o usuário
pressionar a tecla Enter dentro deste contexto.

Table widget com Ordenação simples
14
Um novo Table Widget vem com um acelerador:
arrastar uma Entidade nele para criar uma tabela com
ordenação e paginação. Use tabelas para exibir dados
em células distribuídas em linhas e colunas.

Start Index nos Screen Aggregates para Paginação
15
Utilize o recurso de paginação server-side dos Screen
Aggregates para construir aplicações mais rápidas que
precisam lidar com grande volume de dados. Entre
com o Start Index e obtenha o número de registros que
você definir no Max. Records.

Dropdown widget nativo
16
O Dropdown Widget tem uma nova propriedade
Options Content, que você pode preencher com Text
Only ou Custom. Text Only dá o look and feel nativo
dos dropdowns das suas aplicações reactive web e
mobile. Alterar a propriedade Options Content para
Custom permite construir um dropdown com uma lista
de imagens ou outros widgets.

Download files
17
Você pode arrastar um Download Tool para seu e
criar um node que, quando executado, envia um
arquivo de download para o usuário.

Novo tipo de módulo: Library
18
Reactive Web: New capabilities
Comece a construir grandes aplicações com uma
arquitetura sólida, bem do início. O novo Library
module direciona o processo de descer os blocos
da sua aplicação para a camada mais baixa.
Libraries podem ser usados em ambos reactive
web e mobile apps.

Reactive na Forge
19
Na Forge, você irá ter um novo filtro para o tipo de componente
“Reactive”. Estes compartilham a maioria dos disponíveis
também para o mobile.
É possível converter um módulo em um componente reactive.
(sem recursos nativos)

Tráfego de rede otimizado
20
Melhorado a eficiência da transferência de dados entre o servidor e o cliente.
Reuso de Lógica e Dados
Entidades e server actions de aplicações web tradicionais podem ser reutilizadas.

AI-Assisted Development (Service Studio Beta)
23
Há duas maneiras de obter
sugestões.
• Clicar no AI radar (círculo azul)
nos conectores do flow.
• Arrastar e soltar um conector na
janela do flow.

New Theme Editor (Service Studio Beta)
24

Spoilers…
25
Experience Builder / Workflow Builder

Spoilers…
26
Architecture Dashboard

Spoilers…
28
Progressive Web Apps

Reactive Web | A próxima geração de Web Apps

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Reactive Web | A próxima geração de Web Apps

Semelhante a Reactive Web | A próxima geração de Web Apps (20)

Reactive Web | A próxima geração de Web Apps