React + Low-code. Делаем веб-приложение за 3 часа

Недавний наш пост на Трибуне (Кубики вместо кода) вызвал живой интерес. Поэтому продолжаем его более предметной статьей. Даже видео-туториалом, где я под запись за 2 часа 53 минуты собираю живое приложение на очень эффективной связке технологий: Directual + React. Этот материал подойдет и фронтэнд-разработчикам как пошаговая инструкция «как обойтись без бэкендеров».

Программирование развивается в сторону «писать меньше кода, решать задачу эффективнее». В последнее время первая часть этого утверждения стала предметом дискуссии между ИТ-специалистами и адептами no-code (или zero-code) решений типа Tilda, Bubble, Airtable. Подход «визуального программирования», на мой взгляд, верный, но надо не забывать про вторую часть —«решать задачу эффективнее». Эффективность включает в себя скорость разработки, гибкость решения, производительность и масштабируемость.

Если задача — сделать красивый сайт-визитку, то лучше Webflow я ничего не знаю. Если надо рассылать письма, то надо подключать, к примеру, Mailchimp. Но если нужно сделать более-менее сложный и отзывчивый интерфейс, то с React ничего не сравнится. Ни по простоте, ни по гибкости, ни по скорости рендеринга. Получается, что самый эффективный подход — это комбинация традиционной разработки, и no-code/low-code решений. Именно такую комбинацию я покажу в этом видео-уроке.

Идея приложения. Вести собственный список фильмов к просмотру, отмечать и оценивать просмотренные. Дать возможность регистрироваться и добавлять мне рекомендации.Вот результат: MyMovieList — буду благодарен за рекомендации хорошего кино :)

• Фронт на Реакте, управлять состояниями будем через React Hooks. На хуках код получается чище, чем на классовых компонентах.
• Бэкенд на low-code платформе Directual. Из коробки доступна база данных, конструктор API, авторизация. Также воспользуемся бойлерплейтом для Реакта.
• Для обогащения информации о фильмах подключим OMDb API.
• Результат запакуем в Докер.
• Вишенкой на торте сделаем постинг в твиттер благодарности за рекомендацию. Через Zapier — это интеграционный хаб.

Уровень, требуемый для понимания туториала — Джуниор. Включает: нормальное знание JS, базовое знание Реакта(про хуки надо хотя бы документацию почитать).

В расслабленном темпе все заняло 2 часа 53 минуты. На ютубе есть таймкоды.

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