Хочу услышать шутку? - Практическое введение в стек JAM • Wonz

Что такое стек JAM?

Если вы занимаетесь веб-разработкой и в какой-то момент работали с одной или двумя средами Javascript, то вы, скорее всего, сталкивались с терминами MERN, MEAN и совсем недавно MEVN Stack. Если вы похожи на меня и не слышали ни об одном из них, а только сейчас погуглили, чтобы выглядеть умнее 😂, то вот краткое объяснение.

МЕРН означает Мслышать ЕЭкспресс рдействовать и Нодежд. Это аббревиатура фреймворков, используемых при создании современных веб-приложений. В то время как MEAN и MEVN одинаковы, за исключением того, что Angular и Vue — это альтернативная структура внешнего интерфейса, используемая здесь. В любом из этих стеков MongoDB служит вашей нереляционной базой данных, а ExpressJS и Nodejs — вашим веб-сервером. Одним из сходств между этими стеками является наличие веб-сервера. Вот чем отличается стек JAM.

JAM расшифровывается как Javascript API Markup, аббревиатура технологий, используемых при создании веб-приложений. Вот довольно прямое объяснение того, что такое JAM Stack, с официального сайта JAMStack:

Современная архитектура для создания быстрых, безопасных сайтов и динамических приложений с помощью JavaScript, API и предварительно обработанной разметки, обслуживаемых без веб-серверов.

Почему это необходимо?

Из определения «без веб-серверов» выделено жирным шрифтом, потому что это основная идея JAM Stack. С помощью JAM Stack разработчики интерфейсов могут создавать полезные и функциональные веб-приложения без использования серверной части.

Имея только свои навыки работы с интерфейсом, вы можете создавать потрясающие полезные приложения благодаря спецификации JAMstack.

Некоторые примеры существующих сайтов, созданных с помощью JAM Stack:

Чтобы узнать больше о jamstack, посетите официальный сайт jamstack:

Практический пример

1*KN0HrIrT3yHiP8ZrVJjUDQ.png

Мы будем строить Chucklarious. Chucklarious — это сборник случайных шуток про Чака Норриса. Если вы не знаете, кто такой Джон Скит, его печально называют Чаком Норрисом в программировании. Я упоминал немного о нем здесь:

Лайфхаки для решения проблем — Мартинс Онуоха

Предпосылки

Базовые знания HTML, CSS и Javascript
Знакомство с API выборки Javascript.
Мы будем работать с API базы данных Чака Норриса в Интернете с открытым исходным кодом.

Структура папок

У нас есть базовая структура папок, вы можете игнорировать папку Img.
1*WzzO4zN-k--HPAOOU-CFmg.png

Разметка

На снимке экрана Chucklarious вы можете заметить, что у нас есть базовая структура верхней панели навигации, карточек и FAB в правом нижнем углу.

Однако я буду использовать MaterializeCSS, не стесняйтесь использовать все, что хотите для стиля.
Для рендеринга контента и семантических шаблонов я буду использовать Handlebarsjs.

1*ZnNktomPtoIer8Qn5mRthg.png

Если вы проверили живой пример вы заметите предварительный загрузчик непосредственно перед загрузкой страницы. Панель навигации идет сразу после предварительного загрузчика.

1*oSUvH-zaxH3XNkX-WWRH4A.png

1*CJQia_zSf3-nxxqjZP7Z1A.png

Далее мы создадим контент, который будет показываться пользователю в случае неудачной загрузки страницы.

1*VdBsICZfildc-cmQafro0w.png

Для рендеринга контента мы используем Handlebars, Handlebarjs — это минимальный механизм шаблонов. Шаблоны Handlebars выглядят как обычный HTML со встроенными выражениями handlebars. Эти выражения имеют такой формат {{ some expression }}. Эти выражения упрощают динамическую визуализацию содержимого, одним из которых является {{ each }} который работает как обычный цикл for в Javascript.

1*ADtF-pkh2m12Iy2o8fl8sA.png

Обратите внимание, у нас есть кнопка для реакции на шутки. Я прикрепил к кнопке событие щелчка, назвал функцию LMFAO (кстати, ужасный выбор имени) и передал идентификатор шутки в качестве аргумента.

1*CGJIjjqkQWWvsJ9QLVlXhg.png

Нам также понадобится подсказка непосредственно перед тем, как пользователь закроет приложение.

1*sex1p2fAgKF1iAU3BjfdaQ.png

Наконец, мы включаем скрипты внизу, прямо перед закрывающим тегом body:

1*YMhULeQNLpWJUfdDrzxDWQ.png

Стили

Давайте добавим немного стиля для предварительного загрузчика и содержимого карточки:

1*0uyUfv8zn7mdxCbkkTzR5w.png

API

Ранее я упоминал, что мы будем использовать icndb.comAPI. Они предоставляют конечную точку для получения случайных шуток, а также ограничивают количество шуток для получения на запрос.
Конечная точка будет выглядеть так:

Давайте посмотрим, как будет выглядеть структура нашего ответа JSON:

1*tgy98GjLZeQNV8xwY5h6XA.png

Во-первых, мы будем обрабатывать постепенное появление и исчезновение предварительного загрузчика и переключение FAB.

1*am4ItnV9tcCib4xWYH4bWg.png

Затем мы вызываем функции getData и showTip после завершения загрузки страницы:
1*NScaK5rai2nHaPwGizcveQ.png

Давайте реализуем получить данные функция:

Используя функцию выборки Javascript, мы отправим запрос GET на конечную точку, получим ответ JSON и установим его в качестве значения ключа «шутки» объекта контекста. Мы также возьмем содержимое элемента script и скомпилируем его в шаблон, чтобы его можно было выполнить. Наконец, мы визуализируем скомпилированный шаблон:

1*Vr-oqfpRTwvVn_K--jgYzg.png