Tabla de contenido
El lugar principal:
- 1. Experimente la tecnología y los buenos productos
- 2. Innovación de diseño basada en la cultura regional
- 3. Ant Design 4.0: crea un trabajo feliz
- 4. Los organismos de adopción de decisiones experimentan la cabina digital de la tecnología
- 5. Sistema de visualización inteligente AVA
Sesión técnica:
- 6. Utilice React para desarrollar pequeños programas-Remax
- 7. Evolución: sin servidor para frontend: explore el modelo de I + D de nodo de próxima generación
- 8. La derivación y realización de la visualización de Yunfengdie
- 9. El lado "nube" del lenguaje JavaScript full stack para crear aplicaciones comerciales
- 10. Explorando el camino de la tecnología Web 3D de Ant Financial
- 11. Diseñado cuidadosamente para crear la mejor experiencia visual.
La tercera edición de video de SEE Conf 2020 && PPT: https://www.yuque.com/seeconf/2020/slide
1. Experimente la tecnología y los buenos productos
La experiencia de la evolución de los productos SaaS:
-
De la nada a
la transformación digital, lo que permite que una gran cantidad de productos SaaS surjan de la nada. -
De la existencia a la belleza: una
gran cantidad de productos se han agrupado desde funciones hasta atractivos por defecto, y apariencia = progreso.
El valor de la apariencia no se trata solo de la presentación visual, sino que también necesita reconstruir el producto a partir de muchos aspectos, como la arquitectura de la información y la disposición de funciones. -
De lo bello a lo bueno,
esfuércese por hacer que el producto se vea bien desde el valor predeterminado, el valor predeterminado es fácil
de usar, fácil de usar = utilidad + me encanta usarCampo de productos SaaS de nivel empresarial:
un producto fácil de usar debe ser fácil de usar tanto racional como emocionalmente.
Los buenos productos deben ser creativos, innovadores, útiles y fáciles de usar. No deben perder ningún detalle, deben ser hermosos, amigables con el medio ambiente, deben tener la menor cantidad de diseños posible, deben ser sutiles, sencillos, honestos y duraderos. .
Los buenos productos son honestos, hacen lo que pueden, no hacen lo que no pueden, no mienten a los usuarios y no los engañan.
Los buenos productos deben ser eficaces para los usuarios, rentables para las empresas y un desarrollo sostenible.
La utilidad para los usuarios, es decir, el valor del usuario: valor del usuario = nueva experiencia-experiencia antigua-costo de reemplazo La
nueva experiencia a menudo proviene de nuevas tecnologías o nuevos modelos comerciales. Pero para los productos intermedios y secundarios de la empresa, la nueva experiencia a menudo proviene de la clasificación clara de las funciones del producto y la simplificación drástica de los procesos del producto.
2. Innovación de diseño basada en la cultura regional
3. Ant Design 4.0: crea un trabajo feliz
Interfaz WIMP
- Permitir que los usuarios encuentren funciones
- Depende demasiado de los usuarios, es fácil perderse
- Dependencia excesiva de los factores desencadenantes de la conciencia, fácil de intercambiar ideas
- Frente a una gran cantidad de funciones, la interacción humano-computadora de la interfaz WIMP es limitada
Medidas:
Estrictamente correcto: aumentar la interacción activa, dejar que la función encuentre al usuario
ejemplo:
- Alipay recibe el código de dinero, el teléfono móvil se gira en cierto ángulo y la página se muestra al revés, lo que favorece la visualización de la otra parte.
- Método de entrada optimizado, las palabras calientes
permiten que la función encuentre al usuario y ahorre la energía física y mental del usuario
activos
- Activos de UI
- Activos visuales
Generación de gráficos
Herramientas inteligentes: 1. Generación de gráficos de cocina (herramienta de diseño inteligente Sketch) 2. ChartCube (herramienta en línea AntV, arrastre y suelte para crear gráficos rápidamente) - Activos gráficos
HiTu
4. Los organismos de adopción de decisiones experimentan la cabina digital de la tecnología
Cabina digital: un sistema de interacción persona-computadora inmersiva en una escena simulada.
Transformación digital industrial de Internet-social (necesidad, inevitabilidad)
La base en la que se basa la transformación digital: La transformación digital debe basarse en una construcción de información sólida. Las
empresas / agencias gubernamentales pueden promover:
- El flujo de trabajo está más simplificado y estandarizado (mayor estandarización, aumento de la transparencia del proceso)
- Aplanamiento de la transferencia de información (el aplanamiento maneja la transferencia de información lineal / unidireccional original)
- Cree escenarios que sean más convenientes para la colaboración (rompa las barreras de datos entre departamentos y mejore la colaboración en equipo)
Cabina digital COCKA
- Centro de datos para información empresarial
- El portador visual del pensamiento de toma de decisiones
- Una ventana para la visualización externa de resultados.
Artístico: los
diseñadores deben hacer todo lo posible para crear la forma más poderosa, pura y precisa para transmitir significado e imágenes.
Ilustración:
la sabiduría del diseñador no solo se manifiesta en el diseño y la estructura de las formas estéticas, sino también en la profundidad del significado que transmiten estas formas.
Solución Trinity:
- Mercado (agencias gubernamentales, empresas)
- Oficina intermedia (acumulación de activos de componentes ricos, cobertura completa del proceso de producción del trabajo, operación de implementación del trabajo y monitoreo de mantenimiento)
- Ecológico (un gran número de pequeñas y medianas empresas ecológicas con una rica experiencia en desarrollo)
Cocka Studio 1.0 (no de código abierto, solo abierto a empresas ecológicas)
- Biblioteca de activos de componentes
- Capacidades centrales
Canalización de generación automatizada de escenas a
gran escala Marco de representación distribuida en tiempo real a gran escala
Desarrollo empresarial basado en JavaScript
Configuración visual de arrastrar y soltar
Acceso a datos en tiempo real de Studio y capacidades de inserción - Instalaciones de apoyo
Plataforma de acceso a datos Plataforma de
configuración de
operaciones Sistema de control de transmisión de operación y mantenimiento
Terminal de control
5. Sistema de visualización inteligente AVA
https://github.com/antvis/AVA
ChartCube
https://chartcube.alipay.com/
Herramienta de creación de gráficos en línea AntV para obtener rápidamente la creación de gráficos entre arrastrar y soltar
Principio de recomendación de gráficos:
- Knowledge Base de conocimientos
Tipo de gráfico: nombre, definición, propósito del análisis, datos requeridos y canales relacionados. . . - regla recomendada
DIFÍCIL regla dura:- Verificación de atributos de campo
- Verificación del propósito del análisis
- Verificación de campo redundante
- . . .
Reglas blandas SUAVES: - Evaluación del número de categorías
- Evaluación de diferencias numéricas
- Evaluación de relevancia
- 。。。
- Asesor de recomendación
El futuro de la visualización inteligente - Estado de investigación y desarrollo: recomendación completa de gráficos inteligentes, código mínimo
- Modo de lectura: mejora inteligente de los componentes de análisis interactivos
- Modo analítico: asistencia inteligente de análisis visual durante el tiempo de ejecución
6. Utilice React para desarrollar pequeños programas-Remax
7. Evolución: sin servidor para frontend: explore el modelo de I + D de nodo de próxima generación
¿Node.js es competente para BFF?
- A nivel de lenguaje, Node.js es lo suficientemente completo y competente para los principales escenarios de BFF.
- BFF requiere autonomía de servicio, pero no restringe la selección de tecnología.
- Falta de
construcción y mejora de infraestructura de “precipitación”
, precipitación y acumulación de mejores prácticas,
mejora del nivel promedio de capacidades del personal
Precipitación realizada:
- Marco: Ecología Egg && plug-in
Unificar las limitaciones de desarrollo, reducir los costos de comunicación del equipo - Los servicios de middleware están
integrados en el ecosistema de back-end. Configuración distribuida, caché, límite de corriente, fusión. . . - Capacidad de la plataforma
Posicionamiento de problemas de AliNode, gestión de paquetes TNPM, plataforma de control de I + D, gobernanza de aplicaciones. . . - Servicios de BaaS
Las capacidades comunes se hunden, como los servicios de prestación, los servicios de mensajes, los servicios de archivos y los servicios de construcción.
Problemas encontrados:
- Costo de aprendizaje
Servidor adicional, el costo de aprendizaje de la operación y conocimientos relacionados con el mantenimiento - Costo de gobernanza
Depende del costo de mantenimiento de la actualización, la versión de bloqueo, el SDK en varios idiomas del servicio de middleware - Es difícil reclutar personas en la
era del Big Bang, hay demasiados campos de diseño de front-end, reservas de personal insuficientes y altos costos de capacitación. - Utilización de recursos
BFF generalmente tiene un nivel de agua bajo (<30%). La demanda de alta disponibilidad de microservicios conduce al desperdicio de recursos
Serverless For Frontend
proporciona una estandarización del modelo de interfaz de capacidad de servicio sin sentido para el desarrollo eficiente de interfaces de interacción persona-computadora
- Metadatos -> El SDK de
front-end genera automáticamente el SDK de cliente de front-end para
proteger la compatibilidad del terminal y
proteger los detalles del protocolo - Metadatos -> El SDK de
back-end genera automáticamente los
detalles del protocolo de protección del SDK de back-end : ya sea un servicio TR de back-end o un servicio de base de datos, todo está estandarizado como un método de llamada BaaS - Capacidades de orquestación de servicios
- Prueba de esfuerzo + evaluación de capacidad Genere
automáticamente scripts de prueba de esfuerzo y
amplíe y reduzca automáticamente la capacidad con Serverless,
puede estimar la capacidad máxima - Y más…
Genere automáticamente documentación de interfaz Interfaz
simulada Interfaz de
depuración en línea Genere
automáticamente datos de prueba de regresión
Operación y mantenimiento gratuitos sin servidor
- Admite k8s, FC y otros motores sin servidor
- Expansión y contracción automática según el tráfico, implementación refinada, implementación de alta densidad
- Servicemesh reduce el costo de mantenimiento del SDK de lenguaje heterogéneo para servicios de middleware
- YML estandarizado sin servidor
8. La derivación y realización de la visualización de Yunfengdie
Documento: https://www.yuque.com/seeconf/2020/yunfengdie#7Ipxc
云 凤蝶: Una plataforma de desarrollo rápido para productos intermedios y back-end
Realización de la tecnología Yunfengdie:
- Identificación e importación de componentes
1. Función de importación de componentes:
- Por un lado, Yunfengdie utilizará TypeScript como analizador para analizar la información de tipo del paquete npm para obtener la metainformación del componente.
- Por otro lado, Yunfengdie usará Webpack para reconstruir su paquete npm para obtener un archivo de entrada de componente ejecutable. En la ejecución final, usará SystemJS para cargar estos componentes y completar los datos de configuración del usuario para completar la representación.
2. Arrastre y combinación de componentes
El primer género: género DSL
Como el siguiente SwiftUI, la mitad de la pantalla es para escribir código, la mitad de la pantalla es para arrastrar la vista, la conversión equivalente bidireccional entre los dos, los usuarios pueden elegir según su propio gusto.
Desventajas:
Altos requisitos para las habilidades profesionales de los usuarios y costos de aprendizaje relativamente altos
Ventajas:
Una vez que se domina, es realmente eficiente, porque básicamente se trata de escribir código.
El segundo género: género semi-libre (flujo flexible o formato de cuadrícula)
Ventajas:
Muy eficiente en escenas verticales específicas, tales como: Forma con diseño línea por línea
Desventajas: Las
escenas aplicables son relativamente limitadas
. Tres escuelas: lienzo libre ( similar al diseñador con Sketch, PD con Keynote como modo de edición
libre ) nube de lienzo libre de mariposas y dijo: modelo jerárquico: https://zhuanlan.zhihu.com/p/97768853
nube ¿Cómo crea Papilio un lienzo libre comparable a boceto:
https://zhuanlan.zhihu.com/p/92469406
-
Yunfengdie se basará en un algoritmo de "la ubicación está contenida directamente" para identificar el árbol de componentes.
-
El principio central de este algoritmo se basa en un juicio muy simple: cada componente es una caja rectangular. Si el área de la caja rectangular de un componente está contenida directamente en la caja rectangular de otro componente, entonces los consideramos como una caja rectangular. Relación padre-hijo.
-
El segundo problema es que la función de arrastrar y soltar libremente se posiciona absolutamente a partir de los sentimientos del usuario.
-
Entonces, ¿cómo se traduce en un posicionamiento relativo de CSS en tiempo de ejecución? Después de todo, todavía tenemos que restaurar a una página web adaptable normal en tiempo de ejecución.
-
El principio en el que se basa aquí es otro algoritmo de "formato de fila-columna", que se refiere a dividir todos los elementos colocados en una página en filas y columnas de forma recursiva de arriba a abajo, como cortar tofu, dividir una página enorme en pequeños rangos uno por uno. , un posicionamiento absoluto tan grande se resuelve en un posicionamiento relativo local pequeño.
3. Configuración y expansión de componentes
El primer tipo de expansión denominada "horizontal"
- Significa que Yunfengdie utilizará el principio del componente de gama alta de HOC para envolver el componente original y agregará muchas capacidades generales de gama alta que no posee.
- Como salto de enlace, aviso flotante, carga, renderizado condicional, repetición, etc.
La segunda expansión denominada "vertical"
- Significa que Yunfengdie usa un conjunto de mecanismo de cargador de entidad para extender los tipos de valor de atributo, es decir, en el panel de propiedades de Yunfengdie, puede configurar tipos básicos de JavaScript, como cadenas, números, etc., así como muchos especiales. El tipo de "entidad"
- Tal como:
- Enlace de datos: el valor de la propiedad puede ser un dato estático, puede ser dinámico desde una variable o desde el servidor
- Biblioteca de material de imagen: la dirección de la imagen puede ser estática o seleccionarse de una biblioteca de material de terceros
- Redacción publicitaria internacional
- icono de fuente
- ...
El tiempo de ejecución de Yunfengdie es cuando se está ejecutando, escaneará de forma recursiva los datos de configuración de atributos del componente y llamará a la entidad correspondiente Loader para su traducción.
4. Diseño de componentes adaptable
Después de investigar, Yunfengdie diseñó un sistema de reglas similar al AutoLayout de ios
¿Por qué Yunfengdie no adopta directamente el sistema de diseño CSS?
Nuestra principal consideración se debe a dos puntos:
- CSS es todavía demasiado complicado debido a su naturaleza no contractual y multi-paradigma (el llamado multi-paradigma significa que tiene múltiples versiones y siempre es compatible con versiones anteriores, y la coexistencia de sistemas nuevos y antiguos conduce a múltiples soluciones para lograr Una función).
- En la demanda real, el modo de diseño de las escenas intermedias y de fondo es relativamente convergente, y es posible que no se utilicen las potentes capacidades de todo el conjunto de CSS.
5. Estado y vinculación de los componentes
9. El lado "nube" del lenguaje JavaScript full-stack para crear aplicaciones de nivel comercial
Documento: https://zhuanlan.zhihu.com/p/101917567
10. Explorando el camino de la tecnología Web 3D de Ant Financial
Gamificación de productos de Internet Conocimiento
empresarial:
- Perspectiva empresarial: mejorar el interés empresarial y los datos de conversión empresarial
- Perspectiva técnica: reserve las capacidades de desarrollo de la tecnología de gráficos 3D
Investigación técnica:
- El flujo de trabajo basado en la web (three.js, babylon.js) que
no es móvil primero
es demasiado débil
Prioridad no web basada en nativos (unidad, Unreal Engine) ,
demasiado caro para comenzar
Motor 3D de desarrollo propio: Oasis 3D
- Basado en la web, para ingenieros de front-end
- Móvil primero, rendimiento extremo
- Desarrollo empresarial y tecnológico adecuado para Ant Financial
Motor Oasis 3D
Documento del sitio web oficial: https://oasis-engine.github.io/#/
- Arquitectura
- Representación
- Animación
Animación de
renderizado de arquitectura resumen del motor Oasis 3D:
- Arquitectura de microkernel, expansión de componentes
- glTF2.0 y soporte de material PBR de apoyo
- Sistema de animación rico y diverso
Flujo de trabajo de Oasis 3D
- Activos: estandarización de la nube de activos, apertura del mercado de activos
- Orquestación: visualización de orquestación de animación y orquestación de habilidades
- Colaboración: colaboración fluida con el diseño y el desarrollo front-end
11. Diseñado cuidadosamente para crear la mejor experiencia visual.
AntV
- Actualización de arquitectura-G2 4.0
- Detalles de la tabla de pulido experience-G2Plot
Actualización de arquitectura G2 4.0
https://github.com/antvis/G2Plot
G2 4.0
Diseño de restricción
Relleno automático vs Diseño de
restricción Diseño de
restricción Diseño de restricción:
- Convierta el problema de diseño del lienzo en un problema matemático
- Se eliminó el acoplamiento de código causado por las dependencias de los componentes.
- La poderosa capacidad de diseño es la base de los gráficos receptivos
El diseño restringido puede resolver los problemas de experiencia de oclusión y recorte causados por el dibujo estático del gráfico.
Gramática interactiva
