DevTools on Elbrus: bright reports of HolyJS 2018 Piter



After catching our breath after St. Petersburg- based HolyJS , we read all the audience reviews - and we learned what reports the audience liked most. And due to the fact that during the conference was YouTube-broadcast of the first hall, some of these "favorites" is already available to all.

Therefore, we decided to tell you about the last conference in the following way: to describe several reports that were loved by viewers (citing for example quotes from them), and in cases where the report was broadcast, give a link to the timecode immediately. You can get a general impression of the event, and personally join the story there.

In addition to reports


But first, a few words about other memorable moments of HolyJS:



First, besides the reports, this time there were three discussions on the format of “Birds of a Feather”: a number of speakers sit around, everyone gathers, and an informal (without cameras and microphones) discussion of the burning topic begins. In total, there were three BoF sessions with the themes “Node.js in Enterprise”, “Client-side optimization” and “What, apart from JS, a decent developer should know”.

Secondly, there was enough action on the sponsor stands, and many especially liked the Code in the Dark competition on the VK stand. Two participants sit down at laptops and try to form a page in 10 minutes, but at the same time they can only see the “correct” layout and their code, but they don’t see the result of their own actions. But he is visible to the audience, allowing them to compare - it turned out almost a meme "expectation and reality."

The photos do not convey the process, so I tried to shoot a short video on the phone, when the developer of VK Timofey Chaptykov was behind the laptop. The record was very amateur, but at least some idea gives:



And now - to the reports:

Vitaly Friedman


The founder of Smashing Magazine became the absolute triumph of the conference: speaking with two themes, he managed to take the first and second places in the rating according to audience ratings.

Six months ago, on the previous HolyJS, Vitaly had already conquered many with the performance of “New adventures in Responsive Web Design” . Now the conference opened the "second season of frontend adventures" with new tricks, and Vitaly was broadcasting his recognizable style with English-speaking patches:

“What really surprised me was Guess.js . Who heard about her? An interesting feature. We use webpack, we bandit, we have chunks. But what if we use predictive analysis and machine learning to guess what will be needed at the next user interaction? The user enters the site, we can predict using Google Analytics, where he will click or what he will do, and we can preload the chunk that is most likely to be used. ”

By the way, the creator of Guess.js is familiar to many: this is Minko Gechev , at the previous HolyJS who spoke about the acceleration of Angular applications.



Opening speech Vitaly is in the broadcast. And what about his second report, “Dirty little tricks from the dark corners of eCommerce,” which has not yet reached YouTube? Considerations on how to work on online stores, we can promote conversion and increase sales. For example, such:

“I worked with the German automaker, and we discussed whether the car configurator on the website needed to be responsive. According to our data, nobody bought cars from the phone. Why then responsive? But to think so is a big mistake. Because if a person wants to buy an expensive car, he needs time to convince himself that this is a good purchase. Need to play with the idea. Where do we have time for this? A very important point - in the toilet. And they take a smartphone with them to the toilet, not a laptop. ”

Nikolay Matvienko - Decomposition of Main Thread in Node.js to increase throughput





If, after the eCommerce tricks of Vitaly Friedman, someone still had the feeling “it’s interesting, but managers are hurting to raise conversions, but I want more deep technical details,” Nikolai Matvienko’s report might well have come up. The experience of working on eCommerce projects was also mentioned there, but already in the context of productivity and workloads: when orders are orders of magnitude larger than usual on certain days and it is necessary to withstand this peak, you will understand these topics willy-nilly. Nikolay broke everything in the main stream into components and described each one separately, for example, like this:

“Server-side rendering is a typical CPU operation that can be performed for both 100 and 200, and 500 milliseconds. It is very convenient to render on Node.js, but you have to pay for convenience - rendering renders blocks the event loop. But there is a solution: use stream rendering, break this operation into small parts, render it in pieces, stream it back. ”

There is a report in the broadcast - so you can personally learn all the technical details, and admire the slides, for which many in the reviews praised separately.

Kirill Cherkashin - Working with abstract syntax trees JavaScript





Sometimes, in connection with such topics, the question arises, “OK, this is deep and interesting, but will it give me an AST understanding any practical result, or is it just good to know for general development?” Kirill decided to show that it could well be useful, and began from the illustrative example: “Who of you happened to forget to remove console.log before committing from code? And who thinks that it can be found there as regulars? And if we consider such cases, who still thinks so? Ok, so this monstrous regular expression passed all the tests that I was able to come up with, but then this question: who would like to trace such code? In general, AST for me look clearly better here. ”

As a result, among the audience reviews one could see the words “the report turned out to be more useful than I had supposed.” Perhaps some developers are now saved from what made them express themselves regularly!

