{"id":665,"date":"2024-06-18T15:41:29","date_gmt":"2024-06-18T18:41:29","guid":{"rendered":"https:\/\/tachyonix.io\/br\/?p=665"},"modified":"2024-06-28T14:39:51","modified_gmt":"2024-06-28T17:39:51","slug":"sapui5-vs-sap-fiori-elements-fe","status":"publish","type":"post","link":"https:\/\/www.tachyonix.io\/br\/sapui5-vs-sap-fiori-elements-fe\/","title":{"rendered":"SAPUI5 vs SAP Fiori Elements (FE)"},"content":{"rendered":"\n<p>Este artigo \u00e9 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 \u00fanicas sobre este assunto. Tamb\u00e9m pesquisei os blogs SAP mais populares sobre este t\u00f3pico. Portanto, fique tranquilo que voc\u00ea est\u00e1 recebendo apenas conte\u00fado novo e atualizado aqui.<\/p>\n\n\n\n<p><strong>SAP Fiori<\/strong><\/p>\n\n\n\n<p>SAP Fiori s\u00e3o os princ\u00edpios de design, pr\u00e1ticas e o guia de estilo de design. Os aplicativos SAP Fiori (nova vers\u00e3o 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\u00f3digo para todos os tamanhos de tela, como navegador, celular, etc. Ou seja, ele ser\u00e1 executado em qualquer dispositivo (m\u00f3vel, tablet, desktop).<\/p>\n\n\n\n<p>Os aplicativos Fiori oficiais entregues podem ser encontrados na Fiori Apps Library.&nbsp;<\/p>\n\n\n\n<p>O SAP Fiori3 \u00e9 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.<\/p>\n\n\n\n<p>O que \u00e9 Experi\u00eancia do Usu\u00e1rio SAP e a estrat\u00e9gia de experi\u00eancia do usu\u00e1rio da SAP<\/p>\n\n\n\n<p>UX\/UI \u00e9 essencial para promover um alto n\u00edvel de qualidade e consist\u00eancia em todas as p\u00e1ginas de uma aplica\u00e7\u00e3o web. UX pode requerer mais criatividade do que UI, no final das contas, o design de um site deve ser centrado no usu\u00e1rio e agregar valor ao usu\u00e1rio final. No mundo do design thinking, o design \u00e9 um processo de tr\u00eas fases: &#8220;descobrir, projetar e entregar&#8221;. Outras empresas usam palavras diferentes e etapas diferentes, mas, em geral, \u00e9 sempre o mesmo. Para completar todas as tr\u00eas fases do processo de &#8220;Design Thinking&#8221;, as organiza\u00e7\u00f5es precisam de um novo conjunto de habilidades e mentalidade, incluindo facilita\u00e7\u00e3o, coaching, brainstorming e gera\u00e7\u00e3o de ideias (Design Thinking). Design Thinking em 500 palavras ou menos combina empatia, criatividade e racionalidade para atender \u00e0s necessidades do usu\u00e1rio e impulsionar o sucesso dos neg\u00f3cios.<\/p>\n\n\n\n<p>UX e UI dependem um do outro. UX deve se concentrar no usu\u00e1rio final.<\/p>\n\n\n\n<p>SAP Fiori UX representa uma experi\u00eancia de usu\u00e1rio personalizada, responsiva e simples em todos os dispositivos e op\u00e7\u00f5es de implanta\u00e7\u00e3o.<\/p>\n\n\n\n<p><strong>SAPUI5<\/strong><\/p>\n\n\n\n<p>UI5 \u00e9 uma tecnologia, enquanto Fiori \u00e9 uma metodologia. UI5 oferece framework, kit de ferramentas de desenvolvimento para HTML 5, cont\u00e9m muitas bibliotecas JavaScript predefinidas baseadas no padr\u00e3o MVC. Usando este framework, o desenvolvedor pode facilmente construir aplica\u00e7\u00f5es web. UI5 utiliza tecnologias web como HTML, CSS e JavaScript.<\/p>\n\n\n\n<p><strong>SAP Fiori elements<\/strong><\/p>\n\n\n\n<p>Pela minha experi\u00eancia 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\u00f5es de aplica\u00e7\u00e3o mais comuns baseados em SAPUI5. Como desenvolvedor, tudo que voc\u00ea precisa fazer \u00e9 escrever as anota\u00e7\u00f5es CDS necess\u00e1rias. SAP Fiori elements garantem consist\u00eancia de design e conformidade autom\u00e1tica (sem esfor\u00e7o de desenvolvimento extra) com as diretrizes de design mais recentes, ao mesmo tempo que reduzem a quantidade de c\u00f3digo front-end necess\u00e1rio para construir aplicativos SAP Fiori. SAP Fiori elements t\u00eam comprovada economia no desenvolvimento de front-end de at\u00e9 80% em rela\u00e7\u00e3o ao anteriormente.<\/p>\n\n\n\n<p>A equipe de aplicativos seleciona o floorplan relevante e ent\u00e3o o framework gera as telas da aplica\u00e7\u00e3o. SAP Fiori elements (anteriormente conhecidos como smart templates) fornecem um framework para os padr\u00f5es de aplica\u00e7\u00e3o mais comuns e redu\u00e7\u00e3o no esfor\u00e7o de desenvolvimento.<\/p>\n\n\n\n<p>Como eu disse, os aplicativos Fiori podem ser implementados usando c\u00f3digo SAPUI5 ou Fiori elements.<\/p>\n\n\n\n<p>Fiori Elements + CAP (Cloud Application Programming) \u00e9 um modelo de programa\u00e7\u00e3o avan\u00e7ado (desenvolvimento de aplicativos de estilo livre).<\/p>\n\n\n\n<p>SAP Fiori elements se baseiam em SAPUI5. Eles s\u00e3o a mesma tecnologia de desenvolvimento; um foca em flexibilidade e o outro em efici\u00eancia. A SAP espera que a maioria dos clientes use uma combina\u00e7\u00e3o das duas abordagens baseadas em SAPUI5, dependendo das necessidades espec\u00edficas do aplicativo e das necessidades de neg\u00f3cios.<\/p>\n\n\n\n<p><strong>Programa\u00e7\u00e3o SAPUI5 (C\u00f3digo) vs SAP Fiori Elements (FE)<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>SAPUI5 Programming (Code)<\/strong><\/td><td><strong>SAP Fiori Elements (FE)<\/strong><\/td><\/tr><tr><td>Modelo de programa\u00e7\u00e3o flex\u00edvel<\/td><td>Modelo de programa\u00e7\u00e3o flex\u00edvel<\/td><\/tr><tr><td>Os desenvolvedores de aplicativos t\u00eam que escrever muito c\u00f3digo UI5, ent\u00e3o o custo de desenvolvimento e manuten\u00e7\u00e3o do projeto ser\u00e1 mais alto<\/td><td>O c\u00f3digo SAPUI5 ser\u00e1 gerado automaticamente com base em anota\u00e7\u00f5es de vis\u00e3o CDS e metadados usando o framework FE<\/td><\/tr><tr><td>N\u00e3o \u00e9 necess\u00e1rio escrever c\u00f3digo SAPUI5, nem codifica\u00e7\u00e3o em JavaScript<\/td><td>Codifica\u00e7\u00e3o SAPUI5 autom\u00e1tica<\/td><\/tr><tr><td>Escreva c\u00f3digo personalizado (UI5, HTML, JQuery, etc.) para construir controles, modelos, c\u00f3digo jQuery\/Ajax para invocar APIs REST, servi\u00e7os OData<\/td><td>Programa\u00e7\u00e3o declarativa<\/td><\/tr><tr><td>Requer considera\u00e7\u00e3o tanto das diretrizes t\u00e9cnicas SAPUI5 quanto das diretrizes de design SAP Fiori para entregar o aplicativo<\/td><td>Automatiza muitas tarefas tediosas, minimiza o c\u00f3digo padr\u00e3o, gera UI e invoca\u00e7\u00e3o de servi\u00e7o automaticamente, fornece recursos prontos para uso<\/td><\/tr><tr><td>Poss\u00edvel desvio das diretrizes Fiori, fornece flexibilidade para personaliza\u00e7\u00e3o, mas perde as vantagens do Fiori<\/td><td>SAP Fiori elements cumpre todas as diretrizes UX e Fiori prontas para uso. N\u00e3o quebra os padr\u00f5es SAP Fiori, diretrizes UX<\/td><\/tr><tr><td>Necess\u00e1rio escrever c\u00f3digo adicional para barra de ferramentas ou alterar comportamento em uma tabela responsiva<\/td><td>Por padr\u00e3o, responsividade e adaptabilidade (executa em v\u00e1rios dispositivos) conforme FE segue estritamente as diretrizes Fiori3<\/td><\/tr><tr><td>Retrabalho para migrar para a nova vers\u00e3o<\/td><td>Compatibilidade direta com novas vers\u00f5es (diretrizes da nova vers\u00e3o Fiori), sem esfor\u00e7o adicional necess\u00e1rio<\/td><\/tr><tr><td>Esfor\u00e7o de codifica\u00e7\u00e3o ser\u00e1 maior e o custo de desenvolvimento tamb\u00e9m<\/td><td>Reduz drasticamente o tempo de codifica\u00e7\u00e3o e o esfor\u00e7o de desenvolvimento<\/td><\/tr><tr><td>Quando o c\u00f3digo \u00e9 extenso, o custo de manuten\u00e7\u00e3o tamb\u00e9m ser\u00e1 maior<\/td><td>Custo de manuten\u00e7\u00e3o muito reduzido<\/td><\/tr><tr><td>Poss\u00edvel refatora\u00e7\u00e3o de c\u00f3digo e renova\u00e7\u00e3o para otimiza\u00e7\u00f5es de desempenho<\/td><td>Melhor desempenho poss\u00edvel desde o in\u00edcio<\/td><\/tr><tr><td>C\u00f3digo personalizado + maior esfor\u00e7o de desenvolvimento<\/td><td>Suporta adapta\u00e7\u00e3o de UI, planos de piso, relat\u00f3rios de lista e p\u00e1gina de objeto<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><br><br><strong>Customiza\u00e7\u00e3o<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>SAPUI5 Programming (Code)<\/td><td>SAP Fiori Elements (FE)<\/td><\/tr><tr><td>Customiza\u00e7\u00e3o poss\u00edvel<\/td><td>Customiza\u00e7\u00e3o (em andamento). Exemplo: Lista din\u00e2mica de op\u00e7\u00f5es dependendo de outro campo din\u00e2mico<\/td><\/tr><tr><td>Podemos navegar do aplicativo SAP Fiori elements para um aplicativo SAPUI5 personalizado. Implementar p\u00e1ginas personalizadas. Na p\u00e1gina de objeto: se\u00e7\u00f5es personalizadas s\u00e3o suportadas<\/td><td>Verifique a documenta\u00e7\u00e3o detalhada<\/td><\/tr><tr><td>Aberto para implementar qualquer solicita\u00e7\u00e3o de recurso sofisticado<\/td><td>L\u00f3gica complexa nem sempre \u00e9 poss\u00edvel com Fiori elements atualmente<\/td><\/tr><tr><td>Integra\u00e7\u00e3o de bibliotecas de terceiros\/opensource poss\u00edvel<\/td><td>N\u00e3o suportado no momento<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Suporte ODataV2 &amp; OData V4<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>SAPUI5 Programming (Code)<\/td><td>SAP Fiori Elements (FE)<\/td><\/tr><tr><td>Use o modelo ODataV4 para desempenho aprimorado em rela\u00e7\u00e3o ao modelo ODataV2. Mas, por favor, consulte a documenta\u00e7\u00e3o do modelo ODataV4 e certifique-se de que todos os recursos necess\u00e1rios est\u00e3o dispon\u00edveis<\/td><td>Use o modelo ODataV4 para desempenho aprimorado em rela\u00e7\u00e3o ao modelo ODataV2<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Nota: Qualquer uso de SAPUI5 tem capacidades prontas para uso como acessibilidade, responsividade, adaptabilidade, design Fiori e muito mais. Agora, a escolha \u00e9 baseada nos requisitos de neg\u00f3cios\/usu\u00e1rio 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\u00e1rios est\u00e3o presentes antes de desenvolver o aplicativo conforme os requisitos do usu\u00e1rio final. Verifique detalhadamente a documenta\u00e7\u00e3o dos recursos, pois certas partes dos recursos podem estar ausentes ou haver alguma varia\u00e7\u00e3o.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este artigo \u00e9 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 \u00fanicas sobre este assunto. Tamb\u00e9m pesquisei os blogs SAP mais populares sobre este t\u00f3pico. Portanto, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":685,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sem-categoria"],"_links":{"self":[{"href":"https:\/\/www.tachyonix.io\/br\/wp-json\/wp\/v2\/posts\/665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tachyonix.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tachyonix.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tachyonix.io\/br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tachyonix.io\/br\/wp-json\/wp\/v2\/comments?post=665"}],"version-history":[{"count":2,"href":"https:\/\/www.tachyonix.io\/br\/wp-json\/wp\/v2\/posts\/665\/revisions"}],"predecessor-version":[{"id":668,"href":"https:\/\/www.tachyonix.io\/br\/wp-json\/wp\/v2\/posts\/665\/revisions\/668"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tachyonix.io\/br\/wp-json\/wp\/v2\/media\/685"}],"wp:attachment":[{"href":"https:\/\/www.tachyonix.io\/br\/wp-json\/wp\/v2\/media?parent=665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tachyonix.io\/br\/wp-json\/wp\/v2\/categories?post=665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tachyonix.io\/br\/wp-json\/wp\/v2\/tags?post=665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}