Jamstack: Статичната революция на уебсайтове, надвишаваща уеб разработката

Jamstack е все по-популярна философия за уеб разработка, която има за цел да ускори както процеса на уеб разработка, така и времето за изтегляне на уеб страници. Като черпи от движението на devops и техниките за непрекъсната интеграция / непрекъсната доставка (CI / CD), които се превръщат в норма в много организации, Jamstack отменя дългогодишните техники за изграждане на интерактивни уеб страници, измествайки изпълнението на кода за зареждане далеч от уеб сървърите и към JavaScript в браузъра и външни услуги, достъпни чрез интерфейси за приложно програмиране (API).

Какво е Jamstack? Jamstack, дефиниран

Jamstack е модел на уеб приложение, базиран на три стълба, които предоставят инициалите в неговото име: JavaScript, API и маркиране. Уеб страниците за сайт на Jamstack се състоят от стандартен език за маркиране, така че те могат да бъдат изградени и тествани навсякъде, без зависимости от сървърите на приложения или технологиите от страна на сървъра като Node.js. Всяка интерактивна функционалност се предоставя от стандартен JavaScript код, който се изпълнява в браузъра, който прави повиквания към API за многократна употреба през HTTPS, за да получи достъп до външни данни или всяка друга функционалност, която не може да бъде вградена в самата уеб страница.

За да разберете защо философията на Jamstack е революционна, помислете за стека LAMP, който илюстрира начина, по който повечето разработчици мислят за уеб разработката през по-голямата част от последните 15 години. LAMP означава Linux (операционната система, която захранва повечето уеб сървъри), Apache (сървърният софтуер, работещ на тези машини с Linux), MySQL (базата данни, в която се съхранява информацията, необходима на уеб приложението) и PHP / Perl / Python (езикът, който кодът от страна на сървъра е написан в). Когато насочите браузъра си към уебсайт, базиран на LAMP, уеб сървърът изпълнява кода от страна на сървъра, който генерира уеб страницата в движение, като черпи данни при необходимост от базата данни MySQL.

Архитектурата LAMP позволява създаването на динамични и интерактивни уебсайтове, но също така изисква мощен уеб сървър - и колкото повече трафик получава даден сайт, толкова повече изчислителна мощност от страна на сървъра се нуждае. Дори и с пълнофункционален сървър, динамичните уеб страници могат да отнемат много време за изграждане и зареждане. В свят на хора с кратко внимание, обхващащо сърфирането в мрежата на техните телефони, това забавяне става все по-неприемливо.

Jamstack е роден като част от движението „статична мрежа“, възникнало в средата на 2010 г. като реакция срещу този традиционен модел на това как трябва да работи уебсайтът. За да разберете Jamstack, трябва да разберете днешната технология зад  статичните уебсайтове.

Статични сайтове, статични генератори на сайтове и Jamstack

Ако трябва да обясните на пълен начинаещ как работи мрежата, това може да се случи по следния начин: Някъде във файловата система на уеб сървъра има HTML файлове, достъпни чрез HTTP адреси, които уеб браузър изтегля и след това интерпретира, за да създаде уеб страница . Но това е описание на статичен сайт:  Предполага се, че HTML файловете вече съществуват, когато уеб браузърът ги търси. Както вече видяхме, голяма част от мрежата през последното десетилетие е доминирана от динамични сайтове, които вместо това генерират HTML файлове в движение в отговор на уеб заявки, често въз основа на параметри, предадени на уеб сървъра чрез формуляри или в Самият URL.

В много ранните дни на мрежата, когато уеб страниците бяха неизменно статични, много уеб разработчици написаха HTML кода на ръка. Тъй като уеб страниците се усложняват, пристигат инструменти като Dreamweaver на Macromedia, които могат да генерират тези статични HTML страници програмно. С движението на статичната мрежа в средата на 2010 г. започва да се появява нова вълна от така наречените генератори на статични сайтове , включително Gatsby, Hugo и Jeckyll. За разлика от инструментите на WYSIWYG като Dreamweaver, генераторите на статични сайтове се управляват от командния ред и са проектирани да бъдат интегрирани с CI / CD процеси. HTML файловете се генерират от инструментите, често въз основа на съдържание, написано в Markdown, и се качват автоматично в хранилище за контрол на версиите като GitHub. Тъй като тези файлове са маркирани като готови за производство, статичните страници в уеб сайта на живо се актуализират автоматично.

Важно нещо, което трябва да имате предвид, е, че статичността в този контекст не означава, че това са прости уеб страници 1.0, които не са интерактивни. Не забравяйте, че тези страници могат да включват усъвършенстван JavaScript, който се изпълнява в браузъра и прави API извиквания към бази данни, функционалност от страна на сървъра или хоствани безсървърни функции. Но тъй като нищо от това изпълнение не се случва на самия уеб сървър, статичният сайт не се нуждае от индустриално задвижван уеб хост, пълен с база данни. Много статични сайтове се разполагат в мрежи за доставка на съдържание или CDN, където съдържанието се отразява на множество сървъри по целия свят, за да се достави бързо до потребителите навсякъде.

