Language switcher

Light

Dark

Grow – це внутрішня система кар’єрного зростання, яка дає змогу чітко розділити знання кожного колеги по рівнях. Тут можна ставити цілі для розвитку, фіксувати свої досягнення та подавати запит на рев’ю тоді, коли ти до цього готовий.

Ідея створення системи, яка могла б чітко розділити знання кожного колеги на рівні з можливістю зростати, з’явилася в нашого Head of Node.JS Department Валерія два роки тому. Спершу це була одна велика таблиця Exel, в якій були прописані рівні підготовки та перелік питань, відповіді на які мали знати колеги.

“Сенс був у тому, щоб показати людям що вони повинні мати певні знання на певний рівень. Дуже часто розробник може сидіти на одному проєкті багато років і не розуміти, наскільки він значущий на ринку ІТ. Тож, для того, щоб він відчував себе в потоці та чітко розумів, які знання має, була зроблена така стандартизація, – розповів Валерій.

Спершу цю систему Валерій впровадив у своєму Node.JS департаменті.

“Я виокремив питання для кожного рівня та записував їх до таблиці. Коли в когось із мого департаменту наближалася дата рев’ю, я переглядав який в нього рівень та на який він претендує зараз. Зважаючи на це, ставив питання з таблички. Це значно спрощувало процес рев’ю, оскільки я відразу бачив прогрес мого колеги. Чи “виріс” він з моменту попереднього перегляду та чи готовий до наступного рівня”.

Пізніше з’явилася необхідність це автоматизувати, а відтак і запропонувати формат іншим департаментам нашої компанії. Його ідею підтримала наша Executive Team, роботу підхопили розробники з його департаменту й почали розробляти майбутню систему “Grow”

“Головна ідея “Grow” – дати можливість кожному самостійно керувати своїм рев’ю. Подавати запит на перегляд свого рівня знань та зарплати тоді, коли ти до цього готовий, а не чекати дату, яку визначив твій керівник. Також планувалося, щоб у цій системі можна було створити свого персонажа та “прокачувати” його, як у грі. Ти здобуваєш знання, виконуєш завдання та отримуєш за це нові рівні та нагороди”.

Функціонал “Grow” для керівників департаментів дозволяє самому створювати рівні, наповнювати їх, слідкувати за прогресом колег у команді та отримувати від них запити на рев’ю. Розробники ж можуть керувати своїми завданнями: задавати їм статус виконання, залишати коментарі тощо; а також керувати своїм персонажем: слідкувати за його прогресом, рівнями та навичками.

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

“Кожен Head of Departament може налаштувати RSS-посилання для своїх відділів. Команда може в будь-який момент почитати свіжі статті, новини й усе, що відбувається у світі, з їхньої технології”.

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

“Зараз детальніше працюємо над сторінкою навичок. Адже крім базових знань є вузькоспеціалізовані, для вивчення яких треба більше часу, до прикладу, знання якоїсь payment системи. Тому ми створюємо сторінку, яка матиме вигляд бджолиних стільників з усіма специфічними навичками: загальними та конкретними. До прикладу, ти засвоїв Angular 10: на сторінці навичок ти маєш позначити знання Angular 10, як вивчене. Це підтверджує твій техлід або голова департаменту, після чого навичка тобі присвоюється й виводиться на “стільники навичок”. Так вибудовується прогрес кожного колеги. Далі усі вивчені скіли будуть підсвічуватися, для легкої навігації розробника та його техліда в майбутньому. 

Оскільки вся робота відбувається у вільний від комерційних проєктів час, можна сказати, що “Grow” росте разом з нами, – сміється Валерій, – допомагають також правки від колег, котрі вже користуються ним. Звісно, всі помилки виправляються не так швидко, як того хотілося б, але все ж головну свою функцію система виконує добре – полегшує процес рев’ю та кар’єрний розвиток колег”.

Способи оптимізації застосунків на Node.js включають:

  1. Використання останньої версії Node.js. Нові версії Node.js зазвичай включають покращення продуктивності й виправлення помилок.
  2. Використання профайлера. Профайлер може допомогти визначити частини вашого коду, які заважають продуктивності, як-от сповільнені виклики функцій або витоки пам’яті.
  3. Мінімізація використання синхронних функцій. Синхронні функції блокують цикл подій, виключаючи виконання іншого коду. Натомість слід використовувати асинхронні функції, як-от ті, що надаються ключовими словами  async та await.
  4. Використання мережі доправлення контенту (CDN). CDN може допомогти розподілити статичні ресурси застосунку, розвантажуючи ваш сервер.
  5. Використання зворотного проксі-сервера. Зворотний проксі-сервер на кшталт NGINX або HAProxy може допомогти з балансуванням навантаження та завершенням SSL, вивільняючи ваш Node.js сервер для інших завдань.
  6. Використання кешування. Кешування може підвищити продуктивність вашого застосунку, зберігаючи в пам’яті результати затратних операцій, як-от запитів до бази даних.
  7. Оптимізація запитів до бази даних.
  8. Використання менеджера процесів, як-от pm2, для кращого керування процесами.

