JavaScript Vence al Cáncer

Rate this content
Bookmark

El cáncer de piel es un problema grave en todo el mundo, pero afortunadamente el tratamiento en etapas tempranas puede llevar a la recuperación. JavaScript junto con un modelo de aprendizaje automático puede ayudar a los médicos a aumentar la precisión en la detección de melanoma. Durante la presentación, mostramos cómo utilizar Tensorflow.js, Keras y React Native para construir una solución que pueda reconocer lunares en la piel y detectar si son un melanoma o un lunar benigno. También mostramos los problemas que hemos enfrentado durante el desarrollo. Como resumen, presentamos los pros y los contras de JavaScript utilizado en proyectos de aprendizaje automático.

25 min
20 Jun, 2022

Video Summary and Transcription

Esta charla discute el uso de JavaScript para combatir el cáncer de piel, con un enfoque en la integración de aprendizaje automático. El orador tiene experiencia en imágenes médicas y ha colaborado con empresas de dermatoscopia para desarrollar hardware. Se utilizan bibliotecas de JavaScript como TensorFlow.js y Pandas.js para la implementación de modelos y el análisis de datos. La charla también aborda la construcción de redes neuronales, el análisis del cáncer de piel utilizando métodos de puntuación y técnicas de procesamiento de imágenes, y la extracción de asimetría en imágenes de piel utilizando Python y JavaScript.

Available in English

1. Introducción a JavaScript y el cáncer de piel

Short description:

Hola, mi nombre es Karel Prystalski y hoy les contaré más sobre cómo usar JavaScript para combatir el cáncer de piel. Tengo 15 años de experiencia en aprendizaje automático y específicamente en imágenes médicas. Decidí abordar este tema y desarrollar soluciones en esta área debido a la creciente importancia del cáncer de piel, especialmente en países como Alemania, Escandinavia, Estados Unidos y Australia. También me he asociado con empresas de dermatoscopia para desarrollar hardware, como el dermatoscopio, que es utilizado por los dermatólogos. Mi solución combina el dermatoscopio con lentes especiales y luz para capturar imágenes de alta calidad de lunares en la piel.

Hola, mi nombre es Karel Prystalski y hoy les contaré más sobre cómo usar JavaScript para combatir el cáncer de piel. Tengo aproximadamente 15 años de experiencia en aprendizaje automático. Mi formación académica se centra en inteligencia artificial y su aplicación en imágenes médicas y dermatoscopia. Pueden encontrar algunos de mis artículos de investigación sobre este tema en Google Scholar, por ejemplo, aquí tienen uno de los artículos que publiqué hace unos cinco años sobre el análisis de cáncer de piel en imágenes multiespectrales. En ese caso, utilicé Python, pero debido a que JavaScript se ha vuelto cada vez más popular en los últimos años, especialmente en el ámbito del aprendizaje automático, decidí preparar una presentación y una aplicación de solución para el análisis de cáncer de piel. Mi experiencia no solo es científica, también fundé una empresa de servicios en 2010 que trabaja para empresas Fortune 500, desarrollando soluciones de ciencia de datos y aprendizaje automático. Antes de eso, también realicé algunos trabajos comerciales, por ejemplo, en IBM. Como mencioné anteriormente, tengo 15 años de experiencia en aprendizaje automático y específicamente en imágenes médicas. Entonces, ¿por qué decidí abordar este tema y desarrollar soluciones en esta área? Bueno, como pueden ver, no estoy en el grupo de riesgo cuando se trata de cáncer de piel, ya que el grupo de mayor riesgo son las personas rubias con ojos azules, es decir, el fototipo número uno con mayor riesgo de tener cáncer de piel, especialmente si su piel no se broncea al exponerse al sol, sino que tiende a ponerse roja. Además, el riesgo de desarrollar cáncer de piel es alto en este grupo. Cuanto más oscuro sea el tono de piel y cómo reaccione al sol, menor será la probabilidad de desarrollar cáncer de piel. Hay seis fototipos de piel, y yo me encuentro más o menos en el tercer grupo debido a mi color de cabello, color de ojos, etc. Por eso, este problema es especialmente importante en países como Alemania, Escandinavia, los países nórdicos, Estados Unidos y Australia, especialmente en Australia. Además, he establecido colaboraciones con empresas de dermatoscopia, es decir, empresas que desarrollan hardware. Como pueden ver aquí, este es uno de los dispositivos, nuestro dermatoscopio. Es un dispositivo que utilizan los dermatólogos. En este caso, también he utilizado un iPhone en la parte frontal, ya que es una extensión. No es un dermatoscopio típico, que normalmente no viene con un iPhone o cualquier tipo de teléfono móvil. Es un dispositivo independiente. Algunos dermatólogos también utilizan este tipo de estuche de extensión para tomar las imágenes de manera más fácil. Además, es bastante pequeño, por lo que se puede llevar en el bolsillo y visitar a los pacientes para examinar los lunares de esta manera. Así es como se utiliza mi solución, combinada con lentes especiales y luz para obtener la mejor imagen posible del lunar en la piel. En cuanto al conjunto de datos, cualquier modelo de aprendizaje automático debe alimentarse con datos. Cuando comencé mi investigación, solo tenía alrededor de 53 imágenes, lo cual no es suficiente para realizar ninguna investigación. Por eso, me reuní con casi todas las empresas públicas o privadas que se dedican a la dermatología en la ciudad donde vivo, en Cracovia, Polonia. La mayoría de ellas rechazaron