Mathieu Dionne, маркетинг водещ в Snipcart, описва ранните дни на този нов свят на статични сайтове в публикация в блог и споменава, че около 2015 г. „основателите на Netlify ... току-що са измислили термина„ Jamstack “, за да заобиколят отрицателната конотация на „статична мрежа“. С други думи, ние описвахме процеса на Jamstack през целия този раздел. Но сега трябва да обсъдим накратко Netlify и тяхната роля в екосистемата.

Какво е Netlify?

Netlify е компания за облачни изчисления и уеб хостинг. Съоснователят на Netlify Матиас Бийлман въведе термина Jamstack, а услугите на Netlify са съобразени с клиенти, които искат да изграждат сайтове, базирани на философията на Jamstack.

Netlify твърди, че е разбил специфичен проблем, който е задържал статични сайтове, а именно обезсилване на кеша. Динамичните уебсайтове, управлявани от база данни, могат да изядат много сървърни ресурси, но можете да сте сигурни, че те ще обслужват най-новата версия на вашия уеб сайт на всеки посетител, който се отбие. Тъй като уеб сайтовете на Jamstack често се хостват на множеството разпределени сървъри на CDN, актуализациите са по-малко ясни. Може да отнеме от няколко минути до часове, докато всеки CDN сървър разбере, че кешираната му версия на сайта вече не е валидна. CDN на Netfliy осигурява незабавно обезсилване на кеша за HTML файлове, за да заобиколят този проблем.

Но Netlify не е единственият доставчик на хостинг в пространството на Jamstack и няма никакъв вид търговска марка или контрол върху собствеността върху термина. Налични са редица решения за хостинг и внедряване на Jamstack и повечето от големите доставчици на облак се включват в действието, включително AWS, Google Firebase и Microsoft Azure.

Jamstack CMS

Ако сте човек, който трябва да се занимава с уебсайт ежедневно, знаете, че изграждането и хостването на уебсайта е само началото. Също така се нуждаете от начин да създадете ново съдържание и да го добавите към вашия сайт. Тъй като хората, които ще правят това, обикновено няма да бъдат програмисти, те ще се нуждаят от лесен за употреба инструмент - а именно, система за управление на съдържанието или CMS. Традиционните CMS, като WordPress, предлагат потребителски интерфейс отзад, където можете да въвеждате съдържание на уебсайт, да управлявате база данни, в която се съхранява това съдържание, и да изграждате динамични уеб страници, които представят това съдържание в отговор на заявките на браузъра.

CMS за сайтовете на Jamstack работят по различен начин и обикновено се наричат безглави. Безглавият CMS предлага потребителски интерфейс за въвеждане и управление на съдържание и база данни или други средства за съхранението му, но самият той не генерира HTML код за анализиране на браузъра. Вместо това статичните HTML страници на уебсайта използват JavaScript за осъществяване на повиквания към API на CMS, а CMS връща съдържанието във формат, който JavaScript може да превърне в уеб страница.

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

Netlify, както бихте могли да очаквате, има свое собствено предложение в това пространство, наречено NetlifyCMS, но има редица други предложения; разработчикът Nebojsa Radakovic ги разбива за вас в публикация в блог. В този списък има много начинаещи, както и едно много познато име. Въпреки че използвахме WordPress като пример за традиционна CMS, WordPress може да се изпълнява като CMS без глава, за да захрани и сайт на Jamstack.

Jamstack конференция

Netlify също работи за създаването на общност на Jamstack и спонсорира конференции на Jamstack. Компанията проведе събития в Ню Йорк, Лондон и Сан Франциско през 2019 г. и беше домакин на виртуално събитие през май 2020 г. Към момента на написването можете да се регистрирате за събитието в Сан Франциско, планирано за 6-7 октомври 2020 г. пандемията на коронавирус все още има планове за есенни конференции във въздуха. 

Ако искате актуализации, можете да проследите конференцията в Twitter. Можете също така да проверите минали разговори в канала на Jamstack Conf YouTube.

[Също на: 6-те най-добри IDE на JavaScript | 10-те най-добри редактора на JavaScript]

Уроци за Jamstack

Търсите да отидете по-дълбоко? Вижте тези уроци по Jamstack, които ще ви дадат практически опит в изграждането на сайт на Jamstack:

  • Разработчикът Дейвид Нийл има добър уводен урок за изграждане на сайт на Jamstack, започвайки много просто и след това ставайки все по-сложен. 
  • В блога LogRocket софтуерният инженер Огундипе Самюел предоставя задълбочен, поетапен поглед върху изграждането на сайт за електронна търговия на принципите на Jamstack. 
  • Netlify предлага три-часови видео уроци, които обхващат много основи от основите до по-напредналите теми. 

След като усвоите основните концепции, описани тук, ще бъдете готови да започнете да работите с разработката на Jamstack в професионалния си живот. Приятно учене!