Нарешті я зрозумів інструменти побудови інтерфейсу. Ти теж можеш.

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

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

Нехай вас не лякає стан техніки

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch ... Існує стільки інструментів для побудови інтерфейсу, що здається неможливим встигнути.

Ключ не в залякуванні. Всі ці проекти розроблені, щоб полегшити вам життя.

Щоб зрозуміти, що, чому та як ці інструменти, вам просто потрібно зрозуміти кілька понять.

Концепція №1 - Основною дихотомією інструментів побудови є "встановлення проти виконання"

Інструменти побудови виконують дві речі:

  1. Встановіть речі
  2. Робіть речі

Перше питання, яке слід задати собі, стикаючись із новим інструментом збірки, це: "Цей інструмент призначений для того, щоб встановлювати речі для мене чи робити для мене?"

Інсталюючи такі інструменти, як npm, Bower та Yeoman, можна встановити майже все, що завгодно. Вони можуть встановлювати інтерфейсні бібліотеки, такі як Angular.js або React.js. Вони можуть встановити сервери для вашого середовища розробника. Вони можуть встановлювати тестові бібліотеки. Вони навіть допомагають вам встановити інші інструменти побудови інтерфейсу.

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

Інструменти "виконання", такі як Grunt, Webpack, Require.js, Brunch та Gulp, набагато складніші. Метою інструментів "робити" є автоматизація всіх службових та схильних до помилок завдань у веб-розробці. Те, що вони роблять, іноді називають "завданнями".

Для виконання цих «завдань» вони часто використовують власну екосистему пакетів та плагінів. Кожен інструмент пише завдання по-різному. Ці інструменти також не всі роблять одне і те ж. Деякі інструменти, що "роблять", намагаються вирішити будь-яке завдання, яке ви виконуєте (Grunt, Gulp тощо). Інші зосереджуються на одному, наприклад, на обробці залежностей Javascript (Browserify, Require.js тощо).

Іноді ви в кінцевому підсумку використовуєте кілька цих інструментів в одному проекті.

Ось короткий перелік «завдань», які я автоматизував за допомогою цих «виконуючих» інструментів:

  1. Заміна рядка тексту у файлі
  2. Створення папок і переміщення файлів у ці папки
  3. Запуск моїх модульних тестів за допомогою однієї команди
  4. Оновлення браузера, коли я зберігаю файл
  5. Поєднання всіх моїх файлів JavaScript в один і всіх моїх файлів CSS в одному
  6. Зменшення моїх об’єднаних файлів JavaScript і CSS
  7. Зміна розміщення тегів на HTML-сторінці

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

Концепція №2 - бабуся та дідусь усіх інструментів побудови - це Node та npm

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

Вузол та NPM потрапляють у нашу дихотомію "побудувати" та "зробити". Node - це інструмент “do”, а npm - “install”.

npm може встановлювати такі бібліотеки, як Angular.js або React.js. Він також може встановити сервер для локального запуску вашого додатка для розробки. Він навіть може встановити інструменти для зменшення коду.

Node, навпаки, "робить" щось за вас, наприклад, запускає файли JavaScript, сервери та багато іншого.

Якщо вам потрібно місце, щоб почати навчання, починайте з Node + npm і затримайтеся там деякий час. Коли ваш проект стане досить великим, ви досягнете меж того, що Node та npm можуть автоматизувати для вас. На той момент ви можете органічно включити інший інструмент побудови.

Концепція №3 - збірка - це просто версія вашого додатка, готова до виробництва

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

Але коли настав час перенести ваш додаток у виробництво, наявність декількох файлів JavaScript або CSS не є ідеальним варіантом. Коли користувач відвідує ваш сайт, кожен із ваших файлів потребуватиме додаткових запитів HTTP, що робить ваш сайт повільнішим для завантаження.

Отже, щоб виправити це, ви можете створити "збірку" нашого додатку, яка об'єднує всі ваші файли CSS в один файл і робить те саме з вашим JavaScript. Таким чином ви мінімізуєте кількість та розмір файлів, які отримує користувач. Щоб створити цю “побудову”, ви використовуєте “інструмент побудови”.

Нижче - скріншот програми, що розробляється. Зверніть увагу, як він має 5 тегів і 3 теги? Якщо ви подивитесь на ліву сторону, помітите, що в папці РОЗВИТКУ є 10 файлів?

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

Зверніть увагу, як у нас просто є один тег сценарію та один тег посилання? І тепер у папці PRODUCTION є лише 4 файли порівняно з папкою DEVELOPMENT 10.

Додаток є рядком за рядком однаково. Ми щойно ущільнили його в акуратний невеликий пакет, який ми називаємо "побудовою".

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

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

Концепція №4 - Рядки між "встановити" та "зробити" можуть бути розмитими

Жоден інструмент не робить одного, а не іншого. Усі вони роблять поєднання "встановити" та "зробити". Але загалом інструмент, як правило, робить більше одного, ніж іншого.

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

Концепція №5 - Не існує єдиної правильної комбінації інструментів

Поєднання інструментів, якими ви користуєтесь, залежить від вас.

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

Або ви можете просто використовувати Node і npm разом з додатковими інструментами. Це чудово для початківців, але в міру зростання вашого проекту це може почати здаватися занадто ручним процесом.

Або ви можете використовувати декілька інших інструментів поверх Node та npm у вашому проекті. Отже, ваш додаток використовуватиме Node + npm як основне, а потім, можливо, Grunt + Bower або Webpack або Gulp + Bower.

Застосування комбінації таких інструментів, як Node + npm, дозволяє автоматизувати багато завдань у вашому проекті. Ціна, яку ви платите, полягає в тому, що ці інструменти мають круту криву навчання.

Концепція №6 - Інструменти побудови мають круту криву навчання, тому вивчайте лише те, що необхідно

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

Моя порада полягає в тому, щоб навчитися лише того, що саме потрібно для роботи, і нічого іншого.

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

Пам’ятайте: передчасна складність уповільнить вас.

Концепція №7 - Усі інструменти побудови мають одну мету: зробити вас щасливими завдяки автоматизації багатьох дрібних завдань

Ви використовуєте свій інструмент побудови у повному обсязі, коли досягаєте того, що я називав "інструментом побудови нірвани". Це тоді, коли після того, як ви збережете файл або виконаєте одну команду, тонна задач виконується “автоматично” для вас.

Якщо ваш інструмент побудови все ще вимагає від вас ручного переміщення файлів, зміни значень або запуску команд, щоб отримати нову збірку, ви ще не досягли інструменту побудови nirvana.

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

Отже, скільки зусиль ви повинні докласти для налаштування та налаштування вашого інструмента збірки? Просто: зупинись, коли ти задоволений тим, що він робить для тебе.

Концепція 8 - це не тільки ви. Документація часто страшна.

Це не ти, обіцяю. Для багатьох з цих інструментів документація досить відсутня. Іноді зрозуміти, як виконувати основні завдання, може бути важко.

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

Хоча це дратує, воно також надає вам можливість напружити м’язи кодера і реалізувати щось креативне.

Зрештою, чи не тому ми робимо це?

Дякуємо, що прочитали це! Сподіваємось, ці кілька моментів роблять наближення інструментів побудови менш заплутаним досвідом. Якщо ні, я радий пояснити будь-які запитання (або виправити помилки, які ви знайдете тут), пишіть мені @Roneesh!

І звичайно, якщо вам сподобалось прочитане, будь ласка, переконайтеся, що ❤ це нижче і поділіться з друзями. Для мене як письменника це означає світ!