2. Integración de Aprendizaje Automático y JavaScript

Short description:

El aprendizaje automático se ha convertido en una palabra de moda y la emoción en torno a la IA ha aumentado drásticamente. Obtener conjuntos de datos para la investigación se ha vuelto más fácil, lo que permite el desarrollo de algoritmos para diversas enfermedades de la piel. Se pueden descargar muestras de código y una imagen Docker con bibliotecas de JavaScript. La arquitectura implica combinar el aprendizaje automático con JavaScript para construir una aplicación móvil.

para colaborar y realmente construir algunos modelos. Fue en 2007, 2008. La forma en que las personas pensaban sobre el aprendizaje automático era totalmente diferente en comparación con lo que está sucediendo ahora. En realidad, el aprendizaje automático se convirtió en una palabra de moda y todos querían hacer IA. En el pasado, es decir, hace 15 años, cuando mencionaba IA, la mayoría de las personas decían, oh, no, gracias. No estoy interesado. Ahora es totalmente lo contrario. Necesito explicarles a las personas por qué no usar el aprendizaje automático en lugar de realmente usar el aprendizaje automático. Así que cambió drásticamente en la pandemia de COVID, incluso aumentó la emoción por la IA. Cuando me puse en contacto con las empresas, obtuve un conjunto de datos de alrededor de 5,000 imágenes. Ahora puedes descargar fácilmente un conjunto de datos de alrededor de 26,000 imágenes de lunares en la piel. Está disponible en el sitio web ISICarchive.com y puedes usarlo para tu investigación. Ahora es aún más fácil desarrollar algoritmos para encontrar diferentes tipos de enfermedades de la piel, no solo el cáncer, que técnicamente, quiero decir, no es la más popular. Esa es una buena enfermedad cuando se trata de la piel. Así que para todos aquellos que quieran usar mis muestras de código que he preparado para ustedes, siempre pueden descargar mi imagen Docker que contiene un JupyterLab, JupyterHub, junto con algunos kernels para JavaScript también, y también algunas bibliotecas, bibliotecas de JavaScript. Es un poco antiguo porque lo he estado haciendo durante muchos años ya. Es posible que lo actualice pronto, pero aún funciona. Así que puedes usarlo fácilmente con los cuadernos que te mostraré a continuación. Entonces, la arquitectura, cómo comencé a usar realmente el aprendizaje automático, bueno, cómo combiné el aprendizaje automático con JavaScript, debido a este dispositivo, decidí, obviamente, usar una de las soluciones de JavaScript

3. Integración de JavaScript y Despliegue de Modelos

Short description:

Decidí usar JavaScript en lugar de construir una aplicación nativa. Para la parte de aprendizaje automático, utilicé TensorFlow.js porque es la biblioteca más robusta cuando se trata de JavaScript. El modelo se entrena en Python, pero se utiliza con JavaScript. JavaScript se utiliza para cargar, utilizar, volver a entrenar y desplegar el modelo en teléfonos móviles. También se utiliza junto con Kubeflow y servidores de TensorFlow. Hay una aplicación web que se conecta a la aplicación móvil para volver a entrenar y encontrar modelos similares. Existe una biblioteca de JavaScript llamada Pandas.js, que es un fork de la biblioteca original Pandas de Python.

para construir una aplicación móvil porque los dispositivos móviles están cambiando cada año. Como puedes ver, este es un iPhone 6S, bastante antiguo, y probablemente también necesitaré cambiarlo pronto por uno más nuevo. Aún así, puedo tomar fotos de buena calidad con este teléfono porque la calidad está aquí, no aquí, ¿verdad? Así que no está en el teléfono, sino en la lente aquí. Por eso decidí usar JavaScript en lugar de construir una aplicación nativa. Y en el pasado, tuve que usar diferentes tipos de soluciones, comenzando desde Cordova PhoneGap, ahora estoy trabajando en React Native. Y para la parte de aprendizaje automático, utilicé TensorFlow.js, así que podrías decir, okay, ¿por qué TensorFlow.js, y no, no sé, Keras, o incluso Torch, por ejemplo. Bueno, hay una razón por la que uso TensorFlow.js, porque es la biblioteca más robusta cuando se trata de JavaScript, obviamente. Entonces, por qué uso, o por qué elijo JavaScript en este caso, eso no significa exactamente que dije, okay, hagamos todo en JavaScript, y eso no es cierto. Quiero decir, la verdad es que el modelo se entrena en Python, pero se utiliza con JavaScript. Así que uso TensorFlow.js realmente no para el entrenamiento, y para ser honesto, no conozco a nadie que realmente lo haga. Quiero decir, tal vez porque estoy en el campo de la ciencia de datos desde hace mucho tiempo, y conozco a mucha gente en esta área, y ellos principalmente lo hacen en Python, o no sé, tal vez Scala, algunos de ellos, especialmente relacionado con big data. Así que en este caso, en este caso específico, uso JavaScript precisamente por la posibilidad, en realidad, de usar TensorFlow.js para cargar el modelo, utilizar el modelo, volver a entrenar el modelo y usarlo en nuestro teléfono móvil. Así que en producción, se utiliza junto con algunos servidores de Kubeflow y TensorFlow. Hay dos modelos, uno que ves a la izquierda. En realidad, puedes combinarlo con la aplicación principal. Y así es como lo hice aquí en el teléfono. Pero en realidad, en muchos casos, también causó que el servicio que intenta encontrar modelos similares, visiones similares. Y en realidad es una aplicación web. Así que la aplicación se conecta a la aplicación web y también la utiliza para volver a entrenar. ¿Cómo se ve? Permíteme mostrar brevemente algunos ejemplos. Aquí vamos. Aquí vamos. Eso es parcialmente, también lo hice en el pasado para otra conferencia en Hockey para Nukraine. Solo usaré parte del cuaderno. Puedes encontrarlo fácilmente en mi cuenta de GitHub o en la cuenta de GitHub de mi empresa. Y algunos repositorios que son sobre aprendizaje automático, IA y JavaScript. Cuando comienzas a hacer cualquier tipo de investigación relacionada con datos, cuando lo haces en Python, probablemente uses la primera biblioteca en la que piensas es Pandas. Y hay un fork de esta biblioteca en JavaScript. JavaScript se llama Pandas.js, obviamente. Hasta cierto punto, es muy similar a Pandas, al original de Python.

4. Bibliotecas de JavaScript y TensorFlow

Short description:

Muchas de las características avanzadas de Pandas original aún no se han implementado en JavaScript. Sin embargo, existen varias otras bibliotecas disponibles para el análisis y manipulación de datos, como DataFrame.js, Reclaim y DataForge. JavaScript también ofrece mejores bibliotecas de visualización en comparación con Python, incluyendo MATLAB y Seaborn. En cuanto al aprendizaje automático, Scikit-Learn es la elección popular en Python, pero en JavaScript no existe una biblioteca completa como Scikit-Learn. Por otro lado, TensorFlow proporciona una implementación sencilla de regresión lineal y ofrece varias APIs en diferentes lenguajes de programación.

