Git Product home page Git Product logo

middle.messenger.praktikum.yandex's Introduction

GitHub Workflow Status Netlify Status

Демо проекта на Netlify

Dreamy-capybara-f77156

Описание проекта

Учебный проект "Мессенджер" для Яндекс.Практикума. Функционал сравним с любым современным мессенджером. Внешний вид выполнен духе приложений эпохи Windows 95/98/2000. В качестве шаблонизатора используется Handlebars.

Сборка и запуск проекта

  • npm run build
  • npm run start - webpack serve

Тест и проверка проекта

  • npm run test
  • npm run eslint
  • npm run stylelint

Сборка и запуск Docker

  • docker build -t messenger .
  • docker run -d -p 3000:3000 messenger

Описание директорий

  • /src - ресурсы программы
  • /src/components - визуальные компоненты, с помощью которых создаются dom-элементы
  • /src/modules - классы для основных сущностей мессенджера
  • /src/pages - страницы для демонстрации работы
  • /static - статичные элементы и картинки
  • /ui - макет программы, выполненный на бумаге

Структура основных компонентов

Все компоненты, кроме View, наследуются от базового класса Component.

  • Component - базовый класс, на основе которого пишутся остальные, вызывает рендер DOM-дерева при создании экземпляра, методы для обновления пропсов, а так же управление EventBus.
  • View - пространство для рендера Window окон, содержащих Content.
  • Button, Input, Text - базовые компоненты, могут быть созданы из пропсов или из имеющегося HTML-элемента.
  • Chatlist - список чатов.
  • ChatFeed - лента сообщений.

Структура модулей

  • Fetch - класс для работы с запросами на сервер
  • Api - класс для работы с Api сетвера
  • Routing - класс роутера
  • Store - класс состояния
  • Functions - набор вспомогательных функций

Используется стили 98.css

middle.messenger.praktikum.yandex's People

Contributors

djpont avatar

Stargazers

Ekaterina Dubogay avatar  avatar Nikolay Hoft avatar

Watchers

 avatar

middle.messenger.praktikum.yandex's Issues

Обзор

Подробный README, сразу понятно что и как.

  • ссылка кнопки Нетлифая открывает не детали проекта или его деплой а картинку кнопки.
  • "компоненты, кроме View, настедуются"

Понравился дизайн, особенно использование стилей 98.css

  • аж ностальгия пробрала :)
  • окошки не масштабируются. Для чата было бы логично чтоб оно занимало всю или большую часть рабочей области window
  • как то не привычно что в разрабатываемом проекте в консоли пусто
  • нет никакой визуализации валидации полей по focuslost, хотя в рамках дизайна это и не нужно, тем более что сообщение об ошибке содержит детальные комментарии
  • был странный баг валидации, когда появилось несколько сообщений об одной и той же ошибке. Повторить не смог. Вероятно связано с await.
  • не создавал клон чтобы "покрутить" проект у себя поэтому могу только субъективно отметить что роутер вероятно работает и не верно и грузит ресурсы при каждой смене роута

Лично мне очень понравился код стайл.

  • особенно что касается плотности кода и напихивания всего в один файлик. Лично мне так читать даже удобнее. Но мы же учимся оформлять "командные" проекты. Поэтому можно воспользоваться возможностью и потренироваться выносить модули в отдельные папки со своими index файлами, в которых систематизируется структура модуля и его компонент. По типу как у тебя это сделано в components, но там index содержит непосредственный код компонента.
  • Понравился класс валидации. Рад что ты тоже посчитал логичным реализовать универсальный подход. И тут, к примеру, те же regexpsRules можно было вынести в отдельный модуль для удобства редактирования в отрыве от рабочей логики.
  • Api в виде одного файлика это клёво,- всё в одном месте. Правда нет BaseAPI, UserAPI и т.д., которые наследуются друг от друга и передают end point пути, при неизменном основном пути. Тогда не пришлось бы создавать внутренние методы для каждого запроса. Нам это кратко давали в теории. Я, к примеру, немного развил концепцию и ВЕСЬ api у меня занял 30 строк кода против твоих 500.
  • Store работает хорошо, логично организована работа с ним. Видно что ты хорошо разобрался в теме хранения данных.
  • Может я был не внимателен но не обнаружил HOC, призванный объединять события изменений в store с ререндерами компонент. А это была основная тема 3-го спринта.
  • Не нашёл isEqual, cloneDeep и пр. вспомогательные функции, которые мы писали, по сути для HOC чтобы придать ему логики чтоб избежать лишних перерисовок, к примеру.
  • Немного смутил подход замесить api запросы, их обработку и операции со store в одном модуле. Было бы логичнее это деструктурировать чтобы повысить надёжность кода. Сейчас стоит где то сменить подход и придётся переписывать сразу всё, вместо модуля который отвечает за сегмент логики.

В целом:

  • Креативный дизайн
  • Разнообразный и логичный подход к написанию кода
  • Понятная структура
  • Обещанный "Франкенштейн" не обнаружен.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.