¿Qué es un terminal cruzado?
Link:/post/6944289729990885389
Dado que muchas personas se sienten misteriosas acerca de la tecnología entre terminales, aunque en realidad no he escrito un marco entre terminales de 0 a 1, sí Hice un trabajo simple entre terminales usando Yoga (motor de diseño Yoga (React-Native)) y luego usé Weex.
Antes de esto, primero debe saber por qué necesita tecnología entre terminales. Generalmente nos referimos a Weex y React-Native (denominados colectivamente RN en este artículo) como tecnologías cross-end (Flutter no se menciona por separado).
No, esto es como si Android/iOS debería ser trabajo de dos personas, pero terminó siendo trabajo de una sola. ¡Mi mano de obra se ha reducido a la mitad!
Pero la premisa es que estas personas deben conocer Android, iOS, JavaScript y más. De lo contrario, ¿cómo solucionar el problema?
Por lo tanto, en el entorno de Internet de China, es difícil reclutar tales talentos. Todo el mundo está estudiando la tecnología de la estructura PPT, la teoría de la supervivencia en el lugar de trabajo y cómo abrir la puerta a la riqueza a la edad de 30 años. ¿Dónde tenemos tiempo para ampliar la pila de tecnología?
El desarrollo de un extremo a otro es muy doloroso, siempre hay fallas (use fallas, fallas) y no hay forma de solucionarlos de forma remota. Tener que esperar hasta el próximo lanzamiento para lanzar una nueva versión que contenga correcciones de errores al mercado de consumo.
Sin embargo, si se publica una nueva versión, es posible que los usuarios no actualicen. Por lo tanto, muchas empresas han estudiado varios marcos de revisión, especialmente en la plataforma Android. Existen muchos marcos de reparación urgente, principalmente realizados por DexClassLoader.
Pero en sus inicios, WebView tuvo un gran problema, especialmente en la plataforma Android. Cargar páginas web definitivamente llevará tiempo y la pantalla se quedará en blanco durante el proceso de carga, etc. Por lo tanto, muchas personas han optimizado mucho estos problemas. Lo que personalmente encuentro más útil es el paquete sin conexión. Al mismo tiempo, cada generación de WebView se actualiza y actualiza. Luego, algunas empresas poderosas desarrollaron su propio núcleo de navegador, que incluye varias tecnologías negras, como cómo acelerar y admitir varias funciones. Pero no parece ser de código abierto:
No lo es. ¿Se aplica solo a Android e iOS y no está dirigido a mi PC como un fin en sí mismo?
En realidad, los navegadores son multiplataforma y Chrome funciona en todas las plataformas (¡otros navegadores principalmente quieren hacerlo pero no lo hacen!).
De hecho, el navegador es multiplataforma y el navegador Chrome funciona en todas las plataformas (¡otros navegadores principalmente no quieren funcionar!). Pero también tiene sus propios problemas, porque cada plataforma tiene su propio navegador con diferentes núcleos, y la diferenciación es cada vez mayor. Chrome (Blink)/Safari (WebKit)/Firefox (Gecko?
Developer.mozilla.org/zh-CN/docs/. El sitio web comprueba cierta compatibilidad del navegador. Por ejemplo, el ancho del borde es compatible Las propiedades son los siguientes:
Esto no es imposible, pero es equivalente a programar directamente para OpenGL u otros motores gráficos, y crear un mecanismo de renderizado ascendente y empaquetar varios componentes básicos de la interfaz de usuario para que los utilicen los desarrolladores, o Deja muchas lagunas para que los desarrolladores personalicen su propia interfaz de usuario, lo cual es muy complicado. Pero, de hecho, esto es lo que hace Flutter, por lo que Flutter 2.0 comenzó a desarrollar la versión de escritorio nuevamente, y no se limita a Android / iOS, sino que también se puede usar. No sé hasta dónde puedo llegar.
También hay personas trabajando en React-Native-Skia, entonces, ¿usa el código js para ajustar directamente Skia (motor de renderizado de gráficos 2D)? (Aún no he investigado esto específicamente)
¿Por qué funciona el código JavaScript que escribes? Esto depende del motor JavaScript.
Lanza un fragmento de código JavaScript (en realidad, una cadena de texto) y calculará los resultados y manejará la lógica por ti.
Generalmente, Weex, RN y Hippy también dependen de esto (MLN usa Lua) para el procesamiento lógico.
En este punto entran en juego muchos conceptos.
A algunas personas les gusta llamar al motor JavaScript JavaScriptCore (no sé por qué, tal vez porque los desarrolladores de iOS están más involucrados en esto, porque el motor JavaScript de Apple se llama JavaScriptCore). A mucha gente le gusta llamarlo JSCore o JSC). Entonces, cuando veo estos términos, siempre los pongo en contexto para entender si se refiere al motor JavaScript o al motor JavaScript 3354 JavaScript Core (JSCore/JSC) de Apple.
El primero es el motor JavaScript.
¡Sí, hay muchos! Y, por supuesto, JavaScriptCore (no aparece en la foto).
La última línea es la puntuación del tiempo de ejecución. Cuanto mayor sea la puntuación, mejor. Hay algunos V8 de JIT que cuelgan todo a 3w. QuikJS es muy pequeño y obtiene una puntuación muy alta. Supongo que mucha gente usará QuikJS como motor JavaScript cruzado, ¿verdad? Hermes fue creado por Facebook. Parece que Android ahora está usando el motor JavaScript en RN, que reemplaza el JavaScriptCore que usaba anteriormente. ¿Por qué RN nunca ha usado un V8?
Pero hay muchas personas que desarrollan proyectos V8 para Android, y también hay algunos proyectos de código abierto en Github. En segundo lugar, iOS no soporta JIT y tiene su propio JavaScriptCore, por lo que cambiar a V8 sin soporte JIT no parece tener mucho sentido.
El marco cruzado normal en el caso más simple es el siguiente (este tema se discutirá más adelante y el contenido se enriquecerá gradualmente):
A través de
ejemplo simple Comprender
Supongamos que mi archivo js quiere mostrar un cuadro div rojo. Entonces, primero, el final pasa este texto al tiempo de ejecución de JavaScript, que lo analizará para formar un formato acordado, como el siguiente formato JSON (donde el valor se usa para describir un cuadrado rojo de 100*100, que definí arbitrariamente )
{ "name": "div", "width": "100", "height": "100", "background": "red"}
Pasa esto mensaje de vuelta al terminal (Android/iOS) a través del tiempo de ejecución de JavaScript.
Después de recibir el mensaje, el final se dará cuenta de que quiere crear un div de 100*100, ¡pero no hay ningún div! No hay divs, por lo que debes enterrar el código al final.
Por ejemplo, si usa FrameLayout en Android, aparecerá un código de registro similar
//Pseudocódigo de registro("div", FrameLayout.class);
Entonces el terminal sabrá: "¡Oh! ¡Necesito crear un cuadrado de 100*100!".
En primer lugar, este es un tema que debe considerarse de antemano al diseñar el marco, es decir, qué componentes básicos deben ser compatibles, como imágenes, texto, etc. Generalmente, habrá una vacante aquí. Y normalmente habrá una apertura aquí para que los desarrolladores puedan ampliar sus propios componentes. Por ejemplo, si necesita una lista deslizante horizontal, ¿qué debe hacer si no se proporciona? Observe cómo se registra este div y simplemente siga su proceso para registrar una lista. Esto también se puede usar para describir PPT como: extender el marco cruzado. De hecho, el umbral es más bajo que personalizar la Vista.
Hablamos de motores JavaScript, pero ¿ahora un tiempo de ejecución?
¿Qué hace el motor JavaScript?
Nada, solo analiza y ejecuta código js
Entonces la pregunta es, ¿cómo debo describir la vista representada por mi código js? No tienes que describirlo, el código js simplemente mantiene una estructura de árbol en la memoria, es un objeto porque la entidad está en el extremo concreto, ¿cómo lo entiendes?
El lado izquierdo simplemente mantiene dicha estructura de árbol en la memoria. Cuando se pasa al cliente, se convertirá en
{ "name": "div", "children ": [ { "nombre": "imagen" }, { "nombre": "div", "niños": [] } // etc.// etc. ]}
Simplemente obtenga la información del final y cree la vista de acuerdo con la estructura en la imagen de la derecha.
¿Cómo mantenéis vuestro modelo? ¿Qué método js se llama para enviar el mensaje? ¿Cómo puedo agregar CSS a estos divs para describir su tamaño y forma?
Por lo general, hay un core.js o framework.js o algo así, que es un montón de código js que maneja todas estas cosas, pero que también depende del motor JavaScript para su ejecución.
El tiempo de ejecución de JavaScript puede verse como un entorno de ejecución simple para el propio código del motor JavaScript, o puede verse como una carga y ejecución de código front-end (como core.js), que es requerido por marcos cruzados y contiene varios entornos lógicos.
Cuando utilice estos marcos cross-end, encontrará que solo admiten un subconjunto de CSS y el diseño es básicamente flexbox (un modelo de diseño).
Entonces, suponiendo que escriba un cuadro grande que acomode tres cuadros pequeños horizontalmente, y su código CSS de front-end definitivamente será: dirección flexible: fila, entonces la información final arrojada puede ser así:
{ "name": "div", "attribute": { // Usar diseño "flex-diretion": "row" }, "children": [ { "name": "div" }, { "name": "div" }, { "name": "div" } ]}
Cuando el final recibe este mensaje, ni siquiera sabe qué es flex-direction. Por supuesto, podrías escribir tu propia biblioteca de análisis para resolver este problema, ¡pero Yoga lo hará por ti!
Por lo tanto, RN utiliza el motor de diseño Yoga (con soporte flexbox, también de Facebook).
¿Weex parece haber comenzado con Yoga y luego haber escrito su propio motor?
Esta es la función del término motor de diseño. Puede ayudarnos a procesar varios parámetros de diseño, luego ayudarnos a calcular las coordenadas de cada vista y, finalmente, establecer las coordenadas de la vista correspondiente después de obtener las coordenadas. Aparecerá una vista tan bien organizada. Si cree que el algoritmo de análisis de diseño que escribió ha superado algoritmos como Yoga, entonces puede escribir su propio algoritmo.
Por ejemplo, el tiempo de ejecución de JavaScript ha procesado varias propiedades y está a punto de representar la vista. Pasarás un fragmento de JSON a la terminal.
Haga clic en la vista al final, que también se encapsula como un mensaje y se envía al tiempo de ejecución de JavaScript, y luego activa el código de escucha de js que escribió antes, como hacer clic en la ventana emergente, que se encapsula como un mensaje y se envía al final. Llame al método de la ventana emergente.
Va y viene así.
Así que ambas partes tienen sus propias colas de mensajes.
Cuando estás animando y al mismo tiempo intentas escuchar el proceso de animación, definitivamente enviarás muchos mensajes en un corto período de tiempo, y estos procesos definitivamente necesitarán ser optimizados.
¡Además! Desde mi experiencia personal con Weex, algunas propiedades de Flexbox son inconsistentes en ambos extremos (esto podría ser un error por parte de Weex, después de todo es un proyecto de KPI y ni siquiera se mantiene)
Recuerdo haber bromeado. Diga, después de usar Weex, finalmente me di cuenta del verdadero significado de cross-end:
if(platform === 'Andoird') { // Lógica de diferenciación} else if(platform === 'iOS' ) { // Lógica de diferenciación }
El costo del cross-end es que crees que realmente puedes ejecutar un conjunto de código en ambos extremos, pero luego descubrirás que esto es en realidad una fantasía (incluso para H5 , a veces también hay inconsistencias entre Andoird y iOS, ya que ni siquiera usan el mismo kernel), y hay muchas cosas if-else en el código.
Por lo tanto, después de la serie de popularización anterior, el marco cross-end se ha vuelto así:
En este momento, generalmente se necesita un cliente, un front-end y un C Los motores JavaScript /C se desarrollan por separado.
Nunca he desarrollado este tipo de marco, pero siento que habrá muchos problemas.
Por ejemplo, si el tiempo de ejecución de JavaScript está en otro proceso, ¿cómo se manejará la comunicación entre procesos?
Por ejemplo, si la comunicación de mensajes es demasiado frecuente, ¿habrá varias reacciones en cadena, como pérdida de fotogramas, respuesta retrasada a eventos y animación poco fluida?
De hecho, siempre me he jactado de que me gusta estudiar principios, pero hasta ahora nunca he visto una línea de código fuente de un framework cross-end. Sé que estos pueden no ser correctos. pero son solo algunos trabajos realizados antes en Weex. Después de investigar un poco, me siento bastante avergonzado.
Ya que dices que te gusta estudiar principios, ¿por qué no echas un vistazo?
Enlaces:/post/6944289729990885389Preguntas y respuestas relacionadas: ¿Qué son los teléfonos móviles y las computadoras?
Los ordenadores y los teléfonos móviles en realidad se refieren a plataformas.
Cuando utilizamos ordenadores, las plataformas operativas que utilizan básicamente son sistemas operativos comunes como windows o Apple.
Las plataformas utilizadas en los teléfonos móviles, como Android, IOS de Apple, Symbian de Nokia y los sistemas BlackBerry, se denominan terminales móviles.
Entonces, ¿cómo definir el terminal móvil y el terminal de ordenador? Podemos entenderlo de esta manera, si el dispositivo utiliza un sistema operativo de ordenador, incluso una tableta puede entenderse como un terminal de ordenador.
Por ejemplo, la tableta de Microsoft se posiciona tanto como una tableta como como una computadora.
Tenemos muchas tabletas, la mayoría de las cuales usan Android, por supuesto, pero son tabletas. uso Es básicamente una plataforma móvil, que puede considerarse como un terminal de telefonía móvil.
Pero si se utiliza esta plataforma de dispositivo móvil, utiliza el sistema operativo de la computadora y se convierte en el lado de la computadora.