как создать web приложение

Как разработать веб-приложение за 8 шагов

Если вы всерьез подумываете о разработке своего веб-приложения, сначала ответьте на два вопроса:

Первое — веб-приложение всегда разрабатывается для решения конкретной задачи, как правило, одной. Оно должно быстро реагировать на изменения, и чем проще и меньше время реакции, тем более веб-приложение жизнеспособно.

Второе — есть по меньшей мере 6 путей к разработке веб-приложения, самым современным из которых является реализация фронтенда как single page application, где контакт с бэкендом реализуется через REST API. Данный путь к созданию веб-приложения достигается за 8 шагов.

1. Работа с бизнес-логикой бэкенда

Есть два способа такой работы: вы можете сгруппировать бизнес-логику бэкенда в одном сервисе (монолитная логика) или реализовать каждый ее компонент в отдельном микросервисе. Работая с небольшим проектом, используйте первый способ, а при работе с крупным проектом идеально подойдет второй.

2. Выбор языка программирования

Если вам менее важна производительность веб-приложения, пишите на Python (фреймворки Django, Flask), Node JS (фреймворки Express JS, Koa JS, Gatsby JS), Ruby (фреймворки Ruby on Rails, Grape). Если в приоритете скорость приложения — используйте Golang (фреймворки Gingonic, Beego, Revel). Еще вы можете использовать популярный язык программирования от Microsoft — C#, который произносится как «си шарп». Он разработан в качестве языка прикладного уровня для CLR. С# вобрал в себя многое от C++, Модула, Delphi, Smalltalk и Java, но разница состоит в том, что С# исключает модели, которые зарекомендовали себя как проблемные при разработке ПС. К примеру, C# в отличие от C++ не поддерживает множественное наследование классов, но допускает множественную реализацию интерфейсов. Главное, какой бы язык вы не выбрали, кодить на том, который вы хорошо знаете.

3. Реализация бизнес-логики

Сперва ориентируйтесь на паттерн MVC, а когда поймете, что бизнес-логика начинает усложняться, используйте presenter и interactor. Но помните, что presenter и interactor находится на разных уровнях и выполняют различные смысловые и функциональные нагрузки.

Presenter обрабатывают события от пользовательского интерфейса (UI) и выполняют роль callback из внутренних уровней (Interactors). Presenters легко тестировать и их задача состоит в том, чтобы получить информацию от веб-приложения и преобразовать ее для перемещения presenters на экран с помощью представления (View).

Interactor по факту вмещают бизнес-логику веб-приложения, то есть проверку условий и обработку информации. Interactor работают фоном и перемещают события и информацию на верхний уровень, presenters, c помощью callback.

4. QA-тестирование бэкенда

Тестирование нужно обязательно делать для того, чтобы знать, правильно ли работает бизнес-логика вашего веб-приложения, а также для того чтобы не проверять постоянно «вручную» работоспособность кода. Используйте автоматическое тестирование для модулей и библиотек, соответствия UI/UX и API. Пропишите несколько вариантов тестирования. Разработайте roadmap для платформы, чтобы управлять испытаниями для всех типов тестирования. Обязательно сделайте подключение инструментов отслеживания текущего покрытия кода, чтобы убедиться в том, что ваше веб-приложение не «виснет» и работает без багов и перебоев.

5. Добавление поддержки сваггера

Swagger – это «умная» документация RESTful web-API. По сути, это фреймворк для спецификации REST API, дающий возможность не только просматривать спецификацию в интерактивном режиме, но и отправлять запросы, именуемые Swagger UI. А теперь на счет веб-приложения.

Предположим, вы уже начали разработку фронтенда вашего веб-приложения. Как вам понять, какие параметры и запросы отправлять на сервер? Заглядывать в код бэкенда? Поверьте, это не лучший выход.

Рекомендую вам добавить поддержку сваггера, при этом очень здорово, если сваггер еще и поддерживает генерацию через тесты. Таким образом, он поможет вам документировать API.

6. Работа с бизнес-логикой фронтенда

