Get best of the week

Section frontend sur DUMP2020: nous préviendrons qu'il y aura à nouveau un full. Top rapports de l'année dernière et sujets de cette

Qui reconnaît qu'un front-end moderne est difficile, levez la main! Pourquoi souffrons-nous de la configuration de Webpack? Pourquoi l'implémentation SSR nécessite-t-elle d'écrire autant de code, et en avons-nous vraiment besoin à ce prix? Qui est à blâmer et que pouvons-nous, en tant que développeurs, faire?

Nous essayons de répondre à ces questions et à des centaines d'autres dans la section Frontend. Et d'année en année, les sujets se diversifient et se durcissent. Et le leitmotiv principal de la section est l'expérimentation.
Regardez sous la coupe, qui a expérimenté ce que l'année dernière, et ce qu'ils vont dire et montrer dans ce



Meilleurs thèmes 2019


Au DUMP d'Ekaterinbourg l'année dernière, la première place est allée au rapport d'Alexander Korotaev (Tinkoff.ru). Tout le monde sait que WebGL est très rapide. Je veux tout réécrire immédiatement, mais la technologie semble avoir volé sur le Web depuis une autre planète. La norme a presque 9 ans et il y a très peu de spécialistes.

Alexander a expliqué comment dessiner 2D rapidement, mais simplement, en utilisant des jeux comme exemple, sans se boucher la tête avec des matrices et une API complexe. Le rapport traite des concepts de pré-rendu, de shaders et d'utilisation de l'arbre React pour dessiner rapidement sur le plan.


Vitaly Dmitriev de 404Group a rassemblé la même maison pleine sur le thème de la programmation réactive . Vitaliy a déclaré que le paradigme réactif était mis en œuvre depuis de nombreuses années dans les gadgets et les écosystèmes numériques qui nous entourent. Chaque jour, nous utilisons des appareils qui peuvent contrôler d'autres appareils, mais si nous essayons de reproduire leur logique dans nos applications, nous obtenons un système proactif fortement extensible. Pourquoi?

De nombreuses écoles et didacticiels nous apprennent à créer des entités directement responsables de la gestion de certains composants. Dans les grands projets complexes, après quelques années, cela se transforme en un cauchemar déroutant et aucun outil moderne ne peut résoudre ce problème pendant que les développeurs écrivent du code proactif.

Pour savoir comment penser de manière réactive plutôt que proactive, consultez la présentation ci-dessous:


Alexandra Shinkevich a expliqué comment mettre en œuvre les normes de développement afin que personne ne soit blessé . Presque chaque équipe a un débat en cours sur des questions d'actualité: «Tabulations ou espaces?», «Avez-vous besoin de mettre en retrait entre crochets?», «Citations simples ou doubles?», «Avez-vous besoin de mettre des points-virgules à la fin des lignes?». Et ce n'est que le début de la liste. Mais est-il vraiment nécessaire d'en discuter chaque fois qu'un nouveau projet démarre, une révision de code est effectuée, ou un nouveau développeur vient-il dans l'équipe?


Au Kazan DUMP, Denis Kolesnikov d'Avito a raconté l'histoire difficile de la mise à jour de la pile technologique dans un projet avec une longue histoire . C'est presque comme trier un moteur d'avion à la volée. Denis raconte comment, progressivement, ils ont changé le front-end dans Avito, implémenté le rendu du serveur, la gestion des dépendances des microfronts, ainsi que le rake qu'ils ont rencontré et les conclusions qu'ils ont tirées de tout cela.

Ce rapport est destiné aux développeurs moyens et seniors travaillant avec une grande base de code centralisée (et à ceux qui souhaitent couper cette base de code).


Le contenu graphique représente la moitié de la page Web moyenne. Pour bien préparer cette moitié, vous devez comprendre comment les images sont organisées et ce que vous pouvez en faire .

Polina Gurtova (Evil Martians) a analysé l'anatomie de différents formats (PNG, JPG, WebP, SVG et autres) et a expliqué comment choisir le bon.

Elle explique immédiatement pourquoi le choix d'un format n'est qu'une petite étape sur la voie amusante des optimisations et vous dit quoi faire ensuite.


SvelteJS est l'un des frameworks JavaScript à la croissance la plus rapide. Peut-il se déplacer du point de vue de React, Angular et Vue?

Pavel Malyshev, le responsable du projet et l'animateur de la communauté russophone, a parlé de l'état actuel du cadre SvelteJS, de son écosystème et de sa communauté, et pourquoi il ne s'agit pas «encore d'un autre cadre JS» et vous devriez y regarder de plus près.


Lors de l' anniversaire DUMP2020 à Ekaterinbourg, la salle de la section Frontend pourra désormais accueillir 400 personnes. Nous préviendrons que cette salle sera remplie à 100% dans certains rapports.

Comité du programme de la section: Polina Gurtovaya (Evil Martians) et Yegor Khodyrev (Tochka) ont parlé des sujets qui attendent et qui sont déjà annoncés.

Concept et application DUMP2020


Nous recherchons des rapports en russe et en anglais d'une durée de 30 à 40 minutes. Si vous n'avez jamais joué auparavant - pas de problème. Nous vous aiderons à réfléchir à la structure, à collecter le contenu et à répéter la présentation.

