Element es una biblioteca de componentes de escritorio basada en Vue 2.0, diseñada por Ele.me UED y desarrollada por Ele.me Big Front-end. Lo que quiero compartir hoy es algo de experiencia en el desarrollo de Element.
Sitio web oficial:/ElemeFE/element
# #DesignPurpose
La mayoría de los proyectos se originan en las necesidades del lado comercial, y lo mismo ocurre con Element. Con el desarrollo del negocio de la empresa, muchos sistemas back-end se han derivado internamente y el departamento UED también ha recibido cada vez más requisitos de diseño. Después de analizar todo el proceso, descubrimos los siguientes problemas:
-La demanda de diseño de productos de fondo aumenta día a día.
-Los recursos de diseño limitados no pueden soportar todas las líneas de negocio
-La experiencia de muchos de los productos backend de la empresa es inconsistente.
Así que decidimos:
-Diseñar un marco de soporte backend para mejorar la disponibilidad y consistencia del sistema backend.
-Utilizando este marco, se puede diseñar un sistema backend útil para el producto o el desarrollo incluso sin la participación de diseñadores.
##Etapa de diseño
La siguiente es una breve introducción a las distintas etapas del diseño de un elemento.
* *Comprender el negocio de la empresa, estar familiarizado con los productos back-end y buscar * * *problemas sexuales* * en el negocio.
El propósito del El diseño está al servicio de la empresa. El primer paso es comenzar con el sistema interno, comprender los diversos sistemas back-end utilizados por la empresa, separar de manera abstracta sus componentes y buscar características * * * *.
* *Centrarse en el diseño de componentes comerciales* *
Después de resumir el uso de diferentes componentes en diferentes sistemas de la empresa, planeamos comenzar con los componentes comerciales, porque esta parte surge de En la empresa Soluciones para necesidades especiales, creemos que resolver estos problemas espinosos también puede brindar una buena orientación de diseño para otros productos de back-end.
* *Buscando soporte de desarrollo* *
En este momento, comenzamos a buscar equipos de desarrollo dentro de la empresa y luego aprendimos que diferentes equipos usan diferentes marcos de front-end. incluidos Vue, React, Angular, etc.
* *Utilice un front-end grande* *
Como equipo de front-end independiente, el front-end grande tiene la capacidad de desarrollar herramientas subyacentes para servir a diferentes negocios. también una pila de tecnología joven y bien desarrollada. La cooperación entre UED y Big Front End se llevó bien.
* *Cambie la dirección y concéntrese en los componentes básicos* *
Después de contactar al gran front-end, descubrí que la dirección inicial no era correcta porque el negocio cambia demasiado rápido. incluso si hay un componente comercial general, también es difícil mantenerse al día con los cambios en la demanda. Los componentes básicos son componentes comunes que necesitan todos los equipos de desarrollo. En este momento, comenzamos a ajustar la dirección al diseño de componentes básicos.
* *Interacción completa de componentes, empaquetamiento visual y construcción del sitio web principal* *
El trabajo de diseño inicial está diseñado principalmente por diseñadores de interacción. Después de confirmar la funcionalidad e interacción de todos los componentes, comienza la fase visual, que incluye la elaboración de diversas especificaciones como colores, fuentes, etc., así como el diseño del sitio web principal.
Exporta archivos del kit de interfaz de usuario y unifica las especificaciones de diseño.
En la primera versión del diseño de un sitio web, los "componentes especiales" aquí son componentes comerciales.
* *Rediseño del sitio web* *
Después de lanzar la primera versión del sitio web, el efecto visual no era bueno, por lo que hicimos ajustes internos. Después de volver a conectarse, esto es lo que todos ven ahora.
En definitiva, el proceso de diseño pasa por estas etapas. Si aún tienes preguntas, puedes continuar comunicándote. Vayamos a la etapa de desarrollo.
# #Propósito del desarrollo
-El sistema backend carece de un conjunto completo de bibliotecas de componentes básicos
-Vue es una pila de tecnología relativamente joven en la empresa, y Quiero hacer algo Construcción de infraestructura.
-Promover la influencia de la empresa en la comunidad tecnológica.
##Proceso de desarrollo
Después de entrar en la etapa de desarrollo, hicimos algunos intentos en la arquitectura general. Permítanos compartirlo con usted en orden cronológico:
* *Cómo trabajar con diseñadores* *
Después del desarrollo y diseño inicial del proyecto, refinamos un conjunto de componentes de desarrollo. Procesos:
1. Desarrollar en base a borradores interactivos y borradores visuales, y mantener comunicación con los diseñadores durante el proceso.
2. Autoinspección después del desarrollo y luego enviarlo al diseñador para su aceptación.
3. El diseñador presenta opiniones de modificación y realiza modificaciones basadas en las opiniones.
4. Completar el desarrollo de componentes y escribir muestras y documentación para el sitio web.
* *Cómo gestionar proyectos de múltiples componentes* *
Al comienzo del desarrollo, estábamos pensando en cómo reducir el acoplamiento de componentes y garantizar que los componentes puedan funcionar de forma independiente. El propósito de esto es garantizar que los componentes puedan depender de otros componentes, permitiendo a los usuarios cargar solo algunos de ellos, o incluso instalar solo los componentes requeridos durante la instalación. Lo primero que me viene a la mente es que un componente es un almacén independiente y el proyecto de biblioteca de componentes introduce componentes como dependencias.
Sin embargo, debido a la falta de mano de obra, el desarrollo de este mecanismo requiere demasiado tiempo. Cada componente debe mantenerse y empaquetarse por separado, mientras se mantiene el número de versión dependiente del proyecto de biblioteca de componentes. Sólo puedo encontrar otra solución. Más tarde se mencionó
[babel](/babel/babel) el modo de gestión de proyectos: todos los subproyectos se colocan en `paquetes/'.
En un directorio, un subproyecto puede considerarse como un almacén independiente. Administre las dependencias y versiones de subproyectos a través de [lerna](/lerna/lerna)
Combinando las características de nuestro propio proyecto y este mecanismo de Babel, reconstruimos la estructura del directorio: los componentes se pueden colocar en 'paquetes/' como un solo proyecto, y * * * se pueden colocar en funciones.
`src/`li. El resultado final del empaquetado será que todo el componente se empaqueta en un archivo y los componentes se empaquetan en archivos separados. Al mismo tiempo, también se lanzarán bibliotecas de componentes y componentes independientes para satisfacer las necesidades de diferentes usuarios.
* *Cómo resolver temas personalizados* *
El desarrollo de una biblioteca de componentes es inseparable de la necesidad de temas personalizados. El nombre de la clase debe ser lo suficientemente amigable y tratar de evitar el anidamiento a nivel de estilo. Será mucho más conveniente anular el estilo directamente o escribir un grupo de temas separado. Por eso usamos BEM para administrar nombres de clases y usamos variables en lugar de valores de atributos siempre que sea posible. Podemos personalizar un conjunto de temas manteniendo un archivo de variables para que las variables se puedan modificar directamente.
Teniendo en cuenta los hábitos de uso de los diferentes usuarios, elegimos CSS4, más cercano a los estándares futuros, en lugar de preprocesadores de estilo propio como Less o Sass.
Sintaxis de estilo, utilizando PostCSS e integrando complementos como postcss-bem y postcss-cssnext.
[post CSS-salad](/eleme Fe/post CSS-salad) desarrollo.
Para reducir el costo de personalización de temas por parte de los usuarios, también proporcionamos herramientas de línea de comandos para guiar a los usuarios a personalizar rápidamente un conjunto de temas.
* *Cómo proporcionar documentación intuitiva* *
Los documentos no solo hacen que sea intuitivo para los usuarios verlos, sino también intuitivo para los autores escribirlos. La forma más sencilla es utilizar Markdown.
Redactar documentación. Pero surge otra pregunta: ¿Cómo escribir ejemplos prácticos en la documentación? El enfoque tradicional es utilizar Vue para escribir documentos.
archivo para que se puedan llamar otros componentes dentro de él, pero esto anula el propósito de escribir documentación "intuitiva".
Después de varios intentos, combinado con las características de Vue. Escribimos un conjunto de cargadores de paquetes web para procesar archivos Markdown, que pueden convertir Markdown en archivos Vue. Esto no solo reduce el costo de mantenimiento del documento, sino que también permite ejecutar instancias de componentes en el documento.
* *Cómo configurar y gestionar un sitio web oficial multilingüe* *
Element realmente no consideró la internacionalización al inicio del proyecto. Después de que el proyecto fuera de código abierto, recibimos comentarios de algunos desarrolladores extranjeros que esperaban agregar documentación en inglés. Poco después, un equipo de traducción nacional se puso en contacto con nosotros de forma proactiva y contribuyó con un conjunto completo de documentos en inglés a Element.
Si tiene documentos en inglés, necesita un sitio web en inglés, lo que requiere modificar y actualizar la estructura existente del sitio web oficial. Al mismo tiempo, para afrontar el futuro, el sitio web oficial debe ser compatible con otros idiomas además del inglés. Para ello hemos realizado el siguiente trabajo:
1. Enviar según la ruta especificada
La ruta del sitio web oficial se genera automáticamente en base a un archivo json que registra la navegación. información.
Por lo tanto, debe agregar campos correspondientes a otros idiomas en este archivo json y modificar la lógica de generación de enrutamiento de acuerdo con la nueva estructura de datos.
2. Página
Además de la documentación, el sitio web oficial también tiene algunas páginas de introducción. Hay muchas palabras en estas páginas. Si administras manualmente las páginas de cada idioma, debes ir a la ubicación correspondiente de cada página para editarla si necesitas modificarla, lo cual es un poco engorroso. Nuestro enfoque es: cada página corresponde a una plantilla, extraer todas las palabras de la plantilla en un archivo de configuración de idioma, escribir un script y generar la página final. De esta forma, cuando necesites modificarlo, solo necesitarás editar el campo correspondiente en el archivo de configuración del idioma.
3. Componentes del sitio web
Para los componentes de página comunes, como "encabezado" y "pie de página", adoptamos una estrategia similar a la anterior. Pero debido a la falta de texto en el componente, ya no se utilizan plantillas, sino que se utiliza el enrutamiento para determinar el idioma que se debe mostrar.
Efecto de visualización de los sitios web en chino e inglés
En este punto, hemos mejorado gradualmente la pila de tecnología. ES2015 y CSS4 se utilizan como lenguajes de desarrollo, Lerna es responsable de administrar los componentes y Karma coopera con Mocha y .
Chai y otras herramientas se utilizan para pruebas de integración continua en Travis CI y, finalmente, Markdown y Vue se utilizan para escribir documentos. Incluso hemos implementado funciones como la implementación automática de sitios web y la inserción de código de almacén de temas en CI
En este sistema, hemos mejorado mucho la eficiencia del desarrollo.