Проект

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

Наставники

Аватар наставника Айдар Шайхутдинов
Айдар Шайхутдинов
По образованию радиофизик, в веб-разработке с 2014 года. Имеет опыт работы как на фрилансе, так и в распределённых командах. Разрабатывал проекты для «Ростелекома», фронт для системы распределения доступа в «Газпром-нефть»
Аватар наставника Александр Колиух
Александр Колиух
Наш выпускник! Стал фулстек-разработчиком на Хекслете. Успел поработать как на аутсорсе, так и в команде продуктовой компании. Сейчас разработчик EPAM Systems. Основной стек – React / Redux / Effector / TypeScript
Аватар наставника Александр Половников
Александр Половников
Больше 10 лет опыта во фронтенд-разработке. Как в стартапах, так и в крупных российских и зарубежных компаниях (Yandex, Philip Morris, Sweden Airlines). Co-founder финтех-стартапа Monite. Увлекается IoT, программирует умные устройства и роботов
Аватар наставника Вадим Кудрявцев
Вадим Кудрявцев
Самоучка с профильным образованием. Профессиональный путь начал с серверной разработки на python/node.js, но в компании OneTwoTrip полностью переключился на фронтенд. Есть опыт разработки MVP криптобиржи на стеке ExpressJS / React / Redis / MongoDB / Docker

Впечатления

Аватар пользователя Alexey Buravov
Alexey Buravov 25 ноября 2020

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

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

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


Аватар пользователя Сергей
Сергей 06 апреля 2020

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

Он офигенен)

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

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


Аватар пользователя Алексей
Алексей 07 октября 2020

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


Аватар пользователя Sergei Zheludkov
Sergei Zheludkov 21 августа 2020

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

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


Аватар пользователя Evgeny Malafeev
Evgeny Malafeev 26 октября 2019

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

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

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

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

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

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

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

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

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

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

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

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

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

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