Pour vous inspirer, nous avons préparé une liste de sujets qui nous intéressent. La liste n'est pas exhaustive, nous sommes ouverts aux nouveautés et étudions toutes candidatures.

Thèmes clés



  • Outils: IDE, plugins, linters, constructeurs
  • Méthodologies, architecture et principes: SOLID, microservices, BEM
  • Optimisation: performances, gestion de la mémoire, WebAssembly
  • Développement de serveur: Node.js, V8, ChakraCore
  • Gestion des états: Redux, MobX, Flux
  • Synchronisation et stockage des données client: REST, GraphQL, Web Sockets
  • Développement mobile: PWA, ReactNative, VueNative
  • Applications de bureau: Electron, NW.js
  • Sécurité: piratage et protection, vulnérabilités dans npm
  • ECMAScript: Caractéristiques des nouvelles spécifications
  • Alternatives JS: Typescript, ClojureScript, Elm, Dart
  • Essais: sélénium, tests unitaires, TDD
  • Cadre: React, Angular, Vue
  • Styles: préprocesseurs, modules CSS, CSS-in-JS, composants stylisés
  • Graphiques: SVG, WebGL, VR
  • Disponibilité: sémantique, ARIA, lecteurs d'écran
  • Prototypage: Figma, systèmes de conception
  • Fan: IoT, Game Dev, expériences
  • Histoires: succès et échecs, interaction avec l'entreprise
  • Autre: API Web, avenir des standards, open source, gestionnaires de packages, etc.

Vous pouvez demander le rapport ici .



Sujets annoncés cette année


Avons-nous besoin de N (e / u) xt.js?
(Grigory Petrov, Evrone)

Dans le rapport, Grigory utilise ces deux cadres pour parler des principales difficultés du développement frontal moderne et comment nous pouvons y faire face: des modèles prêts à l'emploi, du code natif ou de nouvelles architectures d'application. L'orateur montrera des difficultés de la position "pourquoi est-ce arrivé?" et ce qui peut être fait à ce sujet.

GameDev dans Frontend

Anna Blok (Aide Frontend, Concepteur de mise en page typique) et Daria Pushkarskaya (Web Hero School)
Un rapport sur les possibilités de changer de direction si vous avez toujours voulu développer des jeux.

Anna et Daria présenteront une liste de technologies et d'opportunités avec lesquelles les jeux sont créés.
Et à la fin, ils présenteront leur propre jeu afin de montrer qu'il n'y a rien de compliqué.

À propos de Lighthouse
Seryozha Popov (Ligue A. / HTML Academy)

Lighthouse fait tout le sale boulot pour nous, mais nous continuons de l'ignorer. Chaque site et application doit être testé sur cet outil, car dans le monde moderne, le front-end devient important non seulement sur quoi est écrite l'application, mais aussi à quelle vitesse elle se charge et combien d'utilisateurs elle est disponible. Le phare est plus facile à utiliser qu'à ignorer. Sergey parlera de problèmes plus importants qu'ils ne le paraissent et de la façon de résoudre ces problèmes avec Lighthouse.

WebAssembly: nouvelles fonctionnalités et nouveaux problèmes
Polina Gurtovaya (Evil Martians)

Dans le rapport, nous comprendrons ce qu'est WebAssembly.

Parlons de WebAssembly en tant que format non Web, discutons de la façon dont WebAssembly vit dans les navigateurs.

En utilisant V8 comme exemple, voyons comment JS et WASM sont exécutés. Essayons de comprendre ce qui affecte la vitesse d'exécution de JS et WASM, et dans quels cas WASM est plus rapide. Enfin, nous discuterons de l'état actuel de la technologie et des possibilités de son application.

Gestion des monorepositoires à l'aide de NX
Anton Nikulin (Tinkoff.ru)

Aujourd'hui, presque toutes les grandes applications Web sont constituées de nombreuses petites applications qui, à leur tour, utilisent différentes bibliothèques. Si chacun de ces modules indépendants se trouve dans son propre référentiel, la mise à jour d'une seule bibliothèque démarre la mise à jour de toutes les dépendances de la chaîne.

La mise à jour d'aujourd'hui n'est pas non plus aussi simple - à chaque étape de cette chaîne, il est nécessaire de passer par le chemin CI. Et ce sont de nouveaux problèmes potentiels: incompatibilité des versions, tests abandonnés, version obsolète, etc. Si y penser vous fait mal, alors ce rapport est pour vous.
Anton vous dira à quel point il est pratique de tout placer dans un référentiel à l'aide de NX, comment vous pouvez diviser l'application en petites parties sans douleur. Parlons que cela vous donnera comment le vendre à l'équipe et à l'entreprise. Nous regardons «sous le capot», puis regardons les pièges. À la fin, nous découvrirons comment implémenter NX à la maison.



Ce ne sont que quelques demandes que le comité de programme a réussi à considérer, mais plus il y a de demandes, meilleur est le programme!

Souhaitez-vous prendre la parole lors de la plus grande conférence des développeurs dans le district fédéral de l'Oural dans la nouvelle salle des congrès de 400 personnes?

Appliquer avant qu'il ne soit trop tard.

Ou venez / venez à DUMP le 15 mai pour écouter les sujets qui ont traversé un hachoir à viande brutal;)

En plus du programme principal, nous promettons beaucoup de choses intéressantes .

More articles:


All Articles