Habr front-end แƒ“แƒ”แƒ•แƒ”แƒšแƒแƒžแƒ”แƒ แƒ”แƒ‘แƒ˜แƒก แƒŸแƒฃแƒ แƒœแƒแƒšแƒ”แƒ‘แƒ˜: refactoring แƒ“แƒ แƒแƒกแƒแƒฎแƒ•แƒ

Habr front-end แƒ“แƒ”แƒ•แƒ”แƒšแƒแƒžแƒ”แƒ แƒ”แƒ‘แƒ˜แƒก แƒŸแƒฃแƒ แƒœแƒแƒšแƒ”แƒ‘แƒ˜: refactoring แƒ“แƒ แƒแƒกแƒแƒฎแƒ•แƒ

แƒ›แƒ” แƒงแƒแƒ•แƒ”แƒšแƒ—แƒ•แƒ˜แƒก แƒ›แƒแƒ˜แƒœแƒขแƒ”แƒ แƒ”แƒกแƒ”แƒ‘แƒ“แƒ, แƒ แƒแƒ’แƒแƒ  แƒแƒ แƒ˜แƒก แƒกแƒขแƒ แƒฃแƒฅแƒขแƒฃแƒ แƒ˜แƒ แƒ”แƒ‘แƒฃแƒšแƒ˜ Habr แƒจแƒ˜แƒ’แƒœแƒ˜แƒ“แƒแƒœ, แƒ แƒแƒ’แƒแƒ  แƒแƒ แƒ˜แƒก แƒกแƒขแƒ แƒฃแƒฅแƒขแƒฃแƒ แƒ˜แƒ แƒ”แƒ‘แƒฃแƒšแƒ˜ แƒกแƒแƒ›แƒฃแƒจแƒแƒ แƒžแƒ แƒแƒชแƒ”แƒกแƒ˜, แƒ แƒแƒ’แƒแƒ  แƒแƒ แƒ˜แƒก แƒกแƒขแƒ แƒฃแƒฅแƒขแƒฃแƒ แƒ˜แƒ แƒ”แƒ‘แƒฃแƒšแƒ˜ แƒ™แƒแƒ›แƒฃแƒœแƒ˜แƒ™แƒแƒชแƒ˜แƒ”แƒ‘แƒ˜, แƒ แƒ แƒกแƒขแƒแƒœแƒ“แƒแƒ แƒขแƒ”แƒ‘แƒ˜ แƒ’แƒแƒ›แƒแƒ˜แƒงแƒ”แƒœแƒ”แƒ‘แƒ แƒ“แƒ แƒ–แƒแƒ’แƒแƒ“แƒแƒ“ แƒ แƒแƒ’แƒแƒ  แƒ˜แƒฌแƒ”แƒ แƒ”แƒ‘แƒ แƒ™แƒแƒ“แƒ˜ แƒแƒฅ. แƒกแƒแƒ‘แƒ”แƒ“แƒœแƒ˜แƒ”แƒ แƒแƒ“, แƒ›แƒ” แƒ›แƒ˜แƒ•แƒ˜แƒฆแƒ” แƒแƒกแƒ”แƒ—แƒ˜ แƒจแƒ”แƒกแƒแƒซแƒšแƒ”แƒ‘แƒšแƒแƒ‘แƒ, แƒ แƒแƒ“แƒ’แƒแƒœ แƒแƒฎแƒšแƒแƒฎแƒแƒœ แƒ’แƒแƒ•แƒฎแƒ“แƒ˜ แƒฐแƒแƒ‘แƒ แƒ แƒ’แƒฃแƒœแƒ“แƒ˜แƒก แƒฌแƒ”แƒ•แƒ แƒ˜. แƒ›แƒแƒ‘แƒ˜แƒšแƒฃแƒ แƒ˜ แƒ•แƒ”แƒ แƒกแƒ˜แƒ˜แƒก แƒ›แƒชแƒ˜แƒ แƒ” แƒ แƒ”แƒคแƒแƒฅแƒขแƒแƒ แƒ˜แƒ แƒ”แƒ‘แƒ˜แƒก แƒ›แƒแƒ’แƒแƒšแƒ˜แƒ—แƒ˜แƒก แƒ’แƒแƒ›แƒแƒงแƒ”แƒœแƒ”แƒ‘แƒ˜แƒ—, แƒจแƒ”แƒ•แƒ”แƒชแƒ“แƒ”แƒ‘แƒ˜ แƒ•แƒฃแƒžแƒแƒกแƒฃแƒฎแƒ แƒ™แƒ˜แƒ—แƒฎแƒ•แƒแƒก: แƒ แƒแƒ’แƒแƒ แƒ˜แƒ แƒแƒฅ แƒ›แƒฃแƒจแƒแƒแƒ‘แƒ แƒฌแƒ˜แƒœแƒ แƒ›แƒฎแƒแƒ แƒ”แƒก. แƒžแƒ แƒแƒ’แƒ แƒแƒ›แƒแƒจแƒ˜: Node, Vue, Vuex แƒ“แƒ SSR แƒกแƒแƒฃแƒกแƒ˜แƒ— Habr-แƒจแƒ˜ แƒžแƒ˜แƒ แƒแƒ“แƒ˜ แƒ’แƒแƒ›แƒแƒชแƒ“แƒ˜แƒšแƒ”แƒ‘แƒ˜แƒก แƒจแƒ”แƒกแƒแƒฎแƒ”แƒ‘ แƒฉแƒแƒœแƒแƒฌแƒ”แƒ แƒ”แƒ‘แƒ˜แƒ“แƒแƒœ.

แƒžแƒ˜แƒ แƒ•แƒ”แƒšแƒ˜ แƒ แƒแƒช แƒ—แƒฅแƒ•แƒ”แƒœ แƒฃแƒœแƒ“แƒ แƒ˜แƒชแƒแƒ“แƒ”แƒ— แƒ“แƒ”แƒ•แƒ”แƒšแƒแƒžแƒ”แƒ แƒ”แƒ‘แƒ˜แƒก แƒ’แƒฃแƒœแƒ“แƒ˜แƒก แƒจแƒ”แƒกแƒแƒฎแƒ”แƒ‘ แƒแƒ แƒ˜แƒก แƒ˜แƒก, แƒ แƒแƒ› แƒฉแƒ•แƒ”แƒœ แƒชแƒแƒขแƒแƒœแƒ˜ แƒ•แƒแƒ แƒ—. แƒกแƒแƒ™แƒ›แƒแƒ แƒ˜แƒกแƒ˜ แƒแƒ  แƒแƒ แƒ˜แƒก - แƒ”แƒก แƒแƒ แƒ˜แƒก แƒกแƒแƒ›แƒ˜ แƒคแƒ แƒแƒœแƒขแƒ˜, แƒแƒ แƒ˜ แƒฃแƒ™แƒแƒœแƒ แƒ“แƒ แƒงแƒ•แƒ”แƒšแƒ แƒฐแƒแƒ‘แƒ แƒ˜แƒก แƒขแƒ”แƒฅแƒœแƒ˜แƒ™แƒฃแƒ แƒ˜ แƒšแƒ˜แƒ“แƒ”แƒ แƒ˜ - แƒ‘แƒแƒฅแƒกแƒšแƒ˜. แƒแƒ แƒ˜แƒก, แƒ แƒ แƒ—แƒฅแƒ›แƒ แƒฃแƒœแƒ“แƒ, แƒขแƒ”แƒกแƒขแƒ”แƒ แƒ˜, แƒ“แƒ˜แƒ–แƒแƒ˜แƒœแƒ”แƒ แƒ˜, แƒกแƒแƒ›แƒ˜ แƒ•แƒแƒ“แƒ˜แƒ›แƒ˜, แƒกแƒแƒกแƒฌแƒแƒฃแƒšแƒ˜ แƒชแƒแƒชแƒฎแƒ˜, แƒ›แƒแƒ แƒ™แƒ”แƒขแƒ˜แƒœแƒ’แƒ˜แƒก แƒกแƒžแƒ”แƒชแƒ˜แƒแƒšแƒ˜แƒกแƒขแƒ˜ แƒ“แƒ แƒกแƒฎแƒ•แƒ แƒ‘แƒฃแƒ›แƒ‘แƒฃแƒ แƒฃแƒ›แƒ˜. แƒ›แƒแƒ’แƒ แƒแƒ› แƒฐแƒแƒ‘แƒ แƒ˜แƒก แƒฌแƒงแƒแƒ แƒแƒ”แƒ‘แƒจแƒ˜ แƒ›แƒฎแƒแƒšแƒแƒ“ แƒ”แƒฅแƒ•แƒกแƒ˜ แƒฃแƒจแƒฃแƒแƒšแƒ แƒ›แƒแƒœแƒแƒฌแƒ˜แƒšแƒ”แƒ. แƒ”แƒก แƒกแƒแƒ™แƒ›แƒแƒแƒ“ แƒ˜แƒจแƒ•แƒ˜แƒแƒ—แƒ˜แƒ - แƒžแƒ แƒแƒ”แƒฅแƒขแƒ˜ แƒ›แƒ แƒแƒ•แƒแƒšแƒ›แƒ˜แƒšแƒ˜แƒแƒœแƒ˜แƒแƒœแƒ˜ แƒแƒฃแƒ“แƒ˜แƒขแƒแƒ แƒ˜แƒ˜แƒ—, แƒ แƒแƒ›แƒ”แƒšแƒ˜แƒช แƒ’แƒแƒ แƒ”แƒ“แƒแƒœ แƒ’แƒ˜แƒ’แƒแƒœแƒขแƒฃแƒ  แƒกแƒแƒฌแƒแƒ แƒ›แƒแƒก แƒฐแƒ’แƒแƒ•แƒก, แƒกแƒ˜แƒœแƒแƒ›แƒ“แƒ•แƒ˜แƒšแƒ”แƒจแƒ˜ แƒฃแƒคแƒ แƒ แƒ›แƒงแƒฃแƒ“แƒ แƒ แƒกแƒขแƒแƒ แƒขแƒแƒžแƒก แƒฐแƒ’แƒแƒ•แƒก แƒงแƒ•แƒ”แƒšแƒแƒ–แƒ” แƒ‘แƒ แƒขแƒงแƒ”แƒšแƒ˜ แƒแƒ แƒ’แƒแƒœแƒ˜แƒ–แƒแƒชแƒ˜แƒฃแƒšแƒ˜ แƒกแƒขแƒ แƒฃแƒฅแƒขแƒฃแƒ แƒ˜แƒ—.

แƒ‘แƒ”แƒ•แƒ แƒ˜ แƒกแƒฎแƒ•แƒ IT แƒ™แƒแƒ›แƒžแƒแƒœแƒ˜แƒ˜แƒก แƒ›แƒกแƒ’แƒแƒ•แƒกแƒแƒ“, Habr แƒแƒกแƒฌแƒแƒ•แƒšแƒ˜แƒก Agile แƒ˜แƒ“แƒ”แƒ”แƒ‘แƒก, CI แƒžแƒ แƒแƒฅแƒขแƒ˜แƒ™แƒแƒก แƒ“แƒ แƒ”แƒก แƒงแƒ•แƒ”แƒšแƒแƒคแƒ”แƒ แƒ˜แƒ. แƒ›แƒแƒ’แƒ แƒแƒ› แƒฉแƒ”แƒ›แƒ˜ แƒ’แƒ แƒซแƒœแƒแƒ‘แƒ”แƒ‘แƒ˜แƒก แƒ›แƒ˜แƒฎแƒ”แƒ“แƒ•แƒ˜แƒ—, แƒฐแƒแƒ‘แƒ แƒ˜, แƒ แƒแƒ’แƒแƒ แƒช แƒžแƒ แƒแƒ“แƒฃแƒฅแƒขแƒ˜, แƒฃแƒคแƒ แƒ แƒขแƒแƒšแƒฆแƒ”แƒ‘แƒ˜แƒ— แƒ•แƒ˜แƒ—แƒแƒ แƒ“แƒ”แƒ‘แƒ, แƒ•แƒ˜แƒ“แƒ แƒ” แƒ’แƒแƒœแƒฃแƒฌแƒงแƒ•แƒ”แƒขแƒšแƒ˜แƒ•. แƒแƒกแƒ” แƒ แƒแƒ›, แƒ–แƒ”แƒ“แƒ˜แƒ–แƒ”แƒ“ แƒ แƒแƒ›แƒ“แƒ”แƒœแƒ˜แƒ›แƒ” แƒกแƒžแƒ แƒ˜แƒœแƒขแƒ˜ แƒ’แƒฃแƒšแƒ›แƒแƒ“แƒ’แƒ˜แƒœแƒ”แƒ“ แƒ•แƒแƒ™แƒแƒ“แƒ˜แƒ แƒ”แƒ‘แƒ— แƒ แƒแƒฆแƒแƒชแƒแƒก, แƒ•แƒฅแƒ›แƒœแƒ˜แƒ— แƒ“แƒ แƒฎแƒ”แƒšแƒแƒฎแƒšแƒ แƒ•แƒฅแƒ›แƒœแƒ˜แƒ—, แƒ•แƒแƒ›แƒขแƒ•แƒ แƒ”แƒ•แƒ— แƒ“แƒ แƒ•แƒแƒกแƒฌแƒแƒ แƒ”แƒ‘แƒ—, แƒ•แƒฎแƒกแƒœแƒ˜แƒ— แƒ‘แƒ˜แƒšแƒ”แƒ—แƒ”แƒ‘แƒก แƒ“แƒ แƒ•แƒฅแƒ›แƒœแƒ˜แƒ— แƒแƒฎแƒšแƒ”แƒ‘แƒก, แƒ•แƒแƒ‘แƒ˜แƒฏแƒ”แƒ‘แƒ— แƒ“แƒ แƒคแƒ”แƒฎแƒ”แƒ‘แƒจแƒ˜ แƒ•แƒ”แƒกแƒ แƒแƒšแƒ˜แƒ—, แƒ แƒแƒ—แƒ แƒกแƒแƒ‘แƒแƒšแƒแƒแƒ“ แƒ’แƒแƒ•แƒแƒ—แƒแƒ•แƒ˜แƒกแƒฃแƒคแƒšแƒแƒ— แƒคแƒฃแƒœแƒฅแƒชแƒ˜แƒ แƒฌแƒแƒ แƒ›แƒแƒ”แƒ‘แƒ. แƒ“แƒ แƒจแƒ”แƒ›แƒ“แƒ”แƒ’ แƒ›แƒแƒ“แƒ˜แƒก แƒ’แƒแƒ แƒ™แƒ•แƒ”แƒฃแƒšแƒ˜ แƒกแƒ˜แƒ›แƒจแƒ•แƒ˜แƒ“แƒ”, แƒฎแƒ”แƒšแƒแƒฎแƒแƒšแƒ˜ แƒ’แƒแƒœแƒ•แƒ˜แƒ—แƒแƒ แƒ”แƒ‘แƒ˜แƒก แƒžแƒ”แƒ แƒ˜แƒแƒ“แƒ˜, แƒ“แƒ แƒ, แƒ แƒแƒ› แƒ’แƒแƒ•แƒแƒ™แƒ”แƒ—แƒแƒ— แƒ˜แƒก, แƒ แƒแƒช แƒแƒ แƒ˜แƒก "แƒ›แƒœแƒ˜แƒจแƒ•แƒœแƒ”แƒšแƒแƒ•แƒแƒœแƒ˜ แƒ“แƒ แƒแƒ แƒ แƒ’แƒแƒ“แƒแƒฃแƒ“แƒ”แƒ‘แƒ”แƒšแƒ˜" แƒ™แƒ•แƒแƒ“แƒ แƒแƒขแƒจแƒ˜.

