# Технологии, использованные при разработке Monsterlessons

poster
Меня часто спрашивают, на чем написан сайт monsterlessons, какие я там использовал технологии и почему. Так что, в этом видео я об этом расскажу.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

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

Я хотел сразу строить SPA, чтобы избежать загрузки одних и тех же данных при переходе между страницами, которые в случае с SPA мы получаем только один раз при первой загрузке. Да и для пользователя тогда сайт выглядит отзывчивее и быстрее.

Так же очень важно, чтобы все страницы индексировались, так как в большинстве, люди находят видео в поисковиках.

На тот момент, когда я начинал писать сайт, только React мог рендериться на сервере. Ни Angular, ни Ember еще не имели такого функционала, так что выбор фреймворка был очевиден.

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

Вместе с React я взял: Redux, React-router, React-router-redux, Redux-form.

Для сборки всего приложения я использую webpack.

Вся верстка приложения написана на Aphrodite.

Теперь немного о DevOps. Для того, чтобы весь сайт не был монолитным, я его разбил на микросервисы. В моем случае их четыре:

  1. Бекенд, где рендерится фронтенд
  2. Сервер Api
  3. Сервер авторизации
  4. Сервер почты

И все они написаны на nodejs.

Все эти микросервисы являются doker контейнерами. Для работы с ними, я использую dokku. Dokku - это open source аналог heroku. То есть в одну команду, вы можете задеплоить ваше приложение на сервер. Dokku позволяет легко создавать контейнеры, добавлять базу данных, хранить статику, настраивать nginx и много другое.

В качестве сервера я использую Digital Ocean. Он достаточно качественный, хоть и не самый дешевый. Собственно, туда я установил Dokku и простыми командами указал как и что я хочу деплоить.

Теперь немного о самих микросервисах.

Бекенд, где рендерится фронтенд, очень тонкий. Он ничего не знает о базе данных и он только и умеет, что рендерить React. Если ему нужны какие-то данные, он обращается к API серверу, или к сервису авторизации.

Сервис API нужен для того, чтобы доставать все ресурсы из базы. В нашем случае - это уроки, категории, видео, постеры к урокам. Для описания API я использую GraphQL. Это намного более удобное и качественное решение, чем, например, JSONAPI, который я использовал ранее. Вы описываете схему своего API со всеми типами данных, которую сразу видно, и не возникает проблем с пониманием - "А какие данные я должен передать с клиента?", или "А какие эндпоинты у вас есть?".

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

r.db('api').table('lessons').get('123')

Также, в админке rethinkdb сразу можно писать запросы с автокомплитом и историей запросов, что очень удобно.

Сервис авторизации служит для работы с регистрацией, авторизацией, покупками и всем, что связано с пользователями. Там тоже используется GraphQL + Rethinkdb.

Сервис емейлов очень тонкий. У него тоже есть API на GraphQL по отправке емейлов, а внутри у него описано, как должны выглядеть письма и он их отправляет с помощью сервиса Mailgun.

