10 порад щодо вибору найкращого технологічного стеку для розробки веб-додатків

• Що таке технологічний стек для веброзробки?
• Технологічний стек для фронтенд-розробки
• Технологічний стек для бекенд-розробки
• Що потрібно враховувати при виборі технологічного стеку
• Наш досвід у виборі технологічного стеку
• Популярні технологічні стеки для веброзробки та актуальні тренди
• 10 порад щодо вибору правильного технологічного стеку
• Переваги вибору відповідного технологічного стеку
• Вибір правильного технологічного стеку
• FAQ

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

Що таке технологічний стек для веброзробки?

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

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

Технологічний стек для фронтенд-розробки

Фронтенд або клієнтська частина стосується всього, що бачать користувачі і за допомогою чого вони взаємодіють з сайтом. Фронтенд охоплює візуальну та текстову інформацію, інтерактивні ефекти та елементи керування, доступні відвідувачу сайту. Для відображення контенту вебсторінок через браузер використовується мова розмітки гіпертексту (HTML), а за допомогою каскадних таблиць стилів (CSS) оформлюється вигляд контенту. Для створення та управління інтерактивними функціями розробники застосовують JavaScript, і для цього створено багато бібліотек.

Технологічний стек для бекенд-розробки

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

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

Що потрібно враховувати при виборі технологічного стеку

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

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

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

Ось що слід враховувати при виборі технології:

• Розмір і тип проєкту
• Складність проєкту
• Швидкість розробки
• Вартість спеціалістів
• Доступність спеціалістів
• Наявні інструменти розробки
• Наявність готових рішень
• Гнучкість рішення
• Наявність широкої спільноти
• Відмовостійкість рішення
• Тенденції розвитку
• Наявність детальної інформації
• Витрати на підтримку
• Вимоги до часу завантаження
• Вимоги до безпеки
• Кросплатформеність додатків
• Інтеграція з іншими рішеннями 

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

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

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

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

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

1. Прості (сайти-візитки, лендінг-сторінки, прості інтернет-магазини, прості додатки) — такі рішення зазвичай створюються на основі тематичних готових рішень, систем управління контентом (CMS) або шаблонів.
2. Середні (складні інтернет-магазини та маркетплейси, національні портали, різні сервіси, розвинуті додатки) — ці рішення зазвичай створюються за допомогою фреймворків.
3. Складні (великі портали, соціальні мережі, інноваційні та нетипові рішення) — ядро таких проєктів зазвичай розробляється на чистих (нативних) мовах програмування.

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

Наш досвід у виборі технологічного стеку

Ми брали участь у виборі технологічного стеку для більшості наших проєктів. Наприклад, ми працювали з Thomas Cook. Цей клієнт звернувся до нас із запитом розробити внутрішнє рішення для бронювання турів для туристичних агентств. До того, як вони звернулися до нас, у них вже був стек технологій з .NET для бекенду.
Що стосується фронтенду, вони були відкриті до різних технологічних варіантів, оскільки хотіли розробити досить складне рішення у стислі терміни. Ми запропонували використовувати Vue.js для фронтенд-розробки. Цей фреймворк є одним з найшвидших доступних фреймворків і пропонує просту функціональність JS для роботи. Клієнт був дуже задоволений вибором, оскільки фреймворк ідеально підійшов для проєкту.

CountryHelper — це наш власний стартап, який ми розробили з нуля. Як і для всіх стартапів, швидкість розробки була нашим ключовим пріоритетом. Нам потрібно було якнайшвидше запустити MVP, тому ми вибрали Python за його швидкість. Для цього ми обрали фреймворк Django, який є найпопулярнішим. Потім ми додали фреймворк FastAPI для мікросервісної архітектури, а саме для інтеграції з ШІ.

Ми також вирішили побудувати весь проєкт, використовуючи мікросервісну архітектуру, оскільки вона є перспективною для подальших змін і доповнень. Мікросервісний підхід підходив для роботи з можливими змінами напрямку. Для фронтенд-розробки ми обрали Vue.js через його високу швидкість.