แƒกแƒฌแƒแƒ แƒ”แƒ“ แƒ”แƒก "แƒกแƒ”แƒ–แƒแƒœแƒ˜แƒก แƒ’แƒแƒ แƒ”แƒ—" แƒกแƒžแƒ แƒ˜แƒœแƒขแƒ˜ แƒ˜แƒฅแƒœแƒ”แƒ‘แƒ แƒ’แƒแƒœแƒฎแƒ˜แƒšแƒฃแƒšแƒ˜ แƒฅแƒ•แƒ”แƒ›แƒแƒ—. แƒแƒ›แƒฏแƒ”แƒ แƒแƒ“ แƒ˜แƒก แƒ›แƒแƒ˜แƒชแƒแƒ•แƒ“แƒ Habr-แƒ˜แƒก แƒ›แƒแƒ‘แƒ˜แƒšแƒฃแƒ แƒ˜ แƒ•แƒ”แƒ แƒกแƒ˜แƒ˜แƒก แƒ แƒ”แƒคแƒแƒฅแƒขแƒแƒ แƒ˜แƒ แƒ”แƒ‘แƒแƒก. แƒ–แƒแƒ’แƒแƒ“แƒแƒ“, แƒ™แƒแƒ›แƒžแƒแƒœแƒ˜แƒ แƒ›แƒแƒกแƒ–แƒ” แƒ“แƒ˜แƒ“ แƒ˜แƒ›แƒ”แƒ“แƒ”แƒ‘แƒก แƒแƒ›แƒงแƒแƒ แƒ”แƒ‘แƒก แƒ“แƒ แƒ›แƒแƒ›แƒแƒ•แƒแƒšแƒจแƒ˜ แƒ›แƒแƒœ แƒฃแƒœแƒ“แƒ แƒจแƒ”แƒชแƒ•แƒแƒšแƒแƒก แƒฐแƒแƒ‘แƒ แƒ˜แƒก แƒ˜แƒœแƒ™แƒแƒ แƒœแƒแƒชแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒ›แƒ—แƒ”แƒšแƒ˜ แƒ–แƒแƒแƒžแƒแƒ แƒ™แƒ˜ แƒ“แƒ แƒ’แƒแƒฎแƒ“แƒ”แƒก แƒฃแƒœแƒ˜แƒ•แƒ”แƒ แƒกแƒแƒšแƒฃแƒ แƒ˜ แƒ™แƒ แƒแƒก-แƒžแƒšแƒแƒขแƒคแƒแƒ แƒ›แƒฃแƒšแƒ˜ แƒ’แƒแƒ“แƒแƒฌแƒงแƒ•แƒ”แƒขแƒ. แƒแƒ“แƒ”แƒกแƒ›แƒ” แƒ˜แƒฅแƒœแƒ”แƒ‘แƒ แƒแƒ“แƒแƒžแƒขแƒฃแƒ แƒ˜ แƒ’แƒแƒœแƒšแƒแƒ’แƒ”แƒ‘แƒ, PWA, แƒแƒคแƒšแƒแƒ˜แƒœ แƒ แƒ”แƒŸแƒ˜แƒ›แƒ˜, แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒšแƒ˜แƒก แƒ›แƒแƒ แƒ’แƒ”แƒ‘แƒ แƒ“แƒ แƒ‘แƒ”แƒ•แƒ แƒ˜ แƒกแƒฎแƒ•แƒ แƒกแƒแƒ˜แƒœแƒขแƒ”แƒ แƒ”แƒกแƒ แƒ แƒแƒ›.

แƒ“แƒแƒ•แƒกแƒ•แƒแƒ— แƒ“แƒแƒ•แƒแƒšแƒ”แƒ‘แƒ

แƒ”แƒ แƒ—แƒฎแƒ”แƒš, แƒฉแƒ•แƒ”แƒฃแƒšแƒ”แƒ‘แƒ แƒ˜แƒ• แƒกแƒขแƒ”แƒœแƒ“แƒ–แƒ”, แƒ”แƒ แƒ—-แƒ”แƒ แƒ—แƒ›แƒ แƒฌแƒ˜แƒœแƒแƒ›แƒแƒ แƒ‘แƒ”แƒ“แƒ›แƒ แƒ˜แƒกแƒแƒฃแƒ‘แƒ แƒ แƒ›แƒแƒ‘แƒ˜แƒšแƒฃแƒ แƒ˜ แƒ•แƒ”แƒ แƒกแƒ˜แƒ˜แƒก แƒ™แƒแƒ›แƒ”แƒœแƒขแƒแƒ แƒ”แƒ‘แƒ˜แƒก แƒ™แƒแƒ›แƒžแƒแƒœแƒ”แƒœแƒขแƒ˜แƒก แƒแƒ แƒฅแƒ˜แƒขแƒ”แƒฅแƒขแƒฃแƒ แƒแƒจแƒ˜ แƒแƒ แƒกแƒ”แƒ‘แƒฃแƒš แƒžแƒ แƒแƒ‘แƒšแƒ”แƒ›แƒ”แƒ‘แƒ–แƒ”. แƒแƒ›แƒ˜แƒก แƒ’แƒแƒ—แƒ•แƒแƒšแƒ˜แƒกแƒฌแƒ˜แƒœแƒ”แƒ‘แƒ˜แƒ— แƒ›แƒแƒ•แƒแƒฌแƒงแƒ•แƒ”แƒ— แƒ›แƒ˜แƒ™แƒ แƒ-แƒจแƒ”แƒฎแƒ•แƒ”แƒ“แƒ แƒ แƒฏแƒ’แƒฃแƒคแƒฃแƒ แƒ˜ แƒคแƒกแƒ˜แƒฅแƒแƒ—แƒ”แƒ แƒแƒžแƒ˜แƒ˜แƒก แƒคแƒแƒ แƒ›แƒแƒขแƒจแƒ˜. แƒงแƒ•แƒ”แƒšแƒ แƒ›แƒแƒ แƒ˜แƒ’แƒ”แƒแƒ‘แƒ˜แƒ— แƒแƒ›แƒ‘แƒแƒ‘แƒ“แƒ, แƒกแƒแƒ“ แƒ’แƒขแƒ™แƒ˜แƒ•แƒ, แƒงแƒ•แƒ”แƒšแƒแƒคแƒ”แƒ แƒ˜ แƒฅแƒแƒฆแƒแƒšแƒ“แƒ–แƒ” แƒฉแƒแƒฌแƒ”แƒ แƒ”แƒก, แƒ—แƒแƒœแƒแƒฃแƒ’แƒ แƒซแƒœแƒแƒ‘แƒ“แƒœแƒ”แƒœ, แƒ›แƒ˜แƒฎแƒ•แƒ“แƒœแƒ”แƒœ, แƒ’แƒแƒ แƒ“แƒ แƒ˜แƒ›แƒ˜แƒกแƒ, แƒ แƒแƒ› แƒขแƒแƒจแƒ˜ แƒแƒ แƒแƒ•แƒ˜แƒก แƒ“แƒแƒฃแƒ™แƒ แƒ. แƒจแƒ”แƒ“แƒ”แƒ’แƒ˜ แƒ˜แƒงแƒ 20 แƒžแƒ แƒแƒ‘แƒšแƒ”แƒ›แƒ˜แƒก แƒกแƒ˜แƒ, แƒ แƒแƒ›แƒแƒช แƒชแƒฎแƒแƒ“แƒงแƒ, แƒ แƒแƒ› แƒ›แƒแƒ‘แƒ˜แƒšแƒฃแƒ  แƒฐแƒแƒ‘แƒ แƒก แƒฏแƒ”แƒ  แƒ™แƒ˜แƒ“แƒ”แƒ• แƒ’แƒ แƒซแƒ”แƒšแƒ˜ แƒ“แƒ แƒ”แƒ™แƒšแƒ˜แƒแƒœแƒ˜ แƒ’แƒ–แƒ แƒฐแƒฅแƒแƒœแƒ“แƒ แƒฌแƒแƒ แƒ›แƒแƒขแƒ”แƒ‘แƒ˜แƒกแƒ™แƒ”แƒœ.

แƒ›แƒ”, แƒžแƒ˜แƒ แƒ•แƒ”แƒš แƒ แƒ˜แƒ’แƒจแƒ˜, แƒ›แƒแƒฌแƒฃแƒฎแƒ”แƒ‘แƒ“แƒ แƒ แƒ”แƒกแƒฃแƒ แƒกแƒ”แƒ‘แƒ˜แƒก แƒ’แƒแƒ›แƒแƒงแƒ”แƒœแƒ”แƒ‘แƒ˜แƒก แƒ”แƒคแƒ”แƒฅแƒขแƒฃแƒ แƒแƒ‘แƒ แƒ“แƒ แƒ แƒแƒกแƒแƒช แƒ’แƒšแƒฃแƒ•แƒ˜ แƒ˜แƒœแƒขแƒ”แƒ แƒคแƒ”แƒ˜แƒกแƒ˜ แƒฐแƒฅแƒ•แƒ˜แƒ. แƒงแƒแƒ•แƒ”แƒšแƒ“แƒฆแƒ”, แƒกแƒแƒฎแƒšแƒ˜-แƒกแƒแƒ›แƒฃแƒจแƒแƒ-แƒกแƒแƒฎแƒšแƒ˜แƒก แƒ›แƒแƒ แƒจแƒ แƒฃแƒขแƒ–แƒ” แƒ•แƒฎแƒ”แƒ“แƒแƒ•แƒ“แƒ˜ แƒฉแƒ”แƒ›แƒก แƒซแƒ•แƒ”แƒš แƒขแƒ”แƒšแƒ”แƒคแƒแƒœแƒก, แƒ แƒแƒ›แƒ”แƒšแƒ˜แƒช แƒกแƒแƒกแƒแƒฌแƒแƒ แƒ™แƒ•แƒ”แƒ—แƒ˜แƒšแƒ˜ แƒชแƒ“แƒ˜แƒšแƒแƒ‘แƒ“แƒ 20 แƒกแƒแƒ—แƒแƒฃแƒ แƒ˜แƒก แƒฉแƒ•แƒ”แƒœแƒ”แƒ‘แƒแƒก แƒแƒ แƒฎแƒจแƒ˜. แƒแƒกแƒ” แƒ’แƒแƒ›แƒแƒ˜แƒงแƒฃแƒ แƒ”แƒ‘แƒแƒ“แƒ:

Habr front-end แƒ“แƒ”แƒ•แƒ”แƒšแƒแƒžแƒ”แƒ แƒ”แƒ‘แƒ˜แƒก แƒŸแƒฃแƒ แƒœแƒแƒšแƒ”แƒ‘แƒ˜: refactoring แƒ“แƒ แƒแƒกแƒแƒฎแƒ•แƒแƒ›แƒแƒ‘แƒ˜แƒšแƒฃแƒ แƒ˜ Habr แƒ˜แƒœแƒขแƒ”แƒ แƒคแƒ”แƒ˜แƒกแƒ˜ แƒ แƒ”แƒคแƒแƒฅแƒขแƒแƒ แƒ˜แƒ แƒ”แƒ‘แƒแƒ›แƒ“แƒ”

แฒ แƒ แƒฎแƒ“แƒ”แƒ‘แƒ แƒแƒฅ? แƒ›แƒแƒ™แƒšแƒ”แƒ“, แƒกแƒ”แƒ แƒ•แƒ”แƒ แƒ˜ แƒงแƒ•แƒ”แƒšแƒแƒก แƒ”แƒ แƒ—แƒœแƒแƒ˜แƒ แƒแƒ“ แƒ”แƒ›แƒกแƒแƒฎแƒฃแƒ แƒ”แƒ‘แƒแƒ“แƒ HTML แƒ’แƒ•แƒ”แƒ แƒ“แƒก, แƒ›แƒ˜แƒฃแƒฎแƒ”แƒ“แƒแƒ•แƒแƒ“ แƒ˜แƒ›แƒ˜แƒกแƒ, แƒ˜แƒงแƒ แƒ—แƒฃ แƒแƒ แƒ แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒ”แƒšแƒ˜ แƒจแƒ”แƒกแƒฃแƒšแƒ˜. แƒจแƒ”แƒ›แƒ“แƒ”แƒ’ แƒ™แƒšแƒ˜แƒ”แƒœแƒขแƒ˜ JS แƒ˜แƒขแƒ•แƒ˜แƒ แƒ—แƒ”แƒ‘แƒ แƒ“แƒ แƒ™แƒ•แƒšแƒแƒ• แƒ˜แƒ—แƒฎแƒแƒ•แƒก แƒกแƒแƒญแƒ˜แƒ แƒ แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒก, แƒ›แƒแƒ’แƒ แƒแƒ› แƒ›แƒแƒ แƒ’แƒ”แƒ‘แƒฃแƒšแƒ˜แƒ แƒแƒ•แƒขแƒแƒ แƒ˜แƒ–แƒแƒชแƒ˜แƒ˜แƒกแƒ—แƒ•แƒ˜แƒก. แƒแƒœแƒฃ แƒ แƒ”แƒแƒšแƒฃแƒ แƒแƒ“ แƒ”แƒ แƒ—แƒ˜ แƒ“แƒ แƒ˜แƒ’แƒ˜แƒ•แƒ” แƒกแƒแƒ›แƒฃแƒจแƒแƒ แƒแƒ แƒฏแƒ”แƒ  แƒ’แƒแƒ•แƒแƒ™แƒ”แƒ—แƒ”แƒ—. แƒ˜แƒœแƒขแƒ”แƒ แƒคแƒ”แƒ˜แƒกแƒ˜ แƒชแƒ˜แƒ›แƒชแƒ˜แƒ›แƒ“แƒ แƒ“แƒ แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒ”แƒšแƒ›แƒ แƒฉแƒแƒ›แƒแƒขแƒ•แƒ˜แƒ แƒ—แƒ แƒแƒกแƒ˜ แƒ“แƒแƒ›แƒแƒขแƒ”แƒ‘แƒ˜แƒ—แƒ˜ แƒ™แƒ˜แƒšแƒแƒ‘แƒแƒ˜แƒขแƒ˜. แƒ“แƒ”แƒขแƒแƒšแƒฃแƒ แƒแƒ“ แƒงแƒ•แƒ”แƒšแƒแƒคแƒ”แƒ แƒ˜ แƒ™แƒ˜แƒ“แƒ”แƒ• แƒฃแƒคแƒ แƒ แƒกแƒแƒจแƒ˜แƒœแƒ”แƒšแƒ˜ แƒฉแƒแƒœแƒ“แƒ.

Habr front-end แƒ“แƒ”แƒ•แƒ”แƒšแƒแƒžแƒ”แƒ แƒ”แƒ‘แƒ˜แƒก แƒŸแƒฃแƒ แƒœแƒแƒšแƒ”แƒ‘แƒ˜: refactoring แƒ“แƒ แƒแƒกแƒแƒฎแƒ•แƒแƒซแƒ•แƒ”แƒšแƒ˜ SSR-CSR แƒกแƒฅแƒ”แƒ›แƒ. แƒแƒ•แƒขแƒแƒ แƒ˜แƒ–แƒแƒชแƒ˜แƒ แƒจแƒ”แƒกแƒแƒซแƒšแƒ”แƒ‘แƒ”แƒšแƒ˜แƒ แƒ›แƒฎแƒแƒšแƒแƒ“ C3 แƒ“แƒ C4 แƒ”แƒขแƒแƒžแƒ”แƒ‘แƒ–แƒ”, แƒ แƒแƒ“แƒ”แƒกแƒแƒช Node JS แƒแƒ  แƒแƒ แƒ˜แƒก แƒ“แƒแƒ™แƒแƒ•แƒ”แƒ‘แƒฃแƒšแƒ˜ HTML-แƒ˜แƒก แƒ’แƒ”แƒœแƒ”แƒ แƒ˜แƒ แƒ”แƒ‘แƒ˜แƒ— แƒ“แƒ แƒจแƒ”แƒฃแƒซแƒšแƒ˜แƒ API-แƒ–แƒ” แƒžแƒ แƒแƒฅแƒกแƒ˜แƒก แƒ›แƒแƒ—แƒฎแƒแƒ•แƒœแƒ.

แƒฉแƒ•แƒ”แƒœแƒ˜ แƒ˜แƒ›แƒ“แƒ แƒแƒ˜แƒœแƒ“แƒ”แƒšแƒ˜ แƒแƒ แƒฅแƒ˜แƒขแƒ”แƒฅแƒขแƒฃแƒ แƒ แƒซแƒแƒšแƒ˜แƒแƒœ แƒ–แƒฃแƒกแƒขแƒแƒ“ แƒ˜แƒงแƒ แƒแƒฆแƒฌแƒ”แƒ แƒ˜แƒšแƒ˜ Habr-แƒ˜แƒก แƒ”แƒ แƒ—-แƒ”แƒ แƒ—แƒ›แƒ แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒ”แƒšแƒ›แƒ:

แƒ›แƒแƒ‘แƒ˜แƒšแƒฃแƒ แƒ˜ แƒ•แƒ”แƒ แƒกแƒ˜แƒ แƒกแƒ˜แƒกแƒฃแƒšแƒ”แƒšแƒ”แƒ. แƒ›แƒ” แƒ•แƒแƒ›แƒ‘แƒแƒ‘ แƒ˜แƒกแƒ” แƒ แƒแƒ’แƒแƒ แƒช แƒแƒ แƒ˜แƒก. SSR-แƒ˜แƒกแƒ แƒ“แƒ CSR-แƒ˜แƒก แƒกแƒแƒจแƒ˜แƒœแƒ”แƒšแƒ˜ แƒ™แƒแƒ›แƒ‘แƒ˜แƒœแƒแƒชแƒ˜แƒ.