Розглянемо кожен метод детальніше.

1. Використання останньої версії Node.js, яка зазвичай включає покращення продуктивності й виправлення помилок.

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

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

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

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

Для Node.js доступно кілька профайлерів, як-от вбудований профайлер у Node.js, інспектор v8 та node inspector. Ось деякі популярні сторонні профайлери:

  • node-clinic
  • nodetime
  • strong-trace
  • node-memwatch

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

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

3. Мінімізація використання синхронних функцій і надання переваги асинхронним функціям, як-от ті, що надаються ключовими словами  async та await.

У Node.js цикл подій керує виконанням JavaScript коду. Синхронні функції блокують його, запобігаючи виконанню іншого коду. Це може призвести до низької продуктивності та сповільнених відгуків. На відміну від них, асинхронні функції дозволяють виконувати інший код під час їх роботи, що може поліпшити загальну продуктивність вашого застосунку.

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

Наприклад, замість використання шаблону зворотного виклику:

Можна використати async/await таким чином:

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

Варто також зазначити, що не всі частини вашого застосунку виграють від використання асинхронних функцій. Наприклад, операції, пов’язані з вводом-виводом, як-от читання/запис із файлу або підключення до бази даних, підходять для асинхронних функцій. А операції, пов’язані з ЦП, як-от важкі обчислення, не підходять.

4. Використання CDN, яка може допомогти розподілити статичні ресурси застосунку та розвантажити сервер.

Мережа доправлення контенту (CDN) – це мережа географічно розосереджених серверів, призначена для доставки користувачам контенту у вигляді зображень, відео та інших статичних ресурсів, прагнучи до високої доступності та швидкості.

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

CDN пропонує додаткові переваги:

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

Є можливість обирати з-поміж багатьох постачальників CDN, таких як Cloudflare, Amazon CloudFront, Akamai та інших, відповідно до потреб та бюджету.

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

5. Використання зворотного проксі-сервера, який може допомогти з балансуванням навантаження та завершенням SSL, вивільняючи ваш Node.js сервер для інших завдань.

Зворотний проксі-сервер – це сервер, який знаходиться перед одним або кількома вебсерверами та пересилає вхідні запити на відповідний сервер. Зворотні проксі-сервери можна використовувати для різноманітних завдань, таких як балансування навантаження, завершення SSL і кешування.

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

“Завершення SSL” позначає процес обробки SSL-шифрування та дешифрування до того, як запит дістанеться до вебсерверів. Здійснюючи завершення SSL на зворотному проксі-сервері, ви сприяєте обробці незашифрованих запитів вебсерверами. Це знижує навантаження на вебсервери та підвищує продуктивність.

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

NGINX і HAProxy – це популярні зворотні проксі-сервери з відкритим кодом, які можуть допомогти з цими завданнями. Обидва широко використовуються, легко налаштовуються та мають активні спільноти.

Варто згадати й про інші доступні зворотні проксі-сервери, як-от Apache, Traefik тощо. Аналіз вимог вашого застосунку допоможе обрати підхожий.

6. Використання кешування, яке може підвищити продуктивність вашого застосунку.

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

Можна застосовувати різні типи кешування:

  • Кешування в пам’яті. Цей спосіб зберігає дані в пам’яті сервера додатку. Він швидкий, але нестабільний: якщо сервер перезапустять, дані будуть втрачені.
  • Кешування на диску. Дані зберігаються на диску сервера додатку. Це кешування повільніше, ніж у пам’яті, але більш тривке.
  • Розподілене кешування. Дані розподіляються для зберігання між кількома серверами. Це корисно для застосунків, які масштабуються горизонтально на кількох серверах.

Існує кілька рішень для кешування для Node.js, включаючи memcached і redis. Ці два здійснюють кешування в пам’яті та сприяють швидкому доступу до часто запитуваних даних.

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

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

7. Оптимізація запитів до бази даних.

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

