Get best of the week

Frontend-Bereich zu DUMP2020: Wir werden davon ausgehen, dass es wieder ein volles Haus geben wird. Top-Berichte des letzten Jahres und Themen dazu

Wer zustimmt, dass ein modernes Frontend schwierig ist, hebt die Hände! Wofür leiden wir, wenn wir Webpack einrichten? Warum erfordert die SSR-Implementierung das Schreiben von so viel Code, und brauchen wir ihn wirklich zu diesem Preis? Wer ist schuld und was können wir als Entwickler tun?

Wir versuchen, diese und Hunderte anderer Fragen im Frontend-Bereich zu beantworten. Und von Jahr zu Jahr werden die Themen vielfältiger und härter. Das Hauptleitmotiv des Abschnitts sind Experimente.
Schauen Sie unter den Schnitt, wer experimentiert hat, was letztes Jahr und was sie darin erzählen und zeigen werden



Top 2019 Themen


Beim Jekaterinburg DUMP im vergangenen Jahr ging der erste Platz an den Bericht von Alexander Korotaev (Tinkoff.ru). Jeder weiß, dass WebGL sehr schnell ist. Ich möchte sofort alles darauf umschreiben, aber die Technologie sieht so aus, als wäre sie von einem anderen Planeten ins Internet geflogen. Der Standard ist fast 9 Jahre alt und es gibt nur sehr wenige Spezialisten.

Alexander sprach darüber, wie man schnell 2D zeichnet, aber einfach am Beispiel von Spielen, ohne seinen Kopf mit Matrizen und einer komplexen API zu verstopfen. In dem Bericht werden die Konzepte des Pre-Renderings, der Shader und der Verwendung des React-Baums zum schnellen Zeichnen in der Ebene erläutert.


Vitaly Dmitriev von 404Group hat das gleiche Haus zum Thema reaktive Programmierung gesammelt . Vitaliy sagte, dass das reaktive Paradigma seit vielen Jahren in den uns umgebenden Geräten und digitalen Ökosystemen implementiert ist. Jeden Tag verwenden wir Geräte, die andere Geräte steuern können. Wenn wir jedoch versuchen, ihre Logik in unseren Anwendungen zu reproduzieren, erhalten wir ein stark erweiterbares, proaktives System. Warum?

In vielen Schulen und Tutorials erfahren Sie, wie Sie Entitäten erstellen, die direkt für die Verwaltung bestimmter Komponenten verantwortlich sind. In komplexen Großprojekten wird dies nach ein paar Jahren zu einem verwirrenden Albtraum, und kein modernes Tool kann dieses Problem lösen, während Entwickler proaktiven Code schreiben.

Informationen zum reaktiven und nicht zum proaktiven Denken finden Sie im folgenden Vortrag:


Alexandra Shinkevich sprach darüber, wie Entwicklungsstandards implementiert werden können, damit niemand verletzt wird . Fast jedes Team führt eine fortlaufende Debatte zu aktuellen Themen: "Tabulatoren oder Leerzeichen?", "Müssen Sie zwischen Klammern einrücken?", "Einfache oder doppelte Anführungszeichen?", "Müssen Sie Semikolons am Zeilenende einfügen?". Und dies ist nur der Anfang der Liste. Aber ist es wirklich notwendig, dies jedes Mal zu besprechen, wenn ein neues Projekt startet, eine Codeüberprüfung durchgeführt wird oder wenn ein neuer Entwickler zum Team kommt?


Bei Kazan DUMP erzählte Denis Kolesnikov von Avito die schwierige Geschichte der Aktualisierung des Technologie-Stacks in einem Projekt mit einer langen Geschichte . Es ist fast so, als würde man einen Flugzeugmotor im laufenden Betrieb sortieren. Denis erzählt, wie iterativ und schrittweise das Front-End in Avito geändert, das Server-Rendering implementiert, das Abhängigkeitsmanagement von Mikrofronts implementiert wurde, welche Rake sie getroffen haben und welche Schlussfolgerungen sie daraus gezogen haben.

