How to teach at the Yandex Interface Development School, and what I learned there

My name is Pavel Grinchenko. I was one of the participants in the Yandex Interface Development School in Simferopol. Once upon a time I watched the videotapes of the very first School of 2012 and gathered a lot of useful information from them. Then I learned that a new School would be held in my city, and I decided to take part.

To get to the School, it was necessary to fill out a questionnaire and make two test tasks. One of them - on the layout, quite simple. It sounded like this: to make a list of achivok, but as flexible and reusable as possible (for example, using SS counters). The second task turned out to be more complicated: to write an obfuscator of CSS classes without using third-party libraries. At the entrance - an array of classes, at the exit - their obfuscated version. But here are a couple of nuances:

• The length of the resulting classes should have been minimal.
• The most common classes were to occupy the smallest volume.

On July 3, having made my assignments , I sent the application and forgot about the School, and on July 26, I received a letter that I was accepted. Today I want to tell you about how the learning process went, what development tools I discovered and what tasks we had to solve with interest.

So, in a letter, Yandex described the format of our classes. The total duration is a month, one lecture class on Wednesdays in the evening and one practical on Saturdays throughout the day. At the end of the expected exam.

There were 30 participants in total. We were divided into five teams, providing a general TK. The goal was to create a project codenamed Pepo - a simple Twitter clone. It had to be developed on web technologies and made to work well on mobile devices. There were no limitations on technology - each team could choose its own stack. Sounds interesting isn't it?

Our team decided that, since we are at Yandex, it would be foolish not to take advantage of the situation and not to try to work with a full stack of BEM, especially when there are always people at hand who develop either BEM or BEM itself, and who can always ask for advice (which is not just rescued). Thank you for helping our mentors, Vladimir Grinenko tadatuta and Pavel Kucherov!

We decided on technologies quickly - Node.js, MongoDB as storage and VPS on DigitalOcean , kindly provided by Yandex. Deciding not to bother with MongoDB setup, we used a free mLab rate : for our needs, it was more than enough. In order not to start development from scratch, we took the stub recommended to us, which differs from the official one in that it already contains Express.js pre-configured for working with BEM. This turned out to be very convenient, since none of us had any experience with the full stack of BEM (CSS notation does not count).

Work on the first Saturday turned out to be very messy - we were swinging for too long. Almost all day we discussed how the final project should look like, what functions need to be implemented. You, probably, already understood that the discussions did not move us toward the goal, and time disappeared without a trace. Finally, after lunch, we decided to sketch all the screens of our application on the board and summarize the interface solutions into components. The point is that all BEM is about components: independent and reusable. Another such scheme allowed us to distribute tasks among the participants. I recommend everyone to start with her.

We have distributed the components, but there was no understanding how to implement all this. BEM itself is not easy, and it is also quite difficult to learn from it. We were recommended to familiarize yourself with the following materials:

• BEM Automation
• BEM Webinar: Bem-xjst three-part web services architecture
• BEMinar by i-bem.js
• BEminar: bem-components library

After each video came more understanding of how everything works and how Yandex came to such an architecture. It allows you to effortlessly reuse your work between projects. For example, we all have a drop-down menu on the project. So why not write it once, then just use it everywhere? You may argue that this is not always possible, since each project has its own specifics. And this is where redefinition levels help a lot. The main logic is written in the library code, specific - at the project level. As a result, by the next Saturday, we could already more or less actively develop.

To speed up development, we used the bem-components public library of blocks. So we saved time on the development of design and basic blocks, focusing on the business logic and unique components for our project. Looking ahead, I would say that without bem-components, we would most likely not have time. What I mean is that, having a similar library of components in your company, you will significantly simplify your life. It does not have to be written in BEM, but may well be a library of Angular directives or React components. The very idea of ​​component development is important.

As a result, within a month we had a bad job, which we presented at the exam. Bugs ruled right during the presentation, which was quite funny. The most interesting thing - after all the defenses, we were informed that this was not the end, and in two weeks we would have the final defense of the project. These two weeks were allowed to spend on revision, and not necessarily in the team: there were people who did not agree with the team in their opinions and defended themselves with their fork. For me, these two weeks have turned out crazy. A lot of work was done, and the project was brought to a state that corresponds to the original TZ and which is no longer so embarrassing to show. However, you can evaluate the result yourself: zoopark.top . Warning: VPS is still on DO, and base on mLab, therefore failover is not guaranteed. :) The repository with the code is on GitHub .

Our School was more likely for those who already had experience in development. Beginners would feel completely uncomfortable. To them, I recommend those mentioned at the very beginning and still relevant videos of the first School . In SRI, you can safely follow the experience of working in a team with people you do not know to get to know BEM better (although this was not a prerequisite), as well as to try to get a job at Yandex: as a result, some participants were called for an internship. Well, and just because it's fun and interesting.

On my reporting day, I was asked a question - would I use BEM in my daily development? I, not thinking much, answered: "Rather no, than yes." But then some time passed, and I, having digested the obtained amount of information, understood that in my answer I proceeded from two years of experience in developing SPA applications. Now my opinion would have sounded a little different. I probably would not use BEM for the SPA, but for classic applications it is really an excellent choice, allowing to bring order to the front end part and simplify the development and support of the project.

I can safely recommend to participate in such events to all. Even if in the future you are not going to use BEM in your work, you still get new interesting knowledge and experience that can be applied with other technologies. Thanks to Yandex and all the people who have spent time on us for this School!