Skip to content

hyoo-ru/budget.hyoo.ru

This branch is 61 commits ahead of, 31 commits behind master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4082d38 Β· Jan 19, 2025

History

61 Commits
Nov 26, 2024
Nov 14, 2024
Nov 14, 2024
Nov 26, 2024
Nov 14, 2024
Nov 14, 2024
Jan 19, 2025
Jan 19, 2025
Jan 19, 2025
Jan 19, 2025
Jan 19, 2025
Nov 28, 2024
Nov 28, 2024
Nov 15, 2024
Dec 29, 2024
Jan 19, 2025
Jan 19, 2025
Jan 19, 2025
Jan 13, 2025
Dec 27, 2024
Nov 14, 2024
Nov 14, 2024
Nov 14, 2024
Nov 14, 2024
Jan 19, 2025
Jan 19, 2025
Jan 19, 2025
Jan 19, 2025
Jan 19, 2025
Nov 28, 2024
Nov 28, 2024
Nov 15, 2024
Dec 29, 2024
Jan 19, 2025
Jan 13, 2025
Jan 13, 2025
Jan 13, 2025

Repository files navigation

Private Budget

Π’Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для вСдСния Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ Π±ΡŽΠ΄ΠΆΠ΅Ρ‚Π°.

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ

  • πŸ”’ Π‘Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ: ВсС Π΄Π°Π½Π½Ρ‹Π΅ хранятся Π² Π·Π°ΡˆΠΈΡ„Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅ ΠΈ подписаны Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΉ подписью.
  • ✈️ ΠžΡ„Ρ„Π»Π°ΠΉΠ½: Полная Ρ€Π°Π±ΠΎΡ‚ΠΎΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ Π΄Π°ΠΆΠ΅ Π½Π° запись Π±Π΅Π· сСти.
  • πŸ«‚ ΠšΠΎΠ»Π»Π°Π±ΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ: Π¨Π°Ρ€ΠΈΠ½Π³ доступа с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ для ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ рСдактирования.
  • πŸš€ Π Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ: МгновСнная синхронизация ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠ½Ρ‹ΠΌΠΈ слоями ΠΈ Π΄Π°ΠΆΠ΅ дСвайсами.
  • πŸ”¬ ΠŸΡ€ΠΎΠ³Ρ€Π΅ΡΡΠΈΠ²Π½ΠΎΡΡ‚ΡŒ: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ самыС соврСмСнныС Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.
  • πŸͺ† Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΎΠ·Π°ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: Ни строчки ΠΈΠ½ΠΎΠ·Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π² зависимостях.

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ

  • Π’Π΅Π΄Π΅Π½ΠΈΠ΅ мноТСства Π±ΡŽΠ΄ΠΆΠ΅Ρ‚ΠΎΠ².
  • ΠšΠ»Π°ΡΡΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ Ρ‚Ρ€Π°Π½Π·Π°ΠΊΡ†ΠΈΠΉ ΠΏΠΎ катСгориям.
  • ΠžΠ±Ρ‰Π°Ρ сводка ΠΏΠΎ Ρ„ΠΎΠ½Π΄Ρƒ ΠΈ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ.
  • Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ сравнСниС Ρ‚Ρ€Π°Ρ‚ ΠΏΠΎ катСгориям.
  • Экспорт Π΄Π°Π½Π½Ρ‹Ρ… Π² Π²ΠΈΠ΄Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.
  • ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ доступа Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ.

Π₯арактСристики

  • ΠžΠΏΡ€ΡΡ‚Π½ΠΎΡΡ‚ΡŒ: Π΅Π΄ΠΈΠ½Ρ‹ΠΉ Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.
  • ΠœΠ½ΠΎΠ³ΠΎΡΠ·Ρ‹Ρ‡Π½ΠΎΡΡ‚ΡŒ: английский ΠΈ русский.
  • ВСмизация: тёмная ΠΈ свСтлая.
  • ΠΠ΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ: Π±ΡƒΠΊΠ»Π΅Ρ‚Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π°Ρ‘Ρ‚ Π΅Π΄ΠΈΠ½Ρ‹ΠΉ UX.
  • Π˜ΡΠΊΡ€Π΅Π½Π½ΠΎΡΡ‚ΡŒ: автоматичСскиС ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ оТидания ΠΈ сообщСния ΠΎΠ± ΠΎΡˆΠΈΠ±ΠΊΠ°Ρ….
  • НСпрСрывная доставка: автоматичСскиС сборка, тСсты ΠΈ Π΄Π΅ΠΏΠ»ΠΎΠΉ.

