RSS агрегатор
После третьего проекта вы сможете уверенно работать с DOM, webpack, Bootstrap, AJAX, валидациями и деплоить проект
Цель
Независимо от используемых инструментов и способов организации кода, разработка фронтенд-проектов, в своей основе, базируется на одних и тех же принципах и технологиях. На нижнем уровне любое фронтенд-приложение работает с большим и сложным 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-лент, сам их обновляет и добавляет новые записи в общий поток.
Наставники
Впечатления
Проект супер, мне понравился больше всех остальных пока пройденных. Самое главное - мы уже пилим реальную веб-страничку со своей архитектурой и логикой, что очень круто. Курс "Архитектура фронтенда" оказался очень полезен во время выполнения, периодически посматривал в него. Также в процессе выполнения благодаря ментору открыл для себя несколько новых вещей в JavaScript в целом и в используемых библиотеках в частности.
С настройкой окружения, конечно, пришлось поковыряться, почитать доки, но в реальной работе без этого никак.
Выражаю огромную благодарность за проделанный труд и терпение ментору Ивану и команде Хекслета!
Фидбэк по проекту.
Он офигенен)
На первом этапе возникает ощущение, что вообще не понимаешь, что и как делать. И чем дольше ты его делаешь, тем больше понимаешь, насколько он близок к реальной разработке реальных проектов, где никто не будет разжевывать тебе всё от и до. Бонусом идет то, что ментор (в моем случае, Кирилл) находя ошибку, просто указывает на нее, но не дает готового решения. В общем, мозги приходится включать и это круто.
Спасибо, движемся дальше :)
Проект очень понравился! В начале было полное непонимание, что делать и как, приходилось очень много гуглить и скрипеть мозгами, но в итоге удовлетворение от готового результата и имэйла с заголовком "Ментор принял ваш проект" окупает все страдания старания.
Спасибо Кириллу за сопровождение проекта!
Отзыв о проекте.
Проекты это круто. Хоть этот проект сначала и отбил желание заниматься программированием вообще, но чем больше в нем копаешься - тем больше начинаешь понимать и узнавать. К моменту написания рабочего прототипа я в него начал влюбляться. В итоге в этом проекте есть много интересного. Практика работы с конечными автоматами, с webpack'ом и bootstrap'ом. А так же вишенка на торте - i18n. Гениальная библиотека, как по мне. Менторство отдельная тема. Ментор помогает многое понять. Спасибо Ивану! И всей команде Хекслета!
Кирилл, благодарю за проект !
Многие говорят, что самое сложное в нем - это настройка окружения. Окружение настроил за один день и погнали. А вот над реализацией всей логики пришлось поломать голову. Для меня же самое сложное было - это архитектура проекта и автоматы. В начале, я даже не увидел в проекте никаких автоматов, потому что пытался реализовать MVC, как в упражнении на курсе. А потом, словно прозрел. В любом случае - это отличный проект, который хорошо помогает закрепить курсы перед ним. Еще раз спасибо!
Проекты входят в стоимость обучения на любом плане: самостоятельном, групповом и индивидуальном. Дополнительно платить не нужно.
Проекты дают опыт разработки в реальной среде. Проходите каждый проект сразу после изучения курсов, которые стоят в учебном плане перед ним, — это отличный способ глубже разобраться в материале.
Проекты — портфолио программиста. Их код останется в вашем аккаунте на GitHub и будет преимуществом при поиске работы.
Чтобы узнать о том, что такое проекты и в чём их польза, прочитайте нашу статью «Анатомия проектов Хекслета».
Задавайте вопросы в разделе «Обсуждение» на странице шага, на котором возникли трудности, или вашему наставнику. Изучите вопросы других студентов в «Обсуждениях»: там собрана большая база знаний, ей можно и нужно пользоваться.
Автоматизированные тесты и линтер. В групповом и индивидуальном форматах наставник дополнительно проверит то, что тестами проверить невозможно (архитектуру проекта, правильность именования, удачность решений), и проведёт код-ревью, чтобы сделать проект ещё качественнее.
Нажмите на виджет в правом нижнем углу экрана и поищите ответ в нашей справке. Или сразу пишите на support@hexlet.io — вам ответит живой человек из команды Хекслета.