January 23, 2018 at 13:37Yandex interface development school reopens suite
Until January 31, you can apply to the Yandex Interface Developers School. Training is free, but the entry requirements are pretty nontrivial. To receive, you must pass the test task. To do it, you need to know HTML, CSS and JavaScript and have at least minimal experience in developing interfaces.
Who is an interface designer? This is a frontend developer, that is, one who develops in HTML, CSS, JavaScript and in general everything that is responsible for implementing user interaction. Usually, we make interfaces on these technologies for desktop and mobile platforms. But in general, projects can be very different, for example, for televisions, like one of the teams of last year.
Graduates can apply for any vacancies of interface developers, for example, these places in Yandex.
Under the cut, a little more details about training and an example of the project of students of last year.
This is the sixth Yandex Interface Development School. Studying in Moscow, you need a personal presence - there are no distance learning, but all key lectures are filmed on video (links at the end of the post).
Classes will be held in the Moscow office of Yandex. Nonresident participants, we will pay the fare and accommodation at the hostel.
Three classes per week: on Mondays and Wednesdays - from 19:00 to 21:00, on Saturdays - from 12:00 to 16:30, and if you went to the second stage, then on Saturdays it will be from 11:00 to 19: 00.
The first stage is a course of lectures and isolated practical exercises. It’s like at a university, only with a very clear focus on the real world. Lectures go from March 5 to April 22.
Second phase- practice. You team up with other developers in small teams and work in hackathon mode. Only a finished project is evaluated. It is being developed from April 23 to May 27. Designers and project managers of the team are current Yandex employees, fairly good tasks have a chance to get into real production with minimal modifications, that is, you may already have something significant in your portfolio for release.
Questions related to the School can be asked in a letter to frontendschool@yandex-team.ru .
Stage One Program
Each topic is a block of theory, homework and its analysis. Topics:
- Adaptive layout
- Work with touch user input
- New JavaScript Features
- Using Git and GitHub for teamwork
- Multimedia
- Performance
- Unit and integration testing of interfaces
- Infrastructure
- Upper level frontend architecture
- Node.js
- JavaScript and typing
- Algorithms and data structures
- BEM
An example of the task of the second stage and the impressions of the participants
Last year there was Mobilization, so designers from the School, managers from the School and interface developers entered the hackathon mode immediately. One of the teams kept an eye on SmartTV on TizenOS (the most popular platform installed on Samsung TVs). The guys had this assumption: firstly, SmartTV as a whole is a very rapidly growing segment of Internet access (approximately 40% growth per year). Secondly, there is no particular competition there yet, and we need to “stake out” the site. Thirdly, you cannot just take and port a mobile application there - both the input principles and usage scenarios are very different.
The team gathered from 3 developers, a manager and a designer. The designer at the first stage brought here such a project:
It included research and analytics, prototyping, user testing, and a product development plan. This is a scripted application map. It shows the basic ways the user uses the application that were needed to understand the project, how it should work.
The team’s task was to revive all these pictures, make sure that the product works fine on the final platform, and that users don’t go crazy trying to use all this, and write supported code. That is, create a real application that you can use.
Here are the nuances of the work from the point of view of students:
Due to CORS restrictions, it is impossible to implement a direct request to the API from the application, it was necessary to develop your own proxy server, which later began to perform the function of a cache server. The developed server is a Node.js application using the Express web framework. Data is normalized using normalizr for deduplication.
Minor surprises were at every stage. For example, on a deploy, the team suddenly found out that the Heroku service servers are located in Europe (and the Ya.Muzyki API works only within the Russian Federation). And they needed VDS in Russia.
Frontend React + Redux architecture. Under the hood, the TizenOS is an old chromium. At work, the guys noticed that the modern Flexbox specification is not fully supported, calc, focus-within is not supported, there are problems with viewport units and the performance of css animations. Here is another example of a surprise, as the participants themselves described it: “first, the control solution from the remote control determined the navigable elements according to the class that is written in the config. All DOM elements with such classes fall into the "field of view" of the library. During initialization, the library goes through all the elements using querySelectorAll, and then using getBoundingClientRect determines the position of each element, compares the elements and finds the nearest neighbors. These elements will switch. For universal applicability, the library makes this cycle each time it switches, which, of course, is inefficient if the layout of the elements on our page has not changed. This (and a lot of unnecessary component updates) caused performance problems on the TV. We performed the decomposition of the components, reviewed the data movement and eliminated some of the extra updates. ”
“At home - this is generally a different scenario, parties, karaoke. Highlighted the problem. They saw a lot of ideas for the future that they did not immediately realize, for example, managing an application on a TV from a phone. Karaoke mode is not implemented. The party mode is not implemented - this is when everyone is connected with their device, everyone throws tracks and everyone drags, that is, they do not switch between accounts and do not climb each other on the walls of Vkontakte.
We implemented the application under Tizen, made a strong basis. This is connecting an account, playing music, plus we pull all the playlists of the user and so on. They argued to the last, which is more important: to file features or to make everything work without question. They chose the second one, because until the last they were not sure that when rolling out all models to TVs, all this would work fine. Worried about the brakes on old TVs, for the launch on the entire Tizen line.
We worked in the tracker, there were daily meetings. They took into account what was of interest to everyone, and they distributed such tasks. We did each other a code review, plus curators from Yandex helped. Everyone had a different schedule. Someone combined with work / study, someone could spend more time on the project. Adapted to each other. When they could, they worked in the Yandex meeting rooms together, once remotely. Meetings were held both face-to-face and on Skype. Used chatik in the Telegram.
We had the opportunity to use the Yandex lab and conduct a full-fledged test of our application on outsiders. In my opinion, everyone really liked this moment. It was interesting to watch, ask around. With a real example, we could observe how some interface things that were obvious to us were not so obvious to the user.
For a month they tried to build a process from scratch. If they had worked for another month, they would have fallen on stable rails. We simultaneously sawed a new project, and studied the platform, and built processes in a team. ”
Egor Svertkov, project manager
“I studied development at home. It started as a hobby - I made simple applications for tutorials and test tasks for vacancies, but I didn’t get a job. I saw the introductory task in the SRI and decided to try it. I did the task for a long time and sent it 10 minutes before the end of the reception. And a month later the answer came - come to Moscow.
In SRI you progress very quickly. When around 20-odd developers, there is always someone who knows the answer to your question. And if at home I would reach the decision for several hours, then in SRI it can be recognized in 5 minutes. ”
Rodnikov Dmitry, developer of interfaces in the banner system, graduate of SRI 2017.
“We were very limited in time when developing the application. And I wanted to do a lot and well. Therefore, for me, the entire second stage was held in the hackathon mode. We plunged completely into the project and all month literally lived only for them.
The curators helped us, but they never told us how to do it, but only encouraged us to make the right decision. ”
Yana Zolnikova, developer of front page interfaces, graduate of SRI-2017
Even on a team of 4 people it was necessary to do normal documentation. Guys conducted documentation of ui-components with the help of Styleguidist. PropTypes was prescribed in each component - what properties it accepts, what type and which of them are mandatory. Some components were accompanied by examples of use. As a result, they got a library of ui components. This allowed them to separate roles: one imposes components, the other adjusts the movement of data between them. It also allowed each developer in the team to know what ready-made components are and how to use them.
The separation is this: the team agreed that each developer will create a new branch for each feature, open the pull request and, after the review of other team members, merge it into dev.
On the first day of work on the project, students started a channel on Telegram, in which they conducted the entire discussion. Part of the team worked remotely, some in the Yandex office. Therefore, participants regularly wrote back about completed tasks and informed about what they would do next. At different stages of the project, they united in groups and solved a specific problem. Pair programming helped to quickly find problems and learn from each other's experiences.
All work was divided into 4 sprints:
- 1st sprint - menu, pages, navigation, acquaintance with api;
- 2nd sprint - player, cache server, improvements in navigation;
- 3rd sprint - connecting real data, working with the output of collections of 3, navigation by keys, improvements in the player, layout of the landing page;
- 4th sprint - optimization of the application, bug fixing, error handling, processing of individual scripts, tests.
A couple more stories about learning
“I got to SRI spontaneously - I was interested in test tasks. It took them about four nights. Honestly, when sending the results, I didn’t really count on anything - I just wanted to get feedback. But a couple of weeks later a letter came that I was accepted. The school gave me first of all practical experience. I don’t really perceive the theory at all: I can tell you a thousand times how this works, but until I see everything myself, I don’t understand. A good interface developer should not only embody mock-ups in code, but also see a product behind a project, participate in creating a concept together with a manager and designer. To do this, you need to be able to find a common language with people - the SRI also teaches this. ”
Tamerlan Lokyaev, interface developer at Yandex.Market, graduate of SRI-2017
“I graduated from the physics department of Perm State University. A fellow student who started to learn C # was fascinated by programming. I remember that I wanted to make my site - I was engaged in photography. After high school, I worked for some time as a medical software tester, and then moved to an IT company: first I was a typesetter, then an interface designer. Now I work in Yandex, they called me here after SRI. In my opinion, an interface designer should be a versatile person who understands both algorithms and design. You need to have your own sense of beauty - it's nice when you yourself internally agree with what is happening, and not just accept as it is what the designers bring. Do not get involved in frameworks and ready-made libraries. You need to understand the language you are writing in, then it will not be a black box for you. ”
Maxim Lykov, developer of video search interfaces, graduate of SRI-2017
Links again