Pero en realidad, es bastante limitado en comparación con el Pandas original. Aún así, muchas, muchas características aún no se han implementado. Por lo tanto, hasta cierto punto, puedes usarlo en JavaScript. Pero aún faltan muchas, muchas características avanzadas del Pandas original, especialmente aquellas que son simplemente estadísticas.

Otra biblioteca que puedes encontrar o usar en JavaScript para el análisis o manipulación de datos es DataFrame.js, Reclaim, DataForge, y otras más. Por lo tanto, hay muchas bibliotecas de este tipo para usar. Estos son solo algunos ejemplos de cómo trabajar con series, cómo usar DataFrames. Esto es algo normal para las personas que trabajan con datos, probablemente para ingenieros de JavaScript, no tan típico, pero aún fácil de manipular, fácil de exportar a JSON, por ejemplo. Y esto es solo un cuaderno sobre cómo usarlo, solo para mostrar algunos ejemplos. En cuanto a la visualización, en mi opinión, JavaScript hace un mejor trabajo que Python. Obviamente, hay algunas bibliotecas como MATLAB, Seaborn y otras en Python, cuando las comparas con las que están disponibles en JavaScript. Creo que aquí, JavaScript tiene una gran ventaja porque hay buenas bibliotecas para visualización e impresión de gráficos. Pero creo que en muchos casos, simplemente hacen un mejor trabajo que las de Python. Así que eso es bueno. Entonces, uno, uno, digamos. Y luego, en cuanto a Scikit-Learn, la biblioteca más popular para el aprendizaje automático con métodos superficiales. Entonces, TensorFlow, quiero decir, eso es para construir redes neuronales, pero en realidad Scikit-Learn se trata más de los métodos superficiales. En realidad, en la mayoría de los casos, cuando se trata de aprendizaje automático, se pueden resolver o deberían resolverse utilizando métodos superficiales. Entonces, Scikit-Learn, esa es la primera biblioteca que usaremos y es fácil de usar en Python. En JavaScript, tienes JS.kit.learn y Scikit-Learn como un fork de Scikit-Learn, pero no se ha actualizado en los últimos años. Parece que alguien comenzó algo, pero luego dejó de mantenerlo y desapareció. Quiero decir, no es realmente una buena biblioteca para usar aquí. Hay muchas bibliotecas que implementan algún método superficial específico, como SVM, KNN, y así sucesivamente. Pero en realidad, si quieres tenerlo en un solo lugar como en Python, no tienes una biblioteca así en JavaScript, desafortunadamente. Entonces, en cuanto a TensorFlow, aquí tienes un ejemplo muy sencillo de cómo puedes construir una regresión lineal. Aquí hay algunos ejemplos de cómo importar, cómo usar, cómo implementar una regresión lineal. Y aquí hay un ejemplo, también hay una imagen de la documentación de TensorFlow.js. Tienes muchos tipos de APIs. La más popular está escrita en Python, pero en realidad el núcleo está escrito en C++, y también hay algunos otros forks como Java, Go, JavaScript, y así sucesivamente. Así que JavaScript no es, quiero decir, no es especial aquí. Es solo otro

5. Construcción de Redes Neuronales y Análisis del Cáncer de Piel

Short description:

Aquí tienes un ejemplo de cómo construir una función de pérdida, combinarla, usarla, importarla y entrenarla. En Python, normalmente usamos cámaras para construir redes neuronales. JavaScript tiene Keras JS, pero no está tan desarrollado como la versión de Python. Cuando se trata de cáncer de piel, los médicos utilizan métodos de puntuación como ABCD y verifican patrones como la asimetría, la nitidez del borde y el número de colores. El uso de diferentes longitudes de onda de luz, como infrarrojo y UV, puede proporcionar información más detallada. También se pueden utilizar técnicas de procesamiento de imágenes como la binarización y el análisis fractal.

