Por qué Mason y el front-end como servicio cambiarán las reglas del juego para el desarrollo de productos

Publicado: 2022-03-10
Resumen rápido ↬ En términos generales, el desarrollo y mantenimiento de software ha sido un proceso arduo y lento para los desarrolladores e ingenieros que llevan la mayor parte del trabajo. Sin embargo, con la introducción de front-end-as-a-service, y una empresa como Mason siendo pionera en el camino, todo eso podría cambiar. Esto es lo que necesita saber sobre FEaaS.

(Este es un artículo patrocinado). Eche un vistazo a las aplicaciones y el software con los que interactúa regularmente. Cada uno tiene su propio diseño único, ¿verdad? Y, sin embargo, hay algo similar en cada uno de ellos. Barras de navegación, formularios de contacto, cuadros de funciones, CTA: ciertos elementos tienden a estar presentes sin importar a dónde vaya.

Esto se debe a que estos elementos juegan un papel crucial en la forma en que los usuarios interactúan con los productos que ha creado. Desde el punto de vista de los usuarios, esto es algo bueno. Al incluir estos elementos reconocibles y predecibles dentro de la estructura de interfaz de una aplicación, el enfoque del usuario está en el contenido que tienen delante; no en tratar de resolver el misterio de la interfaz de usuario.

Sin embargo, desde el punto de vista de los desarrolladores de software, esto es un fastidio. Usted sabe qué tipo de componentes deben incluirse en un producto. Sin embargo, hasta ahora, ha tenido que crearlos desde cero una y otra vez. Peor aún, cada vez que algo necesita ser actualizado, depende de usted implementar la actualización y enviarla al sitio en vivo, y no es frecuente que tenga el ancho de banda para realizar esos cambios de inmediato.

Es por eso que lo que Mason está haciendo con front-end-as-a-service (FEaaS) es tan interesante. En este artículo, le daré una mirada más cercana a FEaaS, para quién es y por qué capacitar a los equipos de productos y marketing con él es un gran problema.

¿Qué es FEaaS?

Ya sabes lo que es el software como servicio (SaaS). Pero, ¿ha oído hablar de los componentes de software como servicio (SCaaS)?

Hubo algunas quejas ligeras en torno a SCaaS hace varios años. La idea básica era que usted podría crear y mantener fácilmente componentes y widgets de interfaz de usuario reutilizables para su software. Sin embargo, nunca se puso de moda, y eso probablemente se deba a que era demasiado restrictivo en lo que permitía hacer a los desarrolladores.

Sin embargo, con FEaaS, tiene una solución mucho más valiosa y poderosa. Esencialmente, la solución front-end como servicio de Mason le permite construir de forma rápida y eficaz los aspectos visuales y la funcionalidad de su software.

Esto significa que está creando funciones complejas y haciéndolas hablar con las API. Puede encontrar un ejemplo de diferentes formularios complejos diseñados conectados a Airtable como fuente de datos aquí.

Además, cada función que crea con Mason vive en la misma base de código que el resto de su producto. Echemos un vistazo a un Chatbot personalizable con Apixu que se hizo con Mason:

Demostración de la lista de tareas pendientes de Mason Airtable
Un ejemplo de los tipos de contenido dinámico que puede crear con FEaaS. (Fuente: Mason) (Vista previa grande)

Y este es un banner de héroe que creé para un sorteo de un libro electrónico usando una plantilla de Mason:

Plantilla de héroe albañil
Un ejemplo de una plantilla de imagen de héroe, personalizada y publicada con Mason. (Fuente: Mason) (Vista previa grande)

No se equivoque: este no es un creador de sitios web. Mason le permite a usted y a su equipo construir componentes individuales y características completamente funcionales; no todos los sitios web o productos de alojamiento administrado. De esta manera, ya no estará restringido por las capacidades de su solución de creación de sitios.

Puede crear su sitio web, aplicación u otro producto de software en la herramienta que elija. Luego, diseñe y exporte funciones realmente complejas de Mason para integrarlas en su base de código. Es importante señalar que, a diferencia de una plataforma que te bloquea a ti y a los datos de tus clientes, Mason permite que los equipos de productos aumenten sus productos actuales y sean dueños de todo (no como algunos creadores de sitios web que son dueños de todo tu sitio web y negocio).