У міру розвитку стартапу інтерфейси ставали складнішими, але цей фреймворк досі без проблем з ними справляється. Загалом, Vue.js дозволив нам досягти високої швидкості завантаження сторінок, і ми змогли потрапити до зеленої зони Google Search Console як для десктопних, так і для мобільних пристроїв. Це виявився чудовий вибір для стартапу, і ми ним дуже задоволені.

Південний Банк — один з найбільших банків Східної Європи. Спочатку вони звернулися до нас з проханням розробити вебсайт на WordPress. Ми пояснили всі недоліки та потенційні проблеми, які можуть виникнути при створенні вебсайту для банку на цій технології. Хоча вебсайт і знаходився на окремому сервері від внутрішніх систем, його розробка на WordPress все одно зробила б його більш вразливим до загальних загроз. Незважаючи на те, що було багато спроб, сайт не був зламаний за цей час.

Тому ми обговорили всі переваги та недоліки вибору цієї технології з нашим клієнтом і вирішили розробити сайт на Symfony, оскільки цей клієнт віддавав перевагу PHP для своїх проєктів, і це була одна з основних технологій у їхньому стеку для вебсайтів. Ми вирішили переписати сайт, при цьому підтримуючи стару версію. Попри численні спроби, сайт не був зламаний протягом цього часу.

Потім ми провели поглиблене тестування безпеки нового проєкту та впровадили кілька заходів безпеки, зокрема загальноприйняті, такі як фільтрація IP для входу, приховування URL адміністратора та багато інших. Клієнт залишився задоволений вибором технології, який ми запропонували.

Популярні технологічні стеки для веброзробки та актуальні тренди

Для кращого розуміння можна виділити три рівні абстракції в технологіях, а саме:

• Чиста (нативна) функціональна мова — це метод, який дозволяє робити майже все, і ми обмежені лише можливостями самої мови. Багато відомих вебсайтів, які відвідують мільярди користувачів, створені саме за допомогою різних нативних функціональних мов. Більше того, найбільші проєкти часто розробляють власні технології, оскільки існуючі вже не задовольняють їхні потреби.
• Фреймворк — це тип середовища розробки для програміста, яке має готові правила та інструменти. З одного боку, фреймворк допомагає та прискорює розробку; з іншого боку, він накладає певні обмеження. Фреймворки використовуються для проєктів середньої складності, які відвідують мільйони користувачів.
• CMS (система керування контентом) — це готове “коробкове” рішення, яке дозволяє створити сайт шляхом налаштування, а не програмування. Однак CMS має багато обмежень, тому реалізація нестандартних рішень або створення унікальних функцій є складною та неефективною. CMS підходить для простих сайтів з відвідуваністю до мільйона користувачів на місяць.

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

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

• PHP – Facebook, KinoSearch  
• Python – Instagram, Pinterest, Reddit  
• Ruby – 500px, Groupon, Airbnb  
• Java – EBay, Amazon, Alibaba  
• C# – Guru, Stack Overflow, Bank of America  
• JS – LinkedIn, Walmart, PayPal  

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

Уявімо невеликий проєкт із 10 000 відвідувачів на день. Його дешевше створити на CMS, яка хоч і споживає втричі більше серверних ресурсів, однак за потреби можна просто додати ще один сервер за $50 на місяць, і проєкт продовжить працювати стабільно. Натомість, коли йдеться про сайт із 100 мільйонами користувачів на день, витрати на додаткові сервери були б просто астрономічними, тож у таких випадках набагато легше й вигідніше інвестувати у розробку рішення на нативній мові програмування, яке буде адаптоване саме під цей проєкт. Пам’ятайте: чим складніший проєкт, тим більше технологій він використовуватиме.

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

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

Популярні веб-фреймворки:  

• Laravel  
• Django  
• Ruby On Rails 
• ASP.NET
• Spring  
• AngularJS 
• Express