fork para llegar al núcleo de TensorFlow, en realidad. Aquí tienes otro ejemplo de cómo construir una función de pérdida, combinarla, cómo usarla, importarla y entrenarla. Cuando se trata de construir, cuando se trata de redes neuronales, cómo lo hacemos en Python, principalmente lo hacemos con cámaras. No tengo PyTorch. En realidad, puedes combinar fácilmente la red. Quiero decir, construirla a partir de bloques. En realidad, tengo capas. Conecta las capas entre sí y puedes construir fácilmente una red muy grande en poco tiempo. En JavaScript, tienes Keras JS, pero para ser honesto, está muy, muy lejos de la versión desarrollada en Python, desafortunadamente, ¿verdad? De acuerdo. Eso es una cosa. Volvamos a las diapositivas. Cuando se trata del cáncer de piel, como puedes ver aquí, tienes tres imágenes y solo dos de ellas son realmente cánceres. La de la izquierda y la de la derecha. Aquí a la izquierda, puedes ver algunos patrones, quiero decir, los puntos aquí y las rayas. Algunos vasos sanguíneos aquí visibles que todo eso no es muy simétrico. Los bordes son bastante suaves realmente. Aquí a la derecha, tienes este tipo de patrón que se llama el patrón de onda azul. Puedes ver una especie de colores blanco-azul aquí. Significa que en realidad, bueno, está yendo profundo. Quiero decir, el cáncer está yendo más profundo en la piel y tratando de llegar a los vasos sanguíneos. Eso es malo para el paciente, pero también es un patrón que nos dice, oh, eso es realmente malo. Aquí en el medio, tienes un ejemplo de una lesión sospechosa, pero no se ha confirmado que sea cáncer porque todas ellas están confirmadas o no por la patología. Quiero decir, confirmadas si son cáncer o no. Entonces, ¿cómo lo hacen los médicos? Utilizan algún tipo de métodos de puntuación como ABCD, lista de verificación de siete puntos, puntuación de siete puntos, llamada de cazador, lista de verificación de tres puntos, y así sucesivamente. Entonces, utilizan algunos paneles, como la asimetría, la nitidez del borde, el número de colores. En ABCD tienes seis colores que realmente cuentan, y verifican cuántos colores hay. Cuando los combinas, quiero decir, anotas uno por uno cuántos patrones diferentes están disponibles, puedes contar fácilmente más de 30 patrones que los médicos, los profesionales pueden encontrar en la imagen, o simplemente, ya sabes, usando el bucle. Directamente. Lo que también puedes hacer, y lo que hice en mi investigación, es utilizar diferentes tipos de longitudes de onda de luz para obtener no solo lo que ves con la luz visible, sino también lo que está más profundo en la piel utilizando, por ejemplo, la luz infrarroja. En realidad, utilicé cuatro longitudes de onda de luz diferentes en total, pero aquí puedes ver una con infrarrojo, UV, para obtener la melanina, ¿verdad? Los vasos sanguíneos más visibles, y así es como puedes realizar una mejor investigación, porque tenemos más detalles, más información. Oh, lo que también puedes hacer, también puedes realizar algún procesamiento de imágenes, como la binarización en este caso, ¿verdad?, para descubrir, oh, este borde aquí no es suave, ¿verdad? Puedes, por ejemplo, utilizar métodos fractales para

6. Extracción de Asimetría en Imágenes de Piel

Short description:

En esta demostración, te mostraré un ejemplo de cómo extraer la asimetría en imágenes de piel utilizando Python y JavaScript. Al dividir la imagen en regiones y calcular la simetría de los lados opuestos de los bloques, podemos contar fácilmente la asimetría. Sin embargo, algunos patrones requieren modelos más sofisticados basados en redes neuronales.