Сложность работы с бизнес-логикой фронтенда заключается в том, что тут очень много фреймворков. Обычно в современном програмировании используются Angular, React, Vue. У них у всех есть как свои достоинства, так и свои недостатки. Но я рекомендую вам выбирать для работы с фронтендом React, так как он легче, проще и более гибкий.

7. QA-тестирование фронтенда

Фронтенд тестируют двумя основными видами тестов — на логику и на отображение. Тесты на логику проверяют логическую реализацию функций и классов. Тесты на отображение отвечают за то, чтобы наполнение демонстрировалось пользователю в том виде, который вы задумали, прописывая фронтенд. Для осуществления QA-тестирования фронтенда используйте такие фреймворки, как Mocha, Chai, Jest, Ava, Enzyme, Jest — они самые ходовые, простые в эксплуатации и наиболее понятные из всех.

8. Мониторинг качества веб-приложения

Когда вы завершили седьмой этап, ваше веб-приложение, можно сказать, готово. Ну, или оно находится на финальной стадии готовности — 98%. Что вам нужно знать по итогу? Естественно, первое, что нужно, — это понять, насколько качественно реализовано приложение, как оно будет работать и на какое время хватит его износостойкости. В этом вам поможет Lighthouse — автоматизированный инструмент с открытым исходным кодом для мониторинга качества вашего веб-приложения. Lighthouse проводит системный аудит производительности и доступности веб-приложения для понимания обычного пользователя.

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

Имейте в виду, что, начав разработку веб-приложения, вам нужно будет изучить все «подводные камни» каждого этапа, а также запастись терпением, потому как сама разработка может занять у вас несколько дней, а вот тестирование и доработка с устранением багов может затянуться и на многие месяцы. Будьте ко всему готовы и помните про первые и самые важные два вопроса: всегда ставьте конкретную задачу, которую должно решать ваше приложение, перед тем, как начать разработку, и выбирайте самый удобный и легкий для вас способ разработки, в котором вы хорошо ориентируетесь. Ведь разработка веб-приложения — это именно тот случай, когда надо идти путем наименьшего сопротивления.

Источник

Как сделать приложение из веб-сайта

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

Что для этого нужно, сложно ли сделать такое приложение и какие знания для этого потребуются? Поговорим об этом в сегодняшней статье.

Зачем создавать из сайта приложение

Мы давно привыкли говорить «веб-приложение», подразумевая под этим простое приложение. Чаще всего приложения похожи по функциональности на обычные мобильные версии сайта, но все-таки есть некоторые отличия. В полномасштабном приложении мы получаем доступ к различным функциям, которые на сайте попросту отсутствуют. Например, это может быть функция встроенных уведомлений, хотя сейчас и такое можно спокойно организовать через браузер.

Приложения из сайтов популярны среди новостных ресурсов и других веб-сайтов, насыщенных контентом. Если вы столкнулись с тем, что вам нужно конвертировать сайт, но до сих пор не уверены, нужно ли вам это, то давайте разбираться в преимуществах такого подхода.

Что для этого нужно?

Разработка собственного приложения из веб-сайта – довольно сложная задача, которая требует особых знаний в области программирования. Для самостоятельного изучения вы можете найти много гайдов по данному вопросу, но не факт, что они легко дадутся. В этом деле довольно много нюансов, которые будут посильны только специалисту.

Если самостоятельно сделать его не получается, то надо ли непременно искать программиста? Да, но только тогда, когда нужен высококачественный продукт со своими фишками. В противном случае можно обратиться к онлайн-сервисам, которые выполняют конвертацию сайта в приложение всего за несколько минут. Кроме того, если ваш сайт работает на CMS WordPress, то его можно легко преобразовать в приложение. Сделать это можно с помощью специальных сервисов и плагинов, распространяющихся как в бесплатном, так и платном доступе.

Лучшие сервисы для создания приложения из сайта

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

Подробнее о них мы и поговорим далее – рассмотрим как профессиональные решения, так и более простые.

Tadapp Native