¿Para quién es Mason?

Con Mason, ya debería tener un producto de software completamente desarrollado o, al menos, una solución para construirlo. Mason es la herramienta que utilizará para crear y diseñar las características (y su funcionalidad) para su producto, y hacerlo con facilidad (es decir, sin codificación).

Esas funciones serán independientes y se colocarán en el producto cuando estén listas para funcionar.

En cuanto a las personas reales para las que se creó Mason, Tom McLaughlin, director ejecutivo de Mason, explica:

“Hoy, todo el producto vive en el código base, por lo que se convierte en el ámbito de facto del equipo de ingeniería únicamente, aunque muchas de las características que componen el producto se pueden encontrar en cualquier otro código base del mundo, son solo no tan único. Mason permite que su equipo de productos cree estas características comunes más rápido, pero, lo que es más importante, permite que cualquier persona de la organización, sea técnica o no, las administre, incluso una vez que están en producción”.

Su equipo de producto, sus desarrolladores y diseñadores de software, son los que usarán Mason para construir su software. Sin embargo, sus equipos de marketing y contenido obtendrán la capacidad de actualizar las funciones que ha creado en Mason después de que se hayan implementado, sin necesidad de esperar al departamento de ingeniería para implementar cada nueva edición o ajuste.

Esto significa que el mantenimiento de las funciones de front-end ya no depende únicamente de usted, el desarrollador. Cualquier miembro de su equipo (diseñadores, especialistas en marketing, creadores de contenido, etc.) puede usar la plataforma FEaaS de Mason para crear y actualizar las características de su software.

Por lo tanto, no solo puede crear funciones potentes para sus productos de manera más eficiente, sino que su equipo puede implementar actualizaciones en tiempo real, en lugar de permitir que se acumulen en su lista de solicitudes abiertas.

Por qué es importante FEaaS

¿Su programación de desarrollo, implementación o actualización de software ha sufrido en el pasado debido a cuellos de botella (aunque completamente comprensibles) del desarrollador de software? Si es así, FEaaS debería parecerle un sueño.

Hasta ahora, realmente no ha habido otra opción para los ingenieros de software. Si quería crear un producto para la web, todo tenía que construirse desde cero y requería una buena cantidad de tiempo de su parte para hacerlo, especialmente si sus objetivos eran de naturaleza más compleja. Mientras tanto, el resto de tu equipo se quedó esperando entre bastidores a que hicieras tu parte.

Con Mason a la cabeza con su solución FEaaS, me gustaría echar un vistazo a cómo sus capacidades van a revolucionar su flujo de trabajo de desarrollo de productos.

Diseñe componentes de interfaz de usuario visualmente

FEaaS saca a los ingenieros y desarrolladores de la base de código de un producto y los lleva a una interfaz de construcción visual. Como tal, ve exactamente lo que está creando sin tener que alternar entre su código y una vista previa visual de cómo se verá una vez implementado.

Con el generador visual de Mason, puede diseñar componentes de interfaz de usuario complejos pero esenciales utilizando un sistema de contenedores, columnas, capas y elementos preconfigurados como texto, campos de formulario, botones y más.

Constructor visual Mason
Una mirada al interior de la herramienta de construcción visual de Mason. (Fuente: Mason) (Vista previa grande)

De manera similar a cómo funcionan otras herramientas de construcción modernas, hay una gran cantidad de opciones disponibles para ayudarlo a hacer más sin tener que escribir una línea de código. Y gracias a un cómodo cambio entre las vistas de escritorio, móvil y tableta, el diseño receptivo tampoco es un problema.

Además, Mason viene con un kit de interfaz de usuario con todas las funciones que incluye una variedad de plantillas para los componentes de interfaz de usuario más comunes. O puede seleccionar manualmente los que necesita:

Plantillas de albañil
Biblioteca de plantillas de componentes de interfaz de usuario preconstruidos de Mason. (Fuente: Mason) (Vista previa grande)

Tarjetas de características. Pantallas de inicio de sesión. Bloques de contenido del blog. Imágenes de héroes. Botones de llamada a la acción. Todos los componentes principales que necesita para lograr que los visitantes interactúen con su producto y tomen medidas ya se han creado para usted.

