Este artigo é baseado nas novas tecnologias de ponta da SAP, framework e ferramentas para implementar aplicativos Fiori e entregar qualidade de software pronta para uso. Pessoalmente, consultei especialistas em software SAP (engenharia, equipe de UX) para obter suas perspectivas únicas sobre este assunto. Também pesquisei os blogs SAP mais populares sobre este tópico. Portanto, fique tranquilo que você está recebendo apenas conteúdo novo e atualizado aqui.

SAP Fiori

SAP Fiori são os princípios de design, práticas e o guia de estilo de design. Os aplicativos SAP Fiori (nova versão Fiori 3) podem ser implementados usando SAPUI5 ou SAP Fiori elements. Fiori usa SAPUI5 para o front-end e OData para obter dados do backend. Uma linha de código para todos os tamanhos de tela, como navegador, celular, etc. Ou seja, ele será executado em qualquer dispositivo (móvel, tablet, desktop).

Os aplicativos Fiori oficiais entregues podem ser encontrados na Fiori Apps Library. 

O SAP Fiori3 é o novo sistema de design alvo da SAP, que evolui o design SAP Fiori para todos os produtos SAP para suportar totalmente a Intelligent Suite, rodando em qualquer dispositivo.

O que é Experiência do Usuário SAP e a estratégia de experiência do usuário da SAP

UX/UI é essencial para promover um alto nível de qualidade e consistência em todas as páginas de uma aplicação web. UX pode requerer mais criatividade do que UI, no final das contas, o design de um site deve ser centrado no usuário e agregar valor ao usuário final. No mundo do design thinking, o design é um processo de três fases: “descobrir, projetar e entregar”. Outras empresas usam palavras diferentes e etapas diferentes, mas, em geral, é sempre o mesmo. Para completar todas as três fases do processo de “Design Thinking”, as organizações precisam de um novo conjunto de habilidades e mentalidade, incluindo facilitação, coaching, brainstorming e geração de ideias (Design Thinking). Design Thinking em 500 palavras ou menos combina empatia, criatividade e racionalidade para atender às necessidades do usuário e impulsionar o sucesso dos negócios.

UX e UI dependem um do outro. UX deve se concentrar no usuário final.

SAP Fiori UX representa uma experiência de usuário personalizada, responsiva e simples em todos os dispositivos e opções de implantação.

SAPUI5

UI5 é uma tecnologia, enquanto Fiori é uma metodologia. UI5 oferece framework, kit de ferramentas de desenvolvimento para HTML 5, contém muitas bibliotecas JavaScript predefinidas baseadas no padrão MVC. Usando este framework, o desenvolvedor pode facilmente construir aplicações web. UI5 utiliza tecnologias web como HTML, CSS e JavaScript.

SAP Fiori elements

Pela minha experiência pessoal, SAP Fiori elements funciona para cerca de 80% dos casos de uso da SAP, porque SAP Fiori elements lida com o desenvolvimento de UI, conectando ao OData Service. SAP Fiori elements fornece um framework para os padrões de aplicação mais comuns baseados em SAPUI5. Como desenvolvedor, tudo que você precisa fazer é escrever as anotações CDS necessárias. SAP Fiori elements garantem consistência de design e conformidade automática (sem esforço de desenvolvimento extra) com as diretrizes de design mais recentes, ao mesmo tempo que reduzem a quantidade de código front-end necessário para construir aplicativos SAP Fiori. SAP Fiori elements têm comprovada economia no desenvolvimento de front-end de até 80% em relação ao anteriormente.

A equipe de aplicativos seleciona o floorplan relevante e então o framework gera as telas da aplicação. SAP Fiori elements (anteriormente conhecidos como smart templates) fornecem um framework para os padrões de aplicação mais comuns e redução no esforço de desenvolvimento.

Como eu disse, os aplicativos Fiori podem ser implementados usando código SAPUI5 ou Fiori elements.

Fiori Elements + CAP (Cloud Application Programming) é um modelo de programação avançado (desenvolvimento de aplicativos de estilo livre).

