Проект #3

RSS агрегатор

Фронтенд-разработчик

После третьего проекта вы сможете уверенно работать с DOM, webpack, Bootstrap, AJAX, валидациями и деплоить проект

2-4
недели

Цель

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

Современные фреймворки часто скрывают прямую работу DOM за своими обёртками, предоставляя более удобные механизмы взаимодействия с содержимым сайта. Это хорошо с точки зрения реальной разработки, но очень мешает обучению. Хороший фронтенд-программист должен отлично разбираться не только в JavaScript и своём фреймворке, но и в том, как работать с браузером напрямую. Это крайне важно и для эффективной отладки, и для создания качественного кода.

Третий проект фокусируется на работе с чистым DOM. Здесь отрабатывается работа с селекторами, событиями и генерацией HTML средствами DOM API. Особое внимание уделяется формам. Правильная работа с ними включает в себя не только знание нужных событий, но и понимание основ UX. Всё это проявляется в блокировках во время отправки, отображении прогресса и настройке фокусов. Кроме прочего, формы - это ещё и валидация данных.

Однако для создания легко поддерживаемых и расширяемых приложений одного знания DOM недостаточно. Приложение, которое пишется "в лоб", после добавления десятка событий быстро превращается в сложно поддерживаемый комок кода, в котором не разберётся даже автор кода. Качественные приложения разрабатываются на основе шаблона проектирования MVC и его модификаций. В этом проекте MVC реализуется полностью самостоятельно, базируясь на материале курса по архитектуре фронтенд-приложений. Студентам предстоит разделить код на слои, правильно выделить состояние и нормализовать его. Воспользоваться идеями автоматного программирования для управления процессом загрузки данных.

Ещё один краеугольный камень фронтенд-разработки – Ajax. Выполнение HTTP-запросов само по себе – процесс несложный, но здесь много тонкостей. Во-первых, в этом месте появляется асинхронный JavaScript, а значит, и работа с промисами, и обработка ошибок. Во-вторых, любое внешнее взаимодействие в браузере неразрывно связано с безопасностью, о которой нужно иметь хорошее представление. Иначе легко попасть в ситуацию, когда проект взломают.

И ни один фронтенд-проект не обходится без этапа сборки: подключение файлов стилей, библиотек, запуск препроцессоров, автоматическая пересборка проекта после изменения кода и многое другое. Всё это делается сборщиками, такими, как Webpack. В этом проекте студентам предстоит погрузиться в бэкенд фронтенда, настроить сборку и выполнить деплой в продакшен.

Описание

RSS – специализированный формат, предназначенный для описания лент новостей, анонсов статей и других материалов. Это наиболее простой способ для сайтов (обычно, блогов) дать возможность пользователям подписываться на изменения. Для этого используются специальные сервисы, называемые RSS-агрегаторами. Эти сервисы умеют опрашивать RSS-ленты сайтов на наличие новых постов и показывают их в удобном виде, отмечая прочитанное и так далее.

Например, у Хекслета есть канал в Твиттере, куда попадают анонсы всех новых уроков. Твиттер сам "засасывает" всю информацию через RSS-ленту, которую мы ему предоставили. По такому же принципу Slack забирает RSS-ленту с новыми постами в нашем блоге и сообщает об этом в канале #general.

Rss Reader – сервис для агрегации RSS-потоков, с помощью которых удобно читать разнообразные источники, например, блоги. Он позволяет добавлять неограниченное количество RSS-лент, сам их обновляет и добавляет новые записи в общий поток.

Hexlet RSS-Reader

Наставники

Аватар эксперта Вадим Сорокин
Вадим Сорокин
Frontend Developer, Universa Blockchain
Аватар эксперта Вадим Кудрявцев
Вадим Кудрявцев
Frontend Developer, OneTwoTrip
Аватар эксперта Кирилл Костиков
Кирилл Костиков
Frontend Developer, Pushwoosh
Аватар эксперта Александр Половников
Александр Половников
Software Engineer, VideoCoin

Впечатления

Проект супер, мне понравился больше всех остальных пока пройденных. Самое главное - мы уже пилим реальную веб-страничку со своей архитектурой и логикой, что очень круто. Курс "Архитектура фронтенда" оказался очень полезен во время выполнения, периодически посматривал в него. Также в процессе выполнения благодаря ментору открыл для себя несколько новых вещей в JavaScript в целом и в используемых библиотеках в частности.

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

Выражаю огромную благодарность за проделанный труд и терпение ментору Ивану и команде Хекслета!

Фидбэк по проекту.

Он офигенен)

На первом этапе возникает ощущение, что вообще не понимаешь, что и как делать. И чем дольше ты его делаешь, тем больше понимаешь, насколько он близок к реальной разработке реальных проектов, где никто не будет разжевывать тебе всё от и до. Бонусом идет то, что ментор (в моем случае, Кирилл) находя ошибку, просто указывает на нее, но не дает готового решения. В общем, мозги приходится включать и это круто.

Спасибо, движемся дальше :)

Проект очень понравился! В начале было полное непонимание, что делать и как, приходилось очень много гуглить и скрипеть мозгами, но в итоге удовлетворение от готового результата и имэйла с заголовком "Ментор принял ваш проект" окупает все страдания старания. Спасибо Кириллу за сопровождение проекта!

Отзыв о проекте.

Проекты это круто. Хоть этот проект сначала и отбил желание заниматься программированием вообще, но чем больше в нем копаешься - тем больше начинаешь понимать и узнавать. К моменту написания рабочего прототипа я в него начал влюбляться. В итоге в этом проекте есть много интересного. Практика работы с конечными автоматами, с webpack'ом и bootstrap'ом. А так же вишенка на торте - i18n. Гениальная библиотека, как по мне. Менторство отдельная тема. Ментор помогает многое понять. Спасибо Ивану! И всей команде Хекслета!

Кирилл, благодарю за проект !

Многие говорят, что самое сложное в нем - это настройка окружения. Окружение настроил за один день и погнали. А вот над реализацией всей логики пришлось поломать голову. Для меня же самое сложное было - это архитектура проекта и автоматы. В начале, я даже не увидел в проекте никаких автоматов, потому что пытался реализовать MVC, как в упражнении на курсе. А потом, словно прозрел. В любом случае - это отличный проект, который хорошо помогает закрепить курсы перед ним. Еще раз спасибо!

Сколько стоят проекты?

Проекты входят в стоимость обучения в любом формате: самостоятельном, групповом и индивидуальном. Дополнительно платить не нужно.

Зачем проходить проекты?

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

Проекты — портфолио программиста. Их код останется в вашем аккаунте на GitHub и будет преимуществом при поиске работы.

Чтобы узнать о том, что такое проекты и в чём их польза, прочитайте нашу статью «Анатомия проектов Хекслета».

Что делать, если возникли трудности во время выполнения проекта?

Задавайте вопросы в разделе «Обсуждение» на странице шага, на котором возникли трудности, или вашему наставнику. Изучите вопросы других студентов в «Обсуждениях»: там собрана большая база знаний, ей можно и нужно пользоваться. Попросите о помощи в нашем Slack-чате в канале #hexlet-projects.

Кто проверяет проекты?

Автоматизированные тесты и линтер. В групповом и индивидуальном форматах наставник дополнительно проверит то, что тестами проверить невозможно (архитектуру проекта, правильность именования, удачность решений), и проведёт код-ревью, чтобы сделать проект ещё качественнее.

У меня другой вопрос

Нажмите на виджет в правом нижнем углу экрана и поищите ответ в нашей справке. Или сразу пишите на support@hexlet.io — вам ответит живой человек из команды Хекслета.