Si está cansado de crearlos desde cero en todos y cada uno de los productos que crea, estas plantillas serán de gran ayuda. Como puede imaginar, tener la capacidad de diseñar y personalizar componentes de productos de esta manera sería una gran ayuda para la productividad de su equipo.

Construya componentes y funcionalidad más rápidamente

Ahora, poder diseñar componentes visualmente es solo uno de los beneficios de usar una plataforma FEaaS como Mason. Como era de esperar, una herramienta como esta fue fabricada para la velocidad.

En términos del uso real de Mason, es una herramienta que se carga increíblemente rápido , lo que haría que esto sea muy valioso para cualquiera que haya perdido tiempo en el pasado esperando que sus herramientas se inicien, guarden cambios o pasen de una vista a otra.

En términos de cómo afecta su flujo de trabajo, espere ganar velocidad allí también.

Con el constructor Mason, puede:

  • Agregue nuevos contenedores, columnas, filas, bloques de contenido o elementos codificados a medida con un simple arrastrar y soltar:
Opciones de diseño de albañil
Conjunto completo de diseños de diseño, componentes y opciones de codificación de Mason. (Fuente: Mason) (Vista previa grande)
  • Revise, edite, duplique, mueva o elimine las capas de su componente utilizando esta jerarquía de elementos visualizada:
capas de albañil
Controles de capa fáciles de administrar de Mason. (Fuente: Mason) (Vista previa grande)
  • No es solo la pieza de diseño de la interfaz de usuario lo que se simplifica. También puede conectar sus componentes a otras fuentes a través de API con facilidad.
fuentes de datos de albañil
Conexión de fuentes de datos a funciones de Mason para prepararse para el mapeo. (Fuente: Mason) (Vista previa grande)
Asignación de API de Mason
Conexión de API a componentes de Mason mediante mapeo. (Fuente: Mason) (Vista previa grande)

La pestaña "Configurar" de Mason le permite integrarse rápidamente con otras aplicaciones, como:

  • autista
  • Facebook
  • hubspot
  • Raya
  • Twilio
  • Y más.

Entonces, supongamos que desea vender el libro electrónico promocionado en su banner de héroe en lugar de simplemente recopilar clientes potenciales con él. Lo primero que haría es configurar la integración de Stripe.

Todo lo que necesita son las claves publicables y secretas del panel de desarrollador de Stripe:

Claves API de banda
Recupere las claves API de su panel de desarrollador de Stripe. (Fuente: Stripe) (Vista previa grande)

Luego, ingrese cada una de las claves en el campo correspondiente en Mason:

Mason integraciones de terceros
Integre otras aplicaciones con componentes de Mason como fuentes de datos, como este ejemplo de Stripe. (Fuente: Mason) (Vista previa grande)

Vuelva a la pestaña "Diseño" y arrastre el Elemento de formulario de tarjeta de crédito al componente.

Elemento de formulario de tarjeta de crédito Mason
Utilice el elemento de formulario de tarjeta de crédito en Mason para aceptar pagos a través de componentes. (Fuente: Mason) (Vista previa grande)

Con su formulario agregado a la página, hay un paso final para configurar esta integración.

Regrese a la pestaña Configurar. Ahora verá una nueva opción en la barra lateral llamada "Formularios":

Integración de Mason con Stripe
Configure un formulario de pago de Stripe en solo unos pocos pasos con Mason. (Fuente: Mason) (Vista previa grande)

Puede ver que todos los detalles pertinentes ya se agregaron aquí y la conexión ya se realizó a su formulario.

Una vez más, Mason simplifica algo que normalmente les tomaría un tiempo a los ingenieros de software si tuvieran que construir un componente desde cero. En su lugar, ahora tiene todas las herramientas que necesita para diseñar y programar rápidamente nuevas funciones para su producto.

Implemente nuevas funciones con facilidad

Sin duda, ser capaz de diseñar nuevas funciones rápidamente es importante para los equipos de productos. Sin embargo, eso todavía no soluciona el problema de la implementación.

Los cuellos de botella pueden ocurrir en varios puntos del desarrollo de un producto. Y cuando crea una pieza de software que es tan compleja que solo un ingeniero puede ejecutarla o implementar actualizaciones fácilmente, bueno, solo puede esperar más demoras en la tubería.

