Це тестове завдання розраховане на frontend розробників-початківців. Метою завдання є демонстрація того, як використання фреймворку може спростити процес розробки веб-додатків, зокрема завдяки Component Based Architecture (CBA).
Всі ми бачили сторінки, на яких є хедер, футер, можливо, сайдбар і безпосередньо тіло сторінки. У той же час в додатку можуть бути сторінки без додаткових елементів, наприклад сторінка друку. Це підштовхує нас до того, що має бути спосіб створення структури сторінки з невеликих автономних модулів, кожен з яких може бути використаний неодноразово і в різних місцях додатку. Про це власне і говорить CBA.
Дотримуватися принципів CBA без використання фреймворку можна, але клопітно. Саме тому виконання тестового завдання передбачено з використанням будь-якого сучасного фреймворку, наприклад, Angular, React, Vue.js. Основним завданням буде розробка набору компонентів для створення різних конфігурацій сторінок веб-додатку.
Вимоги
- Створити такі компоненти:
- Хедер (header)
- Футер (footer)
- Кожен компонент повинен бути розроблений з урахуванням принципів перевикористання та розширюваності.
- Створити сторінку "Dashboard" з використанням компонентів header та footer.
- Створити сторінку для друку Print без використання компонентів header і footer.
- Перевірити можливість легкої зміни вмісту хедера та футера без зміни інших частин програми. У хедер можна додати навігацію, а у футер блок “Контакти”
- Випробувати можливість розширення функціональності компонентів без зміни їхнього основного коду. У хедер можна додати кнопку Logout
Опціонально – компоненти мають бути стилізовані та адаптивні для різних пристроїв.
Тестові сценарії
Для перевірки своєї роботи використовуйте наступні тестові сценарії.
- Перевірте відображення компонентів сторінки «Dashboard» згідно з вимогами. Має бути хедер і футер.
- Перевірте відображення компонентів сторінки Print відповідно до вимог. Тільки тіло сторінки без хедера та футера.
- Переконайтеся, що вміст компонентів може бути легко змінений без зміни інших частин програми.