Існує кілька способів оптимізації запитів до бази даних, наприклад:

  • Вживання індексів. Індекси можуть покращити продуктивність запитів, допомагаючи базі даних швидко знаходити необхідні дані. Важливо використовувати правильні індекси для запитів, оскільки надмір індексів може знизити продуктивність.
  • Використання підготовлених операторів. Підготовлені оператори можуть підвищити продуктивність запитів, адже вони дозволяють базі даних повторно використовувати план виконання запиту, зменшуючи витрати на парсинг під час кожного його виконання.
  • Використання пагінації. Отримання всіх даних одночасно може бути повільним і споживати багато пам’яті. Пагінація передбачає отримання певного числа рядків за раз, що зменшує навантаження на базу даних і покращує продуктивність застосунку.
  • Кешування. Кешування результатів часто виконуваних запитів усуває необхідність кожного разу звертатись до бази даних, що теж сприяє підвищенню продуктивності.
  • Використання плану-пояснення. У багатьох базах даних є функція плану-пояснення, яка дозволяє побачити, як база даних виконає запит. Це може допомогти визначити перешкоди продуктивності та взити відповідних заходів.
  • Застосування ORM (Object-relational mapping) бібліотек для обробки запитів до бази даних. ORM бібліотеки, як-от sequelize або mongoose, забезпечують вищий рівень абстракції і пропонують багато способів оптимізації продуктивності.

Варто пам’ятати, що різні бази даних мають різні характеристики продуктивності та можуть потребувати різних методів оптимізації. Потрібно добре розуміти характеристики конкретної бази даних, аби використовувати її якнайефективніше.

8. Використання менеджера процесів для кращого керування процесами.

Використання менеджера процесів на кшталт pm2 може допомогти покращити керування процесами вашого застосунку на Node.js.

pm2 – це популярний менеджер процесів для застосунків на Node.js. Він дозволяє запускати кілька застосунків на одному сервері, виконувати запуск, зупинку та перезапуск програм, та слідкувати за станом застосунків.

Ось деякі з функцій, які пропонує pm2:

  • Автоматичний перезапуск. pm2 автоматично перезапустить застосунок, якщо він вийде з ладу або зупиниться.
  • Балансування навантаження. pm2 може автоматично балансувати навантаження між кількома серверами одного застосунку.
  • Моніторинг. pm2 може стежити за працездатністю, включаючи використання процесора та пам’яті, і надавати детальну інформацію про стан застосунків.
  • Керування журналами. pm2 може керувати журналами для вашого застосунку, включаючи ротацію журналів, і зводити разом журнали з кількох серверів одного застосунку.

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

pm2 – не єдиний менеджер процесів, доступний для Node.js. Є також, наприклад, forever та nodemon. Варто оцінити функції різних менеджерів процесів та обрати той, який найкраще відповідає вимогам вашого застосунку.

Це лише кілька прикладів того, як можна оптимізувати застосунки на Node.js.

Що таке Rename.kr.ua

Для Onix-Systems Rename.kr.ua – внутрішній некомерційний проєкт. На момент старту над ним працювала невелика команда: 

  • Богдан Стасюк – співавтор ідеї, підготовка інформації про перейменування
  • Дмитро Дурач – співавтор ідеї, моральна підтримка проєкту
  • Максим Сінченко – підготовка інформації про вулиці
  • Сергій Холін – менеджмент
  • Костянтин Алтухов – розробка
  • Костянтин Свідзінський – дизайн.

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

Як усе було


Історія створення сайту Rename.kr.ua почалася, відколи в Україні стартували процеси декомунізації. По ходу розгортання перейменувань вулиць та об’єктів міської географії, ставало дедалі важче слідкувати за змінами. Водночас картографічні сервіси теж не встигали відстежувати й вірно показувати назви вулиць чи знаходити потрібні адреси.

Першими, хто зрозумів, що потрібно створити такий онлайн-довідник, стали дніпряни. Вони створили сайт Rename.dp.ua, після того, як 2015 році міська влада прийняла рішення перейменувати одразу понад триста топонімічних об’єктів за кілька днів.

На той час у ще Кіровограді цей процес лише розпочинався. Тому Богдан Стасюк, котрий захоплювався краєзнавством, спільно з Дмитром Дурачем, CEO Onix-Systems, вирішили створити подібний сервіс для нашого міста.

Дмитро познайомив Богдана із Сергієм Холіним, COO Onix-Systems, який взяв на себе обов’язки менеджера цього проєкту. Богдан Стасюк забезпечував контент. У цьому йому допомагав Максим Сінченко, котрий, за його словами, робив наймаруднішу роботу – шукав інформацію про тих, на честь кого були перейменовані вулиці. Розробкою займався Костянтин Алтухов, дизайном – Костянтин Свідзінський.

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