Mason ha desarrollado una solución para esto. Para empezar, publicar un componente en la biblioteca de Mason es pan comido. Simplemente haga clic en el botón "Publicar" en la esquina superior derecha del constructor y Mason se encargará del resto.

Sin embargo, para incluir el componente dentro de su producto o aplicación, un desarrollador debe involucrarse, pero solo esta vez y no debería tomar más de cinco minutos.

Para hacer esto, use el botón "< > Implementar" en la esquina superior derecha del generador. A continuación, le pedirá que haga lo siguiente:

Proceso de implementación de Mason
La implementación de un componente Mason lleva solo cinco minutos y cuatro pasos. (Fuente: Mason) (Vista previa grande)

Esencialmente, lo que está haciendo es tomar el identificador único que Mason ha creado para la función que creó y agregarlo a su base de código. Cuando se configura correctamente, su producto llamará a la API de Mason para representar el lado de la aplicación del componente. Y aquellos en la parte delantera del sitio no serán más sabios.

Es tan simple como eso impulsar un nuevo componente y toda su funcionalidad en vivo.

Permita que todos realicen cambios y envíen actualizaciones

Todos los puntos que he mencionado aquí sobre los beneficios de FEaaS han estado dando vueltas en torno a este último y enorme beneficio, que es este:

FEaaS permite a todos realizar cambios en las funciones y llevarlos a una aplicación en vivo.

Piense en eso por un momento.

¿Cuánto tiempo ha pasado su equipo esperando a que un ingeniero implemente los cambios que necesitan? ¿Y qué ha hecho eso en términos de atrofiar la capacidad de su aplicación para atraer y convertir visitantes? Sin una interfaz de usuario de aspecto impresionante, sin funciones que funcionen correctamente, sin todos los elementos críticos necesarios para obligar a los visitantes a tomar medidas.

En última instancia, le está costando dinero a la empresa al mantener el software como rehén. Hasta ahora, eso es algo que los equipos de productos de software no podían evitar. Era simplemente la naturaleza de su trabajo. Pero con FEaaS de Mason, esto finalmente cambia.

Una vez que haya (1) publicado su componente y (2) implementado en su aplicación, la característica aparecerá dentro de su producto. Pero digamos que se necesitan cambios. Por ejemplo:

  • Su diseñador quiere cambiar el estilo de un formulario para reflejar el diseño renovado de la página de destino.
  • Su gerente de marketing tiene una nueva imagen de marca que debe reemplazar la imagen principal de la página de inicio.
  • Tu editor ha decidido modificar la redacción de la última oferta de generación de leads y quiere actualizar la CTA.

No importa quién ingrese al constructor Mason para cambiar un componente. En el momento en que sucede, el botón "Guardado" desvanecido en la esquina superior derecha del generador se convierte en un botón verde "Ir a publicar".

Actualizaciones de componentes de software de Mason
Cualquier persona puede actualizar los componentes de Mason. (Fuente: Mason) (Vista previa grande)

¿Y adivina qué? No se necesita experiencia técnica para hacer clic en él.

Mason simplifica la publicación
Mason se encarga de publicar sus componentes y sus actualizaciones en su biblioteca. (Fuente: Mason) (Vista previa grande)

Mason se encarga de publicar e implementar los cambios, por lo que siempre que la conexión entre su aplicación y Mason ya se haya realizado, estas actualizaciones deberían publicarse instantáneamente para que los visitantes las vean.

Si usted y su equipo de producto se han visto atascados con una avalancha de solicitudes que les piden que construyan nuevos componentes o modifiquen los existentes, esto lo detendrá de manera efectiva.

Terminando

Una de las cosas maravillosas de crear productos para la web es que alguien siempre está desarrollando una nueva forma de ayudarnos a lograr más y, al mismo tiempo, hacer menos.

Con las aplicaciones de software, en general, ha tardado mucho en llegar. Afortunadamente, FEaaS está aquí y parece que Mason ha desarrollado una herramienta sumamente valiosa para acelerar el desarrollo de software, mejorar la producción y también capacitar a más miembros de su equipo para que participen.