แƒฃแƒœแƒ“แƒ แƒ’แƒ•แƒ”แƒฆแƒ˜แƒแƒ แƒ”แƒ‘แƒ˜แƒœแƒ, แƒ แƒแƒช แƒแƒ  แƒฃแƒœแƒ“แƒ แƒกแƒแƒ›แƒฌแƒฃแƒฎแƒแƒ แƒ แƒงแƒแƒคแƒ˜แƒšแƒ˜แƒงแƒ.

แƒ›แƒ” แƒจแƒ”แƒ•แƒแƒคแƒแƒกแƒ” แƒ•แƒแƒ แƒ˜แƒแƒœแƒขแƒ”แƒ‘แƒ˜, แƒจแƒ”แƒ•แƒฅแƒ›แƒ”แƒœแƒ˜ แƒ‘แƒ˜แƒšแƒ”แƒ—แƒ˜ แƒฏแƒ˜แƒ แƒแƒจแƒ˜ แƒแƒฆแƒฌแƒ”แƒ แƒ˜แƒ— "แƒแƒฎแƒšแƒ แƒชแƒฃแƒ“แƒ˜แƒ, แƒ’แƒแƒแƒ™แƒ”แƒ—แƒ” แƒกแƒฌแƒแƒ แƒแƒ“" แƒ“แƒ แƒ“แƒแƒ•แƒแƒจแƒแƒšแƒ” แƒคแƒแƒ แƒ—แƒ แƒจแƒขแƒ แƒ˜แƒฎแƒ”แƒ‘แƒ˜แƒ—:

  • แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜แƒก แƒฎแƒ”แƒšแƒแƒฎแƒšแƒ แƒ’แƒแƒ›แƒแƒงแƒ”แƒœแƒ”แƒ‘แƒ,
  • แƒจแƒ”แƒ›แƒชแƒ˜แƒ แƒ”แƒ‘แƒ˜แƒก แƒ แƒแƒแƒ“แƒ”แƒœแƒแƒ‘แƒ˜แƒก แƒจแƒ”แƒ›แƒชแƒ˜แƒ แƒ”แƒ‘แƒ,
  • แƒ“แƒฃแƒ‘แƒšแƒ˜แƒ™แƒแƒขแƒ˜ แƒ›แƒแƒ—แƒฎแƒแƒ•แƒœแƒ”แƒ‘แƒ˜แƒก แƒแƒฆแƒ›แƒแƒคแƒฎแƒ•แƒ แƒ,
  • แƒ’แƒแƒฎแƒแƒ“แƒ”แƒ— แƒ“แƒแƒขแƒ•แƒ˜แƒ แƒ—แƒ•แƒ˜แƒก แƒžแƒ แƒแƒชแƒ”แƒกแƒ˜ แƒฃแƒคแƒ แƒ แƒแƒจแƒ™แƒแƒ แƒ.

แƒ›แƒแƒ“แƒ˜แƒ— แƒฎแƒ”แƒšแƒแƒฎแƒšแƒ แƒ’แƒแƒ›แƒแƒ•แƒ˜แƒงแƒ”แƒœแƒแƒ— แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜

แƒ—แƒ”แƒแƒ แƒ˜แƒฃแƒšแƒแƒ“, แƒกแƒ”แƒ แƒ•แƒ”แƒ แƒ˜แƒก แƒ›แƒฎแƒ แƒ˜แƒ“แƒแƒœ แƒ แƒ”แƒœแƒ“แƒ”แƒ แƒ˜ แƒจแƒ”แƒฅแƒ›แƒœแƒ˜แƒšแƒ˜แƒ แƒแƒ แƒ˜ แƒžแƒ แƒแƒ‘แƒšแƒ”แƒ›แƒ˜แƒก แƒ’แƒแƒ“แƒแƒกแƒแƒญแƒ แƒ”แƒšแƒแƒ“: แƒแƒ  แƒ“แƒแƒ–แƒแƒ แƒแƒšแƒ“แƒ”แƒก แƒกแƒแƒซแƒ˜แƒ”แƒ‘แƒ แƒกแƒ˜แƒกแƒขแƒ”แƒ›แƒ˜แƒก แƒจแƒ”แƒ–แƒฆแƒฃแƒ“แƒ•แƒ”แƒ‘แƒ˜. SPA แƒ˜แƒœแƒ“แƒ”แƒฅแƒกแƒ˜แƒ แƒ”แƒ‘แƒ แƒ“แƒ แƒ’แƒแƒแƒฃแƒ›แƒฏแƒแƒ‘แƒ”แƒกแƒ” แƒ›แƒ”แƒขแƒ แƒ˜แƒ™แƒ FMP (แƒแƒฃแƒชแƒ˜แƒšแƒ”แƒ‘แƒšแƒแƒ“ แƒ’แƒแƒฃแƒแƒ แƒ”แƒกแƒ”แƒ‘แƒ TTI). แƒ™แƒšแƒแƒกแƒ˜แƒ™แƒฃแƒ  แƒกแƒชแƒ”แƒœแƒแƒ แƒจแƒ˜ แƒ แƒแƒ› แƒกแƒแƒ‘แƒแƒšแƒแƒแƒ“ แƒฉแƒแƒ›แƒแƒงแƒแƒšแƒ˜แƒ‘แƒ”แƒ‘แƒฃแƒšแƒ˜แƒ Airbnb-แƒ–แƒ” 2013 แƒฌแƒ”แƒšแƒก แƒฌแƒ”แƒšแƒ˜ (แƒฏแƒ”แƒ  แƒ™แƒ˜แƒ“แƒ”แƒ• Backbone.js-แƒ–แƒ”), SSR แƒแƒ แƒ˜แƒก แƒ˜แƒ’แƒ˜แƒ•แƒ” แƒ˜แƒ–แƒแƒ›แƒแƒ แƒคแƒฃแƒšแƒ˜ JS แƒแƒžแƒšแƒ˜แƒ™แƒแƒชแƒ˜แƒ, แƒ แƒแƒ›แƒ”แƒšแƒ˜แƒช แƒ›แƒฃแƒจแƒแƒแƒ‘แƒก Node แƒ’แƒแƒ แƒ”แƒ›แƒแƒจแƒ˜. แƒกแƒ”แƒ แƒ•แƒ”แƒ แƒ˜ แƒฃแƒ‘แƒ แƒแƒšแƒแƒ“ แƒแƒ’แƒ–แƒแƒ•แƒœแƒ˜แƒก แƒ’แƒ”แƒœแƒ”แƒ แƒ˜แƒ แƒ”แƒ‘แƒฃแƒš แƒ’แƒแƒœแƒšแƒแƒ’แƒ”แƒ‘แƒแƒก แƒ›แƒแƒ—แƒฎแƒแƒ•แƒœแƒ˜แƒก แƒžแƒแƒกแƒฃแƒฎแƒแƒ“. แƒจแƒ”แƒ›แƒ“แƒ”แƒ’ แƒฎแƒ“แƒ”แƒ‘แƒ แƒ แƒ”แƒฐแƒ˜แƒ“แƒ แƒแƒขแƒแƒชแƒ˜แƒ แƒ™แƒšแƒ˜แƒ”แƒœแƒขแƒ˜แƒก แƒ›แƒฎแƒแƒ แƒ”แƒก แƒ“แƒ แƒจแƒ”แƒ›แƒ“แƒ”แƒ’ แƒงแƒ•แƒ”แƒšแƒแƒคแƒ”แƒ แƒ˜ แƒ›แƒฃแƒจแƒแƒแƒ‘แƒก แƒ’แƒ•แƒ”แƒ แƒ“แƒ˜แƒก แƒ’แƒแƒ“แƒแƒขแƒ•แƒ˜แƒ แƒ—แƒ•แƒ˜แƒก แƒ’แƒแƒ แƒ”แƒจแƒ”. Habr-แƒ˜แƒกแƒ—แƒ•แƒ˜แƒก, แƒ˜แƒกแƒ”แƒ•แƒ” แƒ แƒแƒ’แƒแƒ แƒช แƒขแƒ”แƒฅแƒกแƒขแƒฃแƒ แƒ˜ แƒจแƒ˜แƒœแƒแƒแƒ แƒกแƒ˜แƒก แƒ›แƒฅแƒแƒœแƒ” แƒ›แƒ แƒแƒ•แƒแƒšแƒ˜ แƒกแƒฎแƒ•แƒ แƒ แƒ”แƒกแƒฃแƒ แƒกแƒ˜แƒกแƒ—แƒ•แƒ˜แƒก, แƒกแƒ”แƒ แƒ•แƒ”แƒ แƒ˜แƒก แƒ แƒ”แƒœแƒ“แƒ”แƒ แƒ˜ แƒ’แƒแƒ“แƒแƒ›แƒฌแƒงแƒ•แƒ”แƒขแƒ˜ แƒ”แƒšแƒ”แƒ›แƒ”แƒœแƒขแƒ˜แƒ แƒกแƒแƒซแƒ˜แƒ”แƒ‘แƒ แƒกแƒ˜แƒกแƒขแƒ”แƒ›แƒ”แƒ‘แƒ—แƒแƒœ แƒ›แƒ”แƒ’แƒแƒ‘แƒ แƒฃแƒšแƒ˜ แƒฃแƒ แƒ—แƒ˜แƒ”แƒ แƒ—แƒแƒ‘แƒ”แƒ‘แƒ˜แƒก แƒ“แƒแƒ›แƒงแƒแƒ แƒ”แƒ‘แƒ˜แƒกแƒ—แƒ•แƒ˜แƒก.

แƒ˜แƒ›แƒ˜แƒกแƒ“แƒ แƒ›แƒ˜แƒฃแƒฎแƒ”แƒ“แƒแƒ•แƒแƒ“, แƒ แƒแƒ› แƒขแƒ”แƒฅแƒœแƒแƒšแƒแƒ’แƒ˜แƒ˜แƒก แƒ’แƒแƒ›แƒแƒกแƒ•แƒšแƒ˜แƒ“แƒแƒœ แƒ”แƒฅแƒ•แƒก แƒฌแƒ”แƒšแƒ–แƒ” แƒ›แƒ”แƒขแƒ˜ แƒ’แƒแƒ•แƒ˜แƒ“แƒ แƒ“แƒ แƒแƒ› แƒฎแƒœแƒ˜แƒก แƒ’แƒแƒœแƒ›แƒแƒ•แƒšแƒแƒ‘แƒแƒจแƒ˜ แƒฎแƒ˜แƒ“แƒ˜แƒก แƒฅแƒ•แƒ”แƒจ แƒ›แƒแƒ แƒ—แƒšแƒแƒช แƒ‘แƒ”แƒ•แƒ แƒ˜ แƒฌแƒงแƒแƒšแƒ˜ แƒ’แƒแƒคแƒ แƒ˜แƒœแƒ“แƒ แƒฌแƒ˜แƒœแƒ แƒกแƒแƒ›แƒงแƒแƒ แƒแƒจแƒ˜, แƒ›แƒ แƒแƒ•แƒแƒšแƒ˜ แƒ“แƒ”แƒ•แƒ”แƒšแƒแƒžแƒ”แƒ แƒ˜แƒกแƒ—แƒ•แƒ˜แƒก แƒ”แƒก แƒ˜แƒ“แƒ”แƒ แƒฏแƒ”แƒ  แƒ™แƒ˜แƒ“แƒ”แƒ• แƒกแƒแƒ˜แƒ“แƒฃแƒ›แƒšแƒแƒ”แƒ‘แƒ˜แƒ— แƒแƒ แƒ˜แƒก แƒ›แƒแƒชแƒฃแƒšแƒ˜. แƒฉแƒ•แƒ”แƒœ แƒแƒ  แƒ“แƒแƒ•แƒ“แƒ”แƒฅแƒ˜แƒ— แƒ’แƒแƒœแƒ–แƒ” แƒ“แƒ แƒ’แƒแƒ›แƒแƒ•แƒแƒฅแƒ•แƒ”แƒงแƒœแƒ”แƒ— Vue แƒแƒžแƒšแƒ˜แƒ™แƒแƒชแƒ˜แƒ SSR แƒ›แƒฎแƒแƒ แƒ“แƒแƒญแƒ”แƒ แƒ˜แƒ— แƒฌแƒแƒ แƒ›แƒแƒ”แƒ‘แƒแƒจแƒ˜, แƒ’แƒแƒ›แƒแƒ’แƒ•แƒ แƒฉแƒ แƒ”แƒ แƒ—แƒ˜ แƒžแƒแƒขแƒแƒ แƒ แƒ“แƒ”แƒขแƒแƒšแƒ˜: แƒฉแƒ•แƒ”แƒœ แƒแƒ  แƒ’แƒแƒ•แƒฃแƒ’แƒ–แƒแƒ•แƒœแƒ”แƒ— แƒกแƒแƒฌแƒงแƒ˜แƒกแƒ˜ แƒ›แƒ“แƒ’แƒแƒ›แƒแƒ แƒ”แƒแƒ‘แƒ แƒ™แƒšแƒ˜แƒ”แƒœแƒขแƒก.

แƒ แƒแƒขแƒแƒ›? แƒแƒ› แƒ™แƒ˜แƒ—แƒฎแƒ•แƒแƒ–แƒ” แƒ–แƒฃแƒกแƒขแƒ˜ แƒžแƒแƒกแƒฃแƒฎแƒ˜ แƒแƒ  แƒแƒ แƒกแƒ”แƒ‘แƒแƒ‘แƒก. แƒแƒœ แƒ›แƒแƒ— แƒแƒ  แƒกแƒฃแƒ แƒ“แƒแƒ— แƒกแƒ”แƒ แƒ•แƒ”แƒ แƒ˜แƒก แƒžแƒแƒกแƒฃแƒฎแƒ˜แƒก แƒ–แƒแƒ›แƒ˜แƒก แƒ’แƒแƒ–แƒ แƒ“แƒ, แƒแƒœ แƒกแƒฎแƒ•แƒ แƒแƒ แƒฅแƒ˜แƒขแƒ”แƒฅแƒขแƒฃแƒ แƒฃแƒšแƒ˜ แƒžแƒ แƒแƒ‘แƒšแƒ”แƒ›แƒ”แƒ‘แƒ˜แƒก แƒ’แƒแƒ›แƒ, แƒแƒœ แƒฃแƒ‘แƒ แƒแƒšแƒแƒ“ แƒแƒ  แƒแƒ˜แƒฆแƒ. แƒแƒ›แƒ แƒ—แƒฃ แƒ˜แƒ› แƒ’แƒ–แƒ˜แƒ—, แƒ›แƒ“แƒ’แƒแƒ›แƒแƒ แƒ”แƒแƒ‘แƒ˜แƒก แƒ’แƒแƒ›แƒแƒ แƒ—แƒ•แƒ แƒ“แƒ แƒงแƒ•แƒ”แƒšแƒแƒคแƒ แƒ˜แƒก แƒฎแƒ”แƒšแƒแƒฎแƒšแƒ แƒ’แƒแƒ›แƒแƒงแƒ”แƒœแƒ”แƒ‘แƒ, แƒ แƒแƒช แƒกแƒ”แƒ แƒ•แƒ”แƒ แƒ›แƒ แƒ’แƒแƒแƒ™แƒ”แƒ—แƒ, แƒกแƒแƒ™แƒ›แƒแƒแƒ“ แƒกแƒแƒ—แƒแƒœแƒแƒ“แƒ แƒ“แƒ แƒกแƒแƒกแƒแƒ แƒ’แƒ”แƒ‘แƒšแƒ แƒฉแƒแƒœแƒก. แƒแƒ›แƒแƒชแƒแƒœแƒ แƒ แƒ”แƒแƒšแƒฃแƒ แƒแƒ“ แƒขแƒ แƒ˜แƒ•แƒ˜แƒแƒšแƒฃแƒ แƒ˜แƒ - แƒ›แƒ“แƒ’แƒแƒ›แƒแƒ แƒ”แƒแƒ‘แƒ แƒฃแƒ‘แƒ แƒแƒšแƒแƒ“ แƒ˜แƒœแƒ”แƒฅแƒชแƒ˜แƒแƒ แƒจแƒ”แƒกแƒ แƒฃแƒšแƒ”แƒ‘แƒ˜แƒก แƒ™แƒแƒœแƒขแƒ”แƒฅแƒกแƒขแƒจแƒ˜ แƒ“แƒ Vue แƒแƒ•แƒขแƒแƒ›แƒแƒขแƒฃแƒ แƒแƒ“ แƒแƒ›แƒแƒขแƒ”แƒ‘แƒก แƒ›แƒแƒก แƒ’แƒ”แƒœแƒ”แƒ แƒ˜แƒ แƒ”แƒ‘แƒฃแƒš แƒ’แƒแƒœแƒšแƒแƒ’แƒ”แƒ‘แƒแƒจแƒ˜, แƒ แƒแƒ’แƒแƒ แƒช แƒ’แƒšแƒแƒ‘แƒแƒšแƒฃแƒ แƒ˜ แƒชแƒ•แƒšแƒแƒ“แƒ˜: window.__INITIAL_STATE__.

