Wie immer gibt es neben Berichten auch Intensivkurse, Meisterkurse und Workshops sowie natürlich offene Diskussionen (jeder kann dies tun - ein Diskussionsthema vorschlagen und Teilnehmer einladen).
Um Ihren Horizont zu erweitern, haben wir erneut nur kreative und praktische Berichte zu realen Projekten ausgewählt. Es wird Berichte über neue Ideen und Demonstrationen darüber geben, wie alles funktioniert und funktioniert. In den Meisterkursen erfahren Sie, wie Teams plötzliche Schwierigkeiten lösen, welches neue Know-how sie erfunden haben und was sie dadurch erhalten haben. Wir werden auch über Schönheit sprechen.
Und schön und sicher
In der Liste der häufig gestellten Fragen haben die Redner keine Angst davor, tiefer in die Technologie einzusteigen und interessante Ergebnisse zu erzielen. Sie erfahren, wie Sie das Eindringen von außen auf Codeebene verhindern und wie Sie in der statischen Typisierungslaufzeit TypeScript arbeiten. Die Lautsprecher werden ein bisschen Hardcore hinzufügen, und von der Entwicklung der schönen Seite wird es viele interessante Dinge über Sound, Tanz und Ikonen geben.
Alexander Inkin (Tinkoff.ru), ein leidenschaftlicher Winkelentwickler, Google Developer Expert, Komponist und Filmfan, wird seine App vorstellen, um Synthesizer in einem Browser zu spielen. In seinen unglaublichen Demos erklärt Alexander, wie Sie die zwingende Web-Audio-API in einem deklarativen Stil verwenden können. Er wird auch darüber sprechen, was dazu beiträgt, die erstellten Blöcke einfach wiederzuverwenden, und im Allgemeinen ist es bequem, die API in Umgebungen von Webkomponenten oder Frameworks mit einem Komponentenansatz zu verwenden.
Vasilika Klimova (Avaloq) , eine Luxemburger 3D-Evangelistin mit 11 Jahren Erfahrung in der Webentwicklung, liebte es, 3D-Technologie im Front-End einzusetzen, noch bevor sie zum Mainstream wurde. Ich war Frontend-Teamleiter bei Artec3D, wo ich die 3D-Welt von WebGL kennengelernt habe.
Vasilika wird zeigen, wie sie ihrem 3D-Modell das Tanzen beigebracht hat, und Sie werden lernen, was Rigging ist, Modelle häuten und warum 3D-Knochenmodelle.
In unserer Branche denken die Menschen selten an so kleine Haushaltsgegenstände wie SVG-Symbole. Nikita Mostovoy (HeadHunter) , der führende Frontend-Entwickler im Architektur-Team, wird uns in ihre wundervolle Welt eintauchen und uns in einem How-to-Talk erklären , wie das Hinzufügen von Symbolen zur Site durch eine Inline-Komponente optimiert werden kann. Nikita zeigt Ihnen auch, wie Sie das Problem der Nicht-Caching-Symbole während der SSR lösen, Symbole ändern und den Ladevorgang optimieren können.
Wenn Sie Open Source nutzen und ein paar Wochen Training sparen möchten, dann Roman Sedov von Tinkoff.ru, ein Winkelentwickler und Autor eines interaktiven Buches über fortgeschrittene Winkel), wird Ihnen sagen, was Sie tun und wissen müssen. Roman unterstützt und entwickelt Open Source-Projekte in der Angular-Welt und weiß in der Praxis, wie viel Spaß es macht, NPM-Bibliotheken zu erstellen. Und auch, wie man Dokumentation schreibt, wie ein Paket ohne unnötigen Code aussieht, wie man nicht den Eindruck von Rohstoffen anstelle von Quellen erweckt, wie man die Codeüberprüfung einrichtet und wie man sie hochlädt.
Nach dem Hochladen des Codes müssen Sie darauf vorbereitet sein, dass Hacker ihn auch verstehen. Tatiana Novikova (TSARKA) , eine erfahrene Pentester- und Quellcode-Prüferin aus Sicherheitsgründen, wird zeigen, welche Angriffsmethoden vorhanden sind und wie Hacker Frontend-Schwachstellen ausnutzen. Außerdem wird erläutert, warum Web-Frameworks den Entwickler nicht vor Sicherheitsfehlern schützen und wie mit allen umgegangen wird.
Tatiana wird eine Tour durch die Welt der Front-End-Schwachstellen unternehmen, beginnend mit XSS und endend mit nicht den beliebtesten Arten von Angriffen, sodass Sie sicher sagen können, dass Sie ein hygienisches Minimum haben.
Und natürlich ohne Hardcore. Die Front-End-Technologie wird ständig weiterentwickelt, und wir halten mit dieser Entwicklung nicht immer Schritt. Alexander Rudenko (X5Labs) , Senior Software Engineer / Community Lead bei Facebook Developer Circle: Moskau, wird es von der letzten Konferenz fortsetzen. Letztes Jahr hat Alexander uns Relay Modern vorgestellt und dieses Jahr wird er Ihnen erklären, wie Sie mit Network & Data Layers darin arbeiten.
Alexander wird Sie an die Grundprinzipien von Relay Modern erinnern und dann in die Daten- und Netzwerkschicht eintauchen, um über eine kompetente Verbindung zur Serverseite zu sprechen.
Mike Bashurov (WiseBits) , ein normaler Sprecher, TypeScript-Samurai und ReasonML-Fan, erklärt Ihnen, wie Sie statische Eingaben in TS zur Laufzeit ziehen. Wozu? Zum Beispiel zum Validieren von JSON, anderen Daten oder zum eigenschaftsbasierten Testen. Es ist nicht einfach, aber wenn Sie wirklich wollen, dann können Sie!
Mike wird Ihnen zeigen, was typgesteuerte Ausgabe ist, wie man sie verwendet, mit anderen Lösungen vergleicht und sich mit den Transpiler-API-Besonderheiten befasst (und wir werden sehen, wie der Ansatz dieses Ansatzes aussieht. Beobachten Sie, wie sich Typen zur Laufzeit bewegen und Daten validieren ...
Schön nicht nur außen, sondern auch innen
Entwickler möchten auch in schönem und bequemem Code arbeiten. Natürlich ist es schwierig zu beurteilen, ob die Architektur gut ist oder nicht - in einem Projekt wird sie erfolgreich sein und in einem anderen "wird etwas schief gehen". Trotzdem hilft eine verständliche Architektur immer bei der Arbeit an einem Projekt: Die Erweiterung oder Änderung des Codes erfolgt ohne große Schwierigkeiten beim Verstehen und Testen. Auch wenn Sie gerade den Code eines anderen in Ihren Händen haben. In den Berichten des Tracks "Architektur" geht es nur darum, wie man einem Entwickler das Leben leichter machen kann.
Denis Krasnovsky (DomClik) , technischer Entwicklungsleiter, wird erneut einen Bericht über die Codeoptimierung vorlegen. Diesmal wird Denis über die Refactoring-Methode sprechen, die bei vielen Projekten verbessert wurde. Mit seiner Hilfe können Sie dem unverständlichsten Code neues Leben einhauchen.
Mit dem neuen Algorithmus ist es einfacher, eine Entscheidung zur Behebung von Problemen zu treffen, wenn Sie bereits zu einem Projekt mit Legacy gekommen sind.
Ivan Soloviev (Evrone) , nicht nur ein Frontend-JS-Entwickler, sondern auch ein Go and Rust-Praktiker - er vergleicht sie gerne miteinander und mit JavaScript. Ivan wird darüber sprechen, wie sich die Wahl zwischen Monolith und Microservices sowie Mono-Repository und Polyrep auf den Kampf gegen die Komplexität in großen Projekten auswirkt.
Ivan wird auch erläutern, wie die ausgewählte Architektur dazu beitragen wird, Krankheiten eines großen Frontends wie Release-Zyklus, In-Growth-Vendoring, Code-Veralterung, Abhängigkeitsbewertung, Code-Duplizierung und gemeinsam genutzten Code zu verhindern.
Ali Rahimov (Okko), seit 2013 Frontend-Entwickler, wird über die Vorteile von TypeScript in der Webentwicklungsarchitektur sprechen und darüber, warum Entwickler TypeScript zunehmend für ihre Projekte wählen. Und auch über die Vor- und Nachteile der Verwendung der Sprache und wie einfach es ist, Ihre erste Website in TypeScript zu starten.
Ein separater Block wird den Typisierungen gewidmet sein, dem Eckpfeiler der Sprache, über die selbst erfahrene Entwickler stolpern.
Andrey Marchenko (Tinkoff.ru) , Techlead, Entwicklerplattform für Entwickler, wird die Geschichte seines Projekts erzählen. Erfahren Sie, wie sich die Front-End-Architektur in Tinkoff verändert und weiterentwickelt hat. Wie 2015 5 Entwickler die Site tinkoff.ru auf React 0.13 erstellt haben und wie das Projekt jetzt lebt.
Mittlerweile gibt es bereits 60 Entwickler, und der Monolith besteht aus 40 separaten Anwendungen, Mikrofronts, Monoreps und technischen Produkten.
Vladimir Grinenko (Yandex) , Leiter des Shared Components Service in der Abteilung für die Entwicklung von Suchoberflächen, zeigt Ihnen, wie Sie die perfekte Balance finden, um nicht alle in ein einziges Designsystem zu treiben und gleichzeitig die visuelle Selbstidentifikation aufrechtzuerhalten. Da Yandex sehr unterschiedliche Produkte herstellt (Suche, Taxi, Musik, Essen, Bildung und Kino), ist die Konsistenz (Konsistenz) der Schnittstellen zwischen Yandex sowohl aus visueller als auch aus technologischer Sicht ein widersprüchliches Phänomen.
Vladimir zeigt die Formel für die Vorteile von allgemeinem Code: Wo es funktioniert und wo es besser ist, ein eigenes Fahrrad zu schreiben, und erklärt Ihnen, wie Sie den Code ohne Technofaschismus wiederverwenden und Experimente stoppen können.
Schön und mit Ergebnis
Niemand möchte Zeit damit verschwenden, Tests mit unverständlichen Ergebnissen durchzuführen oder schwierige Testbedingungen zu durchlaufen, selbst wenn die Ergebnisse gut sind. Damit das Ergebnis Ihren Erwartungen entspricht, erklären Ihnen unsere Referenten, wie Sie Tests auch für Tester und Manager verständlich machen und wie die Tests aus der Sicht einer ehemaligen Qualitätssicherung aussehen, die auf Entwicklung umgestellt hat. Und in "Testen" werden zusätzlich zu den Berichten selbst Tests durchgeführt, insbesondere NodeJS-Web-Services und UI.
Alexander Iossa (Diginavis) , Produktmanager, Moderator des Senders, über die Schmerzen und Freuden von Softwareentwicklern, wird über BDD-Tests von Webanwendungen sprechen und darüber, wie E2E-Tests billiger und schneller geschrieben werden können. Zeigt, wie die Gherkin-Syntax in Verbindung mit Cypress Tests nicht nur für Entwickler, sondern auch für Tester und Manager verständlich macht.
Alexander wird lehren, wie man Tests schreibt und wer und wann sie schreiben sollen und können. Sie können den Ort der Abnahmetests in der ci / cd-Pipeline bestimmen, zuvor geschriebene Blöcke wiederverwenden und den Testprozess einfach warten und erweitern.
Alexander weiß auch, was man in Innopolis fischt, wo er seit über 4 Jahren lebt. Verpassen Sie nicht die Gelegenheit, ihn danach zu fragen.)
Nikolay Moskalenko (Raiffeisenbank) , Tester mit 10 Jahren Erfahrung, Frontend-Entwickler bei React und Animator, wird unangenehme Fragen zur Qualität des Testens stellen. Wir werden die Situation mit Tests durch die Augen eines ehemaligen QS sehen, der in die Entwicklung gegangen ist. Und lassen Sie uns herausfinden, wie Sie den Code schnell testen können (es gibt mehr Fehler als es scheint!).
Nikolay sagt Ihnen auch, welche Tests besser geeignet sind, um Zeit zu sparen. Sie werden verstehen, welche Techniken und Tools beim Testen von Frontend-Anwendungen externe Abhängigkeiten beseitigen. Aber das ist nicht alles! Nikolay zeigt Ihnen, wie Sie das Schreiben von Autotests in JavaScript beschleunigen und deren Lesbarkeit mithilfe der Gherking-Notation, der Scherz-Gurken-Bibliothek, verbessern können.
Zum Nachtisch gibt es das PageObject-Muster für End-to-End-Tests auf Puppeteer, das die Unterstützung von UI-Autotests vereinfacht.
Und schließlich werden bis zu 2 Test-Meisterklassen von Maxim Sosnov (SKB Kontur) durchgeführt., ein führender Entwickler, ein Motor einer Kultur der technischen Exzellenz, die sich bemüht, agil zu sein und der DevOps-Philosophie zu entsprechen. Maxim erklärt Ihnen, was Muster und Anti-Muster sind, wie Sie nützliche Tests durchführen und wie Sie Tests an ein Team verkaufen, damit Entwickler nicht die Nase voll haben.
Master-Klasse 1. Testen von NodeJS-Web-Diensten
In der ersten Master-Klasse zeigt Maxim, wie ein NodeJS-Service ordnungsgemäß getestet wird. Wie man zuverlässige Funktionstests mit Mokka, Chai, Nock, Supertest unter Verwendung der besten Testpraktiken und des gesunden Menschenverstandes erhält. Mal sehen, wie solche Tests beim Refactoring helfen.
Meisterklasse 2. UI-Tests
Zusammen mit Maxim werden wir die besten Testmethoden an das Layout anpassen und herausfinden, welche Testkombination für UI-Tests ideal ist. Es werden Vorgehensweisen wie Screenshot-Tests und Funktionstests sowie deren einfache Integration in Ihren Entwicklungsprozess behandelt. Gebrauchte Werkzeuge:
- Märchenbuch
- loki.js
- Testbibliothek
- Scherz
Schön und schnell
Was passiert mit dem Benutzer, wenn er die Anwendung öffnet? Wartet er 2 Minuten nach jedem Klick oder taucht er glücklich in die Arbeit ein?
Heutzutage wird die Leistung nicht mehr rückwirkend verbessert, sondern durch Entwicklung. Entwickler überprüfen sofort, wie sich Architekturentscheidungen auf die Geschwindigkeit des Ladens, Renderns, der Interaktivität usw. auswirken. Dies erfordert eine ständige Überwachung. Das Testen und Messen erfordert Metriken, die von einer Vielzahl von Parametern abhängen. Auf welchem Gerät, in welchem Browser, in welchem Netzwerk und mit welcher Firewall hat der Benutzer beispielsweise die Anwendung geöffnet? Ganz zu schweigen von Staging-Servern, Caches, Proxys und anderen Details. Und selbst nach all diesen Bemühungen bleibt die Beschleunigung ein Problem und ein Kopfschmerz für Entwickler.
Trotz all dieser SchwierigkeitenNikolay Ryabov (Avito) befasst sich mit allem, was mit der Leistung des Frontends in Avito zu tun hat - Sammlung von Metriken, Profilerstellung, Optimierung. Nikolay ist überzeugt, dass es die Aufgabe eines Unternehmens ist, Funktionen effizient zu erstellen.
Auf der Konferenz wird Nikolai vorschlagen, die Funktionen von Lighthouse, Webpack-Bundle-Analyzer und Chrome DevTools Performance in einem Tool zu kombinieren. Finden Sie heraus, warum diese Auswahl an Tools allein Ihnen nicht dabei hilft, die Leistung kontinuierlich zu überwachen.
Victor Rusakovich (GP Solutions), ein Frontend-Entwickler, der viele Frameworks und Bibliotheken gesehen hat, mit jQuery, Backbone, Knockout, Angular, Elm, Clojure und RxJS gearbeitet und schließlich reagiert hat. Victor wird ausführlich über Metriken und Tools zum Sammeln von Statistiken über die Leistung von Kundenwebsites sprechen, welche Schlussfolgerungen gezogen werden können, wie Statistiken nicht nur Daten erfassen, sondern auch die Geschwindigkeit von Websites verbessern.
Die Zuhörer des Berichts erhalten Antworten auf folgende Fragen:
- Was und wie sammeln wir?
- Wie und warum analysieren wir?
- Warum Statistiken von Benutzern sammeln?
- Woher wissen Sie, wie schnell Ihre Website geladen und ausgeführt wird?
- Warum sich überhaupt um die Geschwindigkeit der Website kümmern?
Vitaly Sysolyatin (Delivery Club) , Techlead-, JavaScript- und Frontend-Entwickler, erklärt Ihnen, wie Sie SSR so schnell wie möglich erstellen und welche Probleme Sie lösen müssen. Ein Beispiel ist die neue Site Delivery-club.ru, die als Einzelseitenanwendung mit der Implementierung von Server Side Rendering gestartet wurde.
Vitaly wird Ihnen sagen, welche Art von Rechen sie durchlaufen haben und was für einen Frontend-Entwickler in Javascript in einer Serverumgebung ein Problem sein wird. Zusammen mit Vitaly lernen wir, wie Sie JavaScript-Schwachstellen für die Anwendungseffizienz umgehen. Geschichten aus dem wirklichen Leben werden auch da sein!
Alexander Baltsevich (Synesis), ein führender und von Wissenschaftlern geleiteter Blogger, der pädagogische Experimente praktiziert. In Frontend Live wird Alexander erklären, wie React 60 fps liefert, selbst wenn eine große Anzahl von Updates pro Sekunde durchgeführt wird. Lassen Sie uns herausfinden, wie React mit den fortschrittlichsten Algorithmen mit Baumvergleichen in der Größenordnung von O (n ^ 3) eine Vergleichsgeschwindigkeit von O (n) erreicht.
Und natürlich werden wir Kampfbeispiele sehen, wie Sie sich mit einer solchen Beschleunigung in den Fuß schießen können!
Schön quadratisch
Das Gehirn des Entwicklers und des Benutzers arbeitet auf verschiedenen Wellen. Der erste wird die Funktion brillant finden, während der zweite einfach verwirrt wird, wenn versucht wird, die Anzahl der Artikel im Warenkorb zu ändern. Und was der Benutzer will, scheint für ein Genie unerträglich einfach. Entwickler verwenden jedoch auch Apps und leiden in gleicher Weise, wenn Design, Benutzeroberfläche oder sogar Farbe sie daran hindern, das zu bekommen, was sie bestellt haben. In der Designspur werden Berichte zu Farbe und Benutzeroberfläche für Benutzer angezeigt.
Glafira Zhur (SpurIT), ein Teamleiter und Entwickler für Barrierefreiheit, der sich schon in jungen Jahren für Schnittstellen und deren Barrierefreiheit begeistert. Auf Frontend Live wird er über die psychologischen Auswirkungen von Farben sprechen, die nicht von Mode, Trends und der Laune des Kunden abhängen. Es wird gezeigt, wie sich die Farbe in der Benutzeroberfläche auf die Wahrnehmung von Informationen auswirkt und wie Entwickler damit Stimmung, Auswahl und Kundenerfahrung steuern können.
Wir werden auch die Zugänglichkeit von Schnittstellen in Bezug auf Farblösungen kennenlernen.
Anna Selezneva (Spiral Scout) , kreative Frontend-Entwicklerin, Rednerin bei Konferenzen und Meetups, Mitorganisatorin von MinskCSS- und MinskJS-Meetups sowie CSSMinskJS-Konferenzen. Anna wird Sie daran erinnern, dass wir Benutzeroberflächen entwickeln -. Lassen Sie uns lernen, wie Sie die Idee berücksichtigen, dass echte Menschen sie bei der Implementierung einer Schnittstelle verwenden.
Laut Anna war „vor 10 Jahren unser Problem, dass der Browser browserübergreifend abgerundet wurde, und jetzt müssen wir die Website reaktionsschnell, zugänglich und effizient machen“.
Schließlich wird Vitaly Fridman (Smashing Magazine) , Mitbegründer des Online-Magazins, Autor von Büchern und aufgeschlossener Frontend- / UX-Berater, über die Auswirkungen des Servicekomforts auf Conversions und wichtige Geschäftsindikatoren sprechen . In Vitalys Vortrag geht es um die Entwicklung von Webformularen für den Endbenutzer, der häufig den Komfort des gesamten Dienstes genau von ihm bestimmt.
Webformulare sind oft nicht zugänglich und schwer zu verwenden, und Vitaliy beschreibt typische Schwachstellen, mit denen Kunden zu oft konfrontiert sind. Schließlich lernen wir, wie wir eine Schnittstelle erstellen, die es uns ermöglicht, Informationen vom Kunden auf freundliche Weise zu erhalten, wodurch sowohl Conversions als auch die wichtigsten Geschäftsindikatoren verbessert werden.
Die vollständige Liste der Berichte finden Sie auf der Konferenzwebsite . In der mobilen Version der Website können Sie die gewünschten Vorträge zu Ihrem Zeitplan hinzufügen. Vergessen Sie nicht, Ihr Ticket zu buchen (die Preise steigen am 15. September).
Frontend Live 2020findet vom 23. September 2020 bis 2. Oktober 2020 weltweit online statt. Wir haben dafür ein neues Format erstellt, das genauso effektiv ist wie Offline-Meetings. Sie können die Energie der Community spüren, sie aufladen, sich mit Branchenkollegen vernetzen und sich von Experten beraten lassen. Sie können sogar bis zum Morgen eine Online-Afterparty mit Fahrrädern für Ihr Leben und Ihre Karriere veranstalten. Alles ist wie im Leben :) Der
Zeitplan für jeden Tag wurde bereits erstellt, aber kleine Änderungen sind möglich. Und wir werden in Telegramm , Facebook , Twitter und VKontakte über die Event-Chips der Konferenz schreiben .