Dieser Bericht richtet sich an mittlere und ältere Entwickler, die mit einer großen zentralisierten Codebasis arbeiten (und an diejenigen, die diese Codebasis kürzen möchten).


Grafischer Inhalt ist die Hälfte der durchschnittlichen Webseite. Um diese Hälfte richtig vorzubereiten, müssen Sie verstehen, wie die Bilder angeordnet sind und was Sie damit machen können .

Polina Gurtova (Evil Martians) analysierte die Anatomie verschiedener Formate (PNG, JPG, WebP, SVG und andere) und erklärte, wie man das richtige auswählt.

Sie erklärt sofort, warum die Auswahl eines Formats nur ein kleiner Schritt auf dem unterhaltsamen Weg der Optimierung ist, und erklärt Ihnen, was Sie als Nächstes tun müssen.


SvelteJS ist eines der am schnellsten wachsenden JavaScript-Frameworks. Kann er vom Standpunkt von React, Angular und Vue verdrängen?

Pavel Malyshev, der Projektbetreuer und Vermittler der russischsprachigen Gemeinschaft, sprach über den aktuellen Stand des SvelteJS-Frameworks, seines Ökosystems und seiner Community sowie darüber, warum es kein „weiteres JS-Framework“ ist, und Sie sollten es sich genauer ansehen.


Zum Jubiläum DUMP2020 in Jekaterinburg wird die Frontend-Sektionshalle nun 400 Personen aufnehmen. Wir werden davon ausgehen, dass dieser Raum in einigen Berichten zu 100% gefüllt sein wird.

Sektionsprogrammkomitee: Polina Gurtovaya (Evil Martians) und Yegor Khodyrev (Tochka) sprachen darüber, welche Themen warten und welche bereits angekündigt sind.

Konzept und Anwendung DUMP2020


Wir suchen nach Berichten in russischer und englischer Sprache, die 30-40 Minuten dauern. Wenn Sie noch nie zuvor gespielt haben - kein Problem. Wir helfen Ihnen, die Struktur zu durchdenken, Inhalte zu sammeln und die Präsentation zu proben.

Zur Inspiration haben wir eine Liste von Themen zusammengestellt, die uns interessieren. Die Liste ist nicht vollständig, wir sind offen für Neues und prüfen alle Anträge.

Schlüsselthemen



  • Tools: IDEs, Plugins, Linters, Builder
  • Methoden, Architektur und Prinzipien: SOLID, Microservices, BEM
  • Optimierung: Leistung, Speicherverwaltung, WebAssembly
  • Serverentwicklung: Node.js, V8, ChakraCore
  • Zustandsverwaltung: Redux, MobX, Flux
  • Synchronisierung und Speicherung von Clientdaten: REST, GraphQL, Web Sockets
  • Mobile Entwicklung: PWA, ReactNative, VueNative
  • Desktop-Anwendungen: Electron, NW.js.
  • Sicherheit: Hacking und Schutz, Schwachstellen in npm
  • ECMAScript: Funktionen neuer Spezifikationen
  • JS-Alternativen: Typoskript, ClojureScript, Elm, Dart
  • Prüfung: Selen, Unit-Tests, TDD
  • Framework: Reagieren, Winkel, Vue
  • Stile: Präprozessoren, CSS-Module, CSS-in-JS, gestaltete Komponenten
  • Grafik: SVG, WebGL, VR
  • Verfügbarkeit: Semantik, ARIA, Screenreader
  • Prototyping: Figma, Designsysteme
  • Fan: IoT, Game Dev, Experimente
  • Geschichten: Erfolge und Misserfolge, Interaktion mit dem Geschäft
  • Sonstiges: Web-API, Zukunft der Standards, Open Source, Paketmanager usw.

Sie können für den Bericht gelten hier .



Themen in diesem Jahr angekündigt


Benötigen wir N (e / u) xt.js?
(Grigory Petrov, Evrone)