Tadapp Native – это лучшее решение для тех, у кого нет времени ждать. Сервис заверяет, что может создать приложение для Android и iOS всего за 5 минут и бесплатно опубликовать его в Google Play. Единственное, с чем могут возникнуть проблемы, так это с адаптацией сайта. Если ее нет, то конвертация, вероятнее всего, пройдет некорректно.

Особенности:

Стоимость: от 890 рублей

Ссылка на официальную страницу: Tadapp Native

Appmaker

Appmaker – сервис с 14-дневным пробным периодом, во время которого пользователю предоставляется возможность создать из сайта полноценное приложение на платформе iOS или Android. Appmaker предлагает 3 варианта создания приложений: на WordPress, c WooCommerce и в виде Web App (веб-версия). На официальном сайте можно найти истории успешных компаний, которые использовали данный сервис.

Особенности:

Официальная страница: Appmaker

Appverter

Особенности:

Официальная страница: Appverter

AppPresser: плагин для WordPress

Особенности:

Официальная страница: AppPresser

MobiLoud: плагин для WordPress

MobiLoud – это еще одно решение для веб-ресурса, созданного на WordPress. Он очень похож на предыдущий сервис, но здесь есть некоторые отличия. MobiLoud предоставляет несколько «предустановок» приложений, которые можно использовать в зависимости от того, какие функции необходимо реализовать. Второе отличие – стоимость, и она заметно выше.

Особенности:

Официальная страница: Mobiloud

Создаем приложение из сайта

Лучшие сервисы мы рассмотрели, теперь давайте воспользуемся одним из них и попробуем создать приложение на основе веб-сайта. Для примера возьмем сервис Appmaker с бесплатным пробным периодом.

Чтобы сделать приложение, выполним следующее:

Как только создание приложения будет завершено, будет предоставлена ссылка на скачивание файла. На этом все!

Источник

Веб-платформа на Java за 30 минут

Опытные разработчики могут не читать дальше, так-как эта статья рассчитана скорее на новичков, но всё-же я был бы очень рад, если бы кто-нибудь оставил конструктивную критику в мой адрес или указал на ошибки.

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

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

Для предпринимателей или начинающих бизнесменов, или владельцев каких-либо площадок будет интересно узнать, что им в начале их бизнеса совсем не обязательно вкладывать большие деньги на «крутой» сайт, а достаточно воспользоваться открытыми библиотеками и единственное за что заплатить — это за то, чтобы взять в аренду виртуальный сервер.

В статье я покажу, как сделать простейший сайт, имеющий простую функциональность. Это скорее статья, посвященная именно тому, чтобы показать общую концепцию и помочь начинающим разработчикам сформировать понимание того, как именно создаются такие известные ресурсы, как Google, Facebook, Вконтакте.

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

Для тех, кто заинтересовался:

Подготовка

Установка того, что нам понадобиться:

Писать наш сервис мы будем на Java, как самом распространённом языке для веб-сервисов.

Проверьте, что на вашем компьютере установлена последняя версия Java, сейчас это 8 версия. Проверить это можно здесь проверить Java. В 97% случаях так оно и есть, но если это не так, то следуя инструкциями на этом сайте вы без труда исправите это, установив и настроив окружение.

Если же всё-таки это не удалось, сразу договоримся с вами так, первым делом вы пытаетесь решить проблему на этих сайтах:

Вообще, открою вам секрет, в программировании, когда у вас всё заработало с 1 раза — это означает только одно, что что-то не работает. Это неоспоримый факт. Куча ошибок, несовместимость версий, отсутствие в библиотеке классов и прочее — это нормальное явление.

Ваш покорный слуга сам просидел 3 недели с ошибкой, облазив такие закоулки интернета, что на какое-то время потерял связь с реальностью и пролежал несколько месяцев в психиатрической больнице, но не будем об этом… Это история для отдельной статьи.

Итак, Java стоит — всё хорошо.

Теперь нам нужен инструмент. Да, нам нужна идея. Качаем и ставим отсюда JetBrains.