Π’Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ

  • MAM - Ρ„Ρ€Π°ΠΊΡ‚Π°Π»ΡŒΠ½Π°Ρ verless экосистСма ΠΊΠΎΠ΄Π°.
  • $mol - ΠΈΠ·ΠΎΠΌΠΎΡ€Ρ„Π½Ρ‹ΠΉ web-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ с ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ Π±Π°Ρ‚Π°Ρ€Π΅Π΅ΠΊ Π² ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚Π΅.
  • CRUS-DB - дСцСнтрализованная бСзопасная нСубиваСмая Π±Π°Π·Π° Π΄Π°Π½Π½Ρ‹Ρ… Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.
  • TypeScript - статичСски Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ JavaScript.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ

  • Π“Ρ€Π°Ρ„ΠΈΠΊ посуточных Ρ‚Ρ€Π°Ρ‚ Π·Π° ΠΏΠ΅Ρ€ΠΈΠΎΠ΄.
  • Π€ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ ΠΏΠΎ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π°ΠΌ: мСсяц, ΠΊΠ²Π°Ρ€Ρ‚Π°Π», Π³ΠΎΠ΄.
  • ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ Π² ΠΊΠΎΠ΄Π΅.
  • ОписаниС Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹.
  • ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½Ρ‹Π΅ тСсты.
  • ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° с голосовым Π°Π³Π΅Π½Ρ‚ΠΎΠΌ.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΠΈ

Π‘Π±ΠΎΡ€ΠΊΠ° ΠΏΠΎΠ΄ ΠΊΠ»ΡŽΡ‡

Π’ пустой Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ:

npm exec mam@latest hyoo/budget/app

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ hyoo/budget/app/- ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π»ΠΎΠΆΠΈΡ‚ΡŒ Π½Π° любой статичСский сСрвСр.

ΠŸΠΎΠ΄Π½ΡΡ‚ΠΈΠ΅ окруТСния Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°

Π’ пустой Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈ:

npm exec mam@latest

Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ http://localhost:9080/hyoo/budget/app/-/test.html

БоотвСтствиС Π’Π—

Π”Π°Π½Π½Ρ‹Π΅ ΠΎ Π΄ΠΎΡ…ΠΎΠ΄Π°Ρ…, расходах ΠΈ катСгориях Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹ с сСрвСра Ρ‡Π΅Ρ€Π΅Π· RESTful API.

RESTful API Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ нСдостаточно соврСмСнСн ΠΈ совсСм Π½Π΅ годится для ΠΊΠΎΠ»Π»Π°Π±ΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ€ΠΈΠ»Ρ‚Π°ΠΉΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π½ΠΎΠ²Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…, Π° Ρ‚Π°ΠΊΠΆΠ΅ обновлСния ΠΈ удалСния ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… записСй Π½Π° сСрвСрС.

Π‘ нашСй Π‘Π£Π‘Π” эти Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π‘Π” синхронизируСтся ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌΠΈ ΠΈ сСрвСрами автоматичСски Π² Ρ„ΠΎΠ½Π΅.

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятным ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ ΠΏΠΎΠ΄ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ устройства (ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Ρ‹, дСсктопы).

Π˜Π½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎΠΉ понятности Π½Π΅ сущСтвуСт. Π•ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡ΠΊΠΈ ΠΈ Ρƒ всСх ΠΎΠ½ΠΈ Ρ€Π°Π·Π½Ρ‹Π΅. Π’Ρ‹Π±ΠΎΡ€ Π±ΡƒΠΊΠ»Π΅Ρ‚Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ Π½Π° повсСднСвноС удобство ΠΈ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π΅ΠΊ, Π° Π½Π΅ ΠΏΠΎΡ‚Π°ΠΊΠ°Π½ΠΈΠ΅ старым Π½Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ интСрфСйсам, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΡ… ΠΌΠ½ΠΎΠ³ΠΎ рСсурсов для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

HTML ΠΈ CSS: ИспользованиС соврСмСнных стандартов для создания Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ стилСй.

Π’ соврСмСнных условиях ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½ΠΎΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ использованиС HTML ΠΈ CSS являСтся ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ статичСски Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ языки для описания стилСй ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

Frontend Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ: Участникам рСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· популярных Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ React, Vue.js ΠΈΠ»ΠΈ Angular.

