Що таке JAMstack і як мені розпочати?

Сайти JAMstack зараз дуже люті у світі веб-розробників. І це справедливо! Але що саме це таке і як ми всі можемо скористатися його перевагами?

  • Що це за JAMstack?
  • Цього не слід плутати з безсерверним
  • З чого складається JAMstack?
  • То що робить додаток JAMstack таким чудовим?
  • Чи вважається мій веб-сайт на JAMstack?
  • Які приклади JAMstack?
  • Які інструменти я можу використовувати для створення сайтів або програм JAMstack?

Що це за JAMstack?

Для початку JAMstack - це програмна архітектура та філософія, яка дотримується таких компонентів: Javascript, API та розмітки.

Якщо це звучить звично, це тому, що це так! Цей додаток React, який ви компілюєте за допомогою Webpack і, зрештою, обслуговуєте з S3? Так, це програма JAMstack. Цей простий HTML-файл, який не має JavaScript і буквально не робить нічого динамічного? Так, це також додаток JAMstack.

Цього не слід плутати з безсерверним

Якщо ви виходите більше з хмарної сторони речей (думайте AWS, GCP, Azure), ви можете схилятися до безсерверності та JAMstack як до одного і того ж. Звичайно, вони мають подібність у філософії управління ресурсами, наприклад, розміщення сайту на S3. Але програма JAMstack не завжди буде безсерверною програмою.

Розгляньте додаток, розміщений у статичному сховищі на обраному вами хмарному провайдері. Так, ви можете обслуговувати програму без серверів, але, можливо, ви маєте справу з API, який використовує Wordpress або Rails, обидва з яких, безумовно, не є безсерверними.

Поєднання цих філософій може пройти довгий шлях, але їх не слід плутати як однакові.

З чого складається JAMstack?

Повернімося до JAMstack: він, як правило, складається з 3 компонентів: Javascript, API та розмітки. Його історія випливає з переростання терміна "статичний сайт" у щось більш значуще (і товарне). Отже, хоча в кінцевому підсумку статичний сайт є кінцевим результатом, він підривається, включаючи першокласні інструменти для кожного кроку.

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

Javascript

Компонент, який, мабуть, зробив найбільше роботи для популяризації JAMstack - це Javascript. Наша улюблена мова браузера дозволяє нам надавати всі динамічні та інтерактивні біти, яких у нас може не бути, якщо ми обслуговуємо звичайний HTML без нього.

Тут багато разів ви побачите фреймворки інтерфейсу користувача, такі як React, Vue та новачки, такі як Svelte.

Вони спрощують та організовують додатки для побудови, забезпечуючи API-компоненти та інструменти, які компілюються до простого файлу HTML (або до групи їх).

Ці HTML-файли включають групу ресурсів, таких як зображення, CSS та фактичний JS, які в кінцевому підсумку отримують браузер через ваш улюблений CDN (мережа доставки вмісту).

API

Використання сильних сторін API є ключовим фактором того, як ви робите додаток JAMstack динамічним. Будь то автентифікація чи пошук, ваша програма використовуватиме Javascript для надсилання HTTP-запиту іншому провайдеру, що в кінцевому підсумку покращить взаємодію в тій чи іншій формі.

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

Для API не обов’язково зв’язуватися лише з одним хостом, але ви можете зв’язатися зі скільки завгодно (але намагайтеся не переборщити).

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

Розмітка

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

Щоб вважатись програмою JAMstack, HTML потрібно подавати статично, що в основному означає, що не відображається динамічно з сервера.

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

Але це не означає, що ми повинні завжди створювати 100% програми в браузері. Такі інструменти, як Гетсбі та інші статичні генератори веб-сайтів, дозволяють нам залучати деякі або всі наші джерела API під час побудови та відображати сторінки як файли HTML.

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

Одна примітка про "хостинг"

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

Натомість, незалежно від того, чи робите ви це самостійно за допомогою S3, чи передаєте його в Netlify (який насправді є багатохмарним), ваші HTML і статичні активи отримують із сховища об’єктів. На кінці, як правило, у вас є CDN, такий як Cloudflare, який кешує ці файли в різних місцях світу, завдяки чому ваші сторінки швидше завантажуються для відвідувачів вашого сайту.

То що робить додаток JAMstack таким чудовим?

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

Давайте подивимося, як ...

Швидкість

Той факт, що ви обслуговуєте програми JAMstack як статичні файли безпосередньо з CDN (зазвичай), робить можливим завантаження вашої програми надзвичайно швидко. Пройшли ті дні, коли серверу доводиться витрачати час на створення сторінки, перш ніж відповісти; тепер ви обслуговуєте сторінку як звичайний HTML "як є" або з певним типом гідратації на стороні клієнта, як ви бачили б у React.

Вартість

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

Масштабованість

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

