ТОП-10 front-end фреймворків в 2016

26

Від автора: Front-end фреймворки дозволяють досить сильно прискорити процес розробки сайту. Із-за великої популярності їх стало дуже багато, і кожен день з’являються все нові.

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

На що потрібно дивитися при виборі front-end фреймворку

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

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

Адаптивний дизайн – будь-який розробляється вами сайт повинен добре відображатися на всіх пристроях, так як все більше людей заходять в інтернет через мобільні пристрої. Сайт Similar Web випустив звіт стан мобільного інтернету в США за 2015 рік, в якому говориться, що 56 відсотків споживачів трафіку провідних сайтів в США заходять в інтернет з мобільних пристроїв. Шукайте front-end фреймворки з підтримкою адаптивного дизайну, тоді у вас буде на одну проблему менше.

CSS препроцессоры – якщо ви використовуєте CSS препроцессоры, приміром, Sass або LESS, перевірте, щоб вони були сумісні з фреймворком.

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

Прототипи – ідеальний front-end фреймворк дозволяє швидко створювати вайрфреймы і прототипи для прискорення процесу дизайну і розробки.

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

ТОП-10 front-end фреймворків в 2016

Без зайвих слів представляю вам восьмий за популярністю front-end фреймворк в 2016 році.

Bootstrap

ТОП був би неповним без дуже популярного front-end фреймворку Bootstrap. Авторами фреймворку є творці Twitter, які випустили його в 2011 році. Самий використовуваний open-source фреймворк в світі.

Як і в будь-який інший ефективний front-end фреймворк, в Bootstrap входять компоненти HTML, CSS і JS. Фреймворк дотримується стандартів адаптивного веб-дизайну, дозволяючи вам створювати адаптивні сайти будь-якої складності і розмірів.

Постійні оновлення Bootstrap гарантують, що ви отримаєте самі нові і кращі функції. Приміром, майже відразу в фреймворк були додані теми, що відповідають стандартам material design від Google. Теми були покращені для підтримки Sass.

Плюси:

підтримка адаптивного веб-дизайну (можна відключити за бажанням);

велика документація.

Мінуси:

рідко використовувані стилі збільшують вагу стандартного фреймворку до 276 Кб;

занадто багато HTML класів і DOM елементів, що забруднює код і плутає користувача.

Підходить для новачків і тих, хто віддає перевагу надійні front-end фреймворки.

Semantic-UI – новачок серед фреймворків, що виділяється серед інших, і у якого є всі шанси стати самим популярним front-end фреймворком.

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

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

Плюси:

семантичні назви класів дозволяють навіть новачкам швидко освоїтися;

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

універсальні елементи спрощують кастомізацію.

Мінуси:

дуже великі пакети порівняно з Foundation і Bootstrap;

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

Підходить новачкам і тим, кому потрібен легкий і спритний фреймворк.

Foundation

Foundation від компанії Zurb – це високо розвинутий front-end фреймворк корпоративного класу, який ідеально підходить для створення гнучких і адаптивних веб-сайтів. Фреймворк використовується на сайтах Facebook, eBay і Mozilla і з-за своєї складності не може підійти новачкам.

Цей багатий на можливості фреймворк підтримує апаратне прискорення для створення плавного, блискавичної анімації. Для рендеринга на мобільних пристроях в фреймворк включена бібліотека Fastclick.js. Фреймворк написаний на Sass і включає в себе спеціально розроблений атрибут для обміну даними, за допомогою якого можна завантажувати легковагі HTML секції для мобільних екранів і секції поважче для великих екранів. Про порівнянні Foundation і Bootstrap можете прочитати в нашій статті Bootstrap проти Foundation.

Плюси:

немає заблокованих стилів, що дає вам більше гнучкості;

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

Мінуси:

досить велику вагу файлів за замовчуванням;

трохи складний для новачків.

Підійде розробникам з пристойним досвідом, чиє основне завдання – швидка розробка, привабливі і адаптивні сайти.

Materialize

Materialize – адаптивний front-end фреймворк, який відповідає специфікації Google по дизайну material design. У комплекті ви знайдете готові набори кнопок, іконок, карток, форм та інших компонентів. Є стандартна версія і версія під управлінням Sass.

У Materialize є зручна сітка, з допомогою якої можна створювати макети. Також в стандартному комплекті вже присутні стилі матеріал дизайну для тіней, шрифтів, квітів і т. д.

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

Плюси:

величезний вибір компонентів;

адаптивність гарантує, що сайти будуть підтримуватися на всіх пристроях.

Мінуси:

великий розмір файлів робить роботу з фреймворком незручною;

не підтримується модель flexbox.

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

Material UI

Якщо ви шукайте front-end фреймворк, який буде відповідати вимогам Google матеріал дизайну, тоді Material UI для вас. Фреймворк Material UI – найбільш всеосяжна структура з реалізації цих принципів, але є один нюанс. Він не призначений для створення абсолютно нових дизайнів сайтів.

