Get best of the week

Seção de front-end no DUMP2020: defenderemos que haverá uma casa cheia novamente. Principais relatórios do ano passado e tópicos deste

Quem concorda que um front-end moderno é difícil, levante as mãos! Para que estamos sofrendo a configuração do Webpack? Por que a implementação do SSR exige a criação de tanto código e realmente precisamos dele a esse custo? Quem é o culpado e o que podemos, como desenvolvedores, fazer?

Tentamos responder a essas e centenas de outras perguntas na seção Frontend. E de ano para ano, os tópicos estão se tornando mais diversificados e hardcore. E o principal leitmotiv da seção são os experimentos.
Olhe por baixo do corte, quem experimentou o que no ano passado e o que eles contarão e mostrarão neste



Principais temas de 2019


No DUMP de Ecaterimburgo, no ano passado, o primeiro lugar foi no relatório de Alexander Korotaev (Tinkoff.ru). Todo mundo sabe que o WebGL é muito rápido. Quero reescrever tudo imediatamente, mas a tecnologia parece ter voado para a web de outro planeta. O padrão tem quase 9 anos e existem muito poucos especialistas nele.

Alexander falou sobre como desenhar 2D rapidamente, mas simplesmente, usando jogos como exemplo, sem entupir sua cabeça com matrizes e uma API complexa. O relatório discute os conceitos de pré-renderização, shaders e uso da árvore React para desenhar rapidamente no avião.


Vitaly Dmitriev, do 404Group, coletou a mesma casa completa sobre o tema da programação reativa . Vitaliy disse que o paradigma reativo foi implementado por muitos anos nos dispositivos e ecossistemas digitais que nos cercam. Todos os dias usamos dispositivos que podem controlar outros dispositivos, mas se tentarmos reproduzir sua lógica em nossos aplicativos, obtemos um sistema proativo e altamente expansível. Por quê?

Muitas escolas e tutoriais nos ensinam como criar entidades diretamente responsáveis ​​pelo gerenciamento de determinados componentes. Em projetos grandes e complexos, após alguns anos, isso se transforma em um pesadelo complicado e nenhuma ferramenta moderna pode resolver esse problema enquanto os desenvolvedores escrevem um código proativo.

Para saber como pensar de maneira reativa e não proativa, veja a palestra abaixo:


Alexandra Shinkevich falou sobre como implementar padrões de desenvolvimento para que ninguém se machuque . Quase toda equipe tem um debate em andamento sobre questões de tópicos: “Abas ou espaços?”, “Você precisa recuar entre colchetes?”, “Aspas simples ou duplas?”, “Você precisa colocar ponto e vírgula no final das linhas?”. E este é apenas o começo da lista. Mas é realmente necessário discutir isso toda vez que um novo projeto é iniciado, uma revisão de código é feita ou um novo desenvolvedor chega à equipe?


No Kazan DUMP, Denis Kolesnikov, da Avito, contou a difícil história de atualizar a pilha de tecnologia em um projeto com uma longa história . É quase como selecionar um motor de avião em tempo real. Denis conta como iterativamente, eles mudaram progressivamente o front-end no Avito, implementaram a renderização do servidor, o gerenciamento de dependências dos microfrontos, bem como o rake que encontraram e que conclusões tiraram disso tudo.

Este relatório é para desenvolvedores de nível médio e sênior que trabalham com uma grande base de códigos centralizada (e aqueles que desejam cortar essa base de código).


O conteúdo gráfico é metade da página média da web. Para preparar adequadamente essa metade, você precisa entender como as fotos são organizadas e o que você pode fazer com elas .

Polina Gurtova (Evil Martians) analisou a anatomia de diferentes formatos (PNG, JPG, WebP, SVG e outros) e contou como escolher o caminho certo.

Ela explica imediatamente por que escolher um formato é apenas um pequeno passo no caminho divertido das otimizações e explica o que fazer em seguida.


O SvelteJS é uma das estruturas JavaScript de crescimento mais rápido. Ele pode deslocar do ponto de vista de React, Angular e Vue?

Pavel Malyshev, mantenedor do projeto e facilitador da comunidade de língua russa, falou sobre o estado atual da estrutura do SvelteJS, seu ecossistema e comunidade, e também por que não é "mais uma estrutura do JS" e você deve examiná-la mais de perto.


No aniversário do DUMP2020, em Ecaterimburgo, o salão da seção Frontend agora acomodará 400 pessoas. Vanguardaremos que esta sala será 100% preenchida em alguns relatórios.

Comitê do programa da seção: Polina Gurtovaya (Evil Marcianos) e Yegor Khodyrev (Tochka) conversaram sobre quais tópicos estão esperando e quais já foram anunciados.

Conceito e aplicação DUMP2020


Estamos à procura de relatórios em russo e inglês com duração de 30 a 40 minutos. Se você nunca se apresentou em nenhum lugar antes - não há problema. Ajudaremos você a refletir sobre a estrutura, coletar conteúdo e ensaiar a apresentação.

Para inspiração, preparamos uma lista de tópicos que nos interessam. A lista não é exaustiva; estamos abertos ao novo e estamos considerando todas as aplicações.