SAP Fiori elements se baseiam em SAPUI5. Eles são a mesma tecnologia de desenvolvimento; um foca em flexibilidade e o outro em eficiência. A SAP espera que a maioria dos clientes use uma combinação das duas abordagens baseadas em SAPUI5, dependendo das necessidades específicas do aplicativo e das necessidades de negócios.

Programação SAPUI5 (Código) vs SAP Fiori Elements (FE)

SAPUI5 Programming (Code)	SAP Fiori Elements (FE)
Modelo de programação flexível	Modelo de programação flexível
Os desenvolvedores de aplicativos têm que escrever muito código UI5, então o custo de desenvolvimento e manutenção do projeto será mais alto	O código SAPUI5 será gerado automaticamente com base em anotações de visão CDS e metadados usando o framework FE
Não é necessário escrever código SAPUI5, nem codificação em JavaScript	Codificação SAPUI5 automática
Escreva código personalizado (UI5, HTML, JQuery, etc.) para construir controles, modelos, código jQuery/Ajax para invocar APIs REST, serviços OData	Programação declarativa
Requer consideração tanto das diretrizes técnicas SAPUI5 quanto das diretrizes de design SAP Fiori para entregar o aplicativo	Automatiza muitas tarefas tediosas, minimiza o código padrão, gera UI e invocação de serviço automaticamente, fornece recursos prontos para uso
Possível desvio das diretrizes Fiori, fornece flexibilidade para personalização, mas perde as vantagens do Fiori	SAP Fiori elements cumpre todas as diretrizes UX e Fiori prontas para uso. Não quebra os padrões SAP Fiori, diretrizes UX
Necessário escrever código adicional para barra de ferramentas ou alterar comportamento em uma tabela responsiva	Por padrão, responsividade e adaptabilidade (executa em vários dispositivos) conforme FE segue estritamente as diretrizes Fiori3
Retrabalho para migrar para a nova versão	Compatibilidade direta com novas versões (diretrizes da nova versão Fiori), sem esforço adicional necessário
Esforço de codificação será maior e o custo de desenvolvimento também	Reduz drasticamente o tempo de codificação e o esforço de desenvolvimento
Quando o código é extenso, o custo de manutenção também será maior	Custo de manutenção muito reduzido
Possível refatoração de código e renovação para otimizações de desempenho	Melhor desempenho possível desde o início
Código personalizado + maior esforço de desenvolvimento	Suporta adaptação de UI, planos de piso, relatórios de lista e página de objeto

Customização

SAPUI5 Programming (Code)	SAP Fiori Elements (FE)
Customização possível	Customização (em andamento). Exemplo: Lista dinâmica de opções dependendo de outro campo dinâmico
Podemos navegar do aplicativo SAP Fiori elements para um aplicativo SAPUI5 personalizado. Implementar páginas personalizadas. Na página de objeto: seções personalizadas são suportadas	Verifique a documentação detalhada
Aberto para implementar qualquer solicitação de recurso sofisticado	Lógica complexa nem sempre é possível com Fiori elements atualmente
Integração de bibliotecas de terceiros/opensource possível	Não suportado no momento

Suporte ODataV2 & OData V4

SAPUI5 Programming (Code)	SAP Fiori Elements (FE)
Use o modelo ODataV4 para desempenho aprimorado em relação ao modelo ODataV2. Mas, por favor, consulte a documentação do modelo ODataV4 e certifique-se de que todos os recursos necessários estão disponíveis	Use o modelo ODataV4 para desempenho aprimorado em relação ao modelo ODataV2

Nota: Qualquer uso de SAPUI5 tem capacidades prontas para uso como acessibilidade, responsividade, adaptabilidade, design Fiori e muito mais. Agora, a escolha é baseada nos requisitos de negócios/usuário final. Por favor, esteja ciente de que, antes de escolher SAP Fiori Elements ou SAPUI5 estilo livre ou componentes de UI-web ou qualquer tecnologia, verifique se todos os recursos necessários estão presentes antes de desenvolver o aplicativo conforme os requisitos do usuário final. Verifique detalhadamente a documentação dos recursos, pois certas partes dos recursos podem estar ausentes ou haver alguma variação.