Get best of the week

Sección frontend sobre DUMP2020: vamos a estar a la vanguardia de que habrá una casa llena nuevamente. Principales informes del año pasado y temas de este

Quién está de acuerdo en que un front-end moderno es difícil, ¡levanten la mano! ¿Por qué estamos sufriendo por configurar Webpack? ¿Por qué la implementación de SSR requiere escribir tanto código? ¿Realmente lo necesitamos a ese costo? ¿Quién tiene la culpa y qué podemos hacer nosotros, como desarrolladores,?

Intentamos responder estas y cientos de otras preguntas en la sección Frontend. Y de año en año, los temas se vuelven más diversos y duros. Y el leitmotiv principal de la sección son los experimentos.
Mire debajo del corte, quién experimentó con lo que el año pasado, y qué contarán y mostrarán en este



Temas principales de 2019


En el DUMP de Ekaterimburgo el año pasado, el primer lugar fue para el informe de Alexander Korotaev (Tinkoff.ru). Todos saben que WebGL es muy rápido. Quiero reescribir de inmediato todo lo que contiene, pero parece que la tecnología voló a la web desde otro planeta. El estándar tiene casi 9 años y hay muy pocos especialistas en él.

Alexander habló sobre cómo dibujar 2D rápidamente, pero simplemente, usando los juegos como ejemplo, sin obstruir su cabeza con matrices y una API compleja. El informe analiza los conceptos de representación previa, sombreadores y el uso del árbol React para dibujar rápidamente en el plano.


Vitaly Dmitriev de 404Group reunió la misma casa completa sobre el tema de la programación reactiva . Vitaliy dijo que el paradigma reactivo se ha implementado durante muchos años en los dispositivos y los ecosistemas digitales que nos rodean. Todos los días usamos dispositivos que pueden controlar otros dispositivos, pero si intentamos reproducir su lógica en nuestras aplicaciones, obtenemos un sistema proactivo y altamente expandible. ¿Por qué?

Muchas escuelas y tutoriales nos enseñan cómo crear entidades que son directamente responsables de administrar ciertos componentes. En grandes proyectos complejos, después de un par de años, esto se convierte en una pesadilla complicada y ninguna herramienta moderna puede resolver este problema mientras los desarrolladores escriben código proactivo.

Para saber cómo pensar de manera reactiva en lugar de proactiva, vea la charla a continuación:


Alexandra Shinkevich habló sobre cómo implementar estándares de desarrollo para que nadie resulte herido . Casi todos los equipos tienen un debate en curso sobre temas de actualidad: “Tabulaciones o espacios”, “¿Necesita sangrar entre corchetes?”, “¿Comillas simples o dobles?”, “¿Necesita poner punto y coma al final de las líneas?”. Y esto es solo el comienzo de la lista. Pero, ¿es realmente necesario discutir esto cada vez que se inicia un nuevo proyecto, se realiza una revisión del código o un nuevo desarrollador llega al equipo?


En Kazan DUMP, Denis Kolesnikov de Avito contó la difícil historia de actualizar la pila de tecnología en un proyecto con una larga historia . Es casi como sortear el motor de un avión sobre la marcha. Denis cuenta cómo, de forma iterativa y progresiva, cambiaron el front-end en Avito, implementaron la representación del servidor, la gestión de la dependencia de los microfrontes, así como el rastrillo que encontraron y las conclusiones que sacaron de todo esto.

Este informe es para desarrolladores de nivel medio y superior que trabajan con una gran base de código centralizada (y para aquellos que desean cortar esta base de código).


El contenido gráfico es la mitad de la página web promedio. Para preparar adecuadamente esta mitad, debe comprender cómo están organizadas las imágenes y qué puede hacer con ellas .

Polina Gurtova (Evil Martians) analizó la anatomía de diferentes formatos (PNG, JPG, WebP, SVG y otros) y le dijo cómo elegir el correcto.

Ella inmediatamente explica por qué elegir un formato es solo un pequeño paso en el camino divertido de las optimizaciones y le dice qué hacer a continuación.


SvelteJS es uno de los frameworks JavaScript de más rápido crecimiento. ¿Puede desplazarse desde el punto de vista de React, Angular y Vue?

Pavel Malyshev, mantenedor del proyecto y facilitador de la comunidad de habla rusa, habló sobre el estado actual del marco SvelteJS, su ecosistema y comunidad, así como por qué no es "otro marco JS más" y debería analizarlo más de cerca.


En el aniversario DUMP2020 en Ekaterimburgo, la sala de la sección Frontend ahora tendrá capacidad para 400 personas. Vamos a adelantar que esta sala se completará al 100% en algunos informes.

Comité del programa de la sección: Polina Gurtovaya (malvados marcianos) y Yegor Khodyrev (Tochka) hablaron sobre qué temas están esperando y cuáles ya se anunciaron.

Concepto y aplicación DUMP2020


Estamos buscando informes en ruso e inglés que duren entre 30 y 40 minutos. Si no has actuado antes, no hay problema. Le ayudaremos a pensar en la estructura, recopilar contenido y ensayar la presentación.

