Ежедневно публикуются сотни книг. Начинающие авторы мечтают о славе, кто-то хочет заработать, другие просто пытаются выговориться. Каждый уверен, что именно его произведение достойно всяческих наград и похвал. Все жаждут внимания, а по факту… за редким исключением никому не нужны.
Если наши родители и деды страдали от информационного вакуума, то нынешний век — век информационного шума. Сознание обывателя атакуют тысячи фактов, навязчивая реклама вызывает рвотный рефлекс. Все хотят внедрить в наши мозги выгодную чужим людям идею, любой ценой завладеть вниманием потребителя, насрать в душу, но заставить заплатить за ненужную, в общем, фигню.
А теперь представьте, что вам нужно заинтересовать уставшего от всего этого мусора человека прочесть книгу никому не известного автора. Как привлечь внимание пресыщенной публики? Как убедить людей, что перед ними не очередная пустышка, которая отнимет их самый ценный ресурс — время? Как…
Об косяк! Решил яжпрограммист, писатель, бухгалтер и просто креативный человек, то есть я. Посему, решил не просто опубликовать книгу, а сделать под неё современный и крутой сайт.
Single Page Application (SPA)
На обычном многостраничном сайте при переходе по ссылке идёт обращение к серверу. Сервер генерирует большой объём кода, передаёт его браузеру и тот с нуля отрисовывает новую страницу. При каждом переходе по внутренним ссылкам вы фактически загружаете весь сайт заново! Да, современные браузеры достаточно умные, чтобы запоминать повторяющиеся куски кода, но на сервер всё равно ложится большая нагрузка.
Долгое время единственной возможностью разгрузить сервер было кэширование. После того, как на серверной части сформируется код, результат работы запоминается, и при последующем обращении к тому же ресурсу сразу же возвращается итоговый результат. Это хорошо работало и продолжает работать на статических сайтах, где контент обновляется достаточно редко. Но если вы пишите много постов, используйте внутреннюю систему комментирования, подтягивайте информацию с других сайтов, пользователь постоянно вводит какие-то данные — увы, сохранённые в памяти результаты работы будут быстро устаревать и серверу придётся всё перерисовывать заново.
Но ведь при переходе по внутренним ссылкам большая часть сайта особенно не меняется! Везде одна и та же «шапка», «подвал», боковая панель и так далее. Зачастую требуется обновить определённый блок информации, а не отрисовывать всю страницу с нуля. Зачем запрашивать у сервера всю информацию, если требуется лишь малая часть?
Суть так называемого одностраничного приложения не в том, что вся информация на сайте укладывается в одну страницу. Суть в том, что сервер один раз отдает браузеру пользователя JavaScript-код, а дальше с помощью этого кода браузер сам формирует html-разметку и запрашивает у сервера лишь маленькие порции недостающей информации. Перешли по внутренней ссылке — браузер запросил новые данные и перерисовал отдельный кусок сайта. Ничего лишнего.
Фреймворки
Звучит логично и просто, не правда ли? Тогда почему столь очевидная идея не пришла в головы разработчиков раньше?! Самое интересное, что с технологической точки зрения такая возможность появилась давно, а вот с практической — стала трендом лишь во второй половине десятых годов.
Сложность. Не было удобной технологии, чтобы использовать более совершенную технологию, уж простите за тавтологию)) Придумывать все эти выкрутасы с браузером пользователя в те времена, когда каждый браузер имел кучу особенностей?! Упаси Великий Бит, проще сделать за это время десять сайтиков на WordPress…
Даже когда кто-то нечто подобное делал, код был настолько сложен для понимания и нестандартен, что обслуживать такой проект могли лишь избранные программисты, и стоило это удовольствие целое состояние.
И тогда из праха спагетти-кода восстал… Нет, о восстании машин поговорим в следующий раз, а пока упомянем о фреймворках.
Фреймворк — это структура, каркас, на базе которого можно создать приложение, а не заниматься изобретением велосипеда. Как правило, фреймворк даёт программисту набор готовых библиотек для типовых задач, будь то авторизация, роутинг (соответствие адреса страницы и отвечающего за её обработку блоку кода), хранение данных и т.п. Также это набор стандартов о том, как писать код так, «чтобы не было мучительно больно» вносить какие-то правки и дорабатывать приложение. Фреймворк — это реализация архитектуры. Про хорошую архитектуру приложений написаны огромные книги, даже не буду пытаться описать концепцию одной простой ёмкой фразой. Но главное, фреймворк — это инверсия управления. Не написанный программистом код вызывает код библиотеки, а фреймворк вызывает наш код, когда загрузит все необходимые зависимости и проведёт все настройки.
В общем, неудивительно, что фреймворки стремительно набрали популярность, и сегодня любой востребованный язык программирования может похвастаться несколькими фреймворками, которые значительно ускоряют и упрощают написание кода.
Vue
У языка JavaScript, который работает непосредственно с браузером пользователя, популярными являются три фреймворка: Vue, Angular и React.
Самым старым и сложным является Angular. Мне приходится работать с ним на одном долгоиграющем проекте, но поскольку там сменилось более 4-х разработчиков, и каждый писал код абы как, разобраться в приложении сложно. Компоненты по четыре тысячи строк кода, полное отсутствие форматирования, магические цифры — всё как положено, чтобы никто ничего не мог понять и исправить.
Хотя сам фреймворк достаточно интересный. Если вы когда-либо писали код на языке Java (не путать с JavaScript!), Angular станет лучшим выбором. Также из плюсов отмечу подключенные «из коробки» библиотеки для решения практически всех типовых задач. Установили фреймворк и можно сразу приступать к работе.
React является самым популярным фреймворком. Другой его плюс — можно работать на достаточно «низком» уровне. Т.е. делать практически любые вещи, да ещё и несколькими способами. В этом же его главный минус: каждый разработчик пишет по-своему, и новому человеку влиться в проект будет трудно.
Наконец, самый молодой фреймворк Vue. По задумке создателя должен был включить в себя всё самое лучшее от Angular и React. Как по мне, так оно в итоге и вышло. Код на Vue достаточно лаконичен, предполагает разбиение на множество маленьких, повторяемых компонентов. В каждом компоненте есть три блока: для разметки, стилей и собственно js-кода. Такой подход не загромождает систему файлами и папками, и в то же время всё необходимое находится в одном месте. В блоке, отведённом под JavaScript, тоже идёт достаточно логичное разбиение на данные, методы, вычисляемые свойства и т.д., так что найти нужное свойство или метод не составит труда. Есть официальные библиотеки для роутинга, хранилища данных и т.п., поэтому в большинстве проектов базовые вещи будут реализованы стандартными средствами, что сильно упростит вхождение в проект новых людей.
Для своего авторского сайта я выбрал именно Vue, о чём ни разу не пожалел.
Vuetify
Это библиотека компонентов для стилизации сайта, написанная специально для Vue. Красивые кнопочки, панельки, слайдеры, модальные окна, «сетка», чтобы сайт хорошо смотрелся на всех устройствах, и тому подобные вещи. С помощью Vuetify можно создать эстетичный сайт, не привлекая дизайнера.
Никто не запрещает использовать его и для вёрстки уже нарисованного в Фотошопе или Фигме макета — Vuetify существенно ускорит процесс, ибо на каждом сайте присутствуют достаточно типовые элементы, которые входят в библиотеку. Немного подправить готовые компоненты, и вуаля, всё выглядит потрясающе!
Nuxt.js
У одностраничных сайтов раньше присутствовал один большой недостаток — поисковые роботы не загружали JavaScript код, а потому считали, что контент на сайте отсутствует. Гугл и Яндекс давно исправили это недоразумение, но программисту приходится взаимодействовать со «специалистами» по поисковой оптимизации сайтов, а эти товарищи за прогрессом в IT следят далеко не всегда… Ничего не понимая лезут в исходный код и требуют, чтобы html содержал весь контент.
Когда проблема была действительно актуальна, пара ребят создали фреймворк над фремворком, чтобы приложения, написанные на Vue, воспринимались поисковыми роботами как обычные многостраничные сайты. Сейчас данный подход используется уже не для поисковиков, а для более быстрой первоначальной загрузки. Сервер моментально отдаёт базовую разметку и текстовый контент, затем тяжёлые, по меркам интернета, картинки и JavaScript код. Браузер сразу отображает страницу, и пока пользователь изучает содержимое, незаметно получает необходимые файлы для дальнейшей работы с минимальным участием сервера. Сплошные плюсы, вот только реализовать подобную схему работы самому очень сложно. Nuxt.js делает это за разработчика, за что ему большое спасибо!
Плюшки Nuxt на том не заканчиваются. По сути именно он превращает Vue в полноценный фремворк: задает структуру приложения, упрощает роутинг и работу с хранилищем, предоставляет удобные возможности для разворачивания приложения на боевом сервере.
Таким образом, связка Vue->Vuetify->Nuxt.js закрывает практически все потребности на клиентской стороне приложения. Нужно только не лениться и почитать документацию, по всем трём технологиям она замечательная.
API на Laravel
С «фронтэндом» разобрались, а что насчёт серверной части? Тут, к счастью или к сожалению, без особых альтернатив, фреймворк Laravel стал де-факто стандартом разработки на языке PHP. А PHP, в свою очередь, уже давно занимает лидирующую позицию среди серверных языков программирования для web-разработки.
Тем более, как мы поняли выше, роль сервера для одностраничного приложения достаточно скромная. При наступлении определённых событий браузер посылает запросы, сервер в ответ даёт минимум информации, дальше браузер отображает всё сам.
В моем случае серверная часть используется для подписки на рассылку, сбора статистики о скачиваниях книги и, самое интересное, для сбора информации об опечатках. Любой пользователь может выделить в книге текст, нажать на кнопку и сообщить об ошибке.
В админке, которая также написана на Laravel, уже без всяких выкрутасов с одностраничными приложениями, отображаются все необходимые данные.
О книге
О самой книге рассказывать долго не буду, предлагаю вам перейти на сайт, скачать или прочесть пару глав. В электронном виде роман выложен в свободном доступе.
Жанр: тёмное остросоциальное фэнтези, антиутопия.
В завершение статьи аннотация:
События книги разворачиваются спустя несколько поколений после апокалипсиса, стёршего с лица земли всё живое. Лишь горстке гномов удалось укрыться глубоко в недрах гор, предав сородичей и все другие разумные расы.
Оставшееся в изоляции общество стремительно деградирует. Разделившееся на чернь и знать население ненавидит друг друга. Ещё более все презирают стражей, элитных солдат короля.
Обстановка с каждым днём накаляется, назревает продовольственный кризис невиданных прежде масштабов.
Главный герой, наследник богатого рода, успешно использует ситуацию, перепродавая беднякам подпорченную еду за втридорога. Ни он, ни лишённые всякой надежды на будущее оборванцы не подозревают, что скоро за элементарную пищу придётся расплачиваться уже не деньгами, а жизнью.
Благодарю за внимание!