แƒ”แƒ แƒ—-แƒ”แƒ แƒ—แƒ˜ แƒžแƒ แƒแƒ‘แƒšแƒ”แƒ›แƒ, แƒ แƒแƒ›แƒ”แƒšแƒ˜แƒช แƒฌแƒแƒ แƒ›แƒแƒ˜แƒจแƒ•แƒ, แƒแƒ แƒ˜แƒก แƒชแƒ˜แƒ™แƒšแƒฃแƒ แƒ˜ แƒกแƒขแƒ แƒฃแƒฅแƒขแƒฃแƒ แƒ”แƒ‘แƒ˜แƒก JSON-แƒแƒ“ แƒ’แƒแƒ“แƒแƒฅแƒชแƒ”แƒ•แƒ˜แƒก แƒจแƒ”แƒฃแƒซแƒšแƒ”แƒ‘แƒšแƒแƒ‘แƒ (แƒฌแƒ แƒ˜แƒฃแƒšแƒ˜ แƒ›แƒ˜แƒ—แƒ˜แƒ—แƒ”แƒ‘แƒ); แƒ›แƒแƒ’แƒ•แƒแƒ แƒ“แƒ แƒแƒกแƒ”แƒ—แƒ˜ แƒกแƒขแƒ แƒฃแƒฅแƒขแƒฃแƒ แƒ”แƒ‘แƒ˜แƒก แƒฃแƒ‘แƒ แƒแƒšแƒแƒ“ แƒ›แƒแƒ—แƒ˜ แƒ‘แƒ แƒขแƒงแƒ”แƒšแƒ˜ แƒ™แƒแƒšแƒ”แƒ’แƒ”แƒ‘แƒ˜แƒ— แƒฉแƒแƒœแƒแƒชแƒ•แƒšแƒ”แƒ‘แƒ˜แƒ—.

แƒ’แƒแƒ แƒ“แƒ แƒแƒ›แƒ˜แƒกแƒ, UGC แƒ™แƒแƒœแƒขแƒ”แƒœแƒขแƒ—แƒแƒœ แƒฃแƒ แƒ—แƒ˜แƒ”แƒ แƒ—แƒแƒ‘แƒ˜แƒกแƒแƒก แƒฃแƒœแƒ“แƒ แƒ’แƒแƒฎแƒกแƒแƒ•แƒ“แƒ”แƒ—, แƒ แƒแƒ› แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜ แƒฃแƒœแƒ“แƒ แƒ’แƒแƒ“แƒแƒ™แƒ”แƒ—แƒ“แƒ”แƒก HTML แƒ”แƒ แƒ—แƒ”แƒฃแƒšแƒ”แƒ‘แƒแƒ“, แƒ แƒแƒ—แƒ แƒแƒ  แƒ“แƒแƒ˜แƒ แƒฆแƒ•แƒ”แƒก HTML. แƒแƒ› แƒ›แƒ˜แƒ–แƒœแƒ”แƒ‘แƒ˜แƒกแƒ—แƒ•แƒ˜แƒก แƒฉแƒ•แƒ”แƒœ แƒ•แƒ˜แƒงแƒ”แƒœแƒ”แƒ‘แƒ— he.

แƒ’แƒแƒ“แƒแƒฎแƒแƒ–แƒ•แƒ˜แƒก แƒ›แƒ˜แƒœแƒ˜แƒ›แƒ˜แƒ–แƒแƒชแƒ˜แƒ

แƒ แƒแƒ’แƒแƒ แƒช แƒ–แƒ”แƒ›แƒแƒ— แƒ›แƒแƒงแƒ•แƒแƒœแƒ˜แƒšแƒ˜ แƒ“แƒ˜แƒแƒ’แƒ แƒแƒ›แƒแƒ“แƒแƒœ แƒฎแƒ”แƒ“แƒแƒ•แƒ—, แƒฉแƒ•แƒ”แƒœแƒก แƒจแƒ”แƒ›แƒ—แƒฎแƒ•แƒ”แƒ•แƒแƒจแƒ˜, แƒ”แƒ แƒ—แƒ˜ Node JS แƒ˜แƒœแƒกแƒขแƒแƒœแƒชแƒ˜แƒ แƒแƒกแƒ แƒฃแƒšแƒ”แƒ‘แƒก แƒแƒ  แƒคแƒฃแƒœแƒฅแƒชแƒ˜แƒแƒก: SSR แƒ“แƒ โ€žproxyโ€œ API-แƒจแƒ˜, แƒกแƒแƒ“แƒแƒช แƒฎแƒ“แƒ”แƒ‘แƒ แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒšแƒ˜แƒก แƒแƒ•แƒขแƒแƒ แƒ˜แƒ–แƒแƒชแƒ˜แƒ. แƒ”แƒก แƒ’แƒแƒ แƒ”แƒ›แƒแƒ”แƒ‘แƒ แƒจแƒ”แƒฃแƒซแƒšแƒ”แƒ‘แƒ”แƒšแƒก แƒฎแƒ“แƒ˜แƒก แƒแƒ•แƒขแƒแƒ แƒ˜แƒ–แƒแƒชแƒ˜แƒแƒก, แƒกแƒแƒœแƒแƒ› JS แƒ™แƒแƒ“แƒ˜ แƒ›แƒฃแƒจแƒแƒแƒ‘แƒก แƒกแƒ”แƒ แƒ•แƒ”แƒ แƒ–แƒ”, แƒ•แƒ˜แƒœแƒแƒ˜แƒ“แƒแƒœ แƒ™แƒ•แƒแƒœแƒซแƒ˜ แƒ”แƒ แƒ—แƒœแƒแƒ™แƒแƒ“แƒ˜แƒแƒœแƒ˜แƒ แƒ“แƒ SSR แƒคแƒฃแƒœแƒฅแƒชแƒ˜แƒ แƒกแƒ˜แƒœแƒฅแƒ แƒแƒœแƒฃแƒšแƒ˜แƒ. แƒแƒœแƒฃ แƒกแƒ”แƒ แƒ•แƒ”แƒ แƒ˜ แƒฃแƒ‘แƒ แƒแƒšแƒแƒ“ แƒ•แƒ”แƒ  แƒแƒ’แƒ–แƒแƒ•แƒœแƒ˜แƒก แƒ—แƒฎแƒแƒ•แƒœแƒ”แƒ‘แƒก แƒกแƒแƒ™แƒฃแƒ—แƒแƒ  แƒ—แƒแƒ•แƒก, แƒกแƒแƒœแƒแƒ› แƒฅแƒแƒšแƒกแƒขแƒแƒ™แƒ˜ แƒ แƒแƒฆแƒแƒชแƒ˜แƒ— แƒแƒ แƒ˜แƒก แƒ“แƒแƒ™แƒแƒ•แƒ”แƒ‘แƒฃแƒšแƒ˜. แƒแƒฆแƒ›แƒแƒฉแƒœแƒ“แƒ, แƒ แƒแƒ› แƒฉแƒ•แƒ”แƒœ แƒ’แƒแƒœแƒ•แƒแƒแƒฎแƒšแƒ”แƒ— แƒ›แƒ“แƒ’แƒแƒ›แƒแƒ แƒ”แƒแƒ‘แƒ, แƒ›แƒแƒ’แƒ แƒแƒ› แƒ˜แƒœแƒขแƒ”แƒ แƒคแƒ”แƒ˜แƒกแƒ›แƒ แƒแƒ  แƒจแƒ”แƒฌแƒงแƒ•แƒ˜แƒขแƒ แƒขแƒ แƒ˜แƒแƒšแƒ˜, แƒ แƒแƒ“แƒ’แƒแƒœ แƒ™แƒšแƒ˜แƒ”แƒœแƒขแƒ–แƒ” แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜ แƒฃแƒœแƒ“แƒ แƒ’แƒแƒœแƒแƒฎแƒšแƒ”แƒ‘แƒฃแƒšแƒ˜แƒงแƒ แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒšแƒ˜แƒก แƒกแƒ”แƒกแƒ˜แƒ˜แƒก แƒ’แƒแƒ—แƒ•แƒแƒšแƒ˜แƒกแƒฌแƒ˜แƒœแƒ”แƒ‘แƒ˜แƒ—. แƒฉแƒ•แƒ”แƒœ แƒฃแƒœแƒ“แƒ แƒ’แƒ•แƒ”แƒกแƒฌแƒแƒ•แƒšแƒ”แƒ‘แƒ˜แƒœแƒ แƒฉแƒ•แƒ”แƒœแƒก แƒแƒžแƒšแƒ˜แƒ™แƒแƒชแƒ˜แƒแƒก แƒกแƒฌแƒแƒ แƒ˜ แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜แƒก แƒกแƒแƒฌแƒงแƒ˜แƒก แƒ›แƒ“แƒ’แƒแƒ›แƒแƒ แƒ”แƒแƒ‘แƒแƒจแƒ˜ แƒ›แƒแƒ—แƒแƒ•แƒกแƒ”แƒ‘แƒ, แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒšแƒ˜แƒก แƒจแƒ”แƒกแƒ•แƒšแƒ˜แƒก แƒ’แƒแƒ—แƒ•แƒแƒšแƒ˜แƒกแƒฌแƒ˜แƒœแƒ”แƒ‘แƒ˜แƒ—.

แƒžแƒ แƒแƒ‘แƒšแƒ”แƒ›แƒ˜แƒก แƒ›แƒฎแƒแƒšแƒแƒ“ แƒแƒ แƒ˜ แƒ’แƒแƒ›แƒแƒกแƒแƒ•แƒแƒšแƒ˜ แƒ˜แƒงแƒ:

  • แƒ“แƒแƒฃแƒ แƒ—แƒ”แƒ— แƒแƒ•แƒขแƒแƒ แƒ˜แƒ–แƒแƒชแƒ˜แƒ˜แƒก แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜ แƒ™แƒ แƒแƒกแƒกแƒ”แƒ แƒ•แƒ”แƒ แƒ˜แƒก แƒ›แƒแƒ—แƒฎแƒแƒ•แƒœแƒ”แƒ‘แƒก;
  • แƒ’แƒแƒงแƒแƒ•แƒ˜แƒ— Node JS แƒคแƒ”แƒœแƒ”แƒ‘แƒ˜ แƒแƒ  แƒชแƒแƒšแƒ™แƒ”แƒฃแƒš แƒ˜แƒœแƒกแƒขแƒแƒœแƒชแƒ˜แƒแƒ“.

แƒžแƒ˜แƒ แƒ•แƒ”แƒšแƒ˜ แƒ’แƒแƒ›แƒแƒกแƒแƒ•แƒแƒšแƒ˜ แƒ›แƒแƒ˜แƒ—แƒฎแƒแƒ•แƒ“แƒ แƒกแƒ”แƒ แƒ•แƒ”แƒ แƒ–แƒ” แƒ’แƒšแƒแƒ‘แƒแƒšแƒฃแƒ แƒ˜ แƒชแƒ•แƒšแƒแƒ“แƒ”แƒ‘แƒ˜แƒก แƒ’แƒแƒ›แƒแƒงแƒ”แƒœแƒ”แƒ‘แƒแƒก, แƒฎแƒแƒšแƒ แƒ›แƒ”แƒแƒ แƒ”แƒ› แƒแƒ›แƒแƒชแƒแƒœแƒ˜แƒก แƒจแƒ”แƒกแƒ แƒฃแƒšแƒ”แƒ‘แƒ˜แƒก แƒ•แƒแƒ“แƒ แƒ›แƒ˜แƒœแƒ˜แƒ›แƒฃแƒ› แƒ”แƒ แƒ—แƒ˜ แƒ—แƒ•แƒ˜แƒ— แƒ’แƒแƒแƒฎแƒแƒœแƒ’แƒ แƒซแƒšแƒ˜แƒ•แƒ.

แƒ แƒแƒ’แƒแƒ  แƒ’แƒแƒ•แƒแƒ™แƒ”แƒ—แƒแƒ— แƒแƒ แƒฉแƒ”แƒ•แƒแƒœแƒ˜? แƒฐแƒแƒ‘แƒ แƒ˜ แƒฎแƒจแƒ˜แƒ แƒแƒ“ แƒ›แƒแƒซแƒ แƒแƒแƒ‘แƒก แƒ›แƒ˜แƒœแƒ˜แƒ›แƒแƒšแƒฃแƒ แƒ˜ แƒฌแƒ˜แƒœแƒแƒแƒฆแƒ›แƒ“แƒ”แƒ’แƒแƒ‘แƒ˜แƒก แƒ’แƒ–แƒแƒ–แƒ”. แƒแƒ แƒแƒคแƒแƒ แƒ›แƒแƒšแƒฃแƒ แƒแƒ“, แƒแƒ แƒกแƒ”แƒ‘แƒแƒ‘แƒก แƒ–แƒแƒ’แƒแƒ“แƒ˜ แƒกแƒฃแƒ แƒ•แƒ˜แƒšแƒ˜, แƒ แƒแƒ› แƒชแƒ˜แƒ™แƒšแƒ˜ แƒ˜แƒ“แƒ”แƒ˜แƒ“แƒแƒœ แƒžแƒ แƒแƒขแƒแƒขแƒ˜แƒžแƒแƒ›แƒ“แƒ” แƒ›แƒ˜แƒœแƒ˜แƒ›แƒฃแƒ›แƒแƒ›แƒ“แƒ” แƒจแƒ”แƒ›แƒชแƒ˜แƒ แƒ“แƒ”แƒก. แƒžแƒ แƒแƒ“แƒฃแƒฅแƒขแƒ˜แƒกแƒแƒ“แƒ›แƒ˜ แƒ“แƒแƒ›แƒแƒ™แƒ˜แƒ“แƒ”แƒ‘แƒฃแƒšแƒ”แƒ‘แƒ˜แƒก แƒ›แƒแƒ“แƒ”แƒšแƒ˜ แƒ’แƒแƒ แƒ™แƒ•แƒ”แƒฃแƒšแƒฌแƒ˜แƒšแƒแƒ“ แƒ›แƒแƒ’แƒ•แƒแƒ’แƒแƒœแƒ”แƒ‘แƒก booking.com-แƒ˜แƒก แƒžแƒแƒกแƒขแƒฃแƒšแƒแƒขแƒ”แƒ‘แƒก, แƒ”แƒ แƒ—แƒแƒ“แƒ”แƒ แƒ—แƒ˜ แƒ’แƒแƒœแƒกแƒฎแƒ•แƒแƒ•แƒ”แƒ‘แƒ แƒ˜แƒกแƒแƒ, แƒ แƒแƒ› Habr แƒฃแƒคแƒ แƒ แƒกแƒ”แƒ แƒ˜แƒแƒ–แƒฃแƒšแƒแƒ“ แƒ”แƒ™แƒ˜แƒ“แƒ”แƒ‘แƒ แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒšแƒ˜แƒก แƒ’แƒแƒ›แƒแƒฎแƒ›แƒแƒฃแƒ แƒ”แƒ‘แƒแƒก แƒ“แƒ แƒ”แƒœแƒ“แƒแƒ‘แƒ แƒ—แƒฅแƒ•แƒ”แƒœ, แƒ แƒแƒ’แƒแƒ แƒช แƒ“แƒ”แƒ•แƒ”แƒšแƒแƒžแƒ”แƒ แƒก, แƒแƒกแƒ”แƒ—แƒ˜ แƒ’แƒแƒ“แƒแƒฌแƒงแƒ•แƒ”แƒขแƒ˜แƒšแƒ”แƒ‘แƒ”แƒ‘แƒ˜แƒก แƒ›แƒ˜แƒฆแƒ”แƒ‘แƒแƒจแƒ˜.

