SPA Meetup Report and Materials April 8, 2017

Last Saturday at the Avito office was held SPA Meetup. This is Moscow.js mitap-satellite, which is focused on front-end developers who are interested in the theme of web applications (Single Page Application), and who sympathize with them. This is the third meeting, which turned out to be very rich: 3 reports, 2 blitz, a free microphone, a panel discussion and, of course, live communication. In this post we will talk a little about how it was, and share video reports.

Reports

The meeting was opened by Alexander Lobashev from Avito with a report on the design platform. Today, more and more teams are starting to use various tools and systems to work with components and their compositions. Such solutions are designed to facilitate and optimize the work of front-end development, as well as improve interaction with other functions, such as design and testing. There are more solutions and it’s great, but often it turns out that big companies and projects are not ready-made solutions, and then they create their own.





')

Badoo developer Maxim Kislov continued the meeting with a story about the experience of using Protocol buffers technology (or just protobuf). The mechanism is designed to serialize data, while not dependent on the platform or the language. Initially, the solution was intended for the server part, but over time it became available for the client side, including the frontend. The problem being solved becomes acute for large projects, as over time, the functionality becomes more and more, the initial requirements change, the legacy appears, and it becomes more and more difficult to maintain the interaction protocols of different parts of the project. Protocol buffers gives a decent response and allows Badoo, for example, to use a single protocol for the interaction between the backend, mobile applications and the front-end.







The third report from Roman Dvornov from Avito touched upon the topic of creating your own dev tools that help in developing web applications by providing remote access to their runtime. It sounds difficult, and sometimes it is, but now there is a solution that facilitates the creation of such tools. The solution is called rempl , it allows you to focus on the tool itself and think less about the infrastructure. A few examples of tools (and not only) already built on rempl: a process analyzer and the result of the assembly in Webpack, a remote component inspector , a presentation control panel on the Shower - and this is only the beginning. From the report you will learn about usage scenarios, how it all works, and in addition there is a demo with live coding.

Blitz

Further in the program there were two blitz reports. Nikita Mostovoy from HeadHunter raised the topic of stubs for testing. He shared his own experience on how to make convenient both backend and frontend.







The second blitz, from the representative of Zeeng Alexander Saft, on how to validate data from complex forms and synchronize validation with the front-end. One solution to this problem is to use special JSON, or rather JSON-schema. Alexander told about this with a large number of code examples.

Free microphone

As an experiment, we provided an opportunity for participants to tell about their open source projects. The experiment was a success, the following tools were presented:

• Roman Dvornov told about CSSTree - a fast, detailed CSS parser with the possibility of validation according to W3C specifications. Judging by the experiment , during which the Alexa Top 250 sites were validated, almost every site has CSS errors. CSSTree can help you avoid mistakes in your projects.
• Alexander Mekhonoshin shared his experience in the Npm Api Service , with which you can set up searching and navigating to the repository of any npm package both in Alfred and directly in the address bar of any Chromium browser
• Alexei Okhrimenko's ambitious project SimplePEG allows you to create your parser, describing its grammar using simple constructions. The main difference between SimplePEG and PEG is that you can generate parser code not only in JavaScript, but also in Python, and in the future in any other language.
• Due to lack of time Konstantin Lebedev wants to give his Sortable project in good hands. This is a good opportunity to become the top manager of a popular library (~ 10k stars on GitHub, ~ 100k downloads only in npm), which allows you to sort lists by dragging and dropping and has many integrations.

Discussion

At the end of the meeting we had a panel discussion. Alexander Lobashev (Avito), Konstantin Lebedev (Mail.ru), Alexey Okhrimenko (IPONWEB), Anastasia Goryacheva (Avito) and Alexander Mayorov (tutu.ru) took part in it. Topic of discussion - components and component approach.

Retelling the discussion is a thankless task, it is better to watch the recording. But It is worth noting that closer to the middle, when it came to approaches and all-in-js, passions ran high. At some point, the microphone captured Denis Johansen (LiveJournal) and smoothly became a member of the panel, which enlivened the discussion :) It was hot, the hour passed quickly and it was clearly not enough. Therefore, further discussions continued in an informal setting, and it was no less fascinating.







All materials from SPA meetup # 3 can be found at the links:

• Video of reports and discussions
• Reports slides
• Meeting photo album

Thanks to everyone who came to the mitap, watched the broadcast and actively participated in the organization. Was cool!



One of the main wishes in the reviews is to hold such meetings more often, now they are held annually. Great offer! Let's try to conduct SPA meetup more often, as there are enough topics and speakers. If you have something to tell, send applications to Roman Dvornov or to team@moscowjs.ru . Don't forget to subscribe to the SPA Meetup announcements on the Timepad or @moscowjs on Twitter, so as not to miss the next one. See you again!