# Технологии, использованные при разработке 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.

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

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