CMS (системи керування контентом), про які ми вже згадували, а також CMF (фреймворки для керування контентом) — це готове програмне забезпечення, яке потрібно налаштувати відповідно до вимог. Завдяки CMS багато сайтів можуть дуже швидко стартувати, адже вони мають безліч готового коду, створеного для найрізноманітніших сценаріїв використання. Існує незліченна кількість модулів із готовими рішеннями.

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

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

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

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

Коли йдеться про вибір технологічного стеку для розробки веб-додатків, також варто згадати мобільні додатки, де останнім часом використовуються два підходи: нативна розробка та крос-платформені технології. Нативні додатки використовують оригінальні мови програмування, зокрема Swift (для iOS; раніше це був Objective-C) та Java (для Android), тоді як різні крос-платформенні технології базуються на різних мовах програмування, зокрема: Flutter, React Native тощо.

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

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

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

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

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

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

10 порад щодо вибору правильного технологічного стеку

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

1. Розмір, тип та складність проекту. Пам’ятайте, чим більший проєкт, тим складнішим буде технологічний стек веб-додатку. Вам потрібно буде врахувати спектр необхідних інструментів, а також вибрати між готовими рішеннями та індивідуальною розробкою, яка повніше розкриє можливості мови програмування.
2. Швидкість та функціональність веб-ресурсу. Пріоритет віддається технологічним рішенням, здатним забезпечити необхідний рівень цих показників.
3. Очікуване навантаження, продуктивність та надійність системи. Тут оцінюється здатність технологій задовольняти такі вимоги, як час завантаження та обробка очікуваної кількості одночасних запитів. Важливою також є відмовостійкість порівнюваних технологій веб-додатків для стабільної та безперебійної роботи сайту.
4. Гнучкість технологічного стеку веб-додатку. Має бути зроблений висновок щодо гнучкості рішення та наявності інструментів для розробки, які дозволять адекватно реагувати на виклики проєкту.
5. Масштабованість проєкту та здатність технологій її забезпечити.
6. Популярність стеку та потенціал для вдосконалення. Наявність великої спільноти експертів гарантує регулярні оновлення технологій у вашому проєкті. Крім того, завдяки такій екосистемі вже існує багато готових рішень та детальної документації.
7. Безпека та конфіденційність даних, які може гарантувати ваш технологічний стек для веб-розробки.
8. Терміни та бюджет проєкту. Обраний стек має забезпечувати необхідну швидкість розробки. Варто враховувати витрати на використання певних технологій, залучення відповідних фахівців, а також майбутні витрати на підтримку.
9. Наявність достатньої кількості фахівців з вибраних вами мов, фреймворків та інших елементів технологічного стеку для веб-розробки. Слід пам’ятати не лише про етап створення, а й про подальшу постійну підтримку будь-якого веб-сайту чи додатку. Розуміння тенденцій розвитку та слідування їм стане в нагоді.
10. Сумісність та інтеграція з іншими рішеннями. Ваш веб-ресурс або додаток можуть використовуватися на різних пристроях і в поєднанні з іншим ПЗ. Це потрібно враховувати, як і доцільність розробки крос-платформних рішень.

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

Переваги вибору відповідного технологічного стеку

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

• Продуктивність. Проєкт, побудований на правильних технологіях, може ефективно обробляти високі навантаження, зберігаючи високу швидкість і продуктивність.
• Оптимізація витрат. Скоротіть витрати на розробку програмного забезпечення, використовуючи найактуальніші технології з перспективними функціями та надійною підтримкою.
• Безпека. Захистіть конфіденційні дані, використовуючи технології з найкращими практиками безпеки та вбудованими функціями захисту.
• Технічне обслуговування.  Уникайте масштабних доопрацювань та оптимізуйте витрати на підтримку завдяки сучасному технологічному стеку.
• Користувацький досвід. Підвищуйте задоволеність користувачів і забезпечуйте безперебійну роботу за допомогою адаптивних і високопродуктивних рішень.

Вибір правильного технологічного стеку

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

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

FAQ: