As always, in addition to reports, there will also be intensives, master classes and workshops, and, of course, open discussions (anyone can do this - suggest a topic for discussion and invite participants).
To expand your horizon, we again chose only creative and practical reports on real-life projects. There will be reports on new ideas and demonstrations on how it all works and works. At the master classes, we will tell you how teams solve sudden difficulties, what new know-how they invented and what they got as a result. We will also talk about beauty.
And beautiful and safe
In the common questions track, speakers are not afraid to dig deeper into technology and come back with interesting results. They will tell you how to prevent penetration from the outside at the code level, as well as how to work in the static typing runtime TypeScript. The speakers will add a bit of hardcore, and from the beautiful-side development there will be a lot of interesting things about sound, dance and icons.
Alexander Inkin (Tinkoff.ru), a passionate angular developer, Google Developer Expert, composer and film fan, will showcase his app to play synthesizer in a browser. In his incredible demos, Alexander will explain how you can use the imperative Web Audio API in a declarative style. He will also talk about what will help to easily reuse the created blocks, and in general it is comfortable to use the API in the environments of web components or frameworks with a component approach.
Vasilika Klimova (Avaloq) , a 3D evangelist from Luxembourg with 11 years of experience in web development, loved to use 3D technology in the frontend even before it was mainstream. Was Frontend Team Lead at Artec3D, where I got acquainted with the 3D world of WebGL.
Vasilika will show how she taught her 3D model to dance, and you will learn what rigging is, skinning models and why 3D bone models.
In our industry, people rarely think of such small household items as svg icons. Nikita Mostovoy (HeadHunter) , the leading frontend developer in the architecture team, will immerse us in their wonderful world and tell us in a how-to talk how to optimize the addition of icons to the site through an inline component. Nikita will also show you how to solve the problem of non-caching icons during SSR, how to change icons and optimize the process of their loading.
If you want to open source and save a couple of weeks on training, then Roman Sedov from Tinkoff.ru, an angular developer and author of an interactive book on advanced angular), will tell you what you need to be able to do and know. Roman supports and develops open source projects in the Angular world and knows in practice how fun it is to create NPM libraries. And also how to write documentation, how a package looks without unnecessary code, how not to give the impression of raw materials instead of sources, how to set up code verification and how to upload it.
After uploading the code, you need to be prepared that hackers will also understand it. Tatiana Novikova (TSARKA) , an experienced pentester and source code auditor from a security point of view, will show what attack vectors exist and how hackers exploit frontend vulnerabilities. It will also explain why web frameworks do not protect the developer from security errors and how to deal with them all.
Tatiana will take a tour of the world of front-end vulnerabilities, starting with XSS and ending with not the most popular types of attacks, so that you can confidently say that you have a hygienic minimum.
And of course, where is it without hardcore. Front-end technologies are constantly evolving, and we don't always keep up with this development. Alexander Rudenko (X5Labs) , Senior Software Engineer / Community Lead at Facebook Developer Circle: Moscow, will continue it from the last conference. Last year Alexander introduced us to Relay Modern , and this year he will tell you how to work with Network & Data Layers in it.
Alexander will remind you of the basic principles of Relay Modern, and then dive into the data layer and the network layer to talk about a competent connection to the server side.
Mike Bashurov (WiseBits) , a regular speaker, TypeScript samurai and ReasonML fan, will tell you how to drag static typing in TS to runtime. What for? For example, for validating JSON, other data, or for property-based testing. It is not easy, but if you really want to, then you can!
Mike will show you what type-directed emit is, how to use it, compare it with other solutions, and dive into the transpiler APIs (and we'll see the pitfalls of this approach. Come watch how types move to runtime and validate data) ...
Beautiful not only outside, but also inside
Developers also want to work in beautiful and convenient code. Of course, it is difficult to assess whether the architecture is good or not - in one project it will be successful, and in another "something goes wrong." Nevertheless, a clear architecture always helps the work on a project: extending or changing the code takes place without great difficulties in understanding and testing it. Even if you just got someone else's code in your hands. The reports of the "Architecture" track are just about how to make life easier for a developer.
Denis Krasnovsky (DomClik) , technical development manager, will again please with a report on code optimization. This time Denis will talk about the refactoring methodology honed on many projects. With its help, you can breathe new life into the most incomprehensible code.
With the new algorithm, it will be easier to make a decision to deal with problems when you have already come to a project with legacy.
Ivan Soloviev (Evrone) , not only a frontend JS developer, but also a Go and Rust practitioner - he likes to compare them with each other and with JavaScript. Ivan will talk about how the choice between monolith and microservices, as well as mono-repository and polyrep, affects the struggle with complexity in large projects.
Ivan will also share how the chosen architecture will help prevent such diseases of a large frontend as release cycle, in-growth vendoring, code obsolescence, dependency assessment, code duplication, and shared code.
Ali Rahimov (Okko), a frontend developer since 2013, will talk about the benefits of TypeScript in web development architecture and why developers are increasingly choosing TypeScript for their projects. And also about the pros and cons of using the language and how easy it is to start your first website in TypeScript.
A separate block will be devoted to typings, the cornerstone of the language that even experienced developers stumble over.
Andrey Marchenko (Tinkoff.ru) , techlead, developer platform for developers, will tell the story of his project. Find out how the frontend architecture at Tinkoff has changed and evolved. How in 2015 5 developers created the site tinkoff.ru on React 0.13 and how the project lives now.
Now there are already 60 developers, and the monolith consists of 40 separate applications, microfronts, monoreps and technical products.
Vladimir Grinenko (Yandex) , Head of Shared Components Service in the Search Interface Development Department, will show you how to find the perfect balance so as not to drive everyone into a single design system and at the same time maintain visual self-identification. Since Yandex makes very different products (search, taxi, music, food, education, and cinema), the consistency (consistency) of interfaces across Yandex is a contradictory phenomenon both from a visual and technological point of view.
Vladimir will show the formula for the benefits of common code: where it will work, and where it is better to write your own bike, and will tell you how to reuse the code without technofascism and stopping experiments.
Nice and with result
No one wants to waste time testing with incomprehensible results or wading through difficult testing conditions, even if the results are good. To make the result meet your expectations, our speakers will tell you how to make tests understandable even for testers and managers, how the tests look from the perspective of a former QA who switched to development. And in "Testing", in addition to reports, there will be tests themselves, in particular, nodejs-web-services and UI.
Alexander Iossa (Diginavis) , product manager, host of the channel about the pains and joys of software engineers, will talk about BDD testing of web applications and how it helps write E2E tests cheaper and faster. Shows how Gherkin syntax in conjunction with Cypress makes tests understandable not only for developers, but also for testers and managers.
Alexander will teach how to write tests, as well as who and when should and can write them. You will be able to define the place of acceptance tests in the ci / cd pipeline, reuse previously written blocks, and then it is easy to maintain and expand the testing process.
Alexander also knows what to fish in Innopolis, where he has been living for over 4 years. Don't miss the chance to ask him about it)
Nikolay Moskalenko (Raiffeisenbank) , tester with 10 years of experience, frontend developer on React and animator, will ask awkward questions about the quality of testing. We will see the situation with tests through the eyes of a former QA who moved into development. And let's figure out how to quickly test the code (there are more defects than it seems!).
Nikolay will also tell you which tests are better to choose to save time. You will understand what techniques and tools eliminate external dependencies when testing frontend applications. But that's not all! Nikolay will tell you how to speed up writing autotests in JavaScript and increase their readability using Gherking notation, the jest-cucumber library.
For dessert, there is the PageObject pattern for end-to-end tests on Puppeteer, which simplifies the support of UI autotests.
And finally, as many as 2 testing master classes will be conducted by Maxim Sosnov (SKB Kontur), a lead developer, an engine of a culture of technical excellence that strives to be agile and conform to the DevOps philosophy. Maxim will tell you what patterns and anti-patterns are, how to make useful tests, and how to sell tests to a team so that developers don't turn up their noses.
Master class 1. Testing nodejs-web services
In the first master class Maxim will show how to properly test a nodejs service. How to use mocha, chai, nock, supertest, best testing practices and common sense to get reliable functional tests. Let's see how such tests can help with refactoring.
Master class 2. UI testing
Together with Maxim, we will adapt the best testing practices to layout and figure out which test combination is ideal for UI testing. It will cover practices such as screenshot testing and functional testing and how to easily incorporate them into your development process. Used tools:
- storybook
- loki.js
- testing-library
- jest
Nice and fast
What happens to the user when he opens the application? Does he wait 2 minutes after each click or happily immerse himself in work?
Nowadays, performance is no longer being improved retroactively, but by development. Developers immediately check how architectural decisions affect the speed of loading, rendering, interactivity, etc. This requires constant monitoring. Testing and measurement requires metrics that depend on a huge number of parameters. For example, on what device, in what browser, on what network and with what firewall did the user open the application? Not to mention staging servers, caches, proxies and other details. And even after all these efforts, acceleration remains a problem and a headache for developers.
Despite all these difficulties,Nikolay Ryabov (Avito) , deals with everything related to the performance of the frontend inside Avito - collection of metrics, profiling, optimization. Nikolay is convinced that the task of a business is to make features efficiently.
At the conference, Nikolai will propose to combine the capabilities of Lighthouse, webpack-bundle-analyzer and Chrome DevTools Performance in one tool. Find out why this assortment of tools alone will not help you monitor performance on an ongoing basis.
Victor Rusakovich (GP Solutions), a frontend developer who has seen many frameworks and libraries, working with jQuery, Backbone, Knockout, Angular, Elm, Clojure and RxJS and finally React. Victor will talk in detail about metrics and tools for collecting statistics on the performance of client sites, what conclusions can be drawn, how statistics not only collect data, but also improve the speed of sites.
Listeners of the report will receive answers to questions:
- What and how do we collect?
- How and why do we analyze?
- Why collect statistics from users?
- How do you know how fast your site is loading and performing?
- Why bother with website speed at all?
Vitaly Sysolyatin (Delivery Club) , techlead, JavaScript and frontend developer, will tell you how to make SSR as fast as possible and what problems you will have to solve. An example is the new site delivery-club.ru, which was launched as a Single Page Application with the Server Side Rendering implementation.
Vitaly will tell you what kind of rake they went through, and what will be a problem for a frontend developer in javascript in a server environment. Together with Vitaly, we will learn how to bypass JavaScript weaknesses for application efficiency. Real life stories will be there too!
Alexander Baltsevich (Synesis), a lead and scientist-headed blogger who practices educational experiments. On Frontend Live, Alexander will explain how React delivers 60 fps even with a huge stream of updates every second. Let's figure out how React achieves a comparison speed of O (n) using the most advanced algorithms with tree comparisons of the order of O (n ^ 3).
And of course, we'll see combat examples of how you can shoot yourself in the foot with such acceleration!
Beautifully squared
The brain of the developer and the user operates on different waves. The first will find the feature brilliant, while the second will simply get confused when trying to change the number of items in the basket. And what the user wants seems unbearably simple for a genius. Yet developers also use apps and suffer the same way when design, interface, or even color prevent them from getting their hands on what they ordered. In the design track, there will be reports on color and interface for users.
Glafira Zhur (SpurIT), a teamlead and accessibility developer, passionate about interfaces and their accessibility from a young age. On Frontend Live, he will talk about the psychological impact of color, which does not depend on fashion, trends and the whim of the customer. It will reveal how color in the interface affects the perception of information, and how developers can use it to control mood, choice and customer experience.
We will also learn about the accessibility of interfaces in terms of color solutions.
Anna Selezneva (Spiral Scout) , creative frontend developer, speaker at conferences and meetups, co-organizer of MinskCSS and MinskJS meetups and CSSMinskJS conferences. Anna will remind you that we are developing user interfaces -. Let's learn how to keep in mind the idea that real people will use it when implementing an interface.
According to Anna, “10 years ago, our problem was cross-browser rounded corners, and now we need to make the site responsive, accessible and efficient”.
Finally, Vitaly Fridman (Smashing Magazine) , co-founder of the online magazine, author of books and open-minded frontend / UX consultant, will talk about the impact of service convenience on conversions and key business indicators . Vitaly's talk will be about the development of web forms for the end user, who often determines the convenience of the entire service precisely by them.
Web forms are often inaccessible and difficult to use, and Vitaliy will describe typical pain points that clients encounter too often. Finally, we will learn how to create an interface that allows us to receive information from the client in a friendly way, thereby helping both conversions and increase the key business indicators.
See the full list of reports on the conference website . In the mobile version of the site, you can add the talks you like to your schedule. Don't forget to book your ticket (prices will go up on September 15).
Frontend Live 2020will be held September 23, 2020 - October 2, 2020 online worldwide. We have created a new format for it, which is as effective as offline meetings. You will be able to feel the energy of the community, recharge it, connect with industry peers and get advice from experts. You can even have an online afterparty with bikes until the morning for your life and career. Everything is like in life :) The
schedule of each day has already been drawn up, but small changes are possible. And we will write about the event-chips of the conference in telegram , facebook , twitter , and VKontakte .