Cargando...

Magento2 y PWA

Para entender por qué se necesita una nueva tecnología frontend, como PWA, primero debemos arrojar algo de luz sobre la interfaz actual de Magento 2.

Magento 2 tiene muchos puntos fuertes: desarrollo de back-end con Inyección de Dependencia, Pruebas Unitarias y API por nombrar algunos. Lamentablemente, la tecnología frontend actual no pertenece a esas fortalezas.

Demos una breve descripción de la interfaz actual:

Magento 2 usa el mismo sistema de diseño que Magento 1 para partes grandes de la interfaz.

Consiste en:

  • Bloques (clases de PHP)
  • Plantillas (archivos PHTML: HTML mezclado con un poco de código PHP)
  • Layout XML (para la estructura)
  • JavaScript (principalmente jQuery, con RequireJS para gestionar las dependencias)
  • Less como preprocesador de CSS

Como el sistema de layout es básicamente el mismo desde 2007, está un poco obsoleto y carece de flexibilidad. Después de una fase de aprendizaje (idealmente respaldada por un entrenamiento u otros medios), los desarrolladores frontend pueden trabajar bastante bien con el sistema de diseño, incluso si hay algunos inconvenientes.

En general, la poca documentación y otros detalles, como el código HTML generado por XML son difíciles de depurar y ajustar. Las versiones desactualizadas de jQuery y jQuery UI, así como una compilación CSS muy cargada, no ayudan con la impresión general de la facilidad del front de Magento

Componentes de interfaz de usuario
Los componentes de UI han sido inventados por el equipo central de Magento para tener una interfaz moderna y extensible que puede manejar muchos componentes. Esos componentes son más o menos autodependientes y pueden acceder a otros componentes mediante interfaces bien definidas. Los componentes de la interfaz de usuario se usan principalmente en el proceso de pago y en el área de administración, mientras que ha habido planes para extender su uso a toda la interfaz, reemplazando el antiguo sistema de diseño en el largo plazo.

Las partes principales de los componentes de la interfaz de usuario son:

  • JavaScript ( Knockout.js ) para la lógica
  • Archivos de plantilla ( HTML ) para mostrar HTML
  • XML para definir los componentes (que a veces se altera con el código PHP)
  • Clases de PHP para proporcionar los datos necesarios como JSON .

Si bien esto funciona bien en la práctica (excepto que puede ver que la página se está formando muy claramente), tiene un gran inconveniente, es extremadamente complicado y, por lo tanto, es muy difícil entender lo que está sucediendo.

Esto significa que se requiere mucho tiempo para ingresar al sistema, averiguar qué parte del código es responsable de qué hacer y qué hacer, aunque los componentes de la interfaz de usuario son muy extensibles en general. Esto significa que incluso los desarrolladores experimentados necesitan mucho tiempo para hacer ajustes aparentemente pequeños, especialmente para el pago.

Si bien Magento prometió simplificar el trabajo con los componentes de la interfaz de usuario, la complejidad subyacente siempre estará presente.

Afortunadamente, las alternativas a la interfaz actual están en camino.

Aplicaciones web progresivas (PWA)
PWA es una tecnología relativamente nueva que tiene como objetivo combinar las ventajas de las aplicaciones y los sitios web nativos. Por ejemplo, puede anclar un sitio web a la pantalla de inicio de su teléfono, usar los sensores de la máquina o hacer frente a las fases fuera de línea. Pero con respecto a Magento, hay un solo factor que marcará el futuro de la plataforma:

Las PWA permiten desacoplar frontend y backend.

Los PWA generalmente se crean en un marco de JavaScript como React, Vue.js o AngularJS para manejar datos y mostrarlos. En segundo plano, se comunican con un back-end (en nuestro caso, Magento 2) a través de API REST. Si agregamos capa de almacenamiento en caché (como un middleware node.js), tendremos un frontend que es increíblemente rápido, cubriendo la misma funcionalidad que el frontend Magento tradicional.

PWA Studio, es la tecnología oficial que Magento Inc. está desarrollando actualmente. Utilizará React para la interfaz. El resultado final probablemente será muy extensible, pero tomará un tiempo hasta que se lance una versión estable. No hay mucha información sobre el proyecto disponible públicamente en este momento.

Es genial tener posibilidades para desacoplar la interfaz del backend de Magento2 , ya que esto permitirá pasar por alto la interface tan complicada. El paso más importante será tener un buen tema predeterminado extensible que se base en React o Vue.js

Por lo pronto, sólo queda esperar a Magento para esta liberación, pero aún no hay un cronograma oficial hasta el lanzamiento, pero este, es el camino más óptimo para una plataforma en exponencial crecimiento.