ΠœΡ‹ Π½Π΅ любим ΠΏΠΈΡΠ°Ρ‚ΡŒ Π³ΠΎΠ²Π½ΠΎΠΊΠΎΠ΄, поэтому ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π½Π΅ популярныС, Π° тСхничСски обоснованныС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.

Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ с API: НСобходимо ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ mock-сСрвСры (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, JSON Server) ΠΈΠ»ΠΈ localStorage/IndexDB для симуляции взаимодСйствия с сСрвСром. Π”Π°Π½Π½Ρ‹Π΅ ΠΎ Π΄ΠΎΡ…ΠΎΠ΄Π°Ρ…, расходах ΠΈ катСгориях Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Ρ‹ ΠΈ сохранСны Ρ‡Π΅Ρ€Π΅Π· RESTful API ΡΠΈΠΌΡƒΠ»ΡΡ†ΠΈΡŽ.

Наша Π‘Π£Π‘Π” Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π΄Π°ΠΆΠ΅ Π±Π΅Π· сСрвСров. Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΎΠ½Π° Ρ…Ρ€Π°Π½ΠΈΡ‚ Π΄Π°Π½Π½Ρ‹Π΅ Π² IndexedDB.

API взаимодСйствиС: ИспользованиС fetch ΠΈΠ»ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с HTTP-запросами (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Axios) для получСния, добавлСния, рСдактирования ΠΈ удалСния Π΄Π°Π½Π½Ρ‹Ρ… с mock-сСрвСра ΠΈΠ»ΠΈ ΠΈΠ· localStorage/IndexDB.

Наша Π‘Π£Π‘Π” прСдоставляСт высокоуровнСвоС Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ статичСски Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ API, Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰Π΅Π΅ Ρ€ΡƒΡ‡ΠΊΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с сСтСвыми запросами.

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»Π΅ΠΉ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, нСльзя ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ сумму Ρ‚Ρ€Π°Π½Π·Π°ΠΊΡ†ΠΈΠΈ пустой).

Π‘Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠ° сохранСния Π΄ΠΎ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ заполнСния Π½Π΅ совмСстимо с совмСстным Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ с Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… дСвайсов. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ для Ρ€Π°Π·Π½Ρ‹Ρ… процСссов ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° разная ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ заполнСнности (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для баланса Π΄Π°Ρ‚Ρ‹ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹, Π° для Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² ΠΏΠΎ дням - Π½ΡƒΠΆΠ½Ρ‹). ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½ΠΎΠ³ΠΎ состояния достаточно. А Π³Π΄Π΅ Π½Π΅ достаточно - Ρ‚Π°ΠΌ ΠΈ стоит это ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅Π΄ΠΎΠ·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Π΅ сущности).

суммы Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ

Π›ΠΎΠ³ΠΈΡ‡Π½ΠΎ ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒΡŒ расходы, Π° ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΎΡ…ΠΎΠ΄Ρ‹.

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ошибок Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΠΈ: ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ понятныС ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ сообщСния ΠΎΠ± ΠΎΡˆΠΈΠ±ΠΊΠ°Ρ…, Ссли Π΄Π°Π½Π½Ρ‹Π΅ Π½Π΅ ΠΏΡ€ΠΎΡˆΠ»ΠΈ Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΡŽ. БообщСния ΠΎΠ± ΠΎΡˆΠΈΠ±ΠΊΠ°Ρ… Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΡ‹ Π² контСкстС ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΏΠΎΠ»Π΅ΠΉ Π²Π²ΠΎΠ΄Π°.

ΠœΡ‹ просто Π½Π΅ допускаСм Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½Ρ‹ΠΉ Π²Π²ΠΎΠ΄, поэтому наши ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΎΡˆΠΈΠ±Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ Π²Π²ΠΎΠ΄Π΅.

Redux: Для глобального состояния прилоТСния, ΠΊΠΎΠ³Π΄Π° трСбуСтся ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ слоТными Π΄Π°Π½Π½Ρ‹ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ доступны Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ….

Redux ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹:

  • Много Π±ΠΎΠΉΠ»Π΅Ρ€ΠΏΠ»Π΅ΠΉΡ‚Π° с кишками Π½Π°Ρ€ΡƒΠΆΡƒ.
  • Π’Ρ€ΡƒΡ‚ ΠΏΡ€ΠΎ undo/redo.
  • Π£Ρ‚Π΅Ρ‡ΠΊΠΈ памяти by design.
  • Π’ΠΎΡ€ΠΌΠΎΠ·Π° Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….
  • Π‘Π»ΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свой ΠΊΠΎΠ΄.
  • Π’Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΊΡƒΡ‡ΠΈ тяТёлых костылСй.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ свой мСлкозСрнистый Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ состояний $mol_wire.