analizar eso. Muy bien, la demostración, otra más, porque me gustaría mostrarte también cómo puedes usar eso, cómo puedes, qué tipo de, qué tipo de métodos puedes usar. Realmente, aquí tienes uno de los ejemplos que puedes encontrar más en realidad, yendo a mi, yendo a mi repositorio de GitHub, aquí tienes una forma de cómo extraer la asimetría, en realidad extraer la región aquí, en primer lugar, ¿verdad? Así que podríamos tomar esta parte, esta región. Aquí uso el ISIC como puedes ver allí y luego, ese es el siguiente paso, calcular, en este caso puedo ver que es Python, porque he desarrollado, desarrollar el moderno Python, que en realidad exporté a JavaScript, para ser utilizado en JavaScript, y aquí puedes dividir la imagen en algunas regiones y calcular la simetría de los lados opuestos de los bloques. Así es como cuentas fácilmente la asimetría. Y así es como puedes hacerlo en muchos paneles, quiero decir, hacer algún procesamiento básico de imágenes, nos permite descubrir algunos de los patrones. Algunos de ellos en realidad son más difíciles, necesitas construir modelos sofisticados basados en redes neuronales. No dudes en obtener más información al respecto. Pero lo que es importante, porque mencioné las redes neuronales y también los modelos superficiales, para darte una mejor comprensión, aquí tienes, porque tenemos las batallas de caja negra y caja blanca, así que las cajas negras son las redes neuronales, en la mayoría de los casos puedes ver aquí una red muy corta con tres capas aquí. Se entrena fácilmente con una precisión del 98%, muy alta. Pero si realmente dibujas los pesos, puedes ver, quiero decir, los pesos impresos de solo una capa, se ve así. Así que si intentas explicarlo, es muy difícil, incluso imposible, explicar cada uno de estos números, qué significa. Así que hay algunos métodos explicables, para explicar los números, en los pesos, en la red neuronal, pero es más complejo. Cuando se trata de métodos superficiales, especie de caja blanca, es fácil de interpretar, fácil de explicar, porque como puedes ver aquí, este es un árbol de decisión. De todos modos, si no sabes qué es un índice GINI, si no sabes qué es X2, una característica, pero si no sabes eso, solo mirando este simple gráfico, este simple árbol, puedes convertirlo fácilmente en un conjunto de declaraciones if que es fácilmente comprensible para cualquiera, especialmente para ingenieros de software. Volviendo a las diapositivas. Nuevamente, debido a las limitaciones, encuentra más ejemplos en el repositorio de GitHub. Así es como se veía el primer ejemplo, la primera aplicación, así que verificamos. Quiero decir, el algoritmo verificó automáticamente. Aquí tienes el ABC, puntuando eso y tomando una foto y descubrimos que el algoritmo fue capaz de encontrar los patrones específicos. Entonces, ¿cuáles son las ventajas de usar JavaScript para el análisis del cáncer de piel o en general para el aprendizaje automático? Se puede usar fácilmente para prototipos y también para teléfonos móviles, ¿verdad? Especialmente funciona con todos o la mayoría de ellos. Tienes una enorme comunidad de JavaScript, que realmente puede brindar soporte en el aprendizaje de JavaScript. De hecho, el nivel de entrada a JavaScript es bastante bajo, así que no es gran cosa. Y también lo que se puede hacer, en realidad, si tu aplicación también se puede usar con una cámara en tu computadora portátil, entonces puedes convertirla fácilmente en una aplicación web también. ¿Qué no es tan bueno? Bueno, realmente no hay soporte de envoltura de aprendizaje automático cuando se trata de JavaScript, por lo que la mayoría de eso aún se basa en el Python robótico, principalmente soluciones de Python cuando se trata de envoltorios. Quiero decir, aquí, Kubeflow, obviamente tienes las soluciones en la nube como en AWS, Google Cloud, Azure que realmente proporcionan algunas herramientas de envoltura, pero cuando se trata de JavaScript, aún está limitado. Cuando se trata de la comunidad, una gran comunidad, pero aún no tan grande cuando se trata de temas relacionados con el aprendizaje automático y muchas, muchas bibliotecas. Quiero decir, los chistes sobre las bibliotecas de JavaScript que cada semana aparece una nueva biblioteca de JavaScript y técnicamente podemos usar esta biblioteca. Puedes verlo en realidad en JavaScript muy bien cuando se trata de aprendizaje automático porque si escribes aprendizaje automático, encontrarás más bibliotecas de aprendizaje automático en JavaScript que en Python. Pero la cosa es que, aunque hay más bibliotecas en JavaScript, hay menos bibliotecas robustas que realmente se pueden usar en producción en JavaScript en comparación con Python o R o Scala o Java y probablemente algunos otros lenguajes más. Gracias por la atención, espero que no tengas cáncer de piel y que todos estén sanos. En cualquier caso, encuentra algunos de los cuadernos con ejemplos en mi repositorio de GitHub. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation Live 2021JSNation Live 2021
27 min
Building Brain-controlled Interfaces in JavaScript
Top Content
Neurotechnology is the use of technological tools to understand more about the brain and enable a direct connection with the nervous system. Research in this space is not new, however, its accessibility to JavaScript developers is.Over the past few years, brain sensors have become available to the public, with tooling that makes it possible for web developers to experiment building brain-controlled interfaces.As this technology is evolving and unlocking new opportunities, let's look into one of the latest devices available, how it works, the possibilities it opens up, and how to get started building your first mind-controlled app using JavaScript.
6 min
Charlie Gerard's Career Advice: Be intentional about how you spend your time and effort
Featured Article
When it comes to career, Charlie has one trick: to focus. But that doesn’t mean that you shouldn’t try different things — currently a senior front-end developer at Netlify, she is also a sought-after speaker, mentor, and a machine learning trailblazer of the JavaScript universe. "Experiment with things, but build expertise in a specific area," she advises.

