El front-end de Xianyu es una solución de desarrollo multiterminal basada en tecnología sin servidor

El desarrollo de front-end es demasiado rápido y el desarrollo de marcos y tecnologías de front-end también es interminable, incluida la aparición de diferentes dispositivos inteligentes, lo cual es un gran salto para los estudiantes de desarrollo de front-end. Aquí hay una breve lista:

p>

Esto ha causado algunos problemas. Por ejemplo, si quiero desarrollar una página universal que sea compatible con diferentes terminales y applets, obviamente no es posible. Por el momento, solo podemos desarrollar múltiples conjuntos de páginas para adaptarnos a diferentes escenarios, el costo sería demasiado alto.

Muchos estudiantes están tratando de resolver este problema, que también ha dado lugar a marcos de desarrollo unificados multiterminales como taro. Esta es una buena solución, pero es relativamente pasiva y carece de cierta escalabilidad.

Lo que queremos discutir en este artículo es ver si podemos resolver este problema desde otro ángulo y mejorar la eficiencia del desarrollo.

ViewModel

Cuando desarrollamos una página, sin importar qué marco usemos, generalmente abstraemos una capa de modelo de vista, que tiene principalmente dos funciones

p>

En la imagen de arriba, podemos ver que el modelo de vista es una pieza independiente de la lógica del código general, que desempeña un papel en la conexión del pasado y el futuro. Está más estrechamente relacionado con la capa de vista, por lo que generalmente se coloca en las pruebas de front-end.

Dado que el modelo de vista es independiente, ¿podemos ponerlo en el backend? La mayor ventaja de esto es que el modelo de vista se puede reutilizar, no es necesario reescribirlo y solo es necesario cambiar un modelo de vista para que surta pleno efecto.

Parece una muy buena idea, pero ¿quién desarrollará esta parte del código? Es imposible poner esperanzas en los compañeros de back-end. Por supuesto, solo podemos ser nosotros mismos, y gracias. hasta el surgimiento de la arquitectura sin servidor, lo hizo posible.

Algunos estudiantes pueden preguntar, dado que el modelo de vista se ha movido hacia atrás, ¿qué pasa con la vista? En el futuro, consideraremos combinarlo con nuestra tecnología ui2code, que será realmente perfecta.

Qué es serverless

Arquitectónicamente, podemos dividir serverless en FaaS y BaaS.

FaaS es una plataforma informática que se utiliza para crear, ejecutar y administrar servicios funcionales. Admite múltiples lenguajes de desarrollo, como java, nodejs, dart, etc., lo que favorece la participación de los estudiantes de desarrollo. diferentes terminales. FaaS se basa en la idea de estar controlado por eventos. Solo cuando una función es activada por un evento, ocupará recursos del servidor para su ejecución.

BaaS proporciona servicios básicos de terceros para llamadas a funciones, como verificación de identidad, registros, bases de datos, etc. Lo proporciona directamente el proveedor de servicios. Los desarrolladores no necesitan implementarlo y simplemente pueden llamarlo. directamente.

Implementación empresarial

Desarrollamos la interfaz back-end a través de la plataforma gaia, que puede entenderse como la plataforma FaaS mencionada anteriormente.

Existe tal requisito en el desarrollo diario. La siguiente es una página de este requisito.

Debido a que hay muchos datos en esta página, primero los dividimos en pequeños módulos. Cuando el fondo devuelve datos, también devuelve datos según el módulo.

Diseñamos la interfaz según el modelo de vista. En primer lugar, debe haber una interfaz de datos en la primera pantalla; luego está la interacción en la página, como cambiar de tarjeta y cambiar de botón de crédito de Sesame. provocará cambios en los datos de la página y podemos unificar Encapsula una interfaz de actualización de página; la última es una interfaz habilitada.

Interfaz de back-end

Para el diseño de la estructura de datos más importante para la interacción de front-end y back-end, omitimos el procesamiento de lógica de negocios intermedio y observamos la estructura de datos. de la interfaz.

Los datos devueltos por la interfaz de primera pantalla tienen principalmente varias características:

La estructura de datos devueltos de la interfaz de actualización es similar a la de la interfaz de primera pantalla, pero la entrada Los parámetros son diferentes e incluyen principalmente 2 campos:

Procesamiento front-end

Puede ver en los datos devueltos desde el back-end que los datos son extremadamente detallados. Es necesario realizar cualquier procesamiento de lógica de negocios y se puede asignar directamente a la página. De esta manera, el front-end se ha convertido en una capa de datos muy delgada, sin procesamiento de lógica de negocios de tareas, y se ha vuelto muy simple. Cuando necesita migrar a otros extremos, solo necesita migrar la capa de vista. Cuando hay cambios comerciales, solo necesita modificar la interfaz de backend para que surta efecto.

Beneficios y resumen

A través de prácticas específicas, descubrimos que para los estudiantes de desarrollo front-end, se ha vuelto más simple y la eficiencia del desarrollo ha mejorado enormemente. Debe comprender la lógica empresarial específica para completar el desarrollo de la página. Además, el modelo de vista extraído se puede reutilizar en diferentes terminales y la configuración también incluye el terminal nativo. También podemos dividir el modelo de vista en modelos de vista de granularidad más pequeña para facilitar la reutilización en diferentes interfaces de página. Algunos de nuestros compañeros de clase también encapsularon un marco de gestión de estado general basado en ideas de redux en el lado de FaaS, estandarizando la interacción entre el front-end y el back-end.

Más adelante, todavía nos quedan algunos problemas por resolver, como los costos de desarrollo, la división lógica del modelo de vista y el posicionamiento de interfaces específicas.

¡El equipo de Xianyu es el líder de la industria en la nueva tecnología de integración front-end y back-end de Flutter Dart FaaS, ahora! Cliente/servidor Java/Arquitectura/Front-end/Reclutamiento de ingenieros de calidad para la sociedad, con sede en Alibaba Xixi Park, Hangzhou, creemos productos comunitarios con espacio creativo, hagamos proyectos de código abierto en profundidad y de alto nivel, y ampliemos los límites. de la tecnología para lograr el objetivo final!

*Envíe su currículum a Xiaoxianyu→ guicai.gxy@alibaba-inc .com

Proyectos de código abierto, cobertura de cumbres, ideas clave e interpretaciones en profundidad

Busque la tecnología Xianyu