React Query: Для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с асинхронными Π΄Π°Π½Π½Ρ‹ΠΌΠΈ ΠΈ ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ запросов ΠΊ API, минимизируя количСство ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½Ρ‹Ρ… Π²Ρ‹Π·ΠΎΠ²ΠΎΠ². React Hook Form: Для управлСния ΠΈ Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΠΈ Ρ„ΠΎΡ€ΠΌ, с Π°ΠΊΡ†Π΅Π½Ρ‚ΠΎΠΌ Π½Π° ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ удобство Ρ€Π°Π±ΠΎΡ‚Ρ‹ с большими объСмами Π΄Π°Π½Π½Ρ‹Ρ….

React ΠΈ Π΅Π³ΠΎ экосистСма ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹:

  • НС ΡƒΠΌΠ΅Π΅Ρ‚ Π² Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ.
  • Π Π΅Ρ€Π΅Π½Π΄Π΅Ρ€Ρ‹ ΠΏΠΎ Π»ΡŽΠ±ΠΎΠΌΡƒ Ρ‡ΠΈΡ…Ρƒ.
  • Π‘ΠΌΠ΅ΡˆΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅, Π»ΠΎΠ³ΠΈΠΊΡƒ ΠΈ шаблон.
  • ΠŸΡƒΡ‚Π°Π΅Ρ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ пСрСсозданиями ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ΠΌ.
  • ВсС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π»ΠΈΠ±ΠΎ нСуправляСмыС, Π»ΠΈΠ±ΠΎ Π½Π΅ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹Π΅, Π»ΠΈΠ±ΠΎ ΠΎΠΆΠΈΡ€Π΅Π²ΡˆΠΈΠ΅.
  • ΠšΡ€ΠΈΠ²Π°Ρ эмуляция ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Ρ‡Π΅Ρ€Π΅Π· Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ с Ρ…ΡƒΠΊΠ°ΠΌΠΈ.
  • НС Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ VDOM Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅.
  • Разобщённая экосистСма со слабой ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ TS.
  • Π“ΠΎΡ€Ρ‹ Π±ΠΎΠΉΠ»Π΅Ρ€ΠΏΠ»Π΅ΠΉΡ‚Π° ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ приблиТСния ΠΊ ΠΏΡ€ΠΎΠ΄Ρƒ.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ свой Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠΈΠΊΡ€ΠΎΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ $mol Π² ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚Π΅ с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΈΠ΄ΡƒΡ‚ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для создания Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ: ΠΎΡ‚ сСтСвых запросов ΠΈ сСрвСров, Π΄ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ рисования Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² ΠΈ 3D Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ.

Feature Sliced Design: ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° для раздСлСния прилоТСния Π½Π° логичСскиС слои (features, entities, shared ΠΈ Ρ‚.Π΄.). Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ, тСстированиС ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

FSD ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹:

  • РаспылСниС ΠΊΠ°ΠΆΠ΄ΠΎΠΉ бизнСс-Ρ„ΠΈΡ‡ΠΈ ΠΏΠΎ всСму ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ.
  • НСчёткиС ΡΠΎΠΌΠ½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°.
  • Π’ΠΎΠ½Π½Ρ‹ Π±ΠΎΠΉΠ΅Ρ€ΠΏΠ»Π΅ΠΉΡ‚Π° Π½Π° синглтонах.
  • ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Π°Ρ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ ΠΈ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ свой Ρ„Ρ€Π°ΠΊΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ МАМ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½Ρ‹ΠΉ, Π½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ Π½Π° мноТСство ΠΊΠΎΠΌΠ°Π½Π΄ ΠΈ Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠ΅Π² ΠΊΠΎΠ΄.

ΠŸΠΎΠ»Π½ΠΎΡ‚Π° тСстирования: ΠžΡ†Π΅Π½ΠΈΠ²Π°Π΅Ρ‚ΡΡ, насколько Ρ…ΠΎΡ€ΠΎΡˆΠΎ участник протСстировал свой ΠΊΠΎΠ΄. Π­Ρ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя написаниС ΡŽΠ½ΠΈΡ‚-тСстов, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡŽΡ‰ΠΈΡ… основныС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ интСрфСйса, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ тСсты для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ взаимодСйствия ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρƒ собой ΠΈ с сСрвСром.

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ тСсты Π½Π΅ слишком ΠΏΠΎΠ»Π΅Π·Π½Ρ‹. Π‘ΠΎΠ»Π΅Π΅ прогрСссивно использованиС Ρ„Ρ€Π°ΠΊΡ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ тСстирования, основанного Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½Ρ‹Ρ… тСстах.