Уявіть: ви Front-end Developer, який тільки-но починає свою кар’єру. У вас є бажання розвиватися, але немає розуміння, що саме потрібно робити. У які двері стукати? Що за ними чекає?
Щоб допомогти знайти відповіді на ці питання, ми провели Genesis Front-end Week — тиждень лекцій про роботу фронтенд-розробника в продуктовій команді. Захід завершили хакатоном. Учасники два дні працювали над своїм продуктом та змагалися за першість.
Дисклеймер: усі лекції відбувалися онлайн задля безпеки всіх учасників. Genesis Front-end Hackathon організували в середині жовтня, до посилення карантину в столиці.
Тиждень фронтенду
Аби пропрацювати інтерфейс та зарелізити продукт, компанії наймають фронтенд-розробників. Тиждень фронтенду в Genesis організували, щоб збільшити кількість крутих спеціалістів на ринку. Впродовж п’яти днів учасники присвячували свої вечори навчанню та заглиблювалися у тонкощі роботи продуктових команд. Водночас тематичний тиждень не конкурує з курсами програмування, пояснює проєктна менеджерка Дана Білоусова, яка відповідала за організацію заходу. «На курсах вчать писати код. Усі охочі можуть їх пройти й стати розробниками-початківцями. Але зрозуміти, куди рухатися далі — складно. Особливо, коли не знаєш, як працює ІТ-галузь загалом та продуктова команда зокрема. Цьому й присвятили навчання», — розповідає Дана. Вона додає, що технічні лекції теж були, однак і там лектори не вчили писати код з нуля, а розповідали, як зробити його чистішим.
Лекції протягом тижня читали фронтенд-розробники Genesis рівня мідл та сеньйор, а також дизайнер та продакт-менеджер.
«Особливість роботи над продуктом у тому, що ти не лише пишеш код, а й тісно співпрацюєш з іншими членами команди. Тож розробник має хоч трохи орієнтуватися в усьому — і в дизайні, і в SEO-просуванні, і в бекенді», — ділиться Дана Білоусова.
До прикладу, лекцію про дизайн присвятили основним помилкам у взаємодії розробника та дизайнера. На лекції про продакт-менеджмент розповіли, з яких етапів складається робота над продуктом та що відбувається з ним після релізу. Серед інших тем, які охопили під час тематичного тижня – огляд фронтенд-розробки в продуктовому ІТ, місце фронтенда в продуктовій команді, основи SEO та підготовка резюме. Загалом на участь у тематичному тижні зареєструвалися 1200+ осіб. Наприкінці учасникам пропонували зробити фінальний тест за матеріалами тижня.
Як минув фронтенд-хакатон
Тиждень фронтенду закінчили хакатоном. Зі 159 охочих для участі обрали 43. Хакатон — це командне змагання, однак приймали й індивідуальні заявки. Тоді команду формували організатори. Намагалися зробити так, щоб у складі кожної були розробники зі схожим технологічним стеком, наприклад, зі знанням фреймворку React чи Vue. Всього було 11 команд по 3-4 особи. У всіх команд були ментори, які робили код-рев’ю, перевіряли ідею самого блогу та загалом направляли учасників, коли ті заходили в глухий кут.
Учасників відбирали за CV та мотиваційними листами. Переглядаючи заявки, організатори звертали увагу на знання основних технологій фронтенду. Серед вимог — володіння мовами для верстки HTML та CSS, базове знання JavaScript, популярних фреймворків React або Vue, а також навички адаптивної верстки. Втім, вимоги були гнучкими.
«Ніхто у моїй команді не вмів використовувати Git. Спочатку ми витратили досить багато часу, щоб навчитися, але було дуже приємно, що наступного дня кожен міг використовувати основні команди й знав, як вони працюють», — ментор Андрій Антонюк, Front-end Developer у Holy Water.
Зарелізити продукт за два дні
Упродовж двох днів команди виконували завдання — створити блог на основі своїх даних (або взяти безкоштовне АРІ з відкритого доступу). Фактично вони мали зарелізити робочий сайт, який відповідає певним критеріям. «Я працював з командою джунів: одні мали лише 2-3 місяці в розробці, інші тільки-но влаштувалися на першу роботу. Одразу ж після оголошення завдання команда почала панікувати: вони не знали з чого розпочати та що робити з таким важким на перший погляд завданням. Однак після того, як усі видихнули, ми запланували подальші кроки, визначилися з технологіями, зробили прототип дизайну — й справа пішла», — говорить Андрій Антонюк. Критерії оформили у список завдань, їх розподілили на 11 рівнів. Команди послідовно рухалися й проходили своєрідний квест. Наприклад, щоб перейти з першого рівня на другий, сайт мав відповідати мінімальним вимогам, а саме:
виводити на сторінку колекцію обраних командою сутностей;
давати можливість пропорційно отримати дані (infinite scroll, pagination);
мати хоча б одне поле-зображення й мінімум одне поле-дату.
На останніх етапах учасники мали задеплоїти проєкт, підключити гугл-аналітику, реалізувати автоматичний Git OnPush деплой з master-гілки. За цими завданнями команди оцінювало й журі — вони дивилися, чи всі потрібні елементи є на сайті та чи правильно виводяться дані. Готовий проєкт можна додати до CV чи залити на GitHub — та поповнити своє портфоліо ще одним кейсом.
«Я одразу дізнався бекграунд кожного учасника й запропонував команді чітко спланувати свої дії. Так можна побачити загальну картину й зрозуміти, що й кому делегувати. Аби діяти швидко, ми одразу визначилися з оптимальним набором технологій. Наприклад, обрали просте API з даними та NextJS, щоб одразу закрити SSR-рендеринг. Підключили стороннє рішення для авторизації й реєстрації та сервіс автодеплою. З деякими технологіями ніхто з команди не працював раніше, але вони швидко навчилися», — говорить ментор Олександр Терлецький Front-end Developer в Liti.
Готуючи захід, організатори намагалися занурити учасників у роботу над реальним комерційним завданням та прокачати командну взаємодію. «Одиниці можуть виконати об’ємну задачу самостійно. Окей, ви добре кодите, та навряд чи зможете зробити крутий продукт без команди. Навички командної роботи високо цінуються у світі IT», — пояснює Михайло Алексєєв, Front-end Developer з Holy Water та ментор однієї з команд.
Що в результаті
З одинадцяти проєктів журі обрали трьох призерів. Перемогла команда, що за два дні розробила агрегатор відеоігор. На другому місці — команда, що придумала сервіс пошуку івентів у Києві. Третє місце посіли розробники платформи, де користувачі можуть публікувати власний контент.
«У якийсь момент я зрозумів: моя команда навряд чи виграє хакатон. Тож вирішив сфокусуватися на тому, щоб дати людям максимум знань та пояснити, як застосувати їх у подальшій роботі», — Михайло Алексєєв.
Під час хакатону учасники виконували реальні завдання, що виникають на різних етапах розробки продукту. «Вони мали визначитися з концепцією, розробити основу, «вирівняти» верстку, додати можливість авторизації на сайті для користувача та адміна, задеплоїти проєкт та підключити аналітику наприкінці — всі ці пункти треба пропрацювати в роботі над будь-яким комерційним завданням», — зазначає Дана Білоусова.
Ще одна цінність заходу — робота разом із досвідченими менторами, які, зі свого боку, також побачили можливості для розвитку.
«Ментор на хакатоні може прокачати свої менеджерські навички, навчитися приймати різні точки зору та знаходити підходи до різних людей. Команди ж вчаться працювати з жорсткими дедлайнами в конкурентній галузі. Вони стають справжніми бойовими загонами й розуміють, що разом можуть зробити набагато більше, ніж поодинці», — ділиться Олександр Терлецький.
«Я вперше був ментором на хакатоні. Розраховував на те, що прийду на захід, привітаю команду, дам поради-настанови й поїду додому відпочивати. Однак я настільки пройнявся атмосферою, що залишився на всі вихідні», — додає Михайло Алексєєв.
Відгуки учасників
«Я шість місяців займаюся фронтенд-розробкою. Тому йшов на хакатон не лише за досвідом та новими знайомствами, а й щоб перевірити свої навички. Коли завдання тільки озвучили, ми не розуміли, з чого почати та як розподілити ресурси команди. У метушні багато чого не виходило з першого разу, однак завдяки підтримці нашого ментора та плану дій, ми таки організувалися й налагодили роботу. За два дні вдалося прокачати вміння швидко працювати у стресовій ситуації», — Владислав Дежнюк, Front-end Developer, був у складі команди-переможця.
«Я вперше брала участь і в хакатоні, і в освітньому заході від Genesis. Все дуже сподобалося: організація, завдання, ментор, команда, з якою ми чудово спрацювалися. Тому я точно буду подаватися ще, а зараз чекаю результатів відбору до фронтенд-школи Genesis. У перший день ми кодили годин 16, у другий — також із самого ранку. Були люди, що ночували в офісі. Позасинали з ноутбуками на колінках просто під час роботи. Але на те він і хакатон: учасники змагалися за першість на максимумі», — Аліса Власова, Front-end Developer в INCHKIEV, перемогла в номінації Heart of the team.
«Пішов на хакатон, бо було цікаво попрацювати в технічній команді — на своїй минулій роботі я був єдиним розробником. На хакатоні ми працювали над сайтом пошуку заходів у Києві. Найскладнішим виявився деплой проєкту, з ним ми не справилися. Однак це не завадило нам посісти друге місце. За два дні я знайшов дуже дружню, організовану та технічно круту команду, а ще — отримав офер для роботи у компанії», — Єгор Мерзленко, Front-end Developer, після хакатону працевлаштувався до Genesis.