Como inspiración, hemos preparado una lista de temas que nos interesan. La lista no es exhaustiva; estamos abiertos a lo nuevo y estamos considerando cualquier aplicación.

Temas clave



  • Herramientas: IDEs, complementos, linters, constructores.
  • Metodologías, arquitectura y principios: SÓLIDO, microservicios, BEM
  • Optimización: rendimiento, gestión de memoria, WebAssembly
  • Desarrollo del servidor: Node.js, V8, ChakraCore
  • Gestión del estado: Redux, MobX, Flux
  • Sincronización y almacenamiento de datos del cliente: REST, GraphQL, Web Sockets
  • Desarrollo móvil: PWA, ReactNative, VueNative
  • Aplicaciones de escritorio: Electron, NW.js
  • Seguridad: piratería y protección, vulnerabilidades en npm
  • ECMAScript: características de nuevas especificaciones
  • Alternativas JS: Typecript, ClojureScript, Elm, Dart
  • Pruebas: selenio, pruebas unitarias, TDD
  • Marco: React, Angular, Vue
  • Estilos: preprocesadores, módulos CSS, CSS-in-JS, componentes con estilo
  • Gráficos: SVG, WebGL, VR
  • Disponibilidad: semántica, ARIA, lectores de pantalla
  • Creación de prototipos: Figma, sistemas de diseño
  • Fan: IoT, Game Dev, experimentos
  • Historias: éxitos y fracasos, interacción con los negocios.
  • Otros: API web, el futuro de los estándares, código abierto, gestores de paquetes, etc.

Puede solicitar el informe aquí .



Temas anunciados este año


¿Necesitamos N (e / u) xt.js?
(Grigory Petrov, Evrone)

En el informe, Grigory utiliza estos dos marcos para hablar sobre las principales dificultades del desarrollo front-end moderno y cómo podemos abordarlos: plantillas listas para usar, código nativo o nuevas arquitecturas de aplicaciones. El orador mostrará dificultades desde la posición "¿por qué sucedió?" Y qué se puede hacer al respecto.

GameDev en Frontend

Anna Blok (Ayuda Frontend, Diseñador de diseño típico) y Daria Pushkarskaya (Web Hero School)
Un informe sobre las posibilidades de cambiar de dirección si siempre soñaste con desarrollar juegos.

Anna y Daria mostrarán una lista de tecnologías y oportunidades con las que se crean los juegos.
Y al final presentarán su propio juego para demostrar que no hay nada complicado.

Acerca de Lighthouse
Seryozha Popov (League A. / HTML Academy)

Lighthouse hace todo el trabajo sucio por nosotros, pero seguimos ignorándolo. Todos los sitios y aplicaciones deben probarse en esta herramienta, ya que en el mundo moderno el front-end se vuelve importante no solo en qué está escrita la aplicación, sino también qué tan rápido se carga y cuántos usuarios está disponible. El faro es más fácil de usar que ignorar. Sergey hablará sobre problemas que son más importantes de lo que parecen y cómo resolver estos problemas con Lighthouse.

WebAssembly: nuevas características y nuevos problemas
Polina Gurtovaya (Evil Martians)

En el informe entenderemos qué es WebAssembly.

Hablemos de WebAssembly como un formato no web, discuta cómo vive WebAssembly en los navegadores.

Usando V8 como ejemplo, veamos cómo se ejecutan JS y WASM. Tratemos de comprender qué afecta la velocidad de ejecución de JS y WASM, y en qué casos WASM es más rápido. Y finalmente, discutiremos el estado actual de la tecnología y las posibilidades de su aplicación.

Gestión de monorepositorios con NX
Anton Nikulin (Tinkoff.ru)

Hoy en día, casi cualquier aplicación web grande consta de muchas más pequeñas, que, a su vez, utilizan bibliotecas diferentes. Si cada uno de estos módulos independientes está en su propio repositorio, la actualización de incluso una biblioteca comienza a actualizar todas las dependencias de la cadena.

La actualización hoy tampoco es tan simple: en cada etapa de esta cadena es necesario seguir la ruta de CI. Y estos son nuevos problemas potenciales: incompatibilidad de versiones, pruebas descartadas, versiones desactualizadas, etc. Si pensar en eso te lastima, entonces este informe es para ti.
Anton le dirá lo conveniente que es colocar todo en un repositorio usando NX, cómo puede dividir la aplicación en partes pequeñas sin dolor. Hablemos de que le dará cómo venderlo al equipo y al negocio. Nos fijamos "debajo del capó", y luego miramos las trampas. Al final, descubriremos cómo implementar NX en casa.



Estas son solo algunas aplicaciones que el comité del programa ha logrado considerar, pero cuantas más aplicaciones, mejor será el programa.

¿Le gustaría hablar en la conferencia de desarrolladores más grande en el Distrito Federal de los Urales en el nuevo Salón de Congresos en el salón para 400 personas?

Aplicar antes de que sea demasiado tarde.

O ven / ven a DUMP el 15 de mayo para escuchar los temas que pasaron por una picadora de carne brutal;)

Además del programa principal, prometemos muchas cosas interesantes .

More articles:


All Articles