Только учтите, что вам нужна именно Ultimate — версия. Простая версия не позволяет разрабатывать веб-приложения. Там есть бесплатный пробный период на 30 дней, думаю с этим не будет проблем.

Итак, среда разработки есть, Java есть.

Начнём

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

Часто вижу вопросы от новичков про такие интересные вещи, как Spring и Hibernate (https://spring.io/, hibernate.org). В 96% случаях вам это пока что не надо, и без хорошей подготовки и хорошего скилла «solve problem» вы увязните там очень надолго и выбраться обратно будет очень тяжело.

Ваша альма-матер на первых порах — это 2 технологии:

«Application server». Что это такое? А вот, что Application server.

Концепция веб-ресурсов

Суть такая, сервер. Что такое сервер? Это программный код, который «зацикленно» крутиться в системе и слушает порты. Это тема отдельного разговора. Но в общем, рассмотрим 2 варианта того, что вообще сервер умеет делать, он умеет отдать данные (GET) — просто вернуть число, страницу, или ещё бог знает что. Но, есть ещё и POST — он тоже возвращает данные, но и принимает от клиента их перед этим.

Если ничего не понятно, читаем тут ru.wikipedia.org/wiki/REST.

Статья начинает слишком сильно расти. Теперь буду стараться писать более кратко.

Идём в мой репозиторий. Предполагаем, что человек совершенно не понимает, что такое система контроля версий, поэтому идём путём дилетанта, там есть кнопка («Download ZIP» — качаем и разархивируем).

В окне приветствия идеи есть кнопка «import project» — жмём. Выбираем скачанный и разархивированный проект.

Жмём далее, далее и далее, пока не откроется проект.

Первые сложности

Проект открыт, но вы не запустите сервер и не сможете открыть сайт. Почему? Потому что, идея не знает, что ей делать, она умна, но не настолько.

Объяснение того, как это сделать, заняло бы пару страниц и оказало бы вам «медвежью» услугу. Первые сложности — первые трудности. Это будет вашим «боевым крещением». Программировать — не пирожки печь. Ссылки сверху вам помогут. Потратить 1-2 часа на это — это нормально. Я знаю хороших и опытных программистов, которые сидели несколько дней, но так и не сумели правильно запустить сервер. Это не делает им чести — но факт — есть факт. Вперед. Запустите — возвращайтесь к чтению.

Не забудьте сообщить идее, что используем tomcat (как? ссылки вверху, по ним есть ответ).

Локальное тестирование сервиса

Получиться у вас должно примерно вот это:

Но есть проблема — не работает! Ну что же, этого следовало ожидать. У нас не создана таблица в базе данных. В проекте мы используем базу данных SQLite

Объяснить, что это такое будет с 0 не просто. Попробуйте почитать об этом на специализированных ресурсах.

Могу посоветовать хороший сервис: www.codecademy.com (там есть Java, SQL, Git, JavaScript и другие супер полезные вещи), поэтому милости прошу.

В итоге, нам нужно создать нашу таблицу, делаем это так:

Таблица создана. Можно проверить как работает наша система. Добавьте пару имён и посмотрите, как они будут вам возвращены уже из самой базы.

Разбор кода

Начнём смотреть, что же у нас в коде:

Так уж повелось, что в Java все конфигурации пишутся в xml-файлах, тут не исключение — файл web.xml контролирует, то, какой сервлет за что отвечает. Внимательно посмотрите на код и попробуйте поменять ссылку или имя сервлета.

Приложение у нас простое, поэтому у всего 2 класса (SQLiteClass и MainServlet).

Очевидно, думаю, что первый отвечает за работу с базой данных, а второй и есть наш пресловутый сервлет.

А вот и наши, упомянутые выше POST и GET запросы, эти функции являются обработчиками и задают поведение сервлета в ответ на запросы от клиента. Суть одна — данные пришли, данные ушли. Ничего сложного. Попробуйте поиграться с методами.

Переходим к классу, реализующему JDBC:

Здесь тоже всё просто, те же SQL запросы, только завёрнутые в Java-код. Небольшой совет — остерегайтесь всяких надстроек и фреймворков. Они хороши только в больших проектах, когда у вас миллионы записей, и сложные транзакционные операции. Но, настоящий контроль вы получите только, когда пишете именно вручную запрос, без таких вещей как сериализация жить намного проще (особенно поначалу).

Всё, с серверной частью закончим. Тут вам придётся посидеть, почитать специальные статьи и руководства. Без реальной практики тут никак.

Клиентская часть

Вот и пришло время взглянуть на то, что твориться у клиента в браузере. А ничего сверхъестественного. Но, скажу вам прямо, конечно всё зависит от проекта, но, клиентская часть обычно намного сложнее в реализации, чем серверная. И всё в основном из-за JavaScript-а. Очень быстро клиентский код превращается в набор «простыней», заплат, хардкода и прочих веселостей. JavaScript суров и беспощаден. На чистом нём писать очень тяжело. Поэтому мы используем JQuery. Есть куча других фреймворков и другого творения, но их касаться здесь не будем. Есть такая поговорка, что назови любое слово и это будет названием JS-фреймворка. Известен в узких кругах фреймфорк Mocha, я не представляю какие мысли посещали человека, когда он придумывал ему название, ну ладно, это было его право, конечно же.

Итак, что у нас там с клиентом?

Опять дам ссылку на отличнейший ресурс www.codecademy.com. Фронтенд там разобран очень хорошо и даёт необходимую базу для начинающих.

Тут рассмотрим только функцию

Что она делает? Правильно, шлёт тот самый POST — запрос и разбирает ответ. Всё просто, отдал данные и получил с сервера. По русски он говорит серверу «Дай мне имена всех, кто у тебя в базе» или «Занеси в базу это имя» и даёт ему имя.

Вот и вся клиентская часть.

Отправляем ресурс в настоящий мир

Как можно было заметить, наш сервис крутиться на локальном хосте. Другими словами на нашем же компьютере. Пришло время это исправить.

Тут я опишу лишь общий принцип сего действия. Это так или иначе потребует от вас денег на сервер, поэтому маловероятно, что кто-то действительно этим будет заниматься, особенно в самом начале своего программистского пути. Но понимать общую концепцию вы должны уже сейчас. Если кто решиться — знайте вы молодцы, вполне вероятно из вас может выйти толк.

И по традиции сразу несколько ссылок:

Читаем, что там написано, формируем в голове общую концепцию, того, как происходит взаимодействие программиста и удаленного сервера.

Сами сервера можно приобрести на amazone. Ссылку не даю, ибо реклама, можете сами поискать, это не сложно. Есть бесплатный тестовый период. НО! Будьте предельно осторожны, ваш покорный слуга сам слышал истории, как со счетов списывались тысячи долларов без ведома хозяина, ибо система сама умеет докупать себе мощности. Не попадитесь, я сам уже платил несколько раз за непонятные услуги, там всё на английском. Если не уверены, что делаете — лучше вообще не делайте.

Порядок действий таков:

На всякий случай я оставлю тут эти ссылки, вдруг, кто-то застопорился на каком-то моменте и решил спуститься в самый низ статьи, может помогут:

Заключение

Вот мы и добрались до кульминации нашего здесь обсуждения Джавы и веб-разработки на ней. Сложно? Да. Интересно? Да. Все, абсолютно все сервисы, будь то, поисковая система с миллиардами индексов, будь то видео-сервис с миллионами стрим-каналов — всё строиться по одному принципу. Отдать — забрать данные. Понимая эту концепцию вы сможете написать любую систему, сервис или платформу.

Я не стану лукавить и обманывать вас уважаемые читатели. Вряд ли вы за 2 или 3 недели станете супер профессионалами и будете свободно писать код. Этому можно научиться только потом и долгими ночами. Чем дальше вы будете залазить в дебри, тем больше вы будете понимать, что вы так мало знаете. Дорогу осилит идущий, вперед, дерзайте.

Вперед. Пришло время действовать. Стареющим Дурову и Брину пора уйти на покой, время их славы уже прошло, пришло время обновить учебники истории и списки Forbs. И кто знает, может эту статью читает тот, кто в своё время напишет отличнейшую платформу, которая затмит собой таких гигантов как Google, Facebook и других. Удачи, спасибо, что дочитали до конца.

Источник

Делаем современное веб-приложение с нуля

Итак, вы решили сделать новый проект. И проект этот — веб-приложение. Сколько времени уйдёт на создание базового прототипа? Насколько это сложно? Что должен уже со старта уметь современный веб-сайт?

В этой статье мы попробуем набросать boilerplate простейшего веб-приложения со следующей архитектурой:

Введение

Перед разработкой, конечно, сперва нужно определиться, что мы разрабатываем! В качестве модельного приложения для этой статьи я решил сделать примитивный wiki-движок. У нас будут карточки, оформленные в Markdown; их можно будет смотреть и (когда-нибудь в будущем) предлагать правки. Всё это мы оформим в виде одностраничного приложения с server-side rendering (что совершенно необходимо для индексации наших будущих терабайт контента).

Давайте чуть подробнее пройдёмся по компонентам, которые нам для этого понадобятся:

Инфраструктура: git

Наверное, про это можно было и не говорить, но, конечно, мы будем вести разработку в git-репозитории.

Итоговый проект можно посмотреть на Github. Каждой секции статьи соответствует один коммит (я немало ребейзил, чтобы добиться этого!).

Инфраструктура: docker-compose

Начнём с настройки окружения. При том изобилии компонент, которое у нас имеется, весьма логичным решением для разработки будет использование docker-compose.

Добавим в репозиторий файл docker-compose.yml следующего содержания:

Давайте разберём вкратце, что тут происходит.

Не менее важный docker/backend/.dockerignore :

Воркер в целом аналогичен бэкенду, только вместо gunicorn у нас обычный запуск питонячьего модуля:

Наконец, фронтенд. Про него на Хабре есть целая отдельная статья, но, судя по развернутой дискуссии на StackOverflow и комментариям в духе «Ребят, уже 2018, нормального решения всё ещё нет?» там всё не так просто. Я остановился на таком варианте докерфайла.

Итак, наш каркас из контейнеров готов и можно наполнять его содержимым!

Бэкенд: каркас на Flask

Теперь наш бэкенд мы можем официально ПОДНЯТЬ!

Фронтенд: каркас на Express

В дальнейшем нам вообще не потребуется Node.js на машине разработчика (хотя мы могли и сейчас извернуться и запустить npm init через Docker, ну да ладно).

В Dockerfile мы упомянули npm run build и npm run start — нужно добавить в package.json соответствующие команды:

Команда build пока ничего не делает, но она нам ещё пригодится.

Добавим в зависимости Express и создадим в index.js простое приложение:

Теперь docker-compose up frontend поднимает наш фронтенд! Более того, на http://localhost:40002 уже должно красоваться классическое “Hello, world”.

Фронтенд: сборка с webpack и React-приложение

Пришло время изобразить в нашем приложении нечто больше, чем plain text. В этой секции мы добавим простейший React-компонент App и настроим сборку.

При программировании на React очень удобно использовать JSX — диалект JavaScript, расширенный синтаксическими конструкциями вида

Однако, JavaScript-движки не понимают его, поэтому обычно во фронтенд добавляется этап сборки. Специальные компиляторы JavaScript (ага-ага) превращают синтаксический сахар в уродливый классический JavaScript, обрабатывают импорты, минифицируют и так далее.

2014 год. apt-cache search java

Итак, простейший React-компонент выглядит очень просто.

Он просто выведет на экран наше приветствие более убедительным кеглем.

Добавим и клиентскую точку входа:

Для сборки всей этой красоты нам потребуются:

webpack — модный молодёжный сборщик для JS (хотя я уже три часа не читал статей по фронтенду, так что насчёт моды не уверен);
babel — компилятор для всевозможных примочек вроде JSX, а заодно поставщик полифиллов на все случаи IE.

Если предыдущая итерация фронтенда у вас всё ещё запущена, вам достаточно сделать

для установки новых зависимостей. Теперь настроим webpack:

Чтобы заработал babel, нужно сконфигурировать frontend/.babelrc :

Наконец, сделаем осмысленной нашу команду npm run build :

Бэкенд: данные в MongoDB

Прежде, чем двигаться дальше и вдыхать в наше приложение жизнь, надо сперва её вдохнуть в бэкенд. Кажется, мы собирались хранить размеченные в Markdown карточки — пора это сделать.

В то время, как существуют ORM для MongoDB на питоне, я считаю использование ORM практикой порочной и оставляю изучение соответствующих решений на ваше усмотрение. Вместо этого сделаем простенький класс для карточки и сопутствующий DAO:

(Если вы до сих пор не используете аннотации типов в Python, обязательно гляньте эти статьи!)

Теперь надо создать MongoCardDAO и дать Flask-приложению к нему доступ. Хотя сейчас у нас очень простая иерархия объектов (настройки → клиент pymongo → база данных pymongo → MongoCardDAO ), давайте сразу создадим централизованный царь-компонент, делающий dependency injection (он пригодится нам снова, когда мы будем делать воркер и tools).

Время добавить новый роут в Flask-приложение и наслаждаться видом!

Упс… ох, точно. Нам же нужно добавить контент! Заведём папку tools и сложим в неё скриптик, добавляющий одну тестовую карточку:

Успех! Теперь время поддержать это на фронтенде.

Фронтенд: Redux

Начнём с добавления Redux. Redux — JavaScript-библиотека для хранения состояния. Идея в том, чтобы вместо тысячи неявных состояний, изменяемых вашими компонентами при пользовательских действиях и других интересных событиях, иметь одно централизованное состояние, а любое изменение его производить через централизованный механизм действий. Так, если раньше для навигации мы сперва включали гифку загрузки, потом делали запрос через AJAX и, наконец, в success-коллбеке прописывали обновление нужных частей страницы, то в Redux-парадигме нам предлагается отправить действие “изменить контент на гифку с анимацией”, которое изменит глобальное состояние так, что одна из ваших компонент выкинет прежний контент и поставит анимацию, потом сделать запрос, а в его success-коллбеке отправить ещё одно действие, “изменить контент на подгруженный”. В общем, сейчас мы это сами увидим.

Начнём с установки новых зависимостей в наш контейнер.

Первое — собственно, Redux, второе — специальная библиотека для скрещивания React и Redux (written by mating experts), третье — очень нужная штука, необходимость который неплохо обоснована в её же README, и, наконец, четвёртое — библиотечка, необходимая для работы Redux DevTools Extension.

Начнём с бойлерплейтного Redux-кода: создания редьюсера, который ничего не делает, и инициализации состояния.

Наш клиент немного видоизменяется, морально готовясь к работе с Redux:

Фронтенд: страница карточки

Прежде, чем сделать страницы с SSR, надо сделать страницы без SSR! Давайте наконец воспользуемся нашим гениальным API для доступа к карточкам и сверстаем страницу карточки на фронтенде.

Время воспользоваться интеллектом и задизайнить структуру нашего состояния. Материалов на эту тему довольно много, так что предлагаю интеллектом не злоупотреблять и остановится на простом. Например, таком:

Заведём компонент «карточка», принимающий в качестве props содержимое cardData (оно же — фактически содержимое нашей карточки в mongo):

Теперь заведём компонент для всей страницы с карточкой. Он будет ответственен за то, чтобы достать нужные данные из API и передать их в Card. А фетчинг данных мы сделаем React-Redux way.

Для начала создадим файлик frontend/src/redux/actions.js и создадим действие, которые достаёт из API содержимое карточки, если ещё не:

Ох, у нас появилось действие, которое ЧТО-ТО ДЕЛАЕТ! Это надо поддержать в редьюсере:

(Обратите внимание на сверхмодный синтаксис для клонирования объекта с изменением отдельных полей.)

Теперь, когда вся логика унесена в Redux actions, сама компонента CardPage будет выглядеть сравнительно просто:

Добавим простенькую обработку page.type в наш корневой компонент App:

И теперь остался последний момент — надо как-то инициализировать page.type и page.cardSlug в зависимости от URL страницы.

Но в этой статье ещё много разделов, мы же не можем сделать качественное решение прямо сейчас. Давайте пока что сделаем это как-нибудь глупо. Вот прям совсем глупо. Например, регуляркой при инициализации приложения!

Так, секундочку… а где же наш контент? Ох, да мы ведь забыли распарсить Markdown!

Воркер: RQ

Парсинг Markdown и генерация HTML для карточки потенциально неограниченного размера — типичная «тяжёлая» задача, которую вместо того, чтобы решать прямо на бэкенде при сохранении изменений, обычно ставят в очередь и исполняют на отдельных машинах — воркерах.

Есть много опенсорсных реализаций очередей задач; мы возьмём Redis и простенькую библиотечку RQ (Redis Queue), которая передаёт параметры задач в формате pickle и сама организует нам спаунинг процессов для их обработки.

Время добавить редис в зависимости, настройки и вайринг!

Немного бойлерплейтного кода для воркера.

Для самого парсинга подключим библиотечку mistune и напишем простенькую функцию:

Мы объявили свой класс джобы, прокидывающий вайринг в качестве дополнительного kwargs-аргумента во все таски. (Обратите внимание, что он создаёт каждый раз НОВЫЙ вайринг, потому что некоторые клиенты нельзя создавать перед форком, который происходит внутри RQ перед началом обработки задачи.) Чтобы все наши таски не стали зависеть от вайринга — то есть от ВСЕХ наших объектов, — давайте сделаем декоратор, который будет доставать из вайринга только нужное:

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

Радуемся жизни? Тьфу, я хотел сказать, запускаем воркер:

Ииии… он ничего не делает! Конечно, ведь мы не ставили ни одной таски!

Давайте перепишем нашу тулзу, которая создаёт тестовую карточку, чтобы она: а) не падала, если карточка уже создана (как в нашем случае); б) ставила таску на парсинг маркдауна.

