Проект #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-лент, сам их обновляет и добавляет новые записи в общий поток.

Впечатления

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

Он офигенен)

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

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

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

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

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

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

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

Итак - я в "клубе" !)) Проект принят ! Соответственно, пару слов благодарности + :

Во-первых - как и прежде - огромное спасибо Кириллу за вагон терпения, проявляемого в ходе менторства и за очень содержательные, аргументированные ответы даже на самые простые вопросы. Главное - сам вопрос сформулировать правильно )
Во-вторых - отдельное спасибо за саму по себе структуру проекта: не просто закрепление материала пройденных уроков, но и получение огромного +са в свою карму, за освоение немалой доли новых инструментов. Это как со сложной игрушкой в детстве: вот тебе запчасти, вот тебе инструкция. Хочешь радости пользования - читай и складывай )
И в третьих - предже, чем орать "помогите", убедитесь, что Вы точно прошерстили доку по нужной теме от начала и до конца.

...продолжение следует !)

Вопросы и ответы

Какое расписание у проекта?

У проекта нет расписания и вы можете заниматься в удобное для вас время. Доступ к проекту будет пока действует ваша премиум подписка.

Как оплачивается проект?

Проект доступен в рамках подписки на план «Премиум», дополнительная оплата не нужна. В течение месяца можно пройти один проект. Если у вас есть действующая профессиональная подписка, то стоимость премиум подписки будет меньше. Система пересчитает стоимость в зависимости от количества не использованных дней на текущем плане.

Зачем нужны проекты?

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

Что делает наставник в проектах?

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

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

Пишите нам на support@hexlet.io, вам ответит живой человек из команды Хекслета. Или нажмите на иконку со знаком вопроса в правом нижнем углу экрана. Там есть ответы и на другие вопросы и удобная форма для отправки сообщения нам.