In dem Bericht verwendet Grigory diese beiden Frameworks, um über die Hauptschwierigkeiten der modernen Front-End-Entwicklung zu sprechen und darüber, wie wir damit umgehen können: vorgefertigte Vorlagen, nativer Code oder neue Anwendungsarchitekturen. Der Redner wird Schwierigkeiten aus der Position "Warum ist es passiert?" Zeigen. und was kann man dagegen tun?

GameDev im Frontend

Anna Blok (Frontend-Hilfe, typischer Layout-Designer ) und Daria Pushkarskaya (Web Hero School)
Ein Bericht über die Möglichkeiten, die Richtung zu ändern, wenn Sie schon immer davon geträumt haben, Spiele zu entwickeln.

Anna und Daria zeigen eine Liste der Technologien und Möglichkeiten, mit denen Spiele erstellt werden.
Und am Ende werden sie ihr eigenes Spiel präsentieren, um zu zeigen, dass es nichts Kompliziertes gibt.

Über Lighthouse
Seryozha Popov (Liga A. / HTML Academy)

Lighthouse erledigt die ganze Drecksarbeit für uns, aber wir ignorieren sie weiterhin. Jede Site und Anwendung sollte mit diesem Tool getestet werden, da in der modernen Welt das Front-End nicht nur wichtig ist, worauf die Anwendung geschrieben ist, sondern auch, wie schnell sie geladen wird und wie viele Benutzer verfügbar sind. Leuchtturm ist einfacher zu bedienen als zu ignorieren. Sergey wird über Probleme sprechen, die wichtiger sind als sie scheinen, und wie man diese Probleme mit Lighthouse löst.

WebAssembly: Neue Funktionen und neue Probleme
Polina Gurtovaya (Evil Martians)

Im Bericht werden wir verstehen, was WebAssembly ist.

Lassen Sie uns über WebAssembly als Nicht-Web-Format sprechen und diskutieren, wie WebAssembly in Browsern funktioniert.

Lassen Sie uns am Beispiel von V8 sehen, wie JS und WASM funktionieren. Versuchen wir zu verstehen, was sich auf die Ausführungsgeschwindigkeit von JS und WASM auswirkt und in welchen Fällen WASM schneller ist. Abschließend werden wir den aktuellen Stand der Technologie und die Möglichkeiten ihrer Anwendung diskutieren.

Verwalten von Monorepositorys mit NX
Anton Nikulin (Tinkoff.ru)

Heutzutage besteht fast jede große Webanwendung aus vielen kleineren, die wiederum unterschiedliche Bibliotheken verwenden. Wenn sich jedes dieser unabhängigen Module in einem eigenen Repository befindet, werden beim Aktualisieren auch nur einer Bibliothek alle Abhängigkeiten in der Kette aktualisiert.

Das heutige Update ist auch nicht so einfach - in jeder Phase dieser Kette ist es notwendig, den CI-Pfad zu durchlaufen. Und dies sind neue potenzielle Probleme: Inkompatibilität von Versionen, verworfene Tests, veraltete Version und so weiter. Wenn es Ihnen weh tut, darüber nachzudenken, dann ist dieser Bericht für Sie.
Anton wird Ihnen sagen, wie bequem es ist, mit NX alles in einem Repository zu platzieren, und wie Sie die Anwendung ohne Schmerzen in kleine Teile aufteilen können. Lassen Sie uns darüber sprechen, wie Sie es an das Team und das Unternehmen verkaufen können. Wir schauen „unter die Haube“ und schauen uns dann die Fallstricke an. Am Ende werden wir herausfinden, wie NX zu Hause implementiert wird.



Dies sind nur einige wenige Anträge, die das Programmkomitee geprüft hat. Je mehr Anträge, desto besser das Programm!

Möchten Sie auf der größten Entwicklerkonferenz im Bundesbezirk Ural in der neuen Kongresshalle in der Halle für 400 Personen sprechen?

Bewerben Sie sich, bevor es zu spät ist.

Oder kommen / kommen Sie am 15. Mai zu DUMP, um sich die Themen anzuhören, die durch einen brutalen Fleischwolf gingen;)

Zusätzlich zum Hauptprogramm versprechen wir viele interessante Dinge .

More articles:


All Articles