Material UI працює під управлінням препроцесора LESS, а в комплекті йдуть готові стилі і компоненти під матеріал дизайн. Фреймворк також використовує компоненти React, що також плюс.

Material UI – фреймворк з високою кастомізацією, а його стилі розділені по окремих файлів. Тобто ви можете переписати LESS CSS змінні, не впливаючи на компоненти фреймворка.

Плюси:

найпростіший спосіб серед фреймворків для роботи з матеріал дизайн від Google;

висока кастомізація.

Мінуси:

не призначений для створення дизайнів з нуля;

вимагає гарного розуміння React.

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

Pure

Фреймворк Pure створений командою розробників Yahoo. У комплекті йде легкий масив CSS модулів, які підходять під будь-який проект. З Pure ви з легкістю зможете створювати адаптивні кнопки, меню, сітки, таблиці і т. д. Фреймворк написаний на чистому CSS і не підтримує JS або JQuery плагіни.

Після минификации і через стиснення Gzip фреймворк Pure стискається до 4.5 Кб, що робить його одним з найбільш легких і моторних front-end фреймворків. Pure ідеально підходить для мобільного розробки, з-за чого він сподобався безлічі розробників.

Плюси:

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

гнучкий масив CSS модулів можна використовувати абсолютно будь-якому дизайні та проекті.

Мінуси:

написаний на CSS без підтримки JS або JQuery плагіни.

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

Skeleton

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

Skeleton – адаптивний фреймворк, в основі якого лежить 12-ти колоночная сітка. В комплекті тільки необхідні елементи: кнопки, списки, таблиці, форми і т. д.

Плюси:

дуже легкий;

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

Мінуси:

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

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

UIKit

UIKit – высокомодульный front-end фреймворк, який вирізняється серед більшості по безлічі причин. Головна причина – наявність двох препроцесорів, LESS і Sass.

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

Ще більшу універсальної фреймворку надають 30 модульних компонентів. Серед компонентів: меню, HTML форми і таблиці, JS компоненти, наприклад, виїжджають вкладки і модальні вікна, загальні елементи, такі як кнопки, знаки і перекривають шари, а також компоненти макету, такі як рідкі, адаптивні системи сіток.

Плюси:

висока кастомізація;

унікальна модульна структура, що дозволяє додавати компоненти стилями, не надаючи впливу на загальні стилі;

можливість створювати складні інтерфейси, завдяки компонентам зразок вкладених списків.

Мінуси:

фреймворк ще новий, в мережі за нього дуже мало ресурсів.

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

Milligram

Milligram – ще один легкий фреймворк, схожий на Skeleton. Після стиснення через Gzip розмір файлу досягає 2Кб, що забезпечує розробникам простий і зручний старт.

Система сіток в Milligram відрізняється від більшості, так як вона використовує стандарт CSS Flexible Box Layout Module. Також в комплекті є пара ключових компонентів, які допоможуть вам розпочати роботу, серед яких шрифти, кнопки, форми, списки, таблиці, цитати і т. д.

Плюси:

дуже легкий, всього 2Кб після стиснення через Gzip;

використовує систему сіток Flexbox.

Мінуси:

фреймворк досить новий, про нього дуже мало інформації;

мінімальну кількість компонентів стилів у порівнянні з більш великими фреймворками.

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

Susy

Деякі скажуть, що Susy – не зовсім front-end фреймворк, так як він вирішує складні завдання по макетуванню. За фактом, безліч людей розцінюють Susy, як систему сіток, але вона може стати незамінним інструментом для людей, які працюють з макетами.

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

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

Плюси:

підвищена гнучкість дозволяє створювати сітки будь-якої складності;

автоматичні обчислення.

Мінуси:

не покриває всі питання дизайну сайту, що вимагає ще одного фреймворку;

немає вбудованих сіток.

Підходить розробникам з унікальними завданнями щодо створення макетів.

Статистика по front-end фреймворкам

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

Bootstrap: 101,433 зірок

Semantic-UI: 28,170 зірок

Foundation: 24,127 зірок

Materialize: 21,515 зірок

Material UI: 19,631 зірок

Pure: 14,967 зірок

Skeleton: 12,622 зірок

UIKit: 7,433 зірок

Milligram: 4,195 зірок

Susy: 3,506 зірок

Крім того, в порівнянні ТОП-5 front-end фреймворків на Google Trends видно, що Bootstrap все ще на голову випереджає своїх конкурентів за кількістю згадувань.

Висновок

Як видно, різні front-end фреймворки мають свої переваги. Що підходить одному розробника або проекту, не підходить іншому. Тому вкрай важливо провести аналіз безлічі варіантів, перш ніж вибрати щось конкретне.

Перед вибором front-end фреймворку визначте свій рівень знань, а також базові вимоги вашого проекту. Швидше за все, один або кілька продуктів зі списку ідеально підійдуть вам.