Оскільки сайт є довідником і становить собою один великий список, його треба було візуально “полегшити”, – пояснив Максим Каменщиков,  Арт Директор Onix, – В UI-дизайні цього вдалося досягнути за допомогою кольорів та шрифтів, а також додавши “повітря” між елементами. З боку UX вирішили додати пошук та алфавітний порядок, щоб людина, котра не пам’ятає повної назви вулиці, могла вказати лише першу літеру й швидко знайти потрібну адресу. Головним для цього сайту було два критерії: зручність споживання такого контенту й відтворення атмосфери Кропивницького.

Rename.kr.ua 2.0


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

Та на початку 2022 року сайт отримав друге дихання. В місті почалася нова масова хвиля перейменувань.

Я це добре пам’ятаю, – сказав Володимир Гордієнко, Head of PHP Department, – у середині лютого 2022 року до мене звернувся Сергій Холін та розповів про Rename.kr.ua і про те, що він потребує нашої підтримки. Ми зрозуміли, що технічно сайт застарів і працював не так швидко, як того хотілося б, також він був незручним в адмініструванні. Тому ми вирішили повністю перебудувати його з нуля.

Ми обрали чудову технологію – PHP/Swoole, побудували новий бекенд та запровадили сучасні системи деплою. Словом, полегшили роботу розробників. А вже потім додали “адмінку”, онлайн-мапу, систему зворотного зв’язку та інші фічі, – розповів Володимир.

Зараз сайт стабільно приймає близько ста користувачів на день та перебуває під наглядом розробника Володимира Міхава, котрий відповідальний за всі некомерційні проєкти у відділі PHP.

В компанії, де більше 350 співробітників і 8 поверхів з офісами, знайти потрібного колегу буває не так просто. «На 8 поверсі, в лівому крилі, ліворуч повертаєш, а потім ще праворуч, і там десь третій, здається, стіл. Або спитаєш когось на місці» – приблизно такі інструкції можна було почути у відповідь на питання «А де сидить Діма Б.?». Якщо пощастить, то скаже перший колега, якого запитаєш. Або не скаже… А якщо з Дімою до цього особисто не зустрічався, то знайти його очима в потрібному опен-спейсі не варіант. Тож ідея створення мапи офісу народилася з реальної потреби.

Наші цілі при створенні мапи офісу

На момент створення мапи кількість співробітників була значно меншою, так само як кількість поверхів, які належали компанії. При цьому поверхи були не сусідні, куди можна швидко піднятись чи спуститись, а 1-ий, 6-ий і 8-ий. Для тих, хто не любить ліфти, пошук колеги міг перетворитись на фізичну вправу. 

Створення мапи передбачало кілька можливостей для співробітників:

  • Знайти колегу і його робоче місце
  • Візуально зрозуміло зобразити робочі місця, адже багато людей працюють в опен-спейс просторах
  • Переглянути інформацію про колегу

Рік 2013: Початок розробки і рішення

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

Так у липні 2013 почалась робота над мапою. Тоді ми

  • Намалювали дизайн приміщень (тоді ще у Photoshop) у псевдо-масштабі, столи різних видів, а також хлопців і дівчат.
  • Для створення карти використали рушій Я.Карт, який можна було використовувати окремо на своєму сервері. Цей рушій дозволив зафіксувати зум, завантажити картки співробітників і легко тягати карту.
  •  Для бекенду обрали мову PHP
  • Дані про колег синхронізували із LDAP системи.
  • Зробили найпростішу адмінку, через яку адміністратор вносив місця працівників і розставляв столи різних видів.
  • Мапа була закрита для зовнішніх користувачів і доступна лише за офісною IP-адресою

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

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

Рік 2019: Версія 2.0 

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

Насправді, вимог на той момент було не багато:

  • Додати нові поверхи до вже існуючих
  • Додати фото колеги до картки
  • Можливість швидко скопіювати номер телефону (бо тоді спілкування було здебільшого в Telegram), email, перейти відразу у вікно діалогу в Skype.
  • Додати технологію або/та роль працівника (Project Manager, Tech Lead, React Developer, тощо)
  • Зробити зручний пошук за технологіями та навичками.

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

Кімнати для перемовин та робочі місця