Репозитории для всех сервисов мы храним на Gitlab. У gitlab есть свой CI, так что можно удобно, при каждом коммите, проверять тесты. Конечно, как на любом проекте, мы создаем тикеты, которые нужно делать, фичи и баги. Все это мы делаем тоже в gitlab.

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

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Сергей Козлов
1год назад назад
Здравствуйте. Хотел бы поинтересоваться у Вас. Я написал небольшой тестовый блог для себя с react/redux/exress/mongo/mongoose. Сделал аутентификацию пользователя через passport-local. Все работает, все ок, но мне не нравится, что при обновлении страницы видно где-то на 0.2-0.3 секунды, как моргает header сначала незарегистрированного пользователя, а потом зарегистрированного, смотрится не очень красиво. У вас же на сайте такого нет. Не подскажите как вы такое реализовали?
monsterlessons
1год назад назад
Добрый день. Зависит от того рендерится ли у вас реакт на сервере или нет. У меня рендерится и текущего юзера я получаю на бекенде до того как данные отрисовываются. Поэтому и не мигает.
Pavel Silber
2 лет назад
Скажите, пожалуйста, как быстро можно стать программистом востребованного уровня, если ближайшие пять или шесть месяцев я смогу уделять 5-6 часов в день, у меня есть базовые понятия в программировании (HTML, CSS, ооп, рекурсия...), по профессии инженер электронщик, и хочу стать веб программистом...
monsterlessons
2 лет назад
Тут все упирается в город и умение себя продавать. Если город миллионник, то нужно просто рассылать резюме, делать тестовые, ходить на собеседования и понимать, что от вас хотят. Я бы искал что-то вроде "требуется мидл на Angular 1, React, whatever". Сейчас, например, до сих пор есть куча проектов на Angular 1 и очень много фронтендщиков воротит от них нос. Вот где можно найти позицию. А уже на работе фигачить и подтягивать знания побыстрее.
Pavel Silber
2 лет назад
А что на мидла могут без опыта взять :) ?
monsterlessons
2 лет назад
Все зависит от компании и от человека лично.
Moe Green
2 лет назад
О! По GrapQL хочу! Ничего русского по этой теме пока нет. И еще - JWT. Ну и Docker, если можно. Хотя бы вкратце ) P.S. GitLab мне нравится больше и приятнее с ним работать. GitHub для меня сейчас как визитная карточка просто
monsterlessons
2 лет назад
Так как проект не приносит особенно много прибыли, а занимает достаточно много времени, то видео выходят только раз в неделю. Ваши пожелания я добавил в планируемые видео, но вряд ли это осуществится в ближайшем времени. P.S. для своих проектов я тоже использую gitlab, но примеры проектов всегда ищу только на гитхабе.
bakhaa
2 лет назад
Очень интересна тема микросервисов. Подробнее бы... Спасибо за уроки
monsterlessons
2 лет назад
Спасибо за идею. Добавил в список будущих видео.
bakhaa
2 лет назад
а можно как то с Вами связаться? Хотелось бы поинтересоваться и разобрать конкретную реализацию, в разрезе микросервисов?
monsterlessons
2 лет назад
Пишите на monsterlessons@gmail.com. Но я отвечаю только на общие вопросы не решая проблемы конкретной реализации, так как это занимает достаточно много времени.
bakhaa
2 лет назад
спасибо
yarovoy
2 лет назад
Добрый день! Подскажите пожалуйста, может у вас есть какие-то инструкции по поводу того как правильно настраивать рендеринг реакта на сервере, или может подскажет где есть нормальный мануал по этому, и какой сервер для этого лучше подходит, Спасибо)
monsterlessons
2 лет назад
Добрый день. Вы можете использовать любой сервер, какой вам нравится, особой разницы нет. Поищите на github "boilerplate react ssr". К сожалению, у меня нет оупенсорсных примеров ssr.
yarovoy
2 лет назад
Понял, спасибо)
evgeniy
2 лет назад
Столкнулся сейчас с проблемой в проекте(Vue.js with ssr): нужно прикрутить RethinkDB и GrapQl. Туториалов не так много, не знаю как все это нормально готовить. Было бы круто от тебя пару уроков, пускай даже платных!
monsterlessons
2 лет назад
Спасибо за идею. Подумаю, но вряд ли в ближайшее время, так как пока не так много времени, чтобы снять полноценный курс.
Григорий Матвеев
2 лет назад
и хотелось бы уроков по Vuejs, Vuex, было бы круто!
Григорий Матвеев
2 лет назад
и по Redux-Forms я бы посмотрел урок....
Григорий Матвеев
2 лет назад
Хотелось бы урок по GraphQL, так как давно им заинтерисован, читал документации, но хотелось бы твои уроки по нему посмотреть, очень нравится как ты рассказываешь, смотрел почти все твои курсы, включая платный. Также был бы интересен урок по Docker....
monsterlessons
2 лет назад
Добрый день. Спасибо за идеи, добавил в список будущих видео.
lisonok
2 лет назад
А как реализовано обновление title и мета информации? И еще интересно как реализован переход по браузерной истории
monsterlessons
2 лет назад
https://github.com/nfl/react-helmet -обновление title и meta https://github.com/ReactTraining/react-router - роутинг
lisonok
2 лет назад
Ну роутинг понятно :) Я в плане какие события надо обработать и как это схематически выглядит Или данные всегда подгружаются из componentDidMount и при прыжках по истории, компонент перерисовывается?
monsterlessons
2 лет назад
По факту просто всегда данные подгружатся заново при прыжках. Ничего, кроме списка категорий не кешируется. Я не использую componentDidMount а заворачиваю компоненты, где нужно делать фетчи в redial. https://github.com/markdalgleish/redial Он дает возможность указывать что мы хотим фетчить на клиенте, а что на сервере. Ну и после фетча компонент перерисовывается по новым данным.
lisonok
2 лет назад
Тоже хотел бы посмотреть уроки по GraphQl
monsterlessons
2 лет назад
Спасибо за отзыв. Они уже в списке будущих уроков.
Valerii Kuzivanov
2 лет назад
Привет! Может запилишь обзорное видео про GraphQL? Что это? Зачем нужно? Примеры использования? Плюсы/минусы. Часто слышу о нем, но так и не дошли руки разобраться что это такое. Думаю не я один такой.
monsterlessons
2 лет назад
Спасибо за идею. Добавил в список будущих видео.
Igor Bond
2 лет назад
Ништячок видео, спасибо. Несколько лет назад такие дела и не снились - на чем блог запилил? - На вордпрес, ясен перец. ))
monsterlessons
2 лет назад
На здоровье. Ну или любой сайт на joomla, drupal)
varden
2 лет назад
Очень интересно и полезно увидеть результат и узнать на каких технологиях он работает. Здорово было бы сделать серию уроков по технологиям в вашем приложении и как это всё это работает вместе. Спасибо.
monsterlessons
2 лет назад
Спасибо. Но тут понадобится много серий уроков) Постараюсь сделать со временем.
Максим Маркелов
2 лет назад
Добрый день! Планируется ли серия по graphql?
monsterlessons
2 лет назад
Пока не планировалась, но если много людей напишут что хотят, то могу снять.
vlad
2 лет назад
Супер. 1. Т.к. в видео много незнакомых слов (инструментов), то было бы классно посмотреть видеоуроки по этим инструментам. 2. ИНТЕРЕСНА не "вариация возможных решений" - можно сделать или так или эдак, а ИНТЕРЕСНО как конкретно задачу реализует специалист. Тупо как китайцы - повторять движения мастера.
monsterlessons
2 лет назад
Со временем сниму. Но это займет время. Пока я в описании оставил ссылки на все инструменты, так что можно смотреть/изучать.