แƒแƒ› แƒšแƒแƒ’แƒ˜แƒ™แƒ˜แƒ— แƒ“แƒ แƒžแƒ แƒแƒ‘แƒšแƒ”แƒ›แƒ˜แƒก แƒกแƒฌแƒ แƒแƒคแƒแƒ“ แƒ’แƒแƒ“แƒแƒญแƒ แƒ˜แƒก แƒกแƒแƒ™แƒฃแƒ—แƒแƒ แƒ˜ แƒกแƒฃแƒ แƒ•แƒ˜แƒšแƒ˜แƒ—, แƒแƒ•แƒ˜แƒ แƒฉแƒ˜แƒ” แƒ’แƒšแƒแƒ‘แƒแƒšแƒฃแƒ แƒ˜ แƒชแƒ•แƒšแƒแƒ“แƒ”แƒ‘แƒ˜. แƒ“แƒ, แƒ แƒแƒ’แƒแƒ แƒช แƒฎแƒจแƒ˜แƒ แƒแƒ“ แƒฎแƒ“แƒ”แƒ‘แƒ, แƒแƒ“แƒ แƒ” แƒ—แƒฃ แƒ’แƒ•แƒ˜แƒแƒœ แƒฃแƒœแƒ“แƒ แƒ’แƒแƒ“แƒแƒ˜แƒฎแƒแƒ“แƒ แƒ›แƒแƒ—แƒ—แƒ•แƒ˜แƒก. แƒ’แƒแƒ“แƒแƒ•แƒ˜แƒฎแƒแƒ“แƒ”แƒ— แƒ—แƒ˜แƒ—แƒฅแƒ›แƒ˜แƒก แƒ›แƒแƒจแƒ˜แƒœแƒ•แƒ”: แƒ•แƒ˜แƒ›แƒฃแƒจแƒแƒ•แƒ”แƒ— แƒจแƒแƒ‘แƒแƒ—-แƒ™แƒ•แƒ˜แƒ แƒแƒก, แƒ’แƒแƒ•แƒแƒ แƒ™แƒ•แƒ˜แƒ”แƒ— แƒจแƒ”แƒ“แƒ”แƒ’แƒ”แƒ‘แƒ˜, แƒ“แƒแƒ•แƒฌแƒ”แƒ แƒ”แƒ— แƒกแƒ˜แƒ™แƒ•แƒ“แƒ˜แƒšแƒ˜แƒก แƒจแƒ”แƒ›แƒ“แƒ”แƒ’ แƒ“แƒ แƒ“แƒแƒ˜แƒฌแƒงแƒ แƒกแƒ”แƒ แƒ•แƒ”แƒ แƒ˜แƒก แƒแƒ  แƒœแƒแƒฌแƒ˜แƒšแƒแƒ“ แƒ’แƒแƒงแƒแƒคแƒ. แƒจแƒ”แƒชแƒ“แƒแƒ›แƒ แƒซแƒแƒšแƒ˜แƒแƒœ แƒกแƒฃแƒšแƒ”แƒšแƒฃแƒ แƒ˜ แƒ˜แƒงแƒ แƒ“แƒ แƒ›แƒ˜แƒกแƒ˜ แƒ’แƒแƒ›แƒ แƒแƒ•แƒšแƒ”แƒ‘แƒ แƒแƒ“แƒ•แƒ˜แƒšแƒ˜ แƒแƒ  แƒ˜แƒงแƒ. แƒ“แƒ แƒ“แƒ˜แƒแƒฎ, แƒแƒ›แƒ˜แƒก แƒกแƒ˜แƒ แƒชแƒฎแƒ•แƒ˜แƒšแƒ˜แƒ, แƒ›แƒแƒ’แƒ แƒแƒ› แƒแƒกแƒ” แƒ—แƒฃ แƒ˜แƒกแƒ”, แƒ“แƒแƒ‘แƒ แƒ™แƒแƒšแƒ”แƒ‘แƒ แƒ“แƒ แƒ™แƒ•แƒœแƒ”แƒกแƒ, แƒฉแƒ”แƒ›แƒ˜ PoC แƒ’แƒšแƒแƒ‘แƒแƒšแƒฃแƒ แƒ˜ แƒชแƒ•แƒšแƒแƒ“แƒ”แƒ‘แƒ˜แƒ— แƒ›แƒแƒ˜แƒœแƒช แƒจแƒ”แƒ•แƒ˜แƒ“แƒ แƒฌแƒแƒ แƒ›แƒแƒ”แƒ‘แƒแƒจแƒ˜ แƒ“แƒ แƒกแƒแƒ™แƒ›แƒแƒแƒ“ แƒฌแƒแƒ แƒ›แƒแƒขแƒ”แƒ‘แƒ˜แƒ— แƒ›แƒฃแƒจแƒแƒแƒ‘แƒก, แƒกแƒแƒœแƒแƒ› แƒ”แƒšแƒแƒ“แƒ”แƒ‘แƒ แƒแƒฎแƒแƒš โ€žแƒแƒ แƒ™แƒ•แƒแƒœแƒซแƒ˜แƒแƒœโ€œ แƒแƒ แƒฅแƒ˜แƒขแƒ”แƒฅแƒขแƒฃแƒ แƒแƒ–แƒ” แƒ’แƒแƒ“แƒแƒกแƒ•แƒšแƒแƒก. แƒ”แƒก แƒ›แƒœแƒ˜แƒจแƒ•แƒœแƒ”แƒšแƒแƒ•แƒแƒœแƒ˜ แƒœแƒแƒ‘แƒ˜แƒฏแƒ˜ แƒ˜แƒงแƒ, แƒ แƒแƒ“แƒ’แƒแƒœ แƒคแƒแƒ แƒ›แƒแƒšแƒฃแƒ แƒแƒ“ แƒ›แƒ˜แƒ–แƒแƒœแƒ˜ แƒ›แƒ˜แƒฆแƒฌแƒ”แƒฃแƒšแƒ˜ แƒ˜แƒงแƒ - SSR-แƒ› แƒ˜แƒกแƒฌแƒแƒ•แƒšแƒ แƒกแƒ แƒฃแƒšแƒ˜แƒแƒ“ แƒ›แƒ–แƒ แƒ’แƒ•แƒ”แƒ แƒ“แƒ˜แƒก แƒ›แƒ˜แƒฌแƒแƒ“แƒ”แƒ‘แƒ แƒ“แƒ UI แƒ’แƒแƒฎแƒ“แƒ แƒ‘แƒ”แƒ•แƒ แƒแƒ“ แƒฃแƒคแƒ แƒ แƒ›แƒจแƒ•แƒ˜แƒ“แƒ˜.

Habr front-end แƒ“แƒ”แƒ•แƒ”แƒšแƒแƒžแƒ”แƒ แƒ”แƒ‘แƒ˜แƒก แƒŸแƒฃแƒ แƒœแƒแƒšแƒ”แƒ‘แƒ˜: refactoring แƒ“แƒ แƒแƒกแƒแƒฎแƒ•แƒแƒ›แƒแƒ‘แƒ˜แƒšแƒฃแƒ แƒ˜ Habr แƒ˜แƒœแƒขแƒ”แƒ แƒคแƒ”แƒ˜แƒกแƒ˜ แƒ แƒ”แƒคแƒแƒฅแƒขแƒแƒ แƒ˜แƒ แƒ”แƒ‘แƒ˜แƒก แƒžแƒ˜แƒ แƒ•แƒ”แƒšแƒ˜ แƒ”แƒขแƒแƒžแƒ˜แƒก แƒจแƒ”แƒ›แƒ“แƒ”แƒ’

แƒกแƒแƒ‘แƒแƒšแƒแƒ แƒฏแƒแƒ›แƒจแƒ˜, แƒ›แƒแƒ‘แƒ˜แƒšแƒฃแƒ แƒ˜ แƒ•แƒ”แƒ แƒกแƒ˜แƒ˜แƒก SSR-CSR แƒแƒ แƒฅแƒ˜แƒขแƒ”แƒฅแƒขแƒฃแƒ แƒ แƒ˜แƒฌแƒ•แƒ”แƒ•แƒก แƒแƒ› แƒกแƒฃแƒ แƒแƒ—แƒก:

๏ฟผHabr front-end แƒ“แƒ”แƒ•แƒ”แƒšแƒแƒžแƒ”แƒ แƒ”แƒ‘แƒ˜แƒก แƒŸแƒฃแƒ แƒœแƒแƒšแƒ”แƒ‘แƒ˜: refactoring แƒ“แƒ แƒแƒกแƒแƒฎแƒ•แƒ"แƒแƒ แƒ˜ แƒ™แƒ•แƒแƒœแƒซแƒ˜แƒก" SSR-CSR แƒฌแƒ แƒ”. Node JS API แƒงแƒแƒ•แƒ”แƒšแƒ—แƒ•แƒ˜แƒก แƒ›แƒ–แƒแƒ“ แƒแƒ แƒ˜แƒก แƒแƒกแƒ˜แƒœแƒฅแƒ แƒแƒœแƒฃแƒšแƒ˜ I/O-แƒกแƒ—แƒ•แƒ˜แƒก แƒ“แƒ แƒแƒ  แƒแƒ แƒ˜แƒก แƒ“แƒแƒ‘แƒšแƒแƒ™แƒ˜แƒšแƒ˜ SSR แƒคแƒฃแƒœแƒฅแƒชแƒ˜แƒ˜แƒ—, แƒ แƒแƒ“แƒ’แƒแƒœ แƒ”แƒก แƒฃแƒ™แƒแƒœแƒแƒกแƒ™แƒœแƒ”แƒšแƒ˜ แƒ’แƒแƒœแƒšแƒแƒ’แƒ”แƒ‘แƒฃแƒšแƒ˜แƒ แƒชแƒแƒšแƒ™แƒ”แƒฃแƒš แƒ˜แƒœแƒกแƒขแƒแƒœแƒชแƒ˜แƒแƒจแƒ˜. แƒจแƒ”แƒ™แƒ˜แƒ—แƒฎแƒ•แƒ˜แƒก แƒฏแƒแƒญแƒ•แƒ˜ #3 แƒแƒ  แƒแƒ แƒ˜แƒก แƒกแƒแƒญแƒ˜แƒ แƒ.

แƒ“แƒฃแƒ‘แƒšแƒ˜แƒ™แƒแƒขแƒ˜ แƒ›แƒแƒ—แƒฎแƒแƒ•แƒœแƒ”แƒ‘แƒ˜แƒก แƒแƒฆแƒ›แƒแƒคแƒฎแƒ•แƒ แƒ

แƒ›แƒแƒœแƒ˜แƒžแƒฃแƒšแƒแƒชแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒฉแƒแƒขแƒแƒ แƒ”แƒ‘แƒ˜แƒก แƒจแƒ”แƒ›แƒ“แƒ”แƒ’ แƒ’แƒ•แƒ”แƒ แƒ“แƒ˜แƒก แƒ—แƒแƒ•แƒ“แƒแƒžแƒ˜แƒ แƒ•แƒ”แƒšแƒ›แƒ แƒ แƒ”แƒœแƒ“แƒ”แƒ แƒ›แƒ แƒ”แƒžแƒ˜แƒšแƒ”แƒคแƒกแƒ˜แƒ˜แƒก แƒžแƒ แƒแƒ•แƒแƒชแƒ˜แƒ แƒ”แƒ‘แƒ แƒแƒฆแƒแƒ  แƒ’แƒแƒ›แƒแƒ˜แƒฌแƒ•แƒ˜แƒ. แƒ›แƒแƒ’แƒ แƒแƒ› Habr-แƒ˜แƒก แƒจแƒ”แƒ›แƒ“แƒ’แƒแƒ›แƒ›แƒ แƒ’แƒแƒ›แƒแƒงแƒ”แƒœแƒ”แƒ‘แƒแƒ› SPA แƒ แƒ”แƒŸแƒ˜แƒ›แƒจแƒ˜ แƒ›แƒแƒ˜แƒœแƒช แƒ’แƒแƒ›แƒแƒ˜แƒฌแƒ•แƒ˜แƒ แƒ“แƒแƒ‘แƒœแƒ”แƒฃแƒšแƒแƒ‘แƒ.

แƒ•แƒ˜แƒœแƒแƒ˜แƒ“แƒแƒœ แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒšแƒ˜แƒก แƒœแƒแƒ™แƒแƒ“แƒ˜แƒก แƒกแƒแƒคแƒฃแƒซแƒ•แƒ”แƒšแƒ˜แƒ แƒคแƒแƒ แƒ›แƒ˜แƒก แƒ’แƒแƒ“แƒแƒกแƒ•แƒšแƒ”แƒ‘แƒ˜ แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒกแƒ˜แƒ โ†’ แƒกแƒขแƒแƒขแƒ˜แƒ โ†’ แƒ™แƒแƒ›แƒ”แƒœแƒขแƒแƒ แƒ”แƒ‘แƒ˜ แƒ“แƒ แƒžแƒ˜แƒ แƒ˜แƒฅแƒ˜แƒ—, แƒžแƒ˜แƒ แƒ•แƒ”แƒš แƒ แƒ˜แƒ’แƒจแƒ˜ แƒ›แƒœแƒ˜แƒจแƒ•แƒœแƒ”แƒšแƒแƒ•แƒแƒœแƒ˜ แƒ˜แƒงแƒ แƒแƒ› แƒฏแƒแƒญแƒ•แƒ˜แƒก แƒ แƒ”แƒกแƒฃแƒ แƒกแƒ”แƒ‘แƒ˜แƒก แƒ›แƒแƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒ˜แƒก แƒแƒžแƒขแƒ˜แƒ›แƒ˜แƒ–แƒแƒชแƒ˜แƒ.

Habr front-end แƒ“แƒ”แƒ•แƒ”แƒšแƒแƒžแƒ”แƒ แƒ”แƒ‘แƒ˜แƒก แƒŸแƒฃแƒ แƒœแƒแƒšแƒ”แƒ‘แƒ˜: refactoring แƒ“แƒ แƒแƒกแƒแƒฎแƒ•แƒแƒžแƒแƒกแƒขแƒ˜แƒก แƒแƒ แƒฎแƒ–แƒ” แƒ“แƒแƒ‘แƒ แƒฃแƒœแƒ”แƒ‘แƒ แƒ˜แƒฌแƒ•แƒ”แƒ•แƒก แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ—แƒ แƒแƒฎแƒแƒšแƒ˜ แƒ›แƒแƒ—แƒฎแƒแƒ•แƒœแƒ˜แƒก แƒžแƒ แƒแƒ•แƒแƒชแƒ˜แƒ แƒ”แƒ‘แƒแƒก

แƒแƒ  แƒ˜แƒงแƒ แƒกแƒแƒญแƒ˜แƒ แƒ แƒฆแƒ แƒ›แƒ แƒ—แƒฎแƒ แƒ. แƒ–แƒ”แƒ›แƒแƒ— แƒ›แƒแƒงแƒ•แƒแƒœแƒ˜แƒš แƒกแƒ™แƒ แƒ˜แƒœแƒ™แƒแƒกแƒขแƒจแƒ˜ แƒฎแƒ”แƒ“แƒแƒ•แƒ—, แƒ แƒแƒ› แƒแƒžแƒšแƒ˜แƒ™แƒแƒชแƒ˜แƒ แƒฎแƒ”แƒšแƒแƒฎแƒšแƒ แƒ˜แƒ—แƒฎแƒแƒ•แƒก แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒกแƒ˜แƒแƒก แƒฃแƒ™แƒแƒœ แƒ’แƒแƒ“แƒแƒกแƒ•แƒšแƒ˜แƒกแƒแƒก แƒ“แƒ แƒ›แƒแƒ—แƒฎแƒแƒ•แƒœแƒ˜แƒกแƒแƒก แƒฉแƒ•แƒ”แƒœ แƒ•แƒ”แƒ  แƒ•แƒฎแƒ”แƒ“แƒแƒ•แƒ— แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒก, แƒ แƒแƒช แƒœแƒ˜แƒจแƒœแƒแƒ•แƒก, แƒ แƒแƒ› แƒฌแƒ˜แƒœแƒ แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜ แƒกแƒแƒ“แƒฆแƒแƒช แƒฅแƒ แƒ”แƒ‘แƒ. แƒ แƒแƒ’แƒแƒ แƒช แƒฉแƒแƒœแƒก, แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒกแƒ˜แƒ˜แƒก แƒ™แƒแƒ›แƒžแƒแƒœแƒ”แƒœแƒขแƒ˜ แƒ˜แƒงแƒ”แƒœแƒ”แƒ‘แƒก แƒšแƒแƒ™แƒแƒšแƒฃแƒ  แƒ›แƒ“แƒ’แƒแƒ›แƒแƒ แƒ”แƒแƒ‘แƒแƒก แƒ“แƒ แƒ™แƒแƒ แƒ’แƒแƒ•แƒก แƒ›แƒแƒก แƒ’แƒแƒœแƒแƒ“แƒ’แƒฃแƒ แƒ”แƒ‘แƒ˜แƒกแƒแƒก. แƒคแƒแƒฅแƒขแƒแƒ‘แƒ แƒ˜แƒ•แƒแƒ“, แƒแƒžแƒšแƒ˜แƒ™แƒแƒชแƒ˜แƒ แƒ˜แƒงแƒ”แƒœแƒ”แƒ‘แƒ“แƒ แƒ’แƒšแƒแƒ‘แƒแƒšแƒฃแƒ  แƒ›แƒ“แƒ’แƒแƒ›แƒแƒ แƒ”แƒแƒ‘แƒแƒก, แƒ›แƒแƒ’แƒ แƒแƒ› Vuex แƒแƒ แƒฅแƒ˜แƒขแƒ”แƒฅแƒขแƒฃแƒ แƒ แƒแƒจแƒ”แƒœแƒ“แƒ แƒžแƒ˜แƒ แƒ“แƒแƒžแƒ˜แƒ : แƒ›แƒแƒ“แƒฃแƒšแƒ”แƒ‘แƒ˜ แƒ›แƒ˜แƒ‘แƒ›แƒฃแƒšแƒ˜ แƒ˜แƒงแƒ แƒ’แƒ•แƒ”แƒ แƒ“แƒ”แƒ‘แƒ–แƒ”, แƒ แƒแƒ›แƒšแƒ”แƒ‘แƒ˜แƒช, แƒ—แƒแƒ•แƒ˜แƒก แƒ›แƒฎแƒ แƒ˜แƒ•, แƒ›แƒ˜แƒ‘แƒ›แƒฃแƒšแƒ˜แƒ แƒ›แƒแƒ แƒจแƒ แƒฃแƒขแƒ”แƒ‘แƒ—แƒแƒœ. แƒฃแƒคแƒ แƒ แƒ›แƒ”แƒขแƒ˜แƒช, แƒงแƒ•แƒ”แƒšแƒ แƒ›แƒแƒ“แƒฃแƒšแƒ˜ แƒแƒ แƒ˜แƒก "แƒ”แƒ แƒ—แƒฏแƒ”แƒ แƒแƒ“แƒ˜" - แƒ’แƒ•แƒ”แƒ แƒ“แƒ–แƒ” แƒงแƒแƒ•แƒ”แƒšแƒ˜ แƒ›แƒแƒ›แƒ“แƒ”แƒ•แƒœแƒ แƒ•แƒ˜แƒ–แƒ˜แƒขแƒ˜ แƒ’แƒแƒ“แƒแƒฌแƒ”แƒ แƒก แƒ›แƒ—แƒ”แƒš แƒ›แƒแƒ“แƒฃแƒšแƒก:

ArticlesList: [
  { Article1 },
  ...
],
PageArticle: { ArticleFull1 },

แƒกแƒแƒ”แƒ แƒ—แƒ แƒฏแƒแƒ›แƒจแƒ˜, แƒฉแƒ•แƒ”แƒœ แƒ’แƒ•แƒฅแƒแƒœแƒ“แƒ แƒ›แƒแƒ“แƒฃแƒšแƒ˜ แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒกแƒ˜แƒ, แƒ แƒแƒ›แƒ”แƒšแƒ˜แƒช แƒจแƒ”แƒ˜แƒชแƒแƒ•แƒก แƒขแƒ˜แƒžแƒ˜แƒก แƒแƒ‘แƒ˜แƒ”แƒฅแƒขแƒ”แƒ‘แƒก แƒ›แƒฃแƒฎแƒšแƒ˜ แƒ“แƒ แƒ›แƒแƒ“แƒฃแƒšแƒ˜ PageArticle, แƒ แƒแƒ›แƒ”แƒšแƒ˜แƒช แƒ˜แƒงแƒ แƒแƒ‘แƒ˜แƒ”แƒฅแƒขแƒ˜แƒก แƒ’แƒแƒคแƒแƒ แƒ—แƒแƒ”แƒ‘แƒฃแƒšแƒ˜ แƒ•แƒ”แƒ แƒกแƒ˜แƒ แƒ›แƒฃแƒฎแƒšแƒ˜, แƒกแƒแƒฎแƒ˜แƒก แƒกแƒขแƒแƒขแƒ˜แƒ แƒกแƒ แƒฃแƒšแƒ˜. แƒ–แƒแƒ’แƒแƒ“แƒแƒ“, แƒ”แƒก แƒ’แƒแƒœแƒฎแƒแƒ แƒชแƒ˜แƒ”แƒšแƒ”แƒ‘แƒ แƒ—แƒแƒ•แƒ˜แƒกแƒ—แƒแƒ•แƒแƒ“ แƒกแƒแƒจแƒ˜แƒœแƒ”แƒšแƒ”แƒ‘แƒแƒก แƒแƒ  แƒจแƒ”แƒ˜แƒชแƒแƒ•แƒก - แƒ˜แƒก แƒซแƒแƒšแƒ˜แƒแƒœ แƒ›แƒแƒ แƒขแƒ˜แƒ•แƒ˜แƒ, แƒจแƒ”แƒ˜แƒซแƒšแƒ”แƒ‘แƒ แƒ˜แƒ—แƒฅแƒ•แƒแƒก แƒ’แƒฃแƒšแƒฃแƒ‘แƒ แƒงแƒ•แƒ˜แƒšแƒ, แƒ›แƒแƒ’แƒ แƒแƒ› แƒฃแƒ™แƒ˜แƒ“แƒฃแƒ แƒ”แƒกแƒแƒ“ แƒ’แƒแƒกแƒแƒ’แƒ”แƒ‘แƒ˜. แƒ—แƒฃ แƒ›แƒแƒ แƒจแƒ แƒฃแƒขแƒ˜แƒก แƒจแƒ”แƒชแƒ•แƒšแƒ˜แƒกแƒแƒก แƒ›แƒแƒ“แƒฃแƒšแƒก แƒ’แƒแƒ“แƒแƒขแƒ•แƒ˜แƒ แƒ—แƒแƒ•แƒ—, แƒ›แƒแƒจแƒ˜แƒœ แƒ›แƒแƒกแƒ—แƒแƒœ แƒ”แƒ แƒ—แƒแƒ“ แƒชแƒฎแƒแƒ•แƒ แƒ”แƒ‘แƒแƒช แƒ™แƒ˜ แƒจแƒ”แƒ’แƒ˜แƒซแƒšแƒ˜แƒแƒ—. แƒ—แƒฃแƒ›แƒชแƒ, แƒ›แƒแƒ’แƒแƒšแƒ˜แƒ—แƒแƒ“, แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒแƒ แƒฎแƒ”แƒ‘แƒก แƒจแƒแƒ แƒ˜แƒก แƒ’แƒแƒ“แƒแƒแƒ“แƒ’แƒ˜แƒšแƒ”แƒ‘แƒ /แƒ™แƒ•แƒ”แƒ‘แƒ โ†’ /แƒงแƒ•แƒ”แƒšแƒ, แƒ’แƒแƒ แƒแƒœแƒขแƒ˜แƒ แƒ”แƒ‘แƒฃแƒšแƒ˜แƒ แƒ’แƒแƒ“แƒแƒงแƒแƒ แƒ”แƒ— แƒงแƒ•แƒ”แƒšแƒแƒคแƒ”แƒ แƒ˜, แƒ แƒแƒช แƒžแƒ˜แƒ แƒแƒ“ แƒ™แƒ•แƒ”แƒ‘แƒแƒกแƒ—แƒแƒœ แƒแƒ แƒ˜แƒก แƒ“แƒแƒ™แƒแƒ•แƒจแƒ˜แƒ แƒ”แƒ‘แƒฃแƒšแƒ˜, แƒ แƒแƒ“แƒ’แƒแƒœ แƒฉแƒ•แƒ”แƒœ แƒ›แƒฎแƒแƒšแƒแƒ“ แƒ”แƒ แƒ—แƒ˜ แƒ’แƒ•แƒแƒฅแƒ•แƒก แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒกแƒ˜แƒ, แƒ แƒแƒ›แƒ”แƒšแƒจแƒ˜แƒช แƒกแƒแƒญแƒ˜แƒ แƒแƒ แƒแƒฎแƒแƒšแƒ˜ แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜แƒก แƒฉแƒแƒกแƒ›แƒ. แƒ”แƒก แƒ™แƒ•แƒšแƒแƒ• แƒ›แƒ˜แƒ’แƒ•แƒ˜แƒงแƒ•แƒแƒœแƒก แƒ›แƒแƒ—แƒฎแƒแƒ•แƒœแƒ”แƒ‘แƒ˜แƒก แƒ’แƒแƒแƒ แƒ›แƒแƒ’แƒ”แƒ‘แƒแƒ›แƒ“แƒ”.

แƒจแƒ”แƒ•แƒแƒ’แƒ แƒแƒ•แƒ” แƒงแƒ•แƒ”แƒšแƒแƒคแƒ”แƒ แƒ˜, แƒ แƒ˜แƒกแƒ˜ แƒ’แƒแƒ—แƒฎแƒ แƒแƒช แƒ›แƒแƒ•แƒแƒฎแƒ”แƒ แƒฎแƒ” แƒแƒ› แƒ—แƒ”แƒ›แƒแƒ–แƒ”, แƒฉแƒแƒ›แƒแƒ•แƒแƒงแƒแƒšแƒ˜แƒ‘แƒ” แƒแƒฎแƒแƒšแƒ˜ แƒกแƒแƒฎแƒ”แƒšแƒ›แƒฌแƒ˜แƒคแƒ แƒกแƒขแƒ แƒฃแƒฅแƒขแƒฃแƒ แƒ แƒ“แƒ แƒฌแƒแƒ แƒ•แƒฃแƒ“แƒ’แƒ˜แƒœแƒ” แƒฉแƒ”แƒ›แƒก แƒ™แƒแƒšแƒ”แƒ’แƒ”แƒ‘แƒก. แƒ“แƒ˜แƒกแƒ™แƒฃแƒกแƒ˜แƒ”แƒ‘แƒ˜ แƒฎแƒแƒœแƒ’แƒ แƒซแƒšแƒ˜แƒ•แƒ˜ แƒ˜แƒงแƒ, แƒ›แƒแƒ’แƒ แƒแƒ› แƒกแƒแƒ‘แƒแƒšแƒแƒแƒ“ แƒกแƒแƒกแƒแƒ แƒ’แƒ”แƒ‘แƒšแƒ แƒแƒ แƒ’แƒฃแƒ›แƒ”แƒœแƒขแƒ”แƒ‘แƒ›แƒ แƒ’แƒแƒ“แƒแƒฌแƒแƒœแƒ แƒ”แƒญแƒ•แƒ”แƒ‘แƒ˜ แƒ“แƒ แƒ“แƒแƒ•แƒ˜แƒฌแƒงแƒ” แƒ’แƒแƒœแƒฎแƒแƒ แƒชแƒ˜แƒ”แƒšแƒ”แƒ‘แƒ.

แƒแƒ›แƒแƒฎแƒกแƒœแƒ˜แƒก แƒšแƒแƒ’แƒ˜แƒ™แƒ แƒกแƒแƒฃแƒ™แƒ”แƒ—แƒ”แƒกแƒแƒ“ แƒ•แƒšแƒ˜แƒœแƒ“แƒ”แƒ‘แƒ แƒแƒ  แƒœแƒแƒ‘แƒ˜แƒฏแƒจแƒ˜. แƒžแƒ˜แƒ แƒ•แƒ”แƒš แƒ แƒ˜แƒ’แƒจแƒ˜, แƒฉแƒ•แƒ”แƒœ แƒ•แƒชแƒ“แƒ˜แƒšแƒแƒ‘แƒ— Vuex แƒ›แƒแƒ“แƒฃแƒšแƒ˜แƒก แƒ’แƒแƒ›แƒแƒงแƒแƒคแƒแƒก แƒ’แƒ•แƒ”แƒ แƒ“แƒ”แƒ‘แƒ˜แƒ“แƒแƒœ แƒ“แƒ แƒžแƒ˜แƒ แƒ“แƒแƒžแƒ˜แƒ  แƒ›แƒแƒ แƒจแƒ แƒฃแƒขแƒ”แƒ‘แƒ—แƒแƒœ แƒ“แƒแƒ™แƒแƒ•แƒจแƒ˜แƒ แƒ”แƒ‘แƒแƒก. แƒ“แƒ˜แƒแƒฎ, แƒ›แƒแƒฆแƒแƒ–แƒ˜แƒแƒจแƒ˜ แƒชแƒแƒขแƒ แƒ›แƒ”แƒขแƒ˜ แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ˜ แƒ˜แƒฅแƒœแƒ”แƒ‘แƒ, แƒ›แƒ˜แƒ›แƒฆแƒ”แƒ‘แƒ”แƒ‘แƒ˜ แƒชแƒแƒขแƒ แƒฃแƒคแƒ แƒ แƒ แƒ—แƒฃแƒšแƒ˜ แƒ’แƒแƒฎแƒ“แƒ”แƒ‘แƒ, แƒ›แƒแƒ’แƒ แƒแƒ› แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒก แƒแƒ แƒฏแƒ”แƒ  แƒแƒ  แƒฉแƒแƒ•แƒขแƒ•แƒ˜แƒ แƒ—แƒแƒ•แƒ—. แƒ›แƒแƒ‘แƒ˜แƒšแƒฃแƒ แƒ˜ แƒ•แƒ”แƒ แƒกแƒ˜แƒ˜แƒกแƒ—แƒ•แƒ˜แƒก, แƒ”แƒก แƒแƒšแƒ‘แƒแƒ— แƒงแƒ•แƒ”แƒšแƒแƒ–แƒ” แƒซแƒšแƒ˜แƒ”แƒ แƒ˜ แƒแƒ แƒ’แƒฃแƒ›แƒ”แƒœแƒขแƒ˜แƒ. แƒ”แƒก แƒ“แƒแƒแƒฎแƒšแƒแƒ”แƒ‘แƒ˜แƒ— แƒแƒกแƒ” แƒ’แƒแƒ›แƒแƒ˜แƒงแƒฃแƒ แƒ”แƒ‘แƒ:

ArticlesList: {
  ROUTE_FEED: [ 
    { Article1 },
    ...
  ],
  ROUTE_ALL: [ 
    { Article2 },
    ...
  ],
}

แƒ›แƒแƒ’แƒ แƒแƒ› แƒ แƒ แƒ›แƒแƒฎแƒ“แƒ”แƒ‘แƒ, แƒ—แƒฃ แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒกแƒ˜แƒ”แƒ‘แƒ˜ แƒจแƒ”แƒ˜แƒซแƒšแƒ”แƒ‘แƒ แƒ’แƒแƒ“แƒแƒคแƒแƒ แƒ“แƒ”แƒก แƒ›แƒ แƒแƒ•แƒแƒš แƒ›แƒแƒ แƒจแƒ แƒฃแƒขแƒก แƒจแƒแƒ แƒ˜แƒก แƒ“แƒ แƒ แƒ แƒ›แƒแƒฎแƒ“แƒ”แƒ‘แƒ, แƒ—แƒฃ แƒฉแƒ•แƒ”แƒœ แƒ’แƒ•แƒ˜แƒœแƒ“แƒ แƒฎแƒ”แƒšแƒแƒฎแƒšแƒ แƒ’แƒแƒ›แƒแƒ•แƒ˜แƒงแƒ”แƒœแƒแƒ— แƒแƒ‘แƒ˜แƒ”แƒฅแƒขแƒ˜แƒก แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜ แƒ›แƒฃแƒฎแƒšแƒ˜ แƒžแƒแƒกแƒขแƒ˜แƒก แƒ’แƒ•แƒ”แƒ แƒ“แƒ˜แƒก แƒ’แƒแƒกแƒแƒคแƒแƒ แƒ›แƒ”แƒ‘แƒšแƒแƒ“, แƒ›แƒ˜แƒก แƒ’แƒแƒ“แƒแƒฅแƒชแƒ”แƒ•แƒแƒ“ แƒกแƒขแƒแƒขแƒ˜แƒ แƒกแƒ แƒฃแƒšแƒ˜? แƒแƒ› แƒจแƒ”แƒ›แƒ—แƒฎแƒ•แƒ”แƒ•แƒแƒจแƒ˜, แƒฃแƒคแƒ แƒ แƒšแƒแƒ’แƒ˜แƒ™แƒฃแƒ แƒ˜ แƒ˜แƒฅแƒœแƒ”แƒ‘แƒ แƒแƒกแƒ”แƒ—แƒ˜ แƒกแƒขแƒ แƒฃแƒฅแƒขแƒฃแƒ แƒ˜แƒก แƒ’แƒแƒ›แƒแƒงแƒ”แƒœแƒ”แƒ‘แƒ:

ArticlesIds: {
  ROUTE_FEED: [ '1', ... ],
  ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
  '1': { Article1 }, 
  '2': { Article2 },
  ...
}

แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒกแƒ˜แƒ แƒแƒฅ แƒ”แƒก แƒ›แƒฎแƒแƒšแƒแƒ“ แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒ”แƒ แƒ—แƒ’แƒ•แƒแƒ แƒ˜ แƒกแƒแƒชแƒแƒ•แƒ˜แƒ. แƒงแƒ•แƒ”แƒšแƒ แƒกแƒขแƒแƒขแƒ˜แƒ, แƒ แƒแƒ›แƒ”แƒšแƒ˜แƒช แƒ’แƒแƒ“แƒ›แƒแƒฌแƒ”แƒ แƒ˜แƒšแƒ˜ แƒ˜แƒงแƒ แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒšแƒ˜แƒก แƒกแƒ”แƒกแƒ˜แƒ˜แƒก แƒ“แƒ แƒแƒก. แƒฉแƒ•แƒ”แƒœ แƒ›แƒแƒ— แƒ’แƒแƒœแƒกแƒแƒ™แƒฃแƒ—แƒ แƒ”แƒ‘แƒฃแƒšแƒ˜ แƒกแƒ˜แƒคแƒ แƒ—แƒฎแƒ˜แƒšแƒ˜แƒ— แƒ•แƒ”แƒžแƒงแƒ แƒแƒ‘แƒ˜แƒ—, แƒ แƒแƒ“แƒ’แƒแƒœ แƒ”แƒก แƒแƒ แƒ˜แƒก แƒขแƒ แƒแƒคแƒ˜แƒ™แƒ˜, แƒ แƒแƒ›แƒ”แƒšแƒ˜แƒช แƒจแƒ”แƒ˜แƒซแƒšแƒ”แƒ‘แƒ แƒ’แƒแƒ“แƒ›แƒแƒฌแƒ”แƒ แƒ˜แƒšแƒ˜ แƒ˜แƒงแƒแƒก แƒขแƒ™แƒ˜แƒ•แƒ˜แƒšแƒ˜แƒ— แƒกแƒแƒ“แƒฆแƒแƒช แƒ›แƒ”แƒขแƒ แƒแƒจแƒ˜ แƒกแƒแƒ“แƒ’แƒฃแƒ แƒ”แƒ‘แƒก แƒจแƒแƒ แƒ˜แƒก, แƒ“แƒ แƒฉแƒ•แƒ”แƒœ แƒœแƒแƒ›แƒ“แƒ•แƒ˜แƒšแƒแƒ“ แƒแƒ  แƒ’แƒ•แƒ˜แƒœแƒ“แƒ, แƒ แƒแƒ› แƒ”แƒก แƒขแƒ™แƒ˜แƒ•แƒ˜แƒšแƒ˜ แƒ™แƒ˜แƒ“แƒ”แƒ• แƒ”แƒ แƒ—แƒฎแƒ”แƒš แƒ›แƒ˜แƒ•แƒชแƒ”แƒ— แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒ”แƒšแƒก แƒ˜แƒ›แƒ˜แƒ—, แƒ แƒแƒ› แƒ•แƒแƒ˜แƒซแƒฃแƒšแƒแƒ— แƒฉแƒแƒขแƒ•แƒ˜แƒ แƒ—แƒแƒก แƒ˜แƒก แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜, แƒ แƒแƒ›แƒšแƒ”แƒ‘แƒ˜แƒช แƒ›แƒแƒก แƒฃแƒ™แƒ•แƒ” แƒแƒฅแƒ•แƒก. แƒ’แƒแƒ“แƒ›แƒแƒฌแƒ”แƒ แƒ˜แƒšแƒ˜. แฒกแƒแƒ’แƒแƒœแƒ˜ แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก ID แƒฃแƒ‘แƒ แƒแƒšแƒแƒ“ แƒแƒ แƒ˜แƒก ID-แƒ”แƒ‘แƒ˜แƒก แƒ›แƒแƒกแƒ˜แƒ•แƒ˜ (แƒ—แƒ˜แƒ—แƒฅแƒแƒก โ€žแƒ‘แƒ›แƒฃแƒšแƒ”แƒ‘แƒ˜โ€œ) แƒแƒ‘แƒ˜แƒ”แƒฅแƒขแƒ”แƒ‘แƒ—แƒแƒœ แƒ›แƒฃแƒฎแƒšแƒ˜. แƒ”แƒก แƒกแƒขแƒ แƒฃแƒฅแƒขแƒฃแƒ แƒ แƒกแƒแƒจแƒฃแƒแƒšแƒ”แƒ‘แƒแƒก แƒ’แƒแƒซแƒšแƒ”แƒ•แƒ— แƒ—แƒแƒ•แƒ˜แƒ“แƒแƒœ แƒแƒ˜แƒชแƒ˜แƒšแƒแƒ— แƒ›แƒแƒ แƒจแƒ แƒฃแƒขแƒ”แƒ‘แƒ˜แƒก แƒกแƒแƒ”แƒ แƒ—แƒ แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜แƒก แƒ“แƒฃแƒ‘แƒšแƒ˜แƒ แƒ”แƒ‘แƒ แƒ“แƒ แƒแƒ‘แƒ˜แƒ”แƒฅแƒขแƒ˜แƒก แƒฎแƒ”แƒšแƒแƒฎแƒšแƒ แƒ’แƒแƒ›แƒแƒงแƒ”แƒœแƒ”แƒ‘แƒ แƒ›แƒฃแƒฎแƒšแƒ˜ แƒžแƒแƒกแƒขแƒ˜แƒก แƒ’แƒ•แƒ”แƒ แƒ“แƒ˜แƒก แƒ’แƒแƒคแƒแƒ แƒ›แƒ”แƒ‘แƒ˜แƒกแƒแƒก แƒ›แƒแƒกแƒจแƒ˜ แƒ’แƒแƒคแƒแƒ แƒ—แƒแƒ”แƒ‘แƒฃแƒšแƒ˜ แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜แƒก แƒ’แƒแƒ”แƒ แƒ—แƒ˜แƒแƒœแƒ”แƒ‘แƒ˜แƒ—.

แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒกแƒ˜แƒ˜แƒก แƒ’แƒแƒ›แƒแƒ›แƒแƒ•แƒแƒšแƒ˜ แƒแƒกแƒ”แƒ•แƒ” แƒ’แƒแƒฎแƒ“แƒ แƒฃแƒคแƒ แƒ แƒ’แƒแƒ›แƒญแƒ•แƒ˜แƒ แƒ•แƒแƒšแƒ”: iterator แƒ™แƒแƒ›แƒžแƒแƒœแƒ”แƒœแƒขแƒ˜ แƒ˜แƒ›แƒ”แƒแƒ แƒ”แƒ‘แƒก แƒ›แƒแƒกแƒ˜แƒ•แƒ˜แƒก แƒ›แƒ”แƒจแƒ•แƒ”แƒแƒ‘แƒ˜แƒ— แƒกแƒขแƒแƒขแƒ˜แƒ˜แƒก ID-แƒ”แƒ‘แƒ˜แƒ— แƒ“แƒ แƒฎแƒแƒขแƒแƒ•แƒก แƒกแƒขแƒแƒขแƒ˜แƒ˜แƒก teaser แƒ™แƒแƒ›แƒžแƒแƒœแƒ”แƒœแƒขแƒก, แƒ’แƒแƒ“แƒแƒกแƒชแƒ”แƒ›แƒก Id-แƒก แƒกแƒแƒงแƒ แƒ“แƒ”แƒœแƒแƒ“, แƒฎแƒแƒšแƒ แƒจแƒ•แƒ˜แƒšแƒ˜ แƒ™แƒแƒ›แƒžแƒแƒœแƒ”แƒœแƒขแƒ˜, แƒ—แƒแƒ•แƒ˜แƒก แƒ›แƒฎแƒ แƒ˜แƒ•, แƒ˜แƒฆแƒ”แƒ‘แƒก แƒกแƒแƒญแƒ˜แƒ แƒ แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒก. แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒกแƒ˜แƒ. แƒ แƒแƒ“แƒ”แƒกแƒแƒช แƒ›แƒ˜แƒ“แƒ˜แƒฎแƒแƒ แƒ— แƒžแƒฃแƒ‘แƒšแƒ˜แƒ™แƒแƒชแƒ˜แƒ˜แƒก แƒ’แƒ•แƒ”แƒ แƒ“แƒ–แƒ”, แƒ•แƒ˜แƒฆแƒ”แƒ‘แƒ— แƒฃแƒ™แƒ•แƒ” แƒแƒ แƒกแƒ”แƒ‘แƒฃแƒš แƒ—แƒแƒ แƒ˜แƒฆแƒก แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒกแƒ˜แƒ, แƒ•แƒ—แƒฎแƒแƒ•แƒ— แƒ’แƒแƒ›แƒแƒขแƒแƒ•แƒ”แƒ‘แƒฃแƒšแƒ˜ แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜แƒก แƒ›แƒแƒžแƒแƒ•แƒ”แƒ‘แƒแƒก แƒ“แƒ แƒฃแƒ‘แƒ แƒแƒšแƒแƒ“ แƒ“แƒแƒ•แƒแƒ›แƒแƒขแƒ”แƒ‘แƒ— แƒแƒ แƒกแƒ”แƒ‘แƒฃแƒš แƒแƒ‘แƒ˜แƒ”แƒฅแƒขแƒก.

แƒ แƒแƒขแƒแƒ› แƒแƒ แƒ˜แƒก แƒ”แƒก แƒ›แƒ˜แƒ“แƒ’แƒแƒ›แƒ แƒฃแƒ™แƒ”แƒ—แƒ”แƒกแƒ˜? แƒ แƒแƒ’แƒแƒ แƒช แƒ–แƒ”แƒ›แƒแƒ— แƒ“แƒแƒ•แƒฌแƒ”แƒ แƒ”, แƒ”แƒก แƒ›แƒ˜แƒ“แƒ’แƒแƒ›แƒ แƒฃแƒคแƒ แƒ แƒœแƒแƒ–แƒ˜แƒ แƒ’แƒแƒ“แƒ›แƒแƒฌแƒ”แƒ แƒ˜แƒšแƒ˜ แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ”แƒ‘แƒ˜แƒก แƒ›แƒ˜แƒ›แƒแƒ แƒ— แƒ“แƒ แƒกแƒแƒจแƒฃแƒแƒšแƒ”แƒ‘แƒแƒก แƒ’แƒแƒซแƒšแƒ”แƒ•แƒ— แƒฎแƒ”แƒšแƒแƒฎแƒšแƒ แƒ’แƒแƒ›แƒแƒ˜แƒงแƒ”แƒœแƒแƒ— แƒ˜แƒ’แƒ˜. แƒ›แƒแƒ’แƒ แƒแƒ› แƒแƒ›แƒ˜แƒก แƒ’แƒแƒ แƒ“แƒ, แƒ˜แƒก แƒ’แƒ–แƒแƒก แƒฃแƒฎแƒกแƒœแƒ˜แƒก แƒแƒฎแƒแƒš แƒจแƒ”แƒกแƒแƒซแƒšแƒ”แƒ‘แƒšแƒแƒ‘แƒ”แƒ‘แƒก, แƒ แƒแƒ›แƒšแƒ”แƒ‘แƒ˜แƒช แƒจแƒ”แƒกแƒแƒœแƒ˜แƒจแƒœแƒแƒ•แƒแƒ“ แƒฏแƒ“แƒ”แƒ‘แƒ แƒแƒกแƒ”แƒ— แƒแƒ แƒฅแƒ˜แƒขแƒ”แƒฅแƒขแƒฃแƒ แƒแƒจแƒ˜. แƒ›แƒแƒ’แƒแƒšแƒ˜แƒ—แƒแƒ“, แƒ’แƒแƒ›แƒแƒ™แƒ˜แƒ—แƒฎแƒ•แƒ แƒ“แƒ แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒฉแƒแƒขแƒ•แƒ˜แƒ แƒ—แƒ•แƒ แƒแƒ แƒฎแƒจแƒ˜, แƒ แƒแƒ’แƒแƒ แƒช แƒ˜แƒกแƒ˜แƒœแƒ˜ แƒ’แƒแƒ›แƒแƒฉแƒœแƒ“แƒ”แƒ‘แƒ. แƒฉแƒ•แƒ”แƒœ แƒจแƒ”แƒ’แƒ•แƒ˜แƒซแƒšแƒ˜แƒ แƒฃแƒ‘แƒ แƒแƒšแƒแƒ“ แƒ’แƒแƒœแƒ•แƒแƒ—แƒแƒ•แƒกแƒแƒ— แƒฃแƒแƒฎแƒšแƒ”แƒกแƒ˜ แƒžแƒแƒกแƒขแƒ”แƒ‘แƒ˜ โ€žแƒกแƒแƒชแƒแƒ•แƒจแƒ˜โ€œ แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒกแƒ˜แƒแƒจแƒ”แƒ˜แƒœแƒแƒฎแƒ”แƒ— แƒแƒฎแƒแƒšแƒ˜ ID-แƒ”แƒ‘แƒ˜แƒก แƒชแƒแƒšแƒ™แƒ” แƒกแƒ˜แƒ แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก ID แƒ“แƒ แƒจแƒ”แƒแƒขแƒงแƒแƒ‘แƒ˜แƒœแƒ”แƒ— แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒ”แƒšแƒก แƒแƒ›แƒ˜แƒก แƒจแƒ”แƒกแƒแƒฎแƒ”แƒ‘. แƒ แƒแƒ“แƒ”แƒกแƒแƒช แƒ•แƒแƒฌแƒ™แƒแƒžแƒฃแƒœแƒ”แƒ‘แƒ— แƒฆแƒ˜แƒšแƒแƒ™แƒ–แƒ” โ€žแƒแƒฎแƒแƒšแƒ˜ แƒžแƒฃแƒ‘แƒšแƒ˜แƒ™แƒแƒชแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒฉแƒ•แƒ”แƒœแƒ”แƒ‘แƒโ€œ, แƒฉแƒ•แƒ”แƒœ แƒฃแƒ‘แƒ แƒแƒšแƒแƒ“ แƒฉแƒแƒ•แƒกแƒ•แƒ˜แƒ— แƒแƒฎแƒแƒšแƒ˜ ID-แƒ”แƒ‘แƒ˜ แƒกแƒขแƒแƒขแƒ˜แƒ”แƒ‘แƒ˜แƒก แƒ›แƒ˜แƒ›แƒ“แƒ˜แƒœแƒแƒ แƒ” แƒกแƒ˜แƒ˜แƒก แƒ›แƒแƒกแƒ˜แƒ•แƒ˜แƒก แƒ“แƒแƒกแƒแƒฌแƒงแƒ˜แƒกแƒจแƒ˜ แƒ“แƒ แƒงแƒ•แƒ”แƒšแƒแƒคแƒ”แƒ แƒ˜ แƒ—แƒ˜แƒ—แƒฅแƒ›แƒ˜แƒก แƒฏแƒแƒ“แƒแƒกแƒœแƒฃแƒ แƒแƒ“ แƒ˜แƒ›แƒฃแƒจแƒแƒ•แƒ”แƒ‘แƒก.

แƒฉแƒแƒ›แƒแƒขแƒ•แƒ˜แƒ แƒ—แƒ•แƒ แƒฃแƒคแƒ แƒ แƒกแƒแƒกแƒ˜แƒแƒ›แƒแƒ•แƒœแƒแƒก แƒ’แƒแƒฎแƒ“แƒ˜แƒก