Imad Elyafi - Bringing mobile web back to life




Visitors to previous HolyJS may remember the Imad report on the transfer of Pinterest profiles to React, where he gave the advantages of gradual migration. And here, on the contrary, he told how the mobile web on Pinterest was completely redone. Why is it needed?

“Three years ago, we looked at the state of our mobile web and realized that users do not like it. But we knew that our native applications have an engagement rate 80% higher. Then we made the difficult decision to push people to use the applications (by going to the mobile site, you saw the offer to open / install the application). And given the size of our team, then it was justified.

Now we have grown and are ready to upgrade. And although metrics speak in favor of applications, metrics do not measure sensations. They do not measure how the user will no longer open our site, because he had an unpleasant experience. And when we again came to the choice, promote applications or invest in the mobile web, we chose the latter. ”

As a result, Pinterest made a modern Progressive Web App - and HolyJS turned out to be an infrequent case, when PWA is not reasoned theoretically, but on the basis of practical use by a large company. This report is in broadcast, so you can personally learn all the details of other people's experience.

Alexey Kozyatinsky - Debugging JS on the example of Chrome DevTools




When the tool is so in demand, like Chrome DevTools, it seems to be easy for him to google anything. And, probably, it would be possible to find somewhere similar phrases without attending the conference:

“Profiling is divided into instrumentation (where you note time in the code when calling a function) and sampling (where you build a stack at a certain time interval and see which function spent time). It is important to remember that the CPU profiler in DevTools uses sampling: this is most likely the only approach that works well in JS. V8 likes to compile your code almost natively and execute it very quickly. If we set the timer to double check the time, we will strongly distort the final picture. And sampling allows you to calculate a profile that will be very close to the performance. ”

However, in the context of the conference, it is very important that the speaker was directly a member of the DevTools team, and the discussion zones allowed him to ask in detail after the report. And no translation will convey this part: the opportunity to communicate in your own language with the developer of the tool that helps you understand how your application works. Alexey himself was also glad to communicate, emphasizing in the report that it was important for him to perform in St. Petersburg (the city where the DevTools team was based before moving to California). Well, if he had not said this, one would have guessed his Petersburg origin. Something gave out Stirlitz: either the number “239” on Twitter user name , or the examples from Dostoevsky on the slides.

Dmitry Bezhetskov, Vladimir Anufrienko - Porting JS to Elbrus




Here I would like to give some separate medal "for the uniqueness of the task." Many people can say “we are writing to JS” - and how many people in the world who can say “we have ported JS to a different processor architecture” and tell about it? Infrequently at a JS event you can hear, for example, the following:

“Elbrus has obvious speculativeness, in contrast to the implicit speculativeness of x86. This means that if we consider this function:

function Foo(a) { if (a === null) { return 0; } return a.bar; } 


then with the use of speculativeness, we can perform an “illegal” action by reading the value of the bar field even before it is known whether “a” is zero ”.

It is clear that the practical applicability of knowledge about the internal architecture of Elbrus processors is questionable. But the assessment report shows: the depth of analysis of the work of the V8 and SpiderMonkey engines did not leave hardcore fans indifferent. And the waiting questions-answers sections found out why LLVM is not used in dynamic languages ​​and when you can expect the appearance of a universal bytecode virtual machine.

Keynouts: Maxim Yuzva and Ilya Klimov




Finally, each of the two days of the conference ended with a speech where it was not a question of Service Workers or VLIW processors, but a completely different one. The first day was closed by Maxim Yuzva , the second by Ilya Klimov , and their speeches echoed: they both did not try to tell a thousand facts about the new fashionable library, but offered to think about what facts we need, what else is needed and in what direction to develop.

Maxim's emphasis was on working moments outside the usual holivar about frameworks. If a question arises about technologies, you can turn to Stack Overflow - but “how to interact with colleagues in the right way” is not written there, and this is also important. After this report, the discussion in the discussion area turned out to be so vigorous and long that, in fact, it turned out the unplanned fourth BoF session.

In Eli, the emphasis was placed on how and what to learn in a world where technologies are developing so rapidly that you will not steal after all. As one might expect from this speaker, the matter did not go without jokes (the “yellow Lotus” in general became the local conference meme), but the general message was quite serious.

Both the first and the second performances are available in the broadcast.



And if you are interested in those reports that were not in the first hall, so they did not get into the open broadcast - so far their videos are available only to conference participants, but after a few months we’ve posted everything on YouTube (and not in a “raw” broadcast form, and diligently processed version). We say goodbye to this and begin to wait for the next HolyJS, which will be held in Moscow in November.

Finally, a particularly spectacular photo from the conference hall:

Source: https://habr.com/ru/post/412811/


All Articles