What led you to software engineering?My background is in digital marketing, so I started my career as a project manager in advertising agencies. After a couple of years of doing that, I realized that I wasn't learning and growing as much as I wanted to. I was interested in learning more about building websites, so I quit my job and signed up for an intensive coding boot camp called General Assembly. I absolutely loved it and started my career in tech from there.
 What is the most impactful thing you ever did to boost your career?I think it might be public speaking. Going on stage to share knowledge about things I learned while building my side projects gave me the opportunity to meet a lot of people in the industry, learn a ton from watching other people's talks and, for lack of better words, build a personal brand.
 What would be your three tips for engineers to level up their career?Practice your communication skills. I can't stress enough how important it is to be able to explain things in a way anyone can understand, but also communicate in a way that's inclusive and creates an environment where team members feel safe and welcome to contribute ideas, ask questions, and give feedback. In addition, build some expertise in a specific area. I'm a huge fan of learning and experimenting with lots of technologies but as you grow in your career, there comes a time where you need to pick an area to focus on to build more profound knowledge. This could be in a specific language like JavaScript or Python or in a practice like accessibility or web performance. It doesn't mean you shouldn't keep in touch with anything else that's going on in the industry, but it means that you focus on an area you want to have more expertise in. If you could be the "go-to" person for something, what would you want it to be? 
 And lastly, be intentional about how you spend your time and effort. Saying yes to everything isn't always helpful if it doesn't serve your goals. No matter the job, there are always projects and tasks that will help you reach your goals and some that won't. If you can, try to focus on the tasks that will grow the skills you want to grow or help you get the next job you'd like to have.
 What are you working on right now?Recently I've taken a pretty big break from side projects, but the next one I'd like to work on is a prototype of a tool that would allow hands-free coding using gaze detection. 
 Do you have some rituals that keep you focused and goal-oriented?Usually, when I come up with a side project idea I'm really excited about, that excitement is enough to keep me motivated. That's why I tend to avoid spending time on things I'm not genuinely interested in. Otherwise, breaking down projects into smaller chunks allows me to fit them better in my schedule. I make sure to take enough breaks, so I maintain a certain level of energy and motivation to finish what I have in mind.
 You wrote a book called Practical Machine Learning in JavaScript. What got you so excited about the connection between JavaScript and ML?The release of TensorFlow.js opened up the world of ML to frontend devs, and this is what really got me excited. I had machine learning on my list of things I wanted to learn for a few years, but I didn't start looking into it before because I knew I'd have to learn another language as well, like Python, for example. As soon as I realized it was now available in JS, that removed a big barrier and made it a lot more approachable. Considering that you can use JavaScript to build lots of different applications, including augmented reality, virtual reality, and IoT, and combine them with machine learning as well as some fun web APIs felt super exciting to me.


