Що таке фреймворк
Списували домашні завдання у школі? Наприклад алгебру чи геометрію? Чудово.
Розумники вирішували завдання з нуля. Витрачали купу часу, підбирали формули та шукали альтернативні рішення (були й такі). Аналогічно і програміст пише код JS з нуля.
Хто хотів погуляти, посидіти зайву годинку за комп'ютером або не встигав через танці та художку, іноді (або частіше) «брав ідею» у однокласника, який уже вирішив завдання. Дивився відповідь та робив по-своєму.
|
Для фреймворків схема та сама. Це набір бібліотек та шаблонів для програмування. Розробник складає їх у продукт (сайт, мобільний додаток, елемент UI), як Lego. |
Чому використовують фреймворки — аналогічно з вирішенням завдань у школі. Це швидко, схема перевірена та безпечна. Відмінник робить завжди правильно, чи не так?
Використовувати лише бібліотеку замість фреймворку — як читати лише одного автора. Цікаво, але для спілкування з оточуючими недостатньо словарного запасу.
Тому на бібліотеках пишуть інші фреймворки, додають функції та макети. А ось їх уже комбінують та використовують у практичних завданнях.
Vue
Vue.js – це безкоштовна Javascript-платформа з відкритим кодом для адаптивних програм.
Суть відкритого коду в користі для спільноти. Замість закритого майданчика, де над продуктом працюють лише розробники, приєднується співтовариство: знаходять баги, помилки, покращують код. Продукт розвивається швидше.
Vue складається з головної бібліотеки для представлення шару і допоміжних бібліотек для оптимізації односторінкових сайтів.
Приклад коду для форми замовлення на Vue.
Vue використовують для Landing Page. Швидкість та гнучкість програми збережена, незважаючи на маленькі розміри фреймворку – не більше 20 КБ. Розміри для Angular – мінімум 55 КБ, а для React – від 100 КБ. За рахунок цього Vue виграє за продуктивністю.
Vue.js простіше з точки зору API та дизайну. Веб-розробник працює швидше – простий односторінковий сайт без переходів та анімацій створюється за день.
Повне керівництво.
React
React.js — JavaScript-бібліотека розробників Facebook. Теж із відкритим кодом.
Про Реакті часто говорять, як про фреймворк. Хоча це не так. І ось чому.
У роботі React використовує компоненти та стани, а не базу з бібліотек (як у фреймворку). Компонент – елемент конструктора. Кожен із них наділений своєю логікою та структурою, і додається до коду кілька разів (якщо елементи копіюють). А стан – місце, де зберігаються змінні програми. Наприклад, інформація із запиту «Як схуднути» на сайті фітнес-тренера.
З компонентами (блоками) та станами (сховищем) розробник будує елементи програмного інтерфейсу. Наприклад, форму зворотного зв'язку чи вікно замовлення товару в інтернет-магазині.
Facebook частково розроблено на React.
Блоки не працюють самі, як у фреймворку. Їх переносять на допоміжний інструмент: Typescript, Redux чи Jest.
Angular
В одній публікації виявили, що Angular – це фреймворк із фреймворками. Масло масляне! У фреймворків не може бути своїх підсистем. Якщо пишеться нова програма на бібліотеках JS, це новий фреймворк.
Angular працює за принципом form-based. Форма — структура, в яку користувач вводить інформацію, а потім відправляє до бази даних (Back-end). Наприклад, форма замовлення дзвінка на сайті будівельної компанії.
Приклад архітектури Angular для програм To-do List. Якщо програма розробляється з нуля, то до Angular додають рішення full-stack, як Mean.io (node.js, Angular, MongoDB, Express).
Angular пропонує розробнику набір шаблонів для таких форм. Залишається адаптувати під завдання.
Також, Angular часто використовують разом з Bootstrap (бібліотекою HTML і CSS шаблонів) для UI — інтерфейсу користувача. На фреймворку створюється макет, а Bootstrap упаковує в кольори та форми.
Документація фреймворку містить не лише рекомендації щодо розробки, а й гайд зі стилізації.
Angular material
Перелік компонентів mobile Angular User Interface (UI).
Спільнота доповнює фреймворк новими бібліотеками, на зразок Material. Це шаблони для веб-сайтів та програм. Особливість компонентів у цьому, що вони доповнюють головну бібліотеку Angular. А програми однаково виглядають на екрана ПК та мобільних пристроїв.
Ionic
Для мобільного додатку замість Ангуляра та Material спробуйте Ionic. Це фреймворк із вбудованою бібліотекою, на зразок Bootstrap: картки, кнопки, поля введення та інші елементи. Елементи адаптуються для iOS і Android, так і налаштовуються під завдання розробника.
Приклад коду та готового рішення для календаря на іоніці. Цей та інші приклади дивіться на сайті https://ionic.io/framework
Головний плюс, який відзначили розробники — швидкість виробництва продуктів. Програміст пише код у браузері ПК, версії адаптуються під всі телефони, доступні готові UI-компоненти та плагіни. Спробуйте самі.
Ось гайд.
Protractor
Фреймворк розроблено для тестування продуктів перед презентацією користувачеві. Комплексне тестування перевіряє, чи відповідає програма запитам юзера: чи працює скролл, відкриваються вкладки, з'являється меню, якщо клікнути на іконку та інше.
Інструменти в протракторі не впливають на код, а імітують взаємодію з продуктом у Google Chrome, Mozilla та інших браузерах.
У Комп'ютерній Академії IT STEP студенти витрачають на базу JS 15-20 відсотків курсу. Решта – поглиблення в Angular, React та інші інструменти Javascript.
З таким підходом Веб-розробник розуміє слабкі місця продукту, який фреймворк використовувати та як полегшити життя клієнту, не використовуючи сухий Javascript. А знання обміняти на грошові одиниці.
Переходь на сторінку курсу «Front-end розробка онлайн», знайомся з програмою навчання та забирай бонуси.