Частина команди, частина корабля

Переробка інтернет-банку назрівала вже давно, не тільки в світлих головах менеджерів і віце-президентів, але і у допитливих умах розробників…


Керівник відділу розробки веб-интервейсов Тінькофф Банку ekubyshin вирішив поділитися, як будувалася і проходила робота з цього масштабного проекту.

Підготовка
Чутки про майбутній розробці нового інтернет-банку ходили по всьому офісу вже під час роботи над редизайном порталу в лютому 2014 року. Ще на початку року було зрозуміло, що буде дуже великий обсяг робіт, і його потрібно буде зробити в стислі терміни, при цьому не нашкодивши якості продукту, а як відомо, швидкість розробки — прямий ворог якості.

Тому, щоб не випускати сирий продукт і не переробляти по вихідних і вечорами, заганяючи всю команду в пекло, потрібно було продумати план розробки ще задовго до постановки задачі, а ще — зрозуміти, яким приблизно має бути новий інтернет-банк і як можна прискорити його розробку в технічному плані.

Очевидно, що частина робіт зовсім не залежить від постановки завдання або від термінів підготовки дизайнів.

Поміркувавши над майбутнім проектом, про те, що можна вже починати робити, і мимохіть побачивши майбутні зміни на рівні прототипу, стало зрозуміло, що роботи буде ще більше, ніж спочатку здавалося.

У підсумку картина предподготовке склалася наступна:

1. підбір технічного ліда, який буде опрацьовувати архітектуру і вести весь проект;
2. підбір команди і її доукомплектування;
3. опрацювання архітектури проекту;
4. вибір технологій, фреймворків та інструментів;
5. побудова робочого прототипу без дизайнів.

Команда — запорука успіху
Саме головне і вирішальне умова успішної розробки та запуску проекту — це відмінна команда, яка буде над ним працювати.

Очевидно, що крім розробки нового інтернет-банку є ще й інші проекти, які треба підтримувати і розвивати, тому частина ресурсів розробників потрібно було залишити вільними.

Керівництво схвалило наймання додаткових розробників, без яких команду не вдалося б доукомплектувати. Перше, що треба зробити, — це знайти відмінного тех. ліда, який буде вести всіх інших членів команди і розробить каркас проекту, з яким будуть працювати його колеги.

Знайти технічного ліда, та й взагалі технічно просунутого розробника в банк досить непросто, так як у розробників, особливо front-end, є помилкове упередження, що в банку нецікаво працювати. Тому для підбору важлива красива вакансія, насичена крутими ключовими словами типу NodeJS і AngularJS, а ще потрібні велику завзятість і терпіння у відборі із
величезної кількості резюме та пошуку по інтернету за межами всім відомого порталу резюме». Кожен день HR-відділ Тінькофф здійснював величезну роботу з пошуку розробників, виконуючи всі примхи замовників.

Скажу коротко: знайти технічного ліда було дуже складно, і тут не обійшлося без банального везіння і збіги фази місяця. І диво сталося — мені вдалося зацікавити досить сильного розробника.

Далі діло пішло по накатаній, і додали команду досить швидко: мабуть, зіграв період активності шукачів і запуск нового дизайну порталу. В результаті вдалося зібрати дуже сильну команду професіоналів, яким ми вдячні за героїчний і складна праця.

Архітектура і не тільки
Коли ми знайшли технічного ліда, настав час приступати до опрацювання архітектури та аналізу технологій та інструментів, які ми будемо використовувати.

Найскладніше — довести менеджерам, які хочуть випускати якомога більше завдань як можна швидше, що треба витягнути одного-двох розробників з спринту підтримки поточних проектів, щоб вони почали працювати над якоюсь незрозумілою магією, званої «архітектурою проекту», який незрозуміло коли буде запускатися.

Це вдалося зробити поетапно, спочатку витягнувши лише на 50% кожного розробника, а потім вже сказавши альфа-самцовое «ТАК ТРЕБА» і витягнувши потрібних розробників на 100% — і ось тоді вже справа пішла.

І чим ми займалися? А приблизно наступним.

Витратили з тиждень чи два на аналіз різних фреймворків, їх особливостей і можливостей, на всякі холивары та ігри to, do-листи. Проаналізували свій досвід використання BackboneJS, EmberJS, прикинули приблизно на новий проект і зрозуміли, що з багатьох причин вони не підходять для нього. Пограли з різними складальниками, поміркували, що краще — BEM або SMACSS, LESS або Stylus і так далі. Загалом, не відмовляли собі практично ні в чому, але при цьому намагалися не заглиблюватися, так як часу було не так вже й багато.