Where do you see the fields going together in the future, near or far? I'd love to see more AI-powered web applications in the future, especially as machine learning models get smaller and more performant. However, it seems like the adoption of ML in JS is still rather low. Considering the amount of content we post online, there could be great opportunities to build tools that assist you in writing blog posts or that can automatically edit podcasts and videos. There are lots of tasks we do that feel cumbersome that could be made a bit easier with the help of machine learning.
 You are a frequent conference speaker. You have your own blog and even a newsletter. What made you start with content creation?I realized that I love learning new things because I love teaching. I think that if I kept what I know to myself, it would be pretty boring. If I'm excited about something, I want to share the knowledge I gained, and I'd like other people to feel the same excitement I feel. That's definitely what motivated me to start creating content.
 How has content affected your career?I don't track any metrics on my blog or likes and follows on Twitter, so I don't know what created different opportunities. Creating content to share something you built improves the chances of people stumbling upon it and learning more about you and what you like to do, but this is not something that's guaranteed. I think over time, I accumulated enough projects, blog posts, and conference talks that some conferences now invite me, so I don't always apply anymore. I sometimes get invited on podcasts and asked if I want to create video content and things like that. Having a backlog of content helps people better understand who you are and quickly decide if you're the right person for an opportunity.What pieces of your work are you most proud of?It is probably that I've managed to develop a mindset where I set myself hard challenges on my side project, and I'm not scared to fail and push the boundaries of what I think is possible. I don't prefer a particular project, it's more around the creative thinking I've developed over the years that I believe has become a big strength of mine.***Follow Charlie on Twitter
ML conf EU 2020ML conf EU 2020
41 min
TensorFlow.js 101: ML in the Browser and Beyond
Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser (things have come a long way) and then take your own first steps with machine learning in minutes. By the end of the talk everyone will understand how to recognize an object of their choice which could then be used in any creative way you can imagine. Familiarity with JavaScript is assumed, but no background in machine learning is required. Come take your first steps with TensorFlow.js!
JSNation 2022JSNation 2022
21 min
Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly
WebAssembly is a browser feature designed to bring predictable high performance to web applications, but its capabilities are often misunderstood.
This talk will explore how WebAssembly is different from JavaScript, from the point of view of both the developer and the browser engine, with a particular focus on the V8/Chrome implementation.
WebVM is our solution to efficiently run unmodified x86 binaries in the browser and showcases what can be done with WebAssembly today. A high level overview of the project components, including the JIT engine, the Linux emulation layer and the storage backend will be discussed, followed by live demos.
React Advanced Conference 2023React Advanced Conference 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.
React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community

Workshops on related topic

React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
React Advanced Conference 2023React Advanced Conference 2023
159 min
Effective Detox Testing
Workshop
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
React Advanced Conference 2022React Advanced Conference 2022
131 min
Introduction to React Native Testing Library
Workshop
Are you satisfied with your test suites? If you said no, you’re not alone—most developers aren’t. And testing in React Native is harder than on most platforms. How can you write JavaScript tests when the JS and native code are so intertwined? And what in the world are you supposed to do about that persistent act() warning? Faced with these challenges, some teams are never able to make any progress testing their React Native app, and others end up with tests that don’t seem to help and only take extra time to maintain.
But it doesn’t have to be this way. React Native Testing Library (RNTL) is a great library for component testing, and with the right mental model you can use it to implement tests that are low-cost and high-value. In this three-hour workshop you’ll learn the tools, techniques, and principles you need to implement tests that will help you ship your React Native app with confidence. You’ll walk away with a clear vision for the goal of your component tests and with techniques that will help you address any obstacle that gets in the way of that goal.you will know:- The different kinds React Native tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting text, image, and native code elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RNTL tests and how to handle them- Options for handling native functions and components in your JavaScript tests
Prerequisites:- Familiarity with building applications with React Native- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Native Testing Library- Machine setup: Node 16.x or 18.x, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/