แƒ แƒ”แƒคแƒแƒฅแƒขแƒแƒ แƒฃแƒšแƒ˜ แƒขแƒแƒ แƒขแƒ˜แƒก แƒ™แƒ”แƒ แƒซแƒ˜ แƒแƒ แƒ˜แƒก แƒฉแƒแƒœแƒฉแƒฎแƒ˜แƒก แƒ™แƒแƒœแƒชแƒ”แƒคแƒชแƒ˜แƒ, แƒ แƒแƒช แƒœแƒ”แƒšแƒ˜ แƒ˜แƒœแƒขแƒ”แƒ แƒœแƒ”แƒขแƒ˜แƒ— แƒจแƒ˜แƒœแƒแƒแƒ แƒกแƒ˜แƒก แƒฉแƒแƒ›แƒแƒขแƒ•แƒ˜แƒ แƒ—แƒ•แƒ˜แƒก แƒžแƒ แƒแƒชแƒ”แƒกแƒก แƒชแƒแƒขแƒ แƒœแƒแƒ™แƒšแƒ”แƒ‘แƒแƒ“ แƒแƒ›แƒแƒ–แƒ แƒ–แƒ”แƒœแƒก แƒฎแƒ“แƒ˜แƒก. แƒแƒ› แƒกแƒแƒ™แƒ˜แƒ—แƒฎแƒ–แƒ” แƒ“แƒ˜แƒกแƒ™แƒฃแƒกแƒ˜แƒ แƒแƒ  แƒงแƒแƒคแƒ˜แƒšแƒ; แƒ˜แƒ“แƒ”แƒ˜แƒ“แƒแƒœ แƒžแƒ แƒแƒขแƒแƒขแƒ˜แƒžแƒแƒ›แƒ“แƒ” แƒ’แƒ–แƒแƒก แƒคแƒแƒฅแƒขแƒ˜แƒฃแƒ แƒแƒ“ แƒแƒ แƒ˜ แƒกแƒแƒแƒ—แƒ˜ แƒ“แƒแƒกแƒญแƒ˜แƒ แƒ“แƒ. แƒ“แƒ˜แƒ–แƒแƒ˜แƒœแƒ˜ แƒžแƒ แƒแƒฅแƒขแƒ˜แƒ™แƒฃแƒšแƒแƒ“ แƒ—แƒแƒ•แƒ˜แƒกแƒ—แƒแƒ•แƒแƒ“ แƒ˜แƒงแƒ แƒ“แƒแƒฎแƒแƒขแƒฃแƒšแƒ˜ แƒ“แƒ แƒฉแƒ•แƒ”แƒœ แƒ•แƒแƒกแƒฌแƒแƒ•แƒšแƒ”แƒ— แƒฉแƒ•แƒ”แƒœแƒก แƒ™แƒแƒ›แƒžแƒแƒœแƒ”แƒœแƒขแƒ”แƒ‘แƒก แƒ›แƒแƒ แƒขแƒ˜แƒ•แƒ˜, แƒซแƒšแƒ˜แƒ•แƒก แƒ›แƒ‘แƒŸแƒฃแƒขแƒแƒ•แƒ˜ div แƒ‘แƒšแƒแƒ™แƒ”แƒ‘แƒ˜แƒก แƒ’แƒแƒ“แƒแƒชแƒ”แƒ›แƒ แƒ›แƒแƒœแƒแƒชแƒ”แƒ›แƒ—แƒ แƒ›แƒแƒšแƒแƒ“แƒ˜แƒœแƒจแƒ˜. แƒกแƒฃแƒ‘แƒ˜แƒ”แƒฅแƒขแƒฃแƒ แƒแƒ“, แƒ“แƒแƒขแƒ•แƒ˜แƒ แƒ—แƒ•แƒ˜แƒกแƒแƒ“แƒ›แƒ˜ แƒ”แƒก แƒ›แƒ˜แƒ“แƒ’แƒแƒ›แƒ แƒ แƒ”แƒแƒšแƒฃแƒ แƒแƒ“ แƒแƒ›แƒชแƒ˜แƒ แƒ”แƒ‘แƒก แƒกแƒขแƒ แƒ”แƒกแƒ˜แƒก แƒฐแƒแƒ แƒ›แƒแƒœแƒ”แƒ‘แƒ˜แƒก แƒ แƒแƒแƒ“แƒ”แƒœแƒแƒ‘แƒแƒก แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒšแƒ˜แƒก แƒกแƒฎแƒ”แƒฃแƒšแƒจแƒ˜. แƒฉแƒแƒœแƒฉแƒฎแƒ˜ แƒแƒกแƒ” แƒ’แƒแƒ›แƒแƒ˜แƒงแƒฃแƒ แƒ”แƒ‘แƒ:

Habr front-end แƒ“แƒ”แƒ•แƒ”แƒšแƒแƒžแƒ”แƒ แƒ”แƒ‘แƒ˜แƒก แƒŸแƒฃแƒ แƒœแƒแƒšแƒ”แƒ‘แƒ˜: refactoring แƒ“แƒ แƒแƒกแƒแƒฎแƒ•แƒ
แƒฐแƒแƒ‘แƒ แƒ แƒ“แƒแƒขแƒ•แƒ˜แƒ แƒ—แƒ•แƒ

แƒแƒกแƒแƒฎแƒแƒ•แƒก

แƒ›แƒ” แƒ”แƒฅแƒ•แƒกแƒ˜ แƒ—แƒ•แƒ”แƒ แƒ•แƒ›แƒฃแƒจแƒแƒแƒ‘ แƒฐแƒแƒ‘แƒ แƒ”แƒจแƒ˜ แƒ“แƒ แƒฉแƒ”แƒ›แƒ˜ แƒ›แƒ”แƒ’แƒแƒ‘แƒ แƒ”แƒ‘แƒ˜ แƒ™แƒ•แƒšแƒแƒ• แƒ›แƒ”แƒ™แƒ˜แƒ—แƒฎแƒ”แƒ‘แƒ˜แƒแƒœ: แƒแƒ‘แƒ, แƒ แƒแƒ’แƒแƒ  แƒ›แƒแƒ’แƒฌแƒแƒœแƒก แƒ˜แƒฅ? แƒ™แƒแƒ แƒ’แƒ˜, แƒ™แƒแƒ›แƒคแƒแƒ แƒขแƒฃแƒšแƒ˜ - แƒ“แƒ˜แƒแƒฎ. แƒ›แƒแƒ’แƒ แƒแƒ› แƒแƒ แƒ˜แƒก แƒ แƒแƒฆแƒแƒช, แƒ แƒแƒช แƒ’แƒแƒœแƒแƒกแƒฎแƒ•แƒแƒ•แƒ”แƒ‘แƒก แƒแƒ› แƒœแƒแƒ›แƒฃแƒจแƒ”แƒ•แƒแƒ แƒก แƒกแƒฎแƒ•แƒ”แƒ‘แƒ˜แƒกแƒ’แƒแƒœ. แƒ•แƒ›แƒฃแƒจแƒแƒแƒ‘แƒ“แƒ˜ แƒ’แƒฃแƒœแƒ“แƒ”แƒ‘แƒจแƒ˜, แƒ แƒแƒ›แƒšแƒ”แƒ‘แƒ˜แƒช แƒกแƒ แƒฃแƒšแƒ˜แƒแƒ“ แƒ’แƒฃแƒšแƒ’แƒ แƒ˜แƒšแƒ”แƒ‘แƒ˜ แƒ˜แƒงแƒ•แƒœแƒ”แƒœ แƒ—แƒแƒ•แƒ˜แƒแƒœแƒ—แƒ˜ แƒžแƒ แƒแƒ“แƒฃแƒฅแƒขแƒ˜แƒก แƒ›แƒ˜แƒ›แƒแƒ แƒ—, แƒแƒ  แƒ˜แƒชแƒแƒ“แƒœแƒ”แƒœ แƒแƒœ แƒแƒ  แƒ”แƒกแƒ›แƒ˜แƒ— แƒ•แƒ˜แƒœ แƒ˜แƒงแƒ•แƒœแƒ”แƒœ แƒ›แƒแƒ—แƒ˜ แƒ›แƒแƒ›แƒฎแƒ›แƒแƒ แƒ”แƒ‘แƒšแƒ”แƒ‘แƒ˜. แƒ›แƒแƒ’แƒ แƒแƒ› แƒแƒฅ แƒงแƒ•แƒ”แƒšแƒแƒคแƒ”แƒ แƒ˜ แƒกแƒฎแƒ•แƒแƒ’แƒ•แƒแƒ แƒแƒ“แƒแƒ. แƒแƒฅ แƒ’แƒ แƒซแƒœแƒแƒ‘แƒ— แƒžแƒแƒกแƒฃแƒฎแƒ˜แƒกแƒ›แƒ’แƒ”แƒ‘แƒšแƒแƒ‘แƒแƒก แƒ˜แƒ›แƒแƒ–แƒ”, แƒ แƒแƒกแƒแƒช แƒแƒ™แƒ”แƒ—แƒ”แƒ‘แƒ—. แƒคแƒฃแƒœแƒฅแƒชแƒ˜แƒ˜แƒก แƒจแƒ”แƒ›แƒฃแƒจแƒแƒ•แƒ”แƒ‘แƒ˜แƒก แƒžแƒ แƒแƒชแƒ”แƒกแƒจแƒ˜ แƒ—แƒฅแƒ•แƒ”แƒœ แƒœแƒแƒฌแƒ˜แƒšแƒแƒ‘แƒ แƒ˜แƒ• แƒฎแƒ“แƒ”แƒ‘แƒ˜แƒ— แƒ›แƒ˜แƒกแƒ˜ แƒ›แƒคแƒšแƒแƒ‘แƒ”แƒšแƒ˜, แƒ˜แƒฆแƒ”แƒ‘แƒ— แƒ›แƒแƒœแƒแƒฌแƒ˜แƒšแƒ”แƒแƒ‘แƒแƒก แƒงแƒ•แƒ”แƒšแƒ แƒžแƒ แƒแƒ“แƒฃแƒฅแƒขแƒ˜แƒก แƒจแƒ”แƒฎแƒ•แƒ”แƒ“แƒ แƒแƒจแƒ˜, แƒ แƒแƒ›แƒ”แƒšแƒ˜แƒช แƒ“แƒแƒ™แƒแƒ•แƒจแƒ˜แƒ แƒ”แƒ‘แƒฃแƒšแƒ˜แƒ แƒ—แƒฅแƒ•แƒ”แƒœแƒก แƒคแƒฃแƒœแƒฅแƒชแƒ˜แƒแƒœแƒ˜แƒ แƒ”แƒ‘แƒแƒกแƒ—แƒแƒœ, แƒแƒ™แƒ”แƒ—แƒ”แƒ‘แƒ— แƒฌแƒ˜แƒœแƒแƒ“แƒแƒ“แƒ”แƒ‘แƒ”แƒ‘แƒก แƒ“แƒ แƒ—แƒแƒ•แƒแƒ“ แƒ˜แƒฆแƒ”แƒ‘แƒ— แƒ’แƒแƒ“แƒแƒฌแƒงแƒ•แƒ”แƒขแƒ˜แƒšแƒ”แƒ‘แƒ”แƒ‘แƒก. แƒžแƒ แƒแƒ“แƒฃแƒฅแƒขแƒ˜แƒก แƒจแƒ”แƒฅแƒ›แƒœแƒ, แƒ แƒแƒ›แƒ”แƒšแƒกแƒแƒช แƒจแƒ”แƒœ แƒ—แƒ•แƒ˜แƒ—แƒแƒœ แƒ˜แƒงแƒ”แƒœแƒ”แƒ‘ แƒงแƒแƒ•แƒ”แƒšแƒ“แƒฆแƒ”, แƒซแƒแƒšแƒ˜แƒแƒœ แƒ›แƒแƒ’แƒแƒ แƒ˜แƒ, แƒ›แƒแƒ’แƒ แƒแƒ› แƒ™แƒแƒ“แƒ˜แƒก แƒ“แƒแƒฌแƒ”แƒ แƒ แƒ˜แƒ› แƒแƒ“แƒแƒ›แƒ˜แƒแƒœแƒ”แƒ‘แƒ˜แƒกแƒ—แƒ•แƒ˜แƒก, แƒ แƒแƒ›แƒšแƒ”แƒ‘แƒ˜แƒช แƒแƒšแƒ‘แƒแƒ— แƒจแƒ”แƒœแƒ–แƒ” แƒฃแƒ™แƒ”แƒ—แƒ”แƒกแƒ”แƒ‘แƒ˜ แƒแƒ แƒ˜แƒแƒœ, แƒฃแƒ‘แƒ แƒแƒšแƒแƒ“ แƒฌแƒแƒ แƒ›แƒแƒฃแƒ“แƒ’แƒ”แƒœแƒ”แƒšแƒ˜ แƒ’แƒ แƒซแƒœแƒแƒ‘แƒแƒ (แƒกแƒแƒ แƒ™แƒแƒ–แƒ›แƒ˜แƒก แƒ’แƒแƒ แƒ”แƒจแƒ”).

แƒงแƒ•แƒ”แƒšแƒ แƒแƒ› แƒชแƒ•แƒšแƒ˜แƒšแƒ”แƒ‘แƒ˜แƒก แƒ’แƒแƒ›แƒแƒฅแƒ•แƒ”แƒงแƒœแƒ”แƒ‘แƒ˜แƒก แƒจแƒ”แƒ›แƒ“แƒ”แƒ’, แƒฉแƒ•แƒ”แƒœ แƒ›แƒ˜แƒ•แƒ˜แƒฆแƒ”แƒ— แƒ“แƒแƒ“แƒ”แƒ‘แƒ˜แƒ—แƒ˜ แƒ’แƒแƒ›แƒแƒฎแƒ›แƒแƒฃแƒ แƒ”แƒ‘แƒ แƒ“แƒ แƒ”แƒก แƒซแƒแƒšแƒ˜แƒแƒœ, แƒซแƒแƒšแƒ˜แƒแƒœ แƒกแƒแƒกแƒ˜แƒแƒ›แƒแƒ•แƒœแƒ แƒ˜แƒงแƒ. แƒ”แƒก แƒจแƒ—แƒแƒ›แƒแƒ’แƒแƒœแƒ”แƒ‘แƒ”แƒšแƒ˜แƒ. แฒ’แƒ›แƒแƒ“แƒšแƒแƒ‘แƒ—! แƒ“แƒแƒฌแƒ”แƒ แƒ” แƒ›แƒ”แƒขแƒ˜.

แƒจแƒ”แƒ’แƒแƒฎแƒกแƒ”แƒœแƒ”แƒ‘แƒ—, แƒ แƒแƒ› แƒ’แƒšแƒแƒ‘แƒแƒšแƒฃแƒ แƒ˜ แƒชแƒ•แƒšแƒแƒ“แƒ”แƒ‘แƒ˜แƒก แƒจแƒ”แƒ›แƒ“แƒ”แƒ’ แƒฉแƒ•แƒ”แƒœ แƒ’แƒแƒ“แƒแƒ•แƒฌแƒงแƒ•แƒ˜แƒขแƒ”แƒ— แƒจแƒ”แƒ’แƒ•แƒ”แƒชแƒ•แƒแƒšแƒ แƒแƒ แƒฅแƒ˜แƒขแƒ”แƒฅแƒขแƒฃแƒ แƒ แƒ“แƒ แƒ’แƒแƒ›แƒแƒ•แƒงแƒแƒ— แƒžแƒ แƒแƒฅแƒกแƒ˜ แƒคแƒ”แƒœแƒ แƒชแƒแƒšแƒ™แƒ” แƒ˜แƒœแƒกแƒขแƒแƒœแƒชแƒ˜แƒแƒจแƒ˜. "แƒแƒ แƒ˜ แƒ™แƒ•แƒแƒœแƒซแƒ˜แƒก" แƒแƒ แƒฅแƒ˜แƒขแƒ”แƒฅแƒขแƒฃแƒ แƒแƒ› แƒฃแƒ™แƒ•แƒ” แƒ›แƒ˜แƒแƒฆแƒฌแƒ˜แƒ แƒ’แƒแƒ›แƒแƒจแƒ•แƒ”แƒ‘แƒแƒก แƒกแƒแƒฏแƒแƒ แƒ แƒ‘แƒ”แƒขแƒ แƒขแƒ”แƒกแƒขแƒ˜แƒ แƒ”แƒ‘แƒ˜แƒก แƒกแƒแƒฎแƒ˜แƒ—. แƒแƒฎแƒšแƒ แƒœแƒ”แƒ‘แƒ˜แƒกแƒ›แƒ˜แƒ”แƒ แƒก แƒจแƒ”แƒฃแƒซแƒšแƒ˜แƒ แƒ›แƒแƒกแƒ–แƒ” แƒ’แƒแƒ“แƒแƒกแƒ•แƒšแƒ แƒ“แƒ แƒ“แƒแƒ’แƒ•แƒ”แƒฎแƒ›แƒแƒ แƒแƒก แƒ›แƒแƒ‘แƒ˜แƒšแƒฃแƒ แƒ˜ Habr-แƒ˜แƒก แƒ’แƒแƒฃแƒ›แƒฏแƒแƒ‘แƒ”แƒกแƒ”แƒ‘แƒแƒจแƒ˜. แƒ“แƒฆแƒ”แƒ˜แƒกแƒ—แƒ•แƒ˜แƒก แƒกแƒฃแƒš แƒ”แƒกแƒแƒ. แƒกแƒ˜แƒแƒ›แƒแƒ•แƒœแƒ”แƒ‘แƒ˜แƒ— แƒ•แƒฃแƒžแƒแƒกแƒฃแƒฎแƒ”แƒ‘ แƒ—แƒฅแƒ•แƒ”แƒœแƒก แƒงแƒ•แƒ”แƒšแƒ แƒ™แƒ˜แƒ—แƒฎแƒ•แƒแƒก แƒ™แƒแƒ›แƒ”แƒœแƒขแƒแƒ แƒ”แƒ‘แƒจแƒ˜.

แƒฌแƒงแƒแƒ แƒ: www.habr.com

แƒแƒฎแƒแƒšแƒ˜ แƒ™แƒแƒ›แƒ”แƒœแƒขแƒแƒ แƒ˜แƒก แƒ“แƒแƒ›แƒแƒขแƒ”แƒ‘แƒ