React + Low-code. Делаем веб-приложение за 3 часа
Недавний наш пост на Трибуне (Кубики вместо кода) вызвал живой интерес. Поэтому продолжаем его более предметной статьей. Даже видео-туториалом, где я под запись за 2 часа 53 минуты собираю живое приложение на очень эффективной связке технологий: Directual + React. Этот материал подойдет и фронтэнд-разработчикам как пошаговая инструкция «как обойтись без бэкендеров».
Еще раз про no-code и low-code
Программирование развивается в сторону «писать меньше кода, решать задачу эффективнее». В последнее время первая часть этого утверждения стала предметом дискуссии между ИТ-специалистами и адептами 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 минуты. На ютубе есть таймкоды.
В следующих сериях
В качестве упражнения, можно сделать из этого проекта более-менее серьезную соцсеть про кино. Чтобы у каждого был свой список фильмов, друзья, лайки-шеры, глобальный рейтинг. Ну и, конечно, надо бы адаптировать под мобилки. Пожелания по развитию и содержанию других туториалов можно писать в комменты тут и на ютубе.
Спасибо! У нас в облаке работают такие клиенты, как Schlumberger, UFG, ПИК. Мы не сможем просто взять и закрыться :)
Интересный сервис развиваете.
Для создания MVP очень подходит.
Но такой вопрос, а насколько сильно вы готовы поддерживать сервис?
Я готов попробовать перенести БП к вам, но хотелось бы каких-то минимальных гарантий, что сервис не закроется/изменится цель проекта.