A meeting of JavaScript developers MoscowJS was held at the Superjob office. We tell what the participants discussed and share the presentations.
Alexander Savin, Superjob')
It is difficult to overestimate the importance of testing in the development process. Testing interfaces with screenshots is one of the approaches that not only signals regression in CSS in time, but also allows refactoring of templates and styles without changing tests, simplifies the review process.
However, with the introduction of such testing, there are a number of typical problems, starting with choosing the right tool and ending with the uncontrolled growth of the git repository, caused by storing a large number of reference images. The report discusses current testing tools with screenshots, provides solutions to problems encountered in organizing testing.
Denis Izmailov, AxeptThe last 6 months in the global JavaScript-community a lot of noise is happening around the CSS-in-JS libraries. No wonder. High market competition raises demands on the quality of web applications. Along with the requirements and complexity increases. Developers are beginning to understand that CSS, including SASS and CSS modules, and the low level of control over the styles they provide are unacceptable today in the development of web applications. With all this, JavaScript has successfully gone beyond the browser, being in mobile, VR-and Desktop-applications.
In his report, Denis showed CSS problems and how JSS solves them. But JSS, in turn, is not without flaws. There are common problems in CSS-in-JS solutions (including React Native), such as migration complexity, learning curve, and lack of integration with the CSS ecosystem. To solve all these problems, Denis and his team developed PreJSS, a tool that, having gathered the best practices, slowly but surely began to gain popularity in the world.
Ivan Lyagushkin, Alpha LaboratoryThe component approach allows you to greatly simplify and accelerate the development of web applications. React is a great tool for creating component libraries, but it introduces its limitations, one of them is a cascade render. This limitation is particularly relevant when attempting to create universal pop-up windows. We had to use several helper wrappers, unstable ReactDOM library methods, context, and common sense to teach our pop-up windows to be drawn into arbitrary nodes in the DOM tree. But now in our library the most universal popaps in the world, tooltips, selects and modal windows.
Mikhail Busyrev, Crazy PandaIn addition to the problem of correctly setting benchmarks, it is very important to further monitor the performance of the application. Performance can degrade for many reasons, often not directly related to the code that slows down. The report demonstrated how by replacing the target standard when transcribing from TypeScript to es3 and es2016, you can get a radically different performance not in favor of the latter standard. To make sure that all applied optimizations work in favor, and refactorings and updates do not kill performance, you should treat the benchmark as an integration test of application performance in an environment close to reality as far as possible in principle.
All photos from the event to the official group
Superjob IT-meetup