До початку пандемії майже всі колеги відвідували офіс, і оскільки робота часто вимагає дзвінків із клієнтами, попит на кімнати для перемовин був високий. Щоб колеги розуміли, де зараз вільна кімната, а де вже зайнята, ми вирішили додати відповідний функціонал. По-перше, ми додали реальні фото кімнат, оскільки вони різного розміру і розраховані на різну кількість людей. Тепер легко можна визначити, яка саме підходить для конкретної конференції з клієнтом і командою. Для цього команда HR старанно сфотографувала всі кімнати в офісі (а їх наразі 16).

По-друге, ми додали функціонал бронювання кімнат. Для цього усі кімнати внесли в корпоративний Google акаунт. Коли резервуєш визначений час, можна вибрати вільну в цей час кімнату. Забронювати кімнату можна не лише з календаря, а і з “профілю” кімнати. Варто лиш обрати “Зарезервувати” на фото відповідної кімнати, і така можливість з’являється одразу в календарі. 

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

Щодо місць, в офісі є можливість зарезервувати не лише кімнату, а й окреме робоче місце. Це актуально для тих, хто працює віддалено, але час від часу приходить до офісу, а також для місць із столами змінної висоти, яких в офісі поки що меншість. Таким чином, в офісі є місця, які співробітники можуть завчасно зарезервувати за собою.

Безпека офісу та людей

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

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

Локації

Офіс – це не лише робочий простір, а й місце дозвілля із колегами. Ходять легенди, що розробники на роботі грають у Playstation. То не легенди, таки грають. А ще на гітарі і навіть бас-гітарі… А ще грають в настільний футбол, їдять морозиво, або п’ють каву в кімнатах відпочинку. В наших офісах назбиралось чимало таких локацій, про які можна і не знати, якщо весь час знаходитись на своєму робочому місці. Тому мапа у нас слугує інструментом знайомства нових колег з офісом Оніксу, де можна влаштувати такий собі віртуальний тур, а потім побачити то все наживо.

Доступність

Раніше мапа була доступна за офісною IP-адресою, але під час епідемії коронавірусу всі працювали віддалено. Оскільки на той час ми вже зробили зручний пошук зі технологіями і навичками, навіть додали позначки за рівнем знань (від новачка до експерта) та сортування за досвідом та днем народження (у нас є традиція привітань), мапа стала зручним інструментом користування поза офісом. Тож ми інтегрували її в Hydra, основний сервіс нашої компанії, і зробили спільний логін. Таким чином, мапа стала доступною для будь-якого колеги з будь-якої точки світу.

Робочі місця

Коли офіс невеликий, лише з парою десятків столів, проблема нумерації не стоїть, не кажуче вже про логіку нумерації столів. Але коли офіс розрісся до 8 поверхів із сотнями робочих місць, постало питання: а як же ті столи нумерувати? Відповідь – наклейками! Ми вигадали, як зручно позначати столи на одному поверсі, а потім повторили це 7 разів. А щоб це було наочно, на столи приліпили наклейки з номерами. 

Окрім того, ми надали можливість співробітникам змінювати номер свого робочого місця в своєму профілі. Пересів за інший стіл – зміни його номер самостійно. Це розв’язало проблему адміністратора, який мав слідкувати за оновленням мапи місць. 

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

P.S. А ще іноді, наприклад, 1 квітня, у нас за столами сидять-лежать-працюють котики! А в день народження в іменинника святкова аватарка з кулькою, конфеті і ковпачком.

Підводячи підсумки

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

  • Зручний сервіс, інтегрований з основним сервісом компанії, Hydra, який може бути незалежним за потреби. Як доказ – демо.
  • Інтеграція з Google календарем для резервації кімнат для перемовин та столів змінної висоти
  • Доступ до власного профілю для внесення змін (фото, e-mail, соціальні мережі, тощо), в тому числі для зміни робочого місця.
  • Доступ до мапи для всіх колег через ідентифікатор єдиного входу (SSO).
  • Кастомне рішення на основі SVGі замість Yandex.map.
  • Бекенд на новішому PHP, а інтерфейс – на фреймворці Vue.js.
  • Дизайн із псевдо-масштабом з умовним збереженням розмірів і координатами столів та інших об’єктів.
  • Клікабельні зони для позначення додаткових локацій (окрім робочих місць) і об’єктів.
  • Адаптували мапу для зручного використання на мобільному телефоні.
  • Оновлений хадбар із розширеним пошуком, локаціями, сервісами компанії, та опцією резервації робочого місця чи кімнати для перемовин.
  • Сайдбар із поверхами для ліворуких і праворуких 🙂
  • Багатомовність – тепер є версія рідною-солов’їною.
  • Кульки і ковпачки для позначення іменинників, щоб усі знали, у кого сьогодні свято.