Технічне обслуговування

Основою вашого статичного сайту є не сервер, тобто вам не потрібно його підтримувати. Будь то Netlify, S3 або будь-який інший постачальник, ваші статичні HTML, CSS та JS підтримуються для вас без головного болю.

Безпека

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

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

Але це також залежить від ваших API

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

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

Чи вважається мій веб-сайт на JAMstack?

Ми вже говорили про 3 компоненти (Javascript, API, розмітка), але те, про що ми не говорили, це той факт, що вам не обов’язково використовувати всі 3, щоб вважати свій сайт гідним ярлика JAM .

Дійсно, все зводиться до Розмітки та того, як Ви їй подаєте. Замість того, щоб ваша програма Rails відображала ваш HTML для вас, ви можете розмістити попередньо скомпільовану програму React на S3, яка звертається до Rails через набір API.

Але вам навіть не потрібно мати API. Вам навіть не потрібно мати Javascript! Поки ви обслуговуєте файл HTML без необхідності його компіляції на сервері під час запиту (він же попередньо відтворений), у вас є сайт JAMstack.

Які приклади JAMstack?

freecodecamp.org

Так! freecodecamp.org та його навчальний портал - це сайт JAMstack, створений на основі Гетсбі. Незважаючи на складність надання програми для проходження курсів коду, freeCodeCamp здатний об’єднати силу статичного генератора веб-сайтів та потужні API, щоб принести людям у всьому світі силу коду навчання.

Ви можете побачити, як Квінсі з freeCodeCamp розповідає про це більше на JAMstack_conf 2018:

//www.youtube.com/watch?v=e5H7CI3yqPY

Примітка: портали Новини та Форум наразі не є сайтами JAMstack.

Неможливі продукти

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

web.dev

Ресурсний центр Google web.dev створений за допомогою зростаючого 11-го року. Ви навіть можете знайти код із відкритим кодом за адресою: //github.com/GoogleChrome/web.dev

Які інструменти я можу використовувати для створення сайтів або програм JAMstack?

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

Створення програми

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

  • 11тис
  • Гетсбі
  • Гюго
  • Ніфт
  • Скаллі (для вас, любителів Angular)
  • І багато іншого…

Потрібно, щоб я вибрав одну? Почніть з Гетсбі та завантажуйте з простого стартера.

Обслуговування вашого додатка

Мені подобається думати про це як про легку частину залежно від ваших налаштувань. Такі інструменти, як Netlify та Zeit, роблять це легким для налаштування, підключаючись до вашого репозиторію Github і створюючи щоразу, коли новий коміт виштовхується, але, звичайно, у вас є такі варіанти, як AWS, якщо ви хочете отримати більше контролю.

  • AWS
  • Лазурний
  • GCP
  • Сторінки Github
  • Netlify
  • Перенапруга
  • Zeit

Потрібно, щоб я вибрав одну? Почніть з Netlify і витратьте 5 хвилин на розгортання цього сайту Гетсбі.

Робить додаток динамічним

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

  • Auth0 - автентифікація
  • Cloudinary - управління медіа
  • Google Analytics - аналіз веб-трафіку
  • headlesscms.org - нескінченний список безмежних CMS
  • Розумність - CMS
  • Безсерверний фреймворк - "зроби сам", легко розгорнути безсерверні ресурси
  • Snipcart - електронна комерція
  • Смуга - Управління платежами
  • І купу інших ресурсів ...
  • І купа інших варіантів управління вмістом ...
  • І деякі загальні відомості та інструменти ...

А як щодо загальних ресурсів для вивчення?

У світі JAMstack можна знайти багато ресурсів для швидкого запуску.

  • Як розмістити та розгорнути статичний веб-сайт або додаток JAMstack на AWS S3 та CloudFront від мене на freeCodeCamp
  • Покроковий посібник: Гетсбі на Netlify від Netlify
  • Створіть власний щоденник з Scratch, використовуючи Eleventy з групи ниток
  • Як розмістити свій статичний веб-сайт за допомогою AWS - Посібник для початківців від freeCodeCamp
  • Підручник Hugo: Як створити та розмістити (дуже швидко) статичний сайт електронної комерції від SnipCart
  • Як створити автентифіковані безсерверні програми JAMstack за допомогою Gatsby та Netlify з freeCodeCamp

Очікуйте побачити більше

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

Приєднуйтесь до розмови в Twitter і повідомте мені, яка ваша улюблена частина створення сайту JAMstack!

Щось не вистачає?

Не вистачає вашого улюбленого інструменту JAMstack або чудового прикладу? Пінг мені на Twitter!

Слідуйте за мною, щоб дізнатись більше про Javascript, UX та інші цікаві речі!

  • ? Слідуйте за мною у Twitter
  • ? Підписатися на мій Youtube
  • Підпишіться на мою розсилку