Пересобрав контейнер с бэкендом, мы наконец можем увидеть контент нашей карточки в браузере:

Фронтенд: навигация

Прежде, чем мы перейдём к SSR, нам нужно сделать всю нашу возню с React хоть сколько-то осмысленной и сделать наше single page application действительно single page. Давайте обновим нашу тулзу, чтобы создавалось две (НЕ ОДНА, А ДВЕ! МАМА, Я ТЕПЕРЬ БИГ ДАТА ДЕВЕЛОПЕР!) карточки, ссылающиеся друг на друга, и потом займёмся навигацией между ними.

Теперь мы можем ходить по ссылкам и созерцать, как каждый раз наше чудесное приложение перезагружается. Хватит это терпеть!

Сперва навесим свой обработчик на клики по ссылкам. Поскольку HTML со ссылками у нас приходит с бэкенда, а приложение у нас на React, потребуется небольшой React-специфический фокус.

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

Внимательный читатель обратит внимание, что URL страницы не будет изменяться при навигации между карточками — даже на скриншоте мы видим Hello, world-карточку по адресу demo-карточки. Соответственно, навигация вперёд-назад тоже отвалилась. Давайте сразу добавим немного чёрной магии с history, чтобы починить это!

Теперь при переходах по ссылкам URL в адресной строке браузера будет реально меняться. Однако, кнопка «Назад» сломается!

А вот как — действие navigate:

Вот теперь история заработает.

Фронтенд: server-side rendering

Пришло время для нашей главной (на мой взгляд) фишечки — SEO-дружелюбия. Чтобы поисковики могли индексировать наш контент, полностью создаваемый динамически в React-компонентах, нам нужно уметь выдавать им результат рендеринга React, и ещё и научиться потом делать этот результат снова интерактивным.

Источник