Boilerplate або bootstrap - що вибирати при створенні проекту

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

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

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

Використання Boilerplate

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

• Готовий HTML5-шаблон спільно з базовою структурою файлів і папок під майбутній проект;
• Готові до використання, оптимізовані стилі друку;
• Крос-браузерна верстка;
• Оптимізація під мобільні браузери;
• Прогресивне поліпшення (progressive enhancement) і поступова деградація (graceful degradation);
• Покращена конфігурація взаємодії з сервером;
• Правила для стиснення і оптимального кешування;
• Оптимізований під Google Analytics сниппет сайту;
• і багато іншого …

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

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

Використання Bootstrap

Bootstrap є фреймворком для front-end розробки і набором інструментів веб-дизайнера для створення сучасних web-сайтів. За допомогою фреймворка Bootstrap ви можете створити повністю функціональний сайт з нуля. Тобто, він надає вам не тільки стартову точку, але і всі базові елементи, які можуть знадобитися при створенні сайту. Скачуваний архів Bootstrap містить в собі тільки файли для CSS і JS компонентів, плюс набір шрифтових іконок. На додаток до цього, ви можете завантажити основний шаблон для початку створення сайту. Структури файлів і папок для майбутнього проекту або конфігурацій для взаємодії з серверної частиною сайту - не існує.

Переваги та основні характеристики:

• Орієнтованість в першу чергу на мобільні пристрої;
• Крос-браузерна сумісність;
• Легкість використання;
• Система CSS-сітки;
• Готові до використання компоненти і утиліти;
• і багато іншого …

Список компонентів і утиліт фреймворка Bootstrap представлений нижче:

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

Використання Boilerplate плюс Bootstrap

Використання вашого власного рішення на базі Boilerplate

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

Правильний вибір між цими продуктами залежить від двох речей. Перше - ви повинні знати, що вам необхідно для створення проекту і які вимоги пред'являє сам проект. І друге - ви повинні знати, що може запропонувати вам кожен з цих програмних продуктів (Boilerplate Bootstrap), їх переваги і недоліки. Зрозуміло, що з першим питанням я не зможу допомогти вам, а ось по другому питанню можу дати короткий рада, що складається з декількох пунктів:

• C допомогою Boilerplate ви не зможете створити цілісний сайт - це лише відправна точка;
• C допомогою Bootstrap можна створити з нуля повний сайт завдяки компонентам і утиліт цього фреймворка;
• Boilerplate є серверно-орієнтованим продуктом - хороший шаблон для старту проекту, якщо ви працюєте з серверними технологіями, як наприклад PHP;
• Bootstrap - клієнт-орієнтований продукт, це повний набір інструментів для створення сайтів (front-end розробка);
• Boilerplate - це набір основного коду, в який ви можете додати будь-який компонент, який необхідний;
• Bootstrap - навпаки, це повний набір готових до використання компонентів, які ви можете використовувати "з коробки";
• Ви можете об'єднати разом Boilerplate і Bootstrap, щоб отримати переваги обох продуктів;
• Ви можете створити і використовувати свій власний налаштований шаблон, що включає тільки ті компоненти, які вам необхідні.

Моїм заключним словом буде наступне. Обидва продукти - і Boilerplate і Bootstrap є прекрасними інструментами, які ви можете використовувати для своєї роботи. Все залежить від того, які завдання перед вами стоять - той інструмент вам і потрібно вибрати для вирішення завдання.

Вердикт від мене

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