Six of the most useful reports from Frontend Conf 2018
Friends, from the position of the head of the program committee Frontend Conf, placed under review a brief overview of the six most useful reports from RIT ++ 2018 on the front end.
In the collection there was a place for the story about how to configure PWA-applications and make them more native. Separately touched upon are the issues of transfiguration , where, using the Yandex.Maps API as an example, it is shown how to write on ES2015, getting ES3 output, and provide support for IDE and linkers. Another story is about popular image storage formats , their compression and download options on mobile devices. Not less hardcore report about how to transfer the load associated with the calculation of the animation from the CPU to the video card . Plus two separate reports aboutCSS secrets and lifehacks .
All reports are purely practical, and some are quite holivarny. In a word, we select exactly those we love for Frontend Conf Moscow.
On the basis of the development experience of his own project, Timofey Lavrenyuk from KeepSolid grocery company told whether it is possible with the help of PWA to create an application that will behave almost like native.
Timofey switched to the concept of a progressive application in the third version of his client for a geek-oriented news aggregator (GeekInformer). Against the background of the web version, progressive applications are more convenient to integrate with the OS, in particular, because they are available in the standard list of Android applications. Similar to native applications, the user can control permissions or uninstall PWA.
In less than an hour, the speaker outlines how the PWA works, and then goes on to the details — for example, ensuring that the application is working in the absence of the Internet, setting up data caching from the server, and so on.
For the mentioned features, the speaker even gives a subjective assessment of the time of their integration into the application: The
report is filled with interesting details, links to tools (and even “crutches”), as well as the genuine enthusiasm of the author. Summing up, the speaker notes that PWA has the advantages of both web pages (HTML5) and native applications. He expects that in the near future PWA will appear on desktops (as long as they are only in ChromeOS), so technology predicts a great future.
The author of the next report is Andrei Roenko, Yandex.Maps API developer. The speaker talks about his experience in using transpilation. Considering Babel as the main transpiler, he looks, according to the speaker himself, under the hood of the process: explains how it all works in theory and how it can be applied to specific tasks.
During the development of the Yandex.Map API, the described approaches helped writing on ES2015, getting ES3 at the output, and providing support for IDE and linkers.
By the way, the report has links to useful literature and interesting plugins. In order not to tamper them with their hands in the browser line, the author specially laid out a presentation in open access , where all the links are clickable.
From applications as a whole, let's get to the details. The first thing I want to emphasize is the pictures uploaded to mobile devices, which Nikita Dubko told software engineer, front-runner from iTechArt Group. His report - an overview of popular image storage formats, their compression and options for downloading to devices.
The main idea of the report can be formulated quite simply: the parameters and methods of compression, as well as the boot options, should be chosen according to your task, in order to minimize the load on the mobile device processor and network traffic.
The juice of the report is hidden in particular cases and related specifics - the speaker examines in detail the pros and cons of different approaches, suggests cases of their use, provides statistics on the support of a particular option in browsers, shares life hacks and tools for performing specific operations.
It is noteworthy that in the conversation there was a place to discuss the experience of users with slow Internet and the availability of pictures for people with disabilities.
Another hardcore report is the story of animation enthusiast Yuri Artyukh (Coderiver) about image calculations by video card resources.
Yuri begins his speech with several very curious examples of his work and a no less impressive dream - to create an animation of fat spots on the surface of hot borsch (well, how many in childhood did they drive a spoon or a piece of bread on a plate?). But the essence of the report is not about this, but about how to transfer the load associated with the calculation of animation from the CPU to the video card.
Instead of a lengthy explanation of the situations in which this might be necessary, here’s a cartoon from the author of the report:
Video recording by reference, in fact, is a capacious introduction to WebGL from the point of view of animation; how to rebuild your head from DOM to parallel pixel computation. Having finished with the introduction, the speaker in real time shows how to start getting acquainted with the shaders, as well as create interesting effects using just a couple of lines of code.
For dessert, just two reports on the possibilities of CSS. The first one is the English story by Lea Verou, the developer of several open source projects, a researcher from MIT CSAIL and a guest expert from the CSS Group, about 10 little-known CSS features. By the way, Lea Vera is also the author of the book CSS secrets, translated, including, into Russian.
The report is a kind of sequel to speeches made in 2011-2013 about the secrets of CSS.
As in those reports, here are 10 "tricks" based only on the features of CSS (without JavaScript). So that you can better present the content, here are a few examples:
The narration is based on writing code in real time with a detailed analysis of the principles of operation and details of the next “life hack”, for example, mathematics, which lies behind the multiply and screen modes in the blending mode.
Considering that some “tricks” are possible only due to innovations in CSS, for them the speaker gives statistics of support by main browsers. Alas, not all 10 tricks can be used in projects today (in some places support has been pumped up), but the situation is quite promising.
Another report is a comparison of the built-in capabilities of CSS and preprocessors through the prism of the average project from Sergey Popov from League A. / HTML Academy.
Despite the “holivarity” of the topic (the intensity of passions becomes clear at the questions stage from the audience), the author calls upon the audience to abandon the preprocessors as much as possible, at least in the part where CSS already offers its own solution.
Starting from the history of preprocessor development, the speaker analyzes the relevance of various constructions left to this toolkit, draws parallels with the capabilities of CSS and PostCSS, equating the role of the latest CSS in the world to the role of Babel for JavaScript.
Instead of a performance trailer, we offer the following final scheme:
Well, for an explanation of what is shown here, we recommend referring to the report.
In the collection there was a place for the story about how to configure PWA-applications and make them more native. Separately touched upon are the issues of transfiguration , where, using the Yandex.Maps API as an example, it is shown how to write on ES2015, getting ES3 output, and provide support for IDE and linkers. Another story is about popular image storage formats , their compression and download options on mobile devices. Not less hardcore report about how to transfer the load associated with the calculation of the animation from the CPU to the video card . Plus two separate reports aboutCSS secrets and lifehacks .
All reports are purely practical, and some are quite holivarny. In a word, we select exactly those we love for Frontend Conf Moscow.
How to make a web application more native, and the user is happier
On the basis of the development experience of his own project, Timofey Lavrenyuk from KeepSolid grocery company told whether it is possible with the help of PWA to create an application that will behave almost like native.
Timofey switched to the concept of a progressive application in the third version of his client for a geek-oriented news aggregator (GeekInformer). Against the background of the web version, progressive applications are more convenient to integrate with the OS, in particular, because they are available in the standard list of Android applications. Similar to native applications, the user can control permissions or uninstall PWA.
In less than an hour, the speaker outlines how the PWA works, and then goes on to the details — for example, ensuring that the application is working in the absence of the Internet, setting up data caching from the server, and so on.
For the mentioned features, the speaker even gives a subjective assessment of the time of their integration into the application: The
report is filled with interesting details, links to tools (and even “crutches”), as well as the genuine enthusiasm of the author. Summing up, the speaker notes that PWA has the advantages of both web pages (HTML5) and native applications. He expects that in the near future PWA will appear on desktops (as long as they are only in ChromeOS), so technology predicts a great future.
Unlimited transfigurability
The author of the next report is Andrei Roenko, Yandex.Maps API developer. The speaker talks about his experience in using transpilation. Considering Babel as the main transpiler, he looks, according to the speaker himself, under the hood of the process: explains how it all works in theory and how it can be applied to specific tasks.
During the development of the Yandex.Map API, the described approaches helped writing on ES2015, getting ES3 at the output, and providing support for IDE and linkers.
By the way, the report has links to useful literature and interesting plugins. In order not to tamper them with their hands in the browser line, the author specially laid out a presentation in open access , where all the links are clickable.
We show pictures to the user: detailed guide
From applications as a whole, let's get to the details. The first thing I want to emphasize is the pictures uploaded to mobile devices, which Nikita Dubko told software engineer, front-runner from iTechArt Group. His report - an overview of popular image storage formats, their compression and options for downloading to devices.
The main idea of the report can be formulated quite simply: the parameters and methods of compression, as well as the boot options, should be chosen according to your task, in order to minimize the load on the mobile device processor and network traffic.
The juice of the report is hidden in particular cases and related specifics - the speaker examines in detail the pros and cons of different approaches, suggests cases of their use, provides statistics on the support of a particular option in browsers, shares life hacks and tools for performing specific operations.
It is noteworthy that in the conversation there was a place to discuss the experience of users with slow Internet and the availability of pictures for people with disabilities.
Pixel path
Another hardcore report is the story of animation enthusiast Yuri Artyukh (Coderiver) about image calculations by video card resources.
Yuri begins his speech with several very curious examples of his work and a no less impressive dream - to create an animation of fat spots on the surface of hot borsch (well, how many in childhood did they drive a spoon or a piece of bread on a plate?). But the essence of the report is not about this, but about how to transfer the load associated with the calculation of animation from the CPU to the video card.
Instead of a lengthy explanation of the situations in which this might be necessary, here’s a cartoon from the author of the report:
Video recording by reference, in fact, is a capacious introduction to WebGL from the point of view of animation; how to rebuild your head from DOM to parallel pixel computation. Having finished with the introduction, the speaker in real time shows how to start getting acquainted with the shaders, as well as create interesting effects using just a couple of lines of code.
Even More CSS Secrets
For dessert, just two reports on the possibilities of CSS. The first one is the English story by Lea Verou, the developer of several open source projects, a researcher from MIT CSAIL and a guest expert from the CSS Group, about 10 little-known CSS features. By the way, Lea Vera is also the author of the book CSS secrets, translated, including, into Russian.
The report is a kind of sequel to speeches made in 2011-2013 about the secrets of CSS.
As in those reports, here are 10 "tricks" based only on the features of CSS (without JavaScript). So that you can better present the content, here are a few examples:
The narration is based on writing code in real time with a detailed analysis of the principles of operation and details of the next “life hack”, for example, mathematics, which lies behind the multiply and screen modes in the blending mode.
Considering that some “tricks” are possible only due to innovations in CSS, for them the speaker gives statistics of support by main browsers. Alas, not all 10 tricks can be used in projects today (in some places support has been pumped up), but the situation is quite promising.
Is CSS ready to replace preprocessors?
Another report is a comparison of the built-in capabilities of CSS and preprocessors through the prism of the average project from Sergey Popov from League A. / HTML Academy.
Despite the “holivarity” of the topic (the intensity of passions becomes clear at the questions stage from the audience), the author calls upon the audience to abandon the preprocessors as much as possible, at least in the part where CSS already offers its own solution.
Starting from the history of preprocessor development, the speaker analyzes the relevance of various constructions left to this toolkit, draws parallels with the capabilities of CSS and PostCSS, equating the role of the latest CSS in the world to the role of Babel for JavaScript.
Instead of a performance trailer, we offer the following final scheme:
Well, for an explanation of what is shown here, we recommend referring to the report.
Friends, we are in a hurry to announce that the next conference of Frontend Conf 2018 Moscow will take place very soon - on October 4 and 5. Reports submitted to the program can be found on this page.
These are only six reports from the last Frontend Conf, and in fact they were 7 times more. If you like to find out everything first - subscribe to the YouTube channel of the conference , all the videos of past years have already been posted there and materials from 2018 will also be posted.
If you prefer to receive information via asynchronous channels, there is a mailing list for you . There are published transcripts, announcements of interesting reports, messages about the opening of certain videos, meetings, and so on.
In general - stay with us! :)