Diapositivas de la charla impartida por Joaquín Ruiz Lite el día 17/04/2020 en las Flat 101 Digital Sessions dedicadas a CRO.

1. Joaquín
Ruiz
CTO EN FLAT 101
@JokiRuizLite
#Flat101DS @SomosFlat101 info@flat101.es

2. El futuro de las tecnologías
frontend y su impacto en la
conversión
WebAssembly
17 de abril de 2020
#Flat101DS @SomosFlat101

3. Indice:
01
Introducción
02
Evolución de las
Tecnologías Frontend
03
JavaScript para todo
04
WebAssembly al
rescate
05
Demo: Compila un programa sencillo en Wasm
@JokiRuizLite
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

4. El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly
01
Introducción
@JokiRuizLite

5. Nombre de la charla
El Cliente envía una petición a un servidor
¿Cómo funciona
la navegación
web?
El Servidor envía una respuesta con
Información

6. Nuestro navegador, ejecuta algoritmos para
presentar la información de forma óptima y
amable -> Tecnologías Frontend
El servidor, ejecuta servicios y algoritmos
para buscar y responder la información
requerida -> Tecnologías BackEnd
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

7. Nombre de la charla
Implementado en los Navegadores: (HTML,
CSS, JavaScript, Ajax…)
En constante evolución
Tecnologías Frontend
Importante conocerlas y manejarlas
correctamente para el CRO:
- Implementación de herramientas de
analítica cualitativa https://jsfiddle.net/
jokiruiz/dnoyb4zx/
- Desarrollo de Test A/B
- Optimización de recursos del navegador
- Algoritmos de Inteligencia Artificial

8. El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly
02
Evolución de las
Tecnologías Frontend
@JokiRuizLite

9. Inicio de los 90s
• Primeros (y diversos) Navegadores
• Módems de 28.8kbps
• Primeras Aplicaciones web (formularios)
• Tecnología frontend: Enviar y Recibir
información
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly
2000 2010 20201995 2009
1990

10. El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly
Año 1995
1990 2000 2010 202020091995

11. Año 1995
• Navegación lenta / Complejidad Aplicaciones web
• Brendan Eich (Netscape, Mozilla)
https://www.um.es/docencia/barzana/DIVULGACION/
INFORMATICA/Javascript-diez-dias.html
• Lenguaje de programación en el Navegador (JavaScript)
• Ejecución en el navegador sin comunicación con el
servidor
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly
1990 2000 2010 202020091995

12. Los 2000
• librerías como dojo, prototype, jQuery…
• JavaScript para todos
• Código spaghetti
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly
1990 2010 20201995 2009
2000

13. 2009 - hoy
• Aplicaciones cada vez más complejas
• Deficiencias del HML, buenas prácticas
• Elementos dinámicos, reactivos
• 2009 : AngularJS
• Vue, React, Angular…
• Código Limpio, Potente y “Sencillo"
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly
1990 1995
2000 202020102009

14. 03
JavaScript para todo
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly
@JokiRuizLite

15. ¿Para todo?
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

16. ¿Para qué usamos hoy
en día el navegador?
• Aplicaciones de Escritorio
• Sólo necesitamos el navegador?
• Correo Electrónico, Videollamadas
• Series, Películas
• Escribimos textos, presentaciones
• Videojuegos (https://got.gtarcade.com/)
• Redes Sociales…
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

17. ¿Cómo funciona?
• Máquina Virtual (VM) para ejecutar el código
JavaScript
• API HTML5 para controlar los recursos del
ordenador o dispositivo
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

18. Rendimiento Nativo
• Límites de JavaScript
• Problemas de Rendimiento: Juegos 3D, realidad
virtual y aumentada, visión por computación,
edición de imagen y vídeo.
• Necesidad de un rendimiento Nativo
• Coste: Descarga, Análisis y compilación de
aplicaciones JavaScript
• Dispositivos móviles con no tantos recursos
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

19. 04
WebAssembly al rescate
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly
@JokiRuizLite

20. ¿Qué código ofrece
un mejor
rendimiento?
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

21. Los códigos
binarios
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly
• No diseñados para ser escritos a mano
• Compilados para lenguajes de bajo nivel
• C, C++, Rust
Lenguajes de
alto nivel
• Flexibles y Expresivos
• Tipificados dinámicamente
• Ecosistema muy potente

22. WebAssembly: un
lenguaje tipo
ensamblador con un
formato binario
compacto para
ejecutarse en el
navegador
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

23. Características de
WebAssembly (Wasm)
• Rápido, eficiente y portátil
• Legible y depurable
• Seguro
• Don’t break the web
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

24. Wasm vs JavaScript
https://takahirox.github.io/WebAssembly-benchmark/
*Wasm es un tipo de código, no es un lenguaje de programación
WASM:
- Es simplemente más rápido
- Se ejecuta en formato binario
- Está fuertemente tipado
JavaScript:
- Tipado dinámico
- Muy flexible
- Se ejecuta como código legible
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

25. ¿Cómo se ejecuta Wasm?
- Herramienta para compilar nuestro código fuente (C,C++,…) a
WebAssembly (hello-flat.c -> fello-flat.wasm)
- Javascript que carga nuestro wasm y lo comunica con la API del
navegador
- HTML que incluye el código JavaScript
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

26. El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

27. 05
Demo: Compila un
programa sencillo en
Wasm
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly
@JokiRuizLite

28. El Compilador
Emscripten es un compilador Source-to-Source o transcompilador.
Por lo tanto, utilizaremos el SDK de Emscripten para compilar nuestro
C, C++ en formato Wasm
Más info: https://github.com/emscripten-core/emsdk
01
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

29. Instalación
$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest
01
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

30. Escribimos nuestro
código en C
02
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

31. Compilamos nuestro
código
$ emcc hello-flat.c
http://localhost:8080/hello-flat.html
03
El futuro de las tecnologías frontend y su impacto en la conversión: WebAssembly

32. Nombre de la charla

33. ¡Gracias por la asistencia!
#Flat101DS @SomosFlat101 info@flat101.es