Після всіх пошуків зупинилися на AngularJS, так як він давав ряд переваг:

1. two-way data-bindings;
2. купа готового «коробкове» рішення: сервіси, кешування, dependency injection, routing, досить зручний синтаксис директив і фільтрів;
3. новий і цікавий фреймворк, під який можна набирати нових розробників досить непогано і швидко;
4. інтерес розробників до проекту на новому фреймворку;
5. досить швидкий і простий вхід, що нам було дуже важливо.

AngularJS не видався складним або незрозумілим, і все, що необхідно розробнику для ознайомлення, було на офіційному сайті, а далі ми вже йшли методом проб і помилок.
Поки всім цим займалися, наспів вже і дуже-дуже віддалений прототип нового інтернет-банку.

Далі лід почав розробляти платформу для нового проекту.
Ця частина робіт складалася з:

1. опрацювання архітектури модулів: ініціалізації, відтворення, конфігурування;
2. роутінга і рендеринга сторінок;
3. складання і деплоя проекту на тестові стенди;
4. Request service для роботи з нашим API з можливістю кешування і валідації.

Паралельно почали пробувати NodeJS + Express + MongoDB, щоб підготувати платформу секретного проекту.

В результаті вийшов наступний стек технологій:

1. AngularJS
2. RequireJS
3. BEM (але тільки неймінг, без bemtools)
4. LESS
5. Gulp

Для нового ІБ достатньо, щоб nginx віддавав index.html зі складанням і всієї статикою, а все інше залишалося на плечах браузера.

На виході вийшла платформа а-ля AngularJS Bootstrap, на якій можна будувати SPA програми. Хто знає, можливо, ми опублікуємо код на GitHub.

А ось і перші дизайни
Коли прототип вже був в принципі готовий, приспіли і дизайни.

Що далі? Братися відразу верстати і натягувати на готовий код? Ні! Тепер належало скласти плани запуску і розробки, діаграму ганта (Самі-знаєте-кого) і довести, що якщо робити новий інтернет-банк, то повністю новим, не тільки в дизайні і функціоналі, але і технічно новим.

Банківська сфера — дуже агресивний і швидкий ринок, а в умовах жорсткої конкуренції все треба робити досить швидко. І тут вирішальну роль грає час — коли і в якому вигляді продукт буде випущений на ринок.

Довести менеджерів та бізнес-замовникам, які хочуть, щоб все було зроблено швидко і красиво, необхідність повністю переробити архітектуру і переписати всю бізнес-логіку клієнта, було досить непросто, але у нас були серйозні аргументи, які спрацювали:

1. старий і технічно недосконалий код складно підтримувати, а підтримка в підсумку буде обходитися дорожче, ніж новий код без помилок, недоробок і ляпів, які виникли із-за поспіху при розробці;
2. готовий прототип, який вже працює і на якому можна нарощувати бізнес-логіку;
3. довіра до команди, яку ми заслужили кропіткою роботою.

Ми вирішили розробляти все з чистого аркуша, і команда в повному складі приступила до роботи.

Процес
До біса SCRUM, даєш KANBAN! Неможливо уявити, як взагалі можна розробити такий великий і складний проект, вимоги до якого постійно змінюються в ході роботи, використовуючи SCRUM, витрачаючи час на планування і спринти. Тут SCRUM не буде працювати — він гарний тільки тоді, коли проект вже запущений і є якийсь road map.

Отже, у нас вже є мало-мальськи робочий прототип, кілька дизайнів, технічне завдання і команда.

Настав час підійти до JIRA. Тут вже простіше, головне — як можна ретельніше зробити декомпозицію проекту.

Алгоритм приблизно такий:

1. ми розбили проект на кілька укрупнених завдань за функціональним вимогам і бізнес-логікою, грунтуючись на технічному завданні та наявних дизайнах екранів;
2. додали завдання по архітектурі, загальні модулі, UI-компоненти;
3. ще раз пробіглися по всіх завдань і декомпозировали їх на більш дрібні, виділяючи ресурси HTML-кодингу і JS-кодингу.

В результаті вийшов величезний пул завдань і дата запуску проекту. Робота закипіла.

Про запуск
Інтернет-банк — складний і великий проект, а запускати його треба з обережністю, тому ми вирішили проводити запуск в кілька ітерацій:

1. тестування нашим відділом QA;
2. внутрішнє тестування, в якому беруть участь всі співробітники банку;
3. запуск приватній бета-версії на обмежене коло осіб;
4. публічний запуск.

Одночасно із запуском нового інтернет-банку ми вирішили залишити і старий — для тих, хто не любить все нове або просто для користувачів, що не бажають різко міняти звички.

Кожна ітерація, звичайно ж, не обходилася без збору фідбек від користувачів, налагодження та доопрацювання. Разом з цим розробники допрацьовували новий функціонал, який планувалося запустити.

Запуск вийшов плавним і безболісним, а ще ми виграли час для розробки нового функціоналу, який не встигли закінчити до першої ітерації.

Криза проекту
Обсяг завдань був дуже великий, і якщо на початку роботи над проектом у команди було багато сил і натхнення новими технологіями, то вже ближче до кінця розробки сили були на межі, а коли дійшли до стадії налагодження з купою знайдених багів, то стало ще складніше.

Тут найважливіше настрій в команді, її згуртованість і інтерес до всього проекту, а ще потрібен оптимізм рульового, так і всього «екіпажу корабля».

Чого тут соромитись, одна з головних заслуг — це вдало зібрана команда професіоналів, яка готова працювати, поки все не буде зроблено бездоганно. Всередині команди було це безцінне почуття відповідальності, коли кожен розуміє, що від його дій залежить загальний результат і що команда — це один великий організм, який із-за збою одного органу може загинути повністю.

Front-end-команда Тінькофф Банку — професіонали своєї справи і відповідальні розробники. Як керівник, я дуже пишаюся ними, без них проект не вийшов би таким успішним.

Один з розробників сказав фразу з відомого фільму «Пірати Карибського моря», яка запала всім у душу: «Частина команди, частина корабля». Це дійсно так, команда працювала, повторюючи цю фразу, і не сумувала. Навіть тоді, коли було зовсім не до сміху, робота не припинялася.

Саме командний дух дозволив довести проект до завершення в такі короткі терміни.

Отже, з'явився величезний пул знайдених багів на першій ітерації, і з цим треба було якось впоратися. Простий KANBAN вже не підходив, а бездушне управління точно не могло дати результату. І тут ми придумали невеликий, але приємний лайфхак.

На швидку руку накидали табличку в Google Docs, зібрали пул розподілених по важливості завдань і приступили до розгрібання. Кожен день розробника, який виправляв більше всіх багів, нагороджували чимось смачним або корисним: це були тортики, тістечка, хороші термокружки або просто підбадьорливий кави. У перший день, звичайно, це не особливо працювало, але завдяки тому, що в одного розробника команди ще залишалися сили, він на своєму прикладі показав, що можна розгребти купу багів за день, і отримав за це щось смачне в якості призу. На наступний день вже підтягнулися інші розробники, у команди з'явилося друге дихання. Так, трохи довелося злукавити — всі розробники отримали призи, і кожен день їх було не по одному, а навіть по кілька, щоб підтримати бойовий настрій. Це спрацювало, а звідси висновок — не бійтеся жертвувати своїми фінансами і особистим часом заради проекту, адже команда і її настрій набагато важливіше всіх цих дрібниць.

У підсумку за тиждень практично всі баги були закриті — команда впоралася з першої ітерацією, а потім — і з запуском всього проекту.

p.s.
1. Команда та її настрій вирішують все.
2. Треба починати заздалегідь розробляти проект, не чекаючи дизайнів і готового технічного завдання, яке в результаті може і не прийти.
3. Не треба боятися експериментувати.
4. Стояти на своїй точці зору і доводити її перед начальством і бізнесом.
5. Поважати свою команду, вірити в неї і в результат.
6. Бути оптимістом: вся команда стежить за своїм лидом і реагує так, як він.

Приходите в банк Тінькофф — у нас дуже круто і цікаво, ми не боїмося експериментувати і створювати круті сервіси.

А ось вони — герої і великі молодці Тінькофф банку, які за рік розробили два великих і складних проекту (Звучать фанфари, з усіх сторін лунає гул оплесків).


Джерело: Хабрахабр

0 коментарів

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