Mejore sus conocimientos de JavaScript leyendo el código fuente

 

 

 

  • Creating and Maintaining Successful Design Systems, with Brad Fost
  • Advertise on Smashing Magazine

  • Índice
    1. Los beneficios de leer el código fuente
    2. Técnicas para leer el código fuente
    3. Estudio de caso: función de conexión de Redux
    4. Resumen
      1. Enlaces útiles sobre la lectura del código fuente

    Cuando aún estás en las primeras etapas de tu carrera de programación, profundizar en el código fuente de las bibliotecas y marcos de código abierto puede ser una tarea desalentadora. En este artículo, Carl Mungazi comparte cómo superó su miedo y comenzó a utilizar el código fuente para mejorar sus conocimientos y habilidades. También utiliza Redux para demostrar cómo aborda la descomposición de una biblioteca.

     

    ¿Recuerda la primera vez que profundizó en el código fuente de una biblioteca o marco que utiliza con frecuencia? Para mí, ese momento llegó durante mi primer trabajo como desarrollador frontend hace tres años.

    Acabábamos de terminar de reescribir un marco interno heredado que utilizamos para crear cursos de aprendizaje electrónico. Al comienzo de la reescritura, dedicamos tiempo a investigar varias soluciones diferentes, incluidas Mithril, Inferno, Angular, React, Aurelia, Vue y Polymer. Como era un principiante (acababa de pasar del periodismo al desarrollo web), recuerdo sentirme intimidado por la complejidad de cada marco y no entender cómo funcionaba cada uno.

    Mi comprensión creció cuando comencé a investigar con mayor profundidad nuestro marco elegido, Mithril. Desde entonces, mi conocimiento de JavaScript (y de programación en general) se ha visto muy ayudado por las horas que he pasado profundizando en las bibliotecas que uso a diario, ya sea en el trabajo o en mis propios proyectos. En esta publicación, compartiré algunas de las formas en que puedes tomar tu biblioteca o marco favorito y usarlo como herramienta educativa.

    Mi primera introducción a la lectura de código fue a través de la función de hiperíndice de Mithril. ( Vista previa grande )

    Los beneficios de leer el código fuente

    Uno de los principales beneficios de leer el código fuente es la cantidad de cosas que puedes aprender. Cuando miré por primera vez el código base de Mithril, tenía una vaga idea de qué era el DOM virtual. Cuando terminé, salí sabiendo que el DOM virtual es una técnica que implica la creación de un árbol de objetos que describen cómo debería verse su interfaz de usuario. Luego, ese árbol se convierte en elementos DOM utilizando API DOM como document.createElement. Las actualizaciones se realizan creando un nuevo árbol que describe el estado futuro de la interfaz de usuario y luego comparándolo con los objetos del árbol anterior.

    Había leído sobre todo esto en varios artículos y tutoriales y, si bien fue útil, poder observarlo en funcionamiento en el contexto de una aplicación que habíamos enviado fue muy esclarecedor para mí. También me enseñó qué preguntas hacer al comparar diferentes marcos. En lugar de mirar las estrellas de GitHub, por ejemplo, ahora sabía hacer preguntas como: "¿Cómo afecta la forma en que cada marco realiza las actualizaciones al rendimiento y la experiencia del usuario?"

    Otro beneficio es un aumento en su apreciación y comprensión de una buena arquitectura de aplicaciones. Si bien la mayoría de los proyectos de código abierto generalmente siguen la misma estructura con sus repositorios, cada uno de ellos contiene diferencias. La estructura de Mithril es bastante plana y si está familiarizado con su API, puede hacer conjeturas fundamentadas sobre el código en carpetas como rendery router. requestPor otro lado, la estructura de React refleja su nueva arquitectura. Los mantenedores han separado el módulo responsable de las actualizaciones de la interfaz de usuario ( react-reconciler) del módulo responsable de representar los elementos DOM ( react-dom).

    Uno de los beneficios de esto es que ahora es más fácil para los desarrolladores escribir sus propios renderizadores personalizados conectándose al react-reconcilerpaquete. Parcel, un paquete de módulos que he estado estudiando recientemente, también tiene una packagescarpeta como React. El módulo clave tiene un nombre parcel-bundlery contiene el código responsable de crear paquetes, poner en marcha el servidor del módulo activo y la herramienta de línea de comandos.

    No pasará mucho tiempo antes de que el código fuente que estás leyendo te lleve a la especificación de JavaScript. ( Vista previa grande )

    Otro beneficio más, que fue una grata sorpresa para mí, es que te sentirás más cómodo leyendo la especificación oficial de JavaScript que define cómo funciona el lenguaje. La primera vez que leí la especificación fue cuando estaba investigando la diferencia entre throw Errory throw new Error(alerta de spoiler: no hay ninguna ). Investigué esto porque noté que Mithril se usaba throw Erroren la implementación de su mfunción y me preguntaba si había algún beneficio en usarlo una vez más throw new Error. Desde entonces, también aprendí que los operadores lógicos y || no necesariamente devuelven valores booleanos , encontré las reglas que gobiernan cómo el ==operador de igualdad coacciona los valores y el motivo Object.prototype.toString.call({}) devuelve '[object Object]'.

     

    Técnicas para leer el código fuente

    Hay muchas maneras de abordar el código fuente. He descubierto que la forma más sencilla de comenzar es seleccionando un método de la biblioteca elegida y documentando lo que sucede cuando lo llama. No documente cada paso, pero intente identificar su flujo y estructura generales.

    Hice esto recientemente ReactDOM.rendery, en consecuencia, aprendí mucho sobre React Fiber y algunas de las razones detrás de su implementación. Afortunadamente, como React es un marco popular, encontré muchos artículos escritos por otros desarrolladores sobre el mismo tema y esto aceleró el proceso.

    Esta inmersión profunda también me presentó los conceptos de programación cooperativa , el window.requestIdleCallbackmétodo y un ejemplo del mundo real de listas vinculadas (React maneja las actualizaciones colocándolas en una cola que es una lista vinculada de actualizaciones priorizadas). Al hacer esto, es recomendable crear una aplicación muy básica utilizando la biblioteca. Esto facilita la depuración porque no tiene que lidiar con los seguimientos de pila causados ​​por otras bibliotecas.

    Si no estoy haciendo una revisión en profundidad, abriré la /node_modulescarpeta en un proyecto en el que estoy trabajando o iré al repositorio de GitHub. Esto suele suceder cuando me encuentro con un error o una característica interesante. Al leer el código en GitHub, asegúrese de leer desde la última versión. Puede ver el código de las confirmaciones con la etiqueta de la última versión haciendo clic en el botón utilizado para cambiar de rama y seleccionar "etiquetas". Las bibliotecas y los marcos están en constante cambio, por lo que no querrás enterarte de algo que pueda eliminarse en la próxima versión.

    Otra forma menos complicada de leer el código fuente es lo que me gusta llamar el método de "vistazo superficial". Al principio, cuando comencé a leer código, instalé express.js , abrí su /node_modulescarpeta y revisé sus dependencias. Si READMEno me dieron una explicación satisfactoria, leo la fuente. Hacer esto me llevó a estos interesantes hallazgos:

    • Express depende de dos módulos que fusionan objetos pero lo hacen de maneras muy diferentes. merge-descriptorssolo agrega propiedades que se encuentran directamente en el objeto fuente y también fusiona propiedades no enumerables mientras que utils-mergesolo itera sobre las propiedades enumerables de un objeto, así como las que se encuentran en su cadena de prototipo. merge-descriptorsusos Object.getOwnPropertyNames()y Object.getOwnPropertyDescriptor()mientras utils-mergeusos for..in;
    • El setprototypeofmódulo proporciona una forma multiplataforma de configurar el prototipo de un objeto instanciado;
    • escape-htmles un módulo de 78 líneas para escapar de una cadena de contenido para que pueda interpolarse en contenido HTML.

    Si bien es probable que los hallazgos no sean útiles de inmediato, es útil tener una comprensión general de las dependencias utilizadas por su biblioteca o marco. Trucos y guías de videojuegos

     

    Cuando se trata de depurar código de interfaz de usuario, las herramientas de depuración de su navegador son sus mejores amigas. Entre otras cosas, te permiten detener el programa en cualquier momento e inspeccionar su estado, omitir la ejecución de una función o entrar o salir de ella. A veces esto no será posible de inmediato porque el código se ha minimizado. Tiendo a desminificarlo y copiar el código no minificado en el archivo correspondiente de la /node_modulescarpeta.

    Aborde la depuración como lo haría con cualquier otra aplicación. Formule una hipótesis y luego pruébela. ( Vista previa grande )

    Estudio de caso: función de conexión de Redux

    React-Redux es una biblioteca utilizada para gestionar el estado de las aplicaciones React. Cuando trato con bibliotecas populares como estas, empiezo buscando artículos que se hayan escrito sobre su implementación. Al hacerlo para este estudio de caso, me encontré con este artículo . Esta es otra ventaja de leer el código fuente. La fase de investigación normalmente le lleva a artículos informativos como este que sólo mejoran su propio pensamiento y comprensión.

    connectes una función React-Redux que conecta los componentes de React a la tienda Redux de una aplicación. ¿Cómo? Bueno, según los documentos , hace lo siguiente:

    "...devuelve una clase de componente nueva y conectada que envuelve el componente que usted pasó".

    Después de leer esto, me haría las siguientes preguntas:

    • ¿Conozco algún patrón o concepto en el que las funciones tomen una entrada y luego devuelvan esa misma entrada con funcionalidad adicional?
    • Si conozco alguno de estos patrones, ¿cómo lo implementaría según la explicación dada en los documentos?

    Normalmente, el siguiente paso sería crear una aplicación de ejemplo muy básica que utilice connect. Sin embargo, en esta ocasión opté por usar la nueva aplicación React que estamos construyendo en Limejump porque quería entender connectel contexto de una aplicación que eventualmente ingresará a un entorno de producción.

    El componente en el que me estoy centrando se ve así:

    class MarketContainer extends Component { // code omitted for brevity}const mapDispatchToProps = dispatch = { return { updateSummary: (summary, start, today) = dispatch(updateSummary(summary, start, today)) }}export default connect(null, mapDispatchToProps)(MarketContainer);

    Es un componente contenedor que envuelve cuatro componentes conectados más pequeños. Una de las primeras cosas que encontrará en el archivo cuyo connectmétodo de exportación es este comentario: connect es una fachada sobre connectAdvanced . Sin ir muy lejos tenemos nuestro primer momento de aprendizaje: una oportunidad de observar el patrón de diseño de fachada en acción . Al final del archivo vemos que connectexporta una invocación de una función llamada createConnect. Sus parámetros son un montón de valores predeterminados que se han desestructurado así:

     

    export function createConnect({ connectHOC = connectAdvanced, mapStateToPropsFactories = defaultMapStateToPropsFactories, mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories, mergePropsFactories = defaultMergePropsFactories, selectorFactory = defaultSelectorFactory} = {})

    Nuevamente, nos encontramos con otro momento de aprendizaje: exportar funciones invocadas y desestructurar argumentos de funciones predeterminadas . La parte de desestructuración es un momento de aprendizaje porque si el código se hubiera escrito así:

    export function createConnect({ connectHOC = connectAdvanced, mapStateToPropsFactories = defaultMapStateToPropsFactories, mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories, mergePropsFactories = defaultMergePropsFactories, selectorFactory = defaultSelectorFactory})

    Habría dado como resultado este error. Uncaught TypeError: Cannot destructure property 'connectHOC' of 'undefined' or 'null'.Esto se debe a que la función no tiene un argumento predeterminado al que recurrir.

    Nota : Para más información sobre esto, puedes leer el artículo de David Walsh . Algunos momentos de aprendizaje pueden parecer triviales, dependiendo de tu conocimiento del idioma, por lo que podría ser mejor concentrarte en cosas que no has visto antes o sobre las que necesitas aprender más.

    createConnecten sí mismo no hace nada en su cuerpo funcional. Devuelve una función llamada connect, la que usé aquí:

    export default connect(null, mapDispatchToProps)(MarketContainer)

    Se necesitan cuatro argumentos, todos opcionales, y los primeros tres argumentos pasan cada uno por una matchfunción que ayuda a definir su comportamiento según si los argumentos están presentes y su tipo de valor. Ahora, debido a que el segundo argumento proporcionado matches una de las tres funciones importadas connect, tengo que decidir qué hilo seguir.

    Hay momentos de aprendizaje con la función proxy utilizada para ajustar el primer argumento connectsi esos argumentos son funciones, la isPlainObjectutilidad utilizada para verificar objetos simples o el warningmódulo que revela cómo puede configurar su depurador para que interrumpa todas las excepciones . Después de las funciones de coincidencia, llegamos a connectHOC, la función que toma nuestro componente React y lo conecta a Redux. Es otra invocación de función que devuelve wrapWithConnect, la función que realmente maneja la conexión del componente a la tienda.

    Al observar connectHOCla implementación de , puedo apreciar por qué necesita connectocultar los detalles de su implementación. Es el corazón de React-Redux y contiene lógica que no necesita ser expuesta a través de connect. Aunque terminaré la inmersión profunda aquí, si hubiera continuado, este habría sido el momento perfecto para consultar el material de referencia que encontré anteriormente, ya que contiene una explicación increíblemente detallada del código base.

    Resumen

    Leer el código fuente es difícil al principio, pero como ocurre con todo, se vuelve más fácil con el tiempo. El objetivo no es entenderlo todo, sino obtener una perspectiva diferente y nuevos conocimientos. La clave es ser deliberado sobre todo el proceso y tener una intensa curiosidad por todo.

    Por ejemplo, la función me pareció isPlainObjectinteresante porque usa esto if (typeof obj !== 'object' || obj === null) return falsepara asegurarse de que el argumento dado sea un objeto simple. Cuando leí su implementación por primera vez, me pregunté por qué no usaba Object.prototype.toString.call(opts) !== '[object Object]', que tiene menos código y distingue entre objetos y subtipos de objetos, como el objeto Fecha. Sin embargo, la lectura de la siguiente línea reveló que en el caso extremadamente improbable de que un desarrollador que use connectdevuelva un objeto Date, por ejemplo, esto será manejado por la Object.getPrototypeOf(obj) === nullverificación.

    Otro poco de intriga isPlainObjectes este código:

    while (Object.getPrototypeOf(baseProto) !== null) { baseProto = Object.getPrototypeOf(baseProto)}

    Algunas búsquedas en Google me llevaron a este hilo de StackOverflow y al problema de Redux que explica cómo ese código maneja casos como la verificación de objetos que se originan en un iFrame.

    Enlaces útiles sobre la lectura del código fuente

    • " Cómo realizar ingeniería inversa en marcos ", Max Koretskyi, medio
    • " Cómo leer código ", Aria Stewart, GitHub

    (dm, yk, il)Explora más en

    • Codificación
    • javascript
    • Flujo de trabajo





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Mejore sus conocimientos de JavaScript leyendo el código fuente

    Mejore sus conocimientos de JavaScript leyendo el código fuente

    Los beneficios de leer el código fuenteTécnicas para leer el código fuenteEstudio de caso: función de conexión de ReduxResumenCreating and Maintaining Suc

    programar

    es

    https://pseint.es/static/images/programar-mejore-sus-conocimientos-de-javascript-leyendo-el-codigo-fuente-991-0.jpg

    2024-05-20

     

    Mejore sus conocimientos de JavaScript leyendo el código fuente
    Mejore sus conocimientos de JavaScript leyendo el código fuente

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences