Fora da caixa: Conheça outras tecnologias frontend para Magento
Desenvolvimento, Magento 2
Publicado em 08 de março de 2023
A criação de temas para Magento sempre foi algo complexo e desafiador. Especialmente para aqueles que estão tendo o primeiro contato com o Magento.
Entender sobre Layout XML, RequireJS, KnockoutJS, UI Components, jQuery, mixins, e tantos outros conceitos e tecnologias não é algo que se faz do dia para noite.
O Magento traz consigo o tema Luma. Ele serve como base e exemplo para aqueles que querem entender como um tema pode estender e modificar outro, ver como ele customiza partes de outros módulos e muito mais.
Fora da caixinha
A necessidade por tecnologias mais inovadoras, rápidas e modernas deram lugar a outras soluções.
Frontends como Hyvä Themes, Adobe PWA Studio, VueStorefront, GraphCommerce e muitas outras vieram ao resgate dos desenvolvedores inconformados.
Mas claro, estas são apenas as tecnologias da moda. Quando você ler este artigo, algumas outras já terão surgido. É assim que funciona, não é mesmo? Quando você se especializar em uma delas, provavelmente teremos uma nova mais bacana. Mas isso é papo pra outro post.
Vamos ver um pouco das opções que temos, incluindo as conhecidas e não tão conhecidas assim?
GraphCommerce
O GraphCommerce é feito com Next.js. Next.js é um framework React que vem ganhando popularidade, e inclusive temos um curso sobre o assunto a caminho.
No backend o GraphCommerce usa GraphQL Mesh para gerar código e queries diversas a partir das APIs de uma loja Magento.
É ideal para desenvolvedores React que gostam de Next.JS e querem ganhar tempo com o front-end sem ter que fazer tudo do zero.
Além de React e Next.js é aconselhável que o desenvolvedor também entenda de TypeScript.
Hyvä
Hyvä vem da língua finlandesa e significa literalmente “bom”. Mas também “desejável” e “aconselhável”. A forma correta de pronunciar é “ruva” (escute aqui).
Ele oferece todas as ferramentas que os desenvolvedores Magento já conhecem e gostam (layout XML, blocos, view models e phtml), mas sem as partes que eles não gostam (UI-components, Knockout, RequireJS, less CSS).
O Hyvä Themes foi desenvolvido com foco no desempenho e redução de complexidade, o que significa que você obtém uma loja Magento mais rápida e economiza horas de desenvolvimento em personalizações.
Hyvä oferece uma ótima alternativa para aplicativos de página única (SPAs), geralmente fornecendo sites mais rápidos usando menos orçamento, enquanto usa ferramentas que a maioria dos desenvolvedores Magento já conhece.
Além disso ele tem como um de seus principais criadores e mantenedores o Vinai Kopp – um dos desenvolvedores com mais certificações Magento e instrutor do Magenteiro.com.
A curva de aprendizado é menor pra quem já conhece o frontend do Magento, porém tem um custo de cerca de € 1000 por instalação Magento.
Se você é assinante do Clube Magenteiro, assista a entrevista que fiz com Denis Spalenza e veja um mão na massa e dicas sobre hyvä.
Daffodil
Baseado em Angular, foi um dos primeiros frontends headless. Ele tem um design altamente modular e usa Redux para gerenciamento de estado.
Seu código é feito de inúmeros componentes pequenos (npm) que pemitem você criar e customizar o seu próprio front-end.
Embora seja flexível e permite usar todos os serviços do backend de forma relativamente fácil, você precisará saber o que está fazendo e conhecer um pouco de Angular. saber o que está fazendo. E acho que você precisa favorecer o Angular.
Alpaca
Similar ao Hyvä, trata-se de um tema Magento. Ele joga fora todo HTML, CSS e JavaScript do Luma e substitui com seu próprio CSS (SCSS) e componentes FractalJS. Para usar módulos de terceiros você terá que escrever algum código JS personalizado, e exige que você tenha bons conhecimentos em JS (Fractal) e SCSS.
ScandiPWA
Uma forma híbrida entre o tema headless e o Magento é o ScandiPWA. Ele oferece um PWA baseado no React, mas é integrado ao Magento como um tema regular. Isso leva a muita flexibilidade (tema pai/filho, extensão de componentes e módulo existentes), mas também a uma forma personalizada de componentes React (baseada em classe com propriedades personalizadas).
Assim como outros frameworks fizeram, Scandi aceitou o desafio de suportar tantos módulos Magento quanto possível. E com isso, eles são um concorrente feroz do Hyvä (se o suporte de extensão for um dos pontos-chave para basear sua decisão). As soluções ScandiPWA mostram muita criatividade, mas ainda exigem que você prefira o React em vez de outras soluções.
Eu particularmente nunca testei ele, mas a preferência por React/Next.js me faz crer que este será o próximo que testarei.
DEITY
O Deity usa React no frontend, Falcon (framework PHP) no backend, e segue no conceito de criar o e-commerce com pequenas camadas e baixo acoplamento.
Embora hoje ele não esteja tão amarrado ao Magento e oferece soluções para outras plataformas, ele ainda ajuda muitas agências a construírem soluções Magento.
Trata-se de uma solução paga que começa em €30k/ano.
Breeze
Se você gosta do KnockoutJS e não quer simplesmente jogar tudo fora e partir para alternativas da moda, o Breeze pode ser uma boa alternativa ao velho Luma.
O Breeze reescreveu boa parte da lógica do JavaScript do Magento, mas mantendo o KnockoutJS e RequireJS.
Criado pela Swissuplabs, o Breeze é gratuito e promete deixar sua loja Magento 3x mais rápida, substituindo JavaScripts nativos do Magento por versões otimizadas.
Vue Storefront
Como o nome sugere, o Vue Storefront utiliza Vue como tecnologia de frontend, e oferece suporte a PWA (Progressive Web App).
Além do Magento, o Vue Storefront pode ser integrado a outras plataformas como Shopify, WooCommerce, SAP Commerce Cloud, e outros.
Este artigo foi inspirado no artigo The other frontends of Magento (em Inglês), escrito por Jisse Reitsma.
- PagSeguro (PagBank) para Magento 1 recebe a Nova Geração - 9 de abril de 2024
- Recorrência no WooCommerce Sem Plugins Pagos - 28 de janeiro de 2024
- Chargeback. O que é, e como se livrar deles. - 19 de dezembro de 2023
Deixe seu comentário
[fbcomments url="https://www.magenteiro.com/blog/magento-2/alternativas-frontend/"]