• Блог
  • We're JAMstack, we're JAMstack, we're JAMstack, we're JAMstack, we're JAMstack, we're JAMstack, we're JAMstack, and I hope you like JAMstack too

Ми JAMstack, ми JAMstack, ми JAMstack, ми JAMstack, ми JAMstack, ми JAMstack, ми JAMstack, ми JAMstack, ми JAMstack, ми JAMstack, і я сподіваюся, що вам теж подобається JAMstack

7 роки, 3 місяці назад.

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

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

Тож нам потрібен був веб-сайт, який би дозволяв людям створювати патерни. Makemypattern.com — , мабуть, найкраще порівняння чогось подібного — працює на Drupal 7, а моя початкова ідея була запустити новий сайт на Drupal 8. Я пішов цим шляхом досить далеко, щоб бути впевненим, що зможу змусити його працювати і підключити його до нашого бекенду. Тоді я переключився і звернув увагу на те, що зараз називається фріскейтинговим ядром.

На створення ядра пішло близько 7 місяців, і з того часу багато чого змінилося. Або, можливо, я змінився, я, безумовно, багато чому навчився на цьому шляху. Так чи інакше, я вирішив зробити все по-іншому.

Проблема з CMS

Я не маю жодних претензій до Drupal, але ідея керувати вільно поширюваним сайтом через будь-яку систему управління контентом (CMS) мене не приваблює.

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

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

Коли ми завершували роботу над ядром, я створив для нього сайт документації на основі Jekyll. У порівнянні з ним це було як ковток свіжого повітря. Просто купа файлів розмітки, з додаванням SASS, зображень та JavaScript, і все це компілюється в акуратний статичний веб-сайт.

Ним легко керувати, і він чудово інтегрується з робочим процесом, орієнтованим на GitHub, який буде знайомий потенційним дописувачам.

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

Альтернативний підхід: JAMstack

Я вперше дізнався про JAMstack, коли почав шукати хостинг для згаданого сайту з основною документацією. Спочатку він був розміщений на сторінках GitHub, який надає безкоштовний хостинг. Вони також мають SSL або власне доменне ім’я, але ви не можете мати і те, і інше. Це було свого роду розривом угоди.

Шукаючи альтернативи, я натрапив на Netlify, які роблять як SSL, так і кастомні домени, і мають безкоштовний рівень для проектів з відкритим кодом (дякую, хлопці). Крім того, це відео генерального директора Netlify Матіаса Білманна (Mathias Biilmann) змусило мене по-справжньому захопитися JAMstack.

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

  • J = JavaScript
  • A = API
  • M = Розмітка

Ідея полягає в тому, що ви створюєте статичний сайт (розмітку), який потім робите інтерактивним за допомогою JavaScript, що підключається до одного або декількох API.

Тож у нашому випадку, замість того, щоб створювати простий сайт документації з легкою для редагування розміткою і складною CMS для обробки динамічних речей, давайте просто створимо один простий сайт, який буде статично згенерований, але використовуватиме JavaScript і API для виконання розумних речей.

Біг до того, як навчишся ходити

Мушу визнати, що у своєму ентузіазмі прийняти цей новий підхід я трохи забіг наперед. Раптом я вже не створював простий сайт, а по вуха занурився в ізоморфний рендеринг, маршрутизацію на стороні клієнта, React і Redux, Node.js і трансполювання ES6.

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

Якщо ти знаєш, що все це означає, то де ти був у квітні, коли я йшов долиною Реакції смерті?

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

Після місяця розчарувань, безлічі спроб і, здавалося б, ще більшої кількості помилок, я кинув рушник. Не зважаючи на цей новомодний блискучий JavaScript, яким користуються всі молоді люди, я буду дотримуватися того, що я знаю.

Це, по суті, основи jQuery. Іншими словами, речі, які були досить крутими 10 років тому.

Варення, якому 10 років, все ще залишається варенням, чи не так?

Отже, freesewing.org - це сайт, що працює на JAMstack. І знаєте що, здається, він робить те, що має робити.

Ми використовуємо Jekyll для створення статичного сайту, і коли ми переносимо його на головну гілку, він автоматично розгортається на Netlify.

Ефект від цього новомодного блискучого JavaScript, яким користуються всі молоді люди

У нас є новий API даних , побудований на фреймворку Slim. Він обробляє всі дані користувача. Такі речі, як рахунки, вимірювання, моделі та чернетки, а також коментарі на цьому веб-сайті тощо.

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

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

Це відправна точка

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

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

Справа в тому, що я поставив собі за мету створити щось, що може замінити makemypattern.com, щоб я міг розповісти всім вам Гей, заходьте і пограйтеся з цією новою штукою.

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

PS: Для тих, хто здивувався назві цього посту:
Written by

joost

1
admin