homefinance blog
¿Tiene una base de código JavaScript hereditaria en la que evita reenfocarse? También WordPress. Si ha estado atento al núcleo de WordPress últimamente, es posible que haya notado que ha habido un aumento en las discusiones de JavaScript y cómo restaurar la herencia de JavaScript al tiempo que agrega nuevas características. Ya ha habido algunas reuniones de JavaScript en el canal #core slack. Son los primeros días, pero WordPress está listo para recibir una revisión importante en el departamento de JavaScript. El nuevo proyecto editor, titulado Gutenberg, actualizaciones de personalización y un WP-Admin alimentado por el resto son tres áreas principales de interés para futuros lanzamientos.
Las discusiones sobre estos campos de interés, especialmente el proyecto Gutenberg y la implementación de la API REST han recordado el mayor problema de restaurar una gran base de código JavaScript. ¿Dónde comienza a agregar nuevas funciones y marcos a una base de código JavaScript masiva como WordPress? En este artículo, hablaremos sobre algunos enfoques para administrar este tipo de rebelión, superaremos algunas de las opciones específicas al reconstruir JavaScript, así como analizar algunas actualizaciones que se pueden hacer en la base de código en este momento. ¿Estás listo para modernizar ese archivo masivo Main.js? ¡Vamos a eso!
Deuda técnica (o por qué parte de su código parece ser de 1997) si usted es como la mayoría de los desarrolladores, probablemente tuvo que trabajar con una base de código hereditaria que se ha escrito hace unos años (!). Algunos años son como unos pocos siglos en el mundo de JavaScript, por lo que la mayoría de las veces trataría de evitar tocar este código antiguo y agregar cuidadosamente a nuevas funciones, sin alterar el desastre. Comprender los problemas que pueden surgir de este enfoque, imaginar lo siguiente. Su jefe viene a usted y le dice “¡Tenemos que agregar Funcion-X lo antes posible!” Así que comience esta nueva característica y piense en usted mismo “Realmente me gustaría probar Angular 4 y TypeScript, tal vez los use para esta nueva función”. Así que deje la sopa jQuery de 100 años como es (junto con cualquier error antiguo) y comience a construir nuevos módulos Angular 4 y Webpack. ¡La ola del futuro! No tan rápido. Ahora ha crecido algo llamado deuda técnica. Esto es bastante común en el desarrollo de software: esencialmente comprende que cada línea de código debe mantenerse y revisarse en el futuro y que dejar problemas o errores para más adelante, mientras avanzamos con nuevas funciones o funcionalidad, aumenta esta deuda técnica es mucho es mucho. . El código anterior y los errores se convierten en deudas que deberán pagarse en el futuro cuando se requieran cambios posteriores en la base del código. Entonces, cuando su jefe regresa más de un mes y le dice que quiere actualizar un componente antiguo, ¿qué está haciendo? ¿Restaura y migra el componente antiguo a Angular 4, o el mono lo corrige?
Por supuesto, puede crear deudas técnicas incluso si permanece en los marcos o procesos originales, pero puede crecer exponencialmente cuando pasa a un nuevo cuadro o proceso. Está estrechamente vinculado a la restauración y la calidad general de la calidad del código. ¡La única forma de evitar la deuda técnica es no escribir ningún código! El desarrollo básico para WordPress está experimentando muchos de estos desafíos. Se toman decisiones sobre qué marco elegir para interacciones con la interfaz de usuario en el futuro, así como cuál debería ser el enfoque del código heredado y lo nuevo. El caso de WordPress tiene probablemente uno de los códigos JavaScript más grandes utilizados en Internet, WordPress está experimentando un desafío en futuras funciones y lanzamientos. Con el nuevo programa de lanzamiento, las funciones están en el centro de cada lanzamiento importante y hay presión para lanzarse rápidamente, al tiempo que agrega nuevas funciones importantes. Si se atreve a hacer un equilibrio del JavaScript actual utilizado por el núcleo de WordPress, lo haría. Podría ser un poco abrumado. Una encuesta reciente realizada por Adam Silverstein enumera 38,191 líneas, 95 archivos JS en total, de los cuales 16 usan la biblioteca Backbone.js. WordPress no es inmune a equilibrar la deuda técnica y la restauración con la implementación de nuevas funciones. Debido a que no hay tantos errores de JavaScript registrados, se podría argumentar que la deuda técnica es menos un problema para WordPress o, al menos, se ha manejado bien. Sin embargo, la deuda aparece a partir de la adición de nuevos marcos y bibliotecas, sin restaurar la lógica anterior para que se ajuste al nuevo modelo.
Un ejemplo reciente de fragmentación del marco es el proyecto Gutenberg. Este es el proyecto para actualizar el editor de WordPress para “crear una nueva página y una experiencia posterior a la construcción”. El propósito es reemplazar los códigos HTML cortos y personalizados con “bloques” y una interfaz editor más flexible. El equipo de Gutenberg ha creado un prototipo basado en el marco React. React no se usa actualmente en el núcleo, por lo que significaría agregar un marco adicional. Además, React es un marco fundamental diferente de Backbone o JQuey: los dos cuadros utilizados actualmente en WordPress.super Core encantado por este nuevo libro O’Reilly pic.twitter.com/pnhqug3257 – Wes Bos (@wesbos) 12 de mayo, el 12 de mayo, 2015 La decisión de usar React destaca el problema real de priorizar las características hacia la consistencia y el peso adicional de un marco adicional. Una publicación interesante sobre Hacker Noon destaca la minimización de las adicciones como un componente clave para permanecer “delgado” y mantener la capacidad de moverse rápidamente. Cuando agrega una biblioteca a su proyecto, paga el alquiler de toda la biblioteca y su uso. Por lo tanto, debe presentar un buen caso para cada biblioteca, cada complemento. Incluso los pequeños. Se reúne rápidamente. Y si adopta el enfoque ultra disciplinado, se sorprenderá de lo rápido que puede moverse.
Al agregar otro marco al núcleo de WordPress, sin un refector significativo, diría que la complejidad y la deuda adicionales son mayores que el valor de las nuevas funciones. En lugar de un referencia importante, sería lógico definir al menos una API estándar para vincular los componentes de JavaScript. También debo notar que todavía está discutiendo el futuro JavaScript en el núcleo de WordPress, pero parece que algunas opiniones y direcciones están comenzando a formarse. El tiempo dirá si Gutenberg se queda con React y se une en el núcleo, pero hay algunos métodos probados y verdaderos para la reconstrucción de los antiguos proyectos de JavaScript. Veamos qué se puede hacer con nuestro propio JavaScript heredado. Reflectorización de JavaScript, por lo que hemos visto que incluso el núcleo de WordPress sufre de deudas técnicas y la contabilidad de partes significativas de su código JavaScript. Pero, ¿qué se puede hacer para usar bibliotecas y marcos de JavaScript modernos? Comienza con un conjunto sólido de estándares y pruebas de codificación. Veamos algunas opciones. Estándares de codificación de JavaScript El primer paso para minimizar la deuda técnica y comenzar a reducir el resto de la rebelión es tener un estándar de codificación. Para JavaScript hay muchos proyectos con valores implícitos, pero realmente se limita a lo que funciona para su equipo y proyecto. Herramientas como ESLTT pueden ayudar a aplicar estos estándares y se pueden configurar en un gancho previo al comercio para garantizar que el código mantenga un nivel de formato consistente. El formato y la coherencia del código ayudan a la velocidad del desarrollo, porque todo el código se adhiere al mismo estilo, lo que hace que sea más fácil leer y revisar.
Realizar revisiones de código, ¿verdad? La otra ventaja de la existencia de un conjunto sólido de estándares de codificación es que cualquier actualización del código, incluida la restauración del código heredado, debe cumplir con los estándares de codificación. Esto ayuda a modernizar lentamente el código anterior y llevarlo a la calidad y coherencia del nuevo código. Pruebas unitarias con React porque hablamos sobre React en este artículo, pasaremos por la configuración de pruebas unitarias con la biblioteca de prueba de Jest React React. Jest es una herramienta bastante simple para configurar y viene con la aplicación Crear React, si desea comenzar rápidamente. Esta es la prueba simple que viene preconfigurada con la aplicación Crear React. importar reaccionar de ‘reaccionar’; importar reactdom de ‘react-dom’; Importar aplicación de ‘./App’; Import {shhoow} de ‘enzima’; Importar encabezado de ‘./Header’; it (‘Renders sin bloquear’, () => {const = documento. It (‘Renders Header con props’, () => {const Header = showow (
Obviamente, hay pruebas más complejas que se pueden realizar, pero muestra cuánto esfuerzo adicional se necesita para configurar con pruebas unitarias. ¡No muchos! La ventaja de usar la biblioteca Jest es que le permite escribir pruebas para JavaScript Vanilla. Al escribir pruebas para el código nuevo y antiguo, se reduce el riesgo de restaurar. El propósito de cubrir la prueba es administrar cualquier regresión o se rompe en el camino. La restauración parcial de restauración parcial o “limpieza a medida que avanza” es una opción que muchos proyectos parecen elegir para restaurar (¡incluido Delicious Brains Inc.!). Esto implica actualizar el código anterior a medida que agrega nuevas funciones y códigos. Por ejemplo, al igual que WordPress, suponga que desea cambiar la capa de visualización para reaccionar. Supongamos que también tiene muchas llamadas de jQuey y Ajax de este tipo: $ (function () {$ (“.my-form”) .on (‘enviar’, function (s) {var repo = $ (‘.repo ‘) .Val (); lima endpoint =’ https://pi.github.com/repos/ ‘ + repo +’/problemas ‘; $ .get (endpoint, function (date) {if (! Data.length) {$ (‘.Mesage’) .html (‘no testues para:’ + repo); return;} $ (‘.EssiseS-Wrap’) .Empty (); $ (‘.Message) .Empty (); $ (‘.Repo-name’) .html (repo); lima detils = date; para (lima i = 0; i <retils.length; i ++) {varnormated_body = detils [i] .body .split ('
') .Join ('
'); console.log (formsed_body); $ ('.Essiss-Wrap') .Append ('
' + '
‘ + Detalles [i] .title +’
‘ +’
reportado por – ‘ + detalles [i] .ser.login + ‘
‘ + formited_body + ‘
‘)} } .Fail (function (jqxhr, textstatus, errothrown) {console.log (errorthrow, jqxhr.status, $ (‘.mesage’) .html (errorthrown + “” + jqxhr.status + “” + textstatus)}) e . PreventDefault (); }); }); Consulte la lista de problemas de Github de Ped JQuery de Peter (@Tasker82). ¿Parece conocido? Tampoco estoy interesado. Si queremos adoptar un enfoque incremental al convertir nuestra capa de visualización en React, podríamos comenzar a mover algunas de las partes de la fila en componentes React. La clase IssumInfo extiende React.Component {render () {const Details = this.props.details; Return (
{detalles.title}
reportado por – {detalls.user.login}
{detalls.body.split (‘
‘) .map ((item, key) => {return {item}
;})}
); }} Y configure nuestros datos como accesorios y datos de estado. !} />)}
Y si realmente queremos comenzar a alejarse de JQuey, podríamos cambiar nuestras llamadas AJAX para usar el método nativo de Fetch (). A continuación se muestra una versión completamente restaurada en React. Vea el Github React de Peter (@Tasker82) Como puede ver en este simple ejemplo, no es muy difícil cambiar partes del código JavaScript en un nuevo proceso o marco. La desventaja de este enfoque es que, durante un período, tendrá dos o más marcos de JavaScript para mantenerse al día. Para algunos proyectos, este es un camino medio aceptable y tengo la sensación de que es el enfoque que adoptará Core WordPress. Esto es para lanzar otro método que pueda ser útil en las bases de código más grandes que de otro modo requerirían un repacto es el concepto de “lanzamiento”. Estos son proyectos que actúan prácticamente como prototipos para posibles funciones futuras. Esencialmente, toma la decisión de moverse rápidamente, omita cosas como la revisión de bacalao y la consistencia y revise, completando el prototipo por cualquier medio necesario. Permite a los desarrolladores elegir marcos o plataformas que de otro modo serían excluidas. Si el prototipo es exitoso y cumple con todos los requisitos, las decisiones se pueden tomar en uso como tal, modificado o arrojado a la basura. Lo prototípico muestra así que un concepto es viable y, potencialmente, destaca las ventajas o desventajas del enfoque elegido. En el pasado, utilicé este enfoque para construir un proyecto de mascotas y para demostrarle a mi gerente que una idea era viable. Esto parece ser lo que hacen con el proyecto Gutenberg y estaría muy emocionado si fueran aceptados en el núcleo.