Tópicos chave



  • Ferramentas: IDEs, plugins, linters, construtores
  • Metodologias, arquitetura e princípios: SOLID, microsserviços, BEM
  • Otimização: desempenho, gerenciamento de memória, WebAssembly
  • Desenvolvimento de servidor: Node.js, V8, ChakraCore
  • Gerenciamento de Estado: Redux, MobX, Flux
  • Sincronização e armazenamento de dados do cliente: REST, GraphQL, Web Sockets
  • Desenvolvimento móvel: PWA, ReactNative, VueNative
  • Aplicações para desktop: Electron, NW.js
  • Segurança: hackers e proteção, vulnerabilidades em npm
  • ECMAScript: Recursos de novas especificações
  • Alternativas de JS: Texto datilografado, ClojureScript, Elm, Dart
  • Teste: Selênio, testes unitários, TDD
  • Estrutura: Reagir, Angular, Vue
  • Estilos: Pré-processadores, Módulos CSS, CSS-in-JS, Componentes com estilo
  • Placa gráfica: SVG, WebGL, VR
  • Disponibilidade: semântica, ARIA, leitores de tela
  • Prototipagem: Figma, sistemas de projeto
  • Fã: IoT, desenvolvedor de jogos, experimentos
  • Histórias: sucessos e fracassos, interação com os negócios
  • Outros: API Web, o futuro dos padrões, código aberto, gerenciadores de pacotes, etc.

Você pode solicitar o relatório aqui .



Tópicos anunciados este ano


Precisamos de N (e / u) xt.js?
(Grigory Petrov, Evrone)

No relatório, Grigory usa essas duas estruturas para falar sobre as principais dificuldades do desenvolvimento moderno de front-end e como podemos lidar com elas: modelos prontos, código nativo ou novas arquiteturas de aplicativos. O orador mostrará dificuldades da posição "por que isso aconteceu?" E o que pode ser feito sobre isso.

GameDev no front

- end Anna Blok (ajuda do front-end, designer de layout típico) e Daria Pushkarskaya (escola de heróis da Web)
Um relatório sobre as possibilidades de mudar de direção se você sempre sonhou em desenvolver jogos.

Anna e Daria mostrarão uma lista de tecnologias e oportunidades com as quais os jogos são criados.
E no final eles apresentarão seu próprio jogo para mostrar que não há nada complicado.

Sobre o Lighthouse
Seryozha Popov (Liga A. / HTML Academy) O

Lighthouse faz todo o trabalho sujo para nós, mas continuamos a ignorá-lo. Todo site e aplicativo deve ser testado nessa ferramenta, pois no mundo moderno o front-end se torna importante não apenas no que o aplicativo está escrito, mas com a rapidez com que ele carrega e com quantos usuários ele está disponível. Farol é mais fácil de usar do que ignorar. Sergey falará sobre problemas que são mais importantes do que parecem e como resolvê-los com o Lighthouse.

WebAssembly: novos recursos e novos problemas
Polina Gurtovaya (Evil Marcianos)

No relatório, entenderemos o que é WebAssembly.

Vamos falar sobre o WebAssembly como um formato não Web, discutir como o WebAssembly vive nos navegadores.

Usando a V8 como exemplo, vamos ver como JS e WASM são executados. Vamos tentar entender o que afeta a velocidade de execução de JS e WASM e, nesses casos, o WASM é mais rápido. E, finalmente, discutiremos o status atual da tecnologia e as possibilidades de sua aplicação.

Gerenciando monorepositórios com o NX
Anton Nikulin (Tinkoff.ru)

Atualmente, quase qualquer aplicativo Web grande consiste em muitos aplicativos menores, que, por sua vez, usam bibliotecas diferentes. Se cada um desses módulos independentes estiver em seu próprio repositório, a atualização de uma única biblioteca começará a atualizar todas as dependências na cadeia.

A atualização hoje também não é tão simples - em todas as etapas desta cadeia, você deve seguir o caminho do IC. E esses são novos problemas em potencial: incompatibilidade de versões, testes descartados, versão desatualizada e assim por diante. Se pensar nisso te machuca, então este relatório é para você.
O Anton lhe dirá como é conveniente colocar tudo em um repositório usando o NX, como você pode dividir o aplicativo em pequenas partes sem problemas. Vamos falar que ele lhe dará como vendê-lo para a equipe e os negócios. Nós olhamos “por baixo do capô” e depois olhamos para as armadilhas. No final, descobriremos como implementar o NX em casa.



Esses são apenas alguns aplicativos que o comitê do programa conseguiu considerar, mas quanto mais aplicativos, melhor o programa!

Você gostaria de falar na maior conferência de desenvolvedores no Distrito Federal dos Urais, no novo Salão do Congresso, para 400 pessoas?

Aplique antes que seja tarde demais.

Ou venha / venha ao DUMP em 15 de maio para ouvir os tópicos que passaram por um moedor de carne brutal;)

Além do programa principal, prometemos muitas coisas interessantes .

More articles:


All Articles