Як навчають у Школі розробки інтерфейсів Яндекса, і чому там навчився я

Мене звуть Павло Грінченка. Я був одним з учасників Школи розробки інтерфейсів Яндекса в Сімферополі. Коли-то давно я подивився відеозапису самої першої Школи 2012 року і почерпнув з них дуже багато корисної інформації. Потім я дізнався, що в моєму місті пройде нова Школа, і вирішив обов'язково взяти участь.
, Щоб потрапити в Школу, потрібно було заповнити анкету і зробити два тестових завдання. Одне з них — по верстці, досить просте. Звучало воно так: зверстати список ачивік, але максимально гнучко і реюзабельно (наприклад, використовуючи СЅЅ counters). Друге завдання виявилося складніше: написати обфускатор CSS-класів без використання сторонніх бібліотек. На вході — масив класів, на виході — їх обфусцированная версія. Але ось пара нюансів:
  • Довжина результуючих класів повинна була вийти мінімальною.
  • Найбільш часто зустрічаються класи повинні були займати найменший обсяг.
3 липня, зробивши завдання, я відправив заявку і забув про Школу, а 26 липня мені прийшов лист про те, що я прийнятий. Сьогодні хочу розповісти вам про те, як проходив процес навчання, які інструменти розробки я відкрив для себе, які завдання нам доводилося з цікавістю вирішувати.
Отже, в листі Яндекс описав формат наших занять. Загальна тривалість — місяць, одне лекційне заняття по середах у вечірній час та одне практичне по суботах протягом всього дня. В кінці передбачався іспит.
Всього учасників було 30. Нас поділили на п'ять команд, надавши загальне ТЗ. Метою було створення проекту під кодовою назвою Pepo — простенького клону Твіттера. Його потрібно було розробити на веб-технологіях і змусити добре працювати на мобільних пристроях. За технологіями обмежень не було — кожна команда могла сама вибрати свій стек. Звучить цікаво, чи не правда?
Наша команда вирішила, що, раз ми в Яндексі, було б нерозумно не скористатися ситуацією і не спробувати попрацювати з повним стеком Бема, тим більше коли під рукою завжди є люди, які розробляють або на БЭМе, або сам БЕМ, і у яких завжди можна запитати ради (що не раз виручало). Дякуємо за допомогу нашим менторів, Володимиру Гриненко tadatuta і Павлу Кучерову!
З технологіями ми визначилися швидко — Node.js, MongoDB в якості сховища і VPS на DigitalOcean, люб'язно надана Яндексом. Вирішивши не морочитися налаштуванням MongoDB, ми використовували безкоштовний тариф на mLab: для наших потреб його було більш ніж достатньо. Щоб не починати розробку з нуля, взяли рекомендований нам stub, який відрізняється від офіційного тим, що вже містить у собі преднастроенный для роботи з БЭМом Express.js. Це виявилося дуже зручно, оскільки ніхто з нас не мав досвіду роботи з Express (CSS-нотація не в рахунок).
Робота в першу суботу вийшла дуже сумбурно — ми надто довго зволікали. Майже весь день ми обговорювали, як повинен виглядати підсумковий проект, які функції потрібно реалізувати. Ви, напевно, вже зрозуміли, що обговорення не просунули нас до мети, а час безслідно зникло. Нарешті, після обіду ми вирішили накидати на дошці всі екрани нашого додатка і узагальнити інтерфейсні рішення компоненти. Справа в тому, що весь БЕМ — як раз про компоненти: незалежні і реиспользуемые. Ще така схема дозволила нам розподілити задачі між учасниками. Всім рекомендую починати саме з неї.


Компоненти-то ми розподілили, але не було розуміння, як все це реалізовувати. БЕМ сам по собі непростий, і отак одразу навчитися йому теж досить складно. Нам порекомендували ознайомитися з наступними матеріалами:
Після кожного відео приходило більше розуміння, як все працює і як Яндекс прийшов до такої архітектурі. Вона дозволяє без особливих зусиль реиспользовать свої напрацювання між проектами. Наприклад, у нас на проекті є випадаюче меню. Так чому б не написати його один раз, щоб потім просто використовувати скрізь? Ви можете заперечити, що це не завжди можливо, оскільки кожен проект має свою специфіку. І ось тут дуже допомагають рівні перевизначення. Основна логіка пишеться в бібліотечному коді, специфічна — на проектному рівні. У підсумку до наступної суботи ми вже могли більш-менш активно вести розробку.
Для прискорення розробки ми скористалися публічною бібліотекою блоків bem-components. Так ми зекономили час на розробку дизайну та базових блоків, зосередившись на бізнес-логікою та унікальних для нашого проекту компонентах. Забігаючи вперед, скажу, що без bem-components ми б, швидше за все, не встигли. Я це до того, що, маючи схожу бібліотеку компонентів у себе в компанії, ви значно спростите собі життя. Вона не обов'язково повинна бути написана БЕМ, а цілком може бути бібліотекою Angular-директив або React-компонентів. Важлива сама ідея компонентної розробки.
У підсумку за місяць у нас народився недоработыш, який ми презентували на іспиті. Баги правили прямо під час презентації, що було досить забавно. Найцікавіше — після всіх захистів нам повідомили, що це не кінець і через два тижні нас чекає остаточна захист проекту. Ці два тижні дозволялося витратити на доопрацювання, причому необов'язково в команді: були люди, які не зійшлися з командою в думках і захищалися зі своїм форком. Для мене ці два тижні вийшли божевільними. Була виконана величезна робота, і проект вдалося довести до стану, який відповідає первинному ТЗ і яке вже не настільки соромно показувати. Втім, ви можете оцінити результат самі: zoopark.top. Увага: VPS все ще на DO, а база на mLab, тому відмовостійкість не гарантується. :) Репозиторій з кодом лежить на GitHub.


Наша Школа була швидше для тих, хто вже мав досвід розробки. Новачки б почували себе зовсім некомфортно. Їм я рекомендую згадані в самому початку і як і раніше актуальні відео першої Школи. У ШРІ можна сміливо йти за досвідом роботи в команді з незнайомими тобі людьми, щоб ближче познайомитися з БЭМом (хоч це й не було обов'язковою умовою), а також — щоб спробувати потрапити в Яндекс на роботу: в результаті деяких учасників покликали на стажування. Ну і ще просто тому, що це весело і цікаво.
мій звітний день мені задали питання — буду я використовувати БЕМ у своїй повсякденній розробці? Я, не сильно замислюючись, відповів: «Скоріше ні, ніж так». Але потім пройшло якийсь час, і я, перетравивши отриманий обсяг інформації, зрозумів, що в своїй відповіді виходив з дворічного досвіду розробки БІЗНЕС-додатків. Зараз моя думка прозвучала б трохи інакше. Використовувати БЕМ для SPA я б, напевно, ще не став, а от для класичних додатків це дійсно відмінний вибір, що дозволяє привнести порядок під фротендовую частина і спростити розробку і підтримку проекту.
Я можу сміливо рекомендувати брати участь в подібних заходах всім. Навіть якщо ви не збираєтеся використовувати БЕМ у своїй роботі, ви все одно отримаєте нові цікаві знання і досвід, які можуть бути застосовані і з іншими технологіями. Спасибі Яндексу і всім людям, які витратили на нас час, за цю Школу!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.