RSS агрегатор

Цель

Независимо от используемых инструментов и способов организации кода, разработка фронтенд-проектов, в своей основе, базируется на одних и тех же принципах и технологиях. На нижнем уровне любое фронтенд-приложение работает с большим и сложным 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-лент, сам их обновляет и добавляет новые записи в общий поток.