В предыдущей статье я описала почему я хочу писать свой web сайт для планирования. Но есть еще и другая причина - это изучение тех технологий, которые хотелось бы изучать, но на работе они не используются.
Мой проект будет состоять из двух частей - фронтенд и бекенд. У меня был опыт создания фронтовых проектов с нуля, а вот с бекендом - нет. Итак, что же я выбрала для написания проекта.
Начну с фронтовой более привычной для меня среды в последние годы: React, TypeScript, Webpack, Babel, Prettier, Eslint, Material UI, SASS, Apollo. Все, за исключением Appolo, я использовала в работе ранее.
React - это библиотека для разработки UI.
TypeScript - это язык программирования, основанный на JavaScript, который добавляет типизацию.
Webpack - сборщик проекта
Babel - траспиляция кода в такой вид, который будет понятен всем браузерам, для которых вы укажете в настройках
Appolo - взаимодействие с GraphQL на бекенде
Material UI - библиотека UI компонентов основанная на Material Guide от Google
SASS - это расширение css
Prettier, Eslint - штуки, без которых я уже не обхожусь ни в одном проекте. Это форматирование и проверка кода согласно тем правилам которые будут описаны в конфигурации.
Что я выбрала для бекенда: NestJS, TypeScript, GraphQL, Postgres. Тут для меня знакомо только TypeScript.
О NestJS я узнала от разработчика с предыдущего места работы, когда он рекомендовал его в качестве фреймворка для бекенда на проекте.
GraphQL давно хотела попробовать и даже что-то читала о нем и делала какие-то эксперименты. Это язык запросов к api, который замент привычные HTTP запросы GET, POST, PUT и прочие. Останется только один запрос POST а уже то, какие нужны данные будет передаваться в теле запроса.
В качестве БД изначально думала MongoDB, но намучившись с ним на своем рабочем проекте, решилась на Posgres, тем более что с SQL я хорошо знакома.
Описание самой реализации логичнее начать с бекенда, так как без бекенда на фронтенде особо делать нечего. Сначала я хотела делать авторизацию, но так как я с этим никогда не сталкивалась с нуля, сразу же споткнулась и желание что-то делать пропало. Поэтому я решила пропустить этот шаг, и добавить ее уже после, когда более подробно изучу выбранные технологии бекенда.
В NestJS, как и в большинстве фреймворков и библиотек есть возможность быстрого старта. Обычно это описано в разделе документации Quick Start. В NestJS стартануть проект можно двумя командами - первая чтобы установить сам NestJS и вторая чтобы создать минимально необходимые файлы для комфортного старта работы.
Следующий этап - это подключение модуля GraphQL, об этом тоже достаточно подробно описано в документации. В итоге мы получаем UI от GraphQL (graphiql) с помощью которого можно тестировать запросы к бекенду.
Я начала с создания списка категорий, пока без БД, просто статичный список в коде и для описания категории пока только 2 поля - id и title. Написала resolvers для того чтобы вывести этот список.
Параллельно я сделала заготовку для фронтенда, настроила webpack, babel, а вот eslint и prettier донастраивала уже по ходу разработки.
Для хранения кода есть 2 подхода, когда фронт и бек лежат в двух разных репозиториях и в одном. Я решила хранить все в одном месте. В webstorm это тоже один проект, так как я одновременно делаю фронт и бек.
На данный момент у меня готовы: список планов, список категорий по планам, список действий по категориям, назначение регулярности действия и отображение календаря на месяц со списком дел (но еще не финальная версия). В следующих статьях я буду описывать как я это реализовывала...