https://chillicode.agency/_next/static/chunks/2358.4dc5d09228bc3634.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2358],{82596:function(r,e,t){"use strict";var s=t(85893),i=t(67294),l=t(93967),n=t.n(l),c=t(45697),a=t.n(c),o=t(31911),u=t.n(o);let g=(0,i.forwardRef)((r,e)=>{let{children:t,variant:i="h1",gutterBottom:l=!1,className:c,...a}=r,o=n()({[u().Heading]:!0,[u()[i]]:i,[u().gutterBottom]:l,[c]:c});return(0,s.jsx)(i,{ref:e,className:o,...a,children:t})});g.propTypes={children:a().node,variant:a().oneOf(["h1","h2","h3","h4","h5"]),gutterBottom:a().bool,className:a().string},g.displayName="Heading",e.Z=g},14742:function(r,e,t){"use strict";t.d(e,{Z:function(){return s.Z}});var s=t(82596)},42358:function(r,e,t){"use strict";t.r(e),t.d(e,{SlimmerTechnicalPart:function(){return d}});var s=t(85893),i=t(67294),l=t(25675),n=t.n(l),c=t(34715),a=t(26038),o=t(92085),u=t(14742),g=t(42924),h=t.n(g);let d=()=>{let r=(0,i.useRef)(null),e=(0,i.useRef)(null),t=(0,i.useRef)(null),l=(0,i.useRef)(null),g=(0,i.useRef)(null),d=(0,i.useRef)(null),f=(0,i.useRef)(null),m=(0,i.useRef)(null),p=(0,i.useRef)(null),_=(0,i.useRef)(null),x=(0,i.useRef)(null),y=(0,i.useRef)(null),j=(0,i.useRef)(null);return(0,c.V)(()=>{a.ZP.from(r.current,{x:50,opacity:0,duration:1,scrollTrigger:{trigger:r.current,start:"top 85%"}}),a.ZP.from(e.current,{x:50,opacity:0,duration:1,scrollTrigger:{trigger:e.current,start:"top 85%"}}),a.ZP.from(t.current,{x:50,opacity:0,duration:1,scrollTrigger:{trigger:t.current,start:"top 85%"}}),a.ZP.from(l.current,{x:50,opacity:0,duration:1,scrollTrigger:{trigger:l.current,start:"top 85%"}}),a.ZP.from(g.current,{x:50,opacity:0,duration:1,scrollTrigger:{trigger:g.current,start:"top 85%"}}),a.ZP.from(d.current,{scale:.8,opacity:0,duration:1,scrollTrigger:{trigger:d.current,start:"top 85%"}}),a.ZP.from(f.current,{x:50,opacity:0,duration:1,scrollTrigger:{trigger:f.current,start:"top 85%"}}),a.ZP.from(m.current,{x:50,opacity:0,duration:1,scrollTrigger:{trigger:m.current,start:"top 85%"}}),a.ZP.from(p.current,{x:50,opacity:0,duration:1,scrollTrigger:{trigger:p.current,start:"top 85%"}}),a.ZP.from(_.current,{scale:.8,opacity:0,duration:1,scrollTrigger:{trigger:_.current,start:"top 85%"}}),a.ZP.from(x.current,{x:50,opacity:0,duration:1,scrollTrigger:{trigger:x.current,start:"top 85%"}}),a.ZP.from(y.current,{x:50,opacity:0,duration:1,scrollTrigger:{trigger:y.current,start:"top 85%"}}),a.ZP.from(j.current,{scale:.8,opacity:0,duration:1,scrollTrigger:{trigger:j.current,start:"top 85%"}})},[]),(0,s.jsx)("section",{className:h().SlimmerTechnicalPart,children:(0,s.jsxs)(o.Z,{children:[(0,s.jsxs)("div",{className:h().heading,children:[(0,s.jsx)(u.Z,{ref:r,className:h().title,variant:"h2",children:"Техническая часть"}),(0,s.jsx)("div",{ref:e,className:h().description,children:"Процесс создания платформы проходил пошагово: от анализа рабочих процессов до тестирования с реальными пользователями"})]}),(0,s.jsxs)("article",{children:[(0,s.jsx)("header",{children:(0,s.jsx)("h3",{ref:t,children:"Рефакторинг и FSD"})}),(0,s.jsx)("p",{ref:l,children:"С развитием приложения в нем появлялись десятки страниц с разнообразным функционалом, что усложнило поддержку и стандартизацию. Чтобы масштабировать продукт, потребовалось полностью перестроить инфраструктуру."}),(0,s.jsx)("p",{ref:g,children:"Для решения задачи использовались два ключевых подхода. Первый — регулярный рефакторинг для поддержания простоты и читаемости кода. Второй — внедрение архитектуры Feature Sliced Design (FSD), которая разделяет приложение на модули по функционалу. Это позволило максимально задействовать готовые компоненты, сократив время разработки и избавив команду от бесконечной оптимизации кода и архитектуры."}),(0,s.jsx)(n(),{ref:d,className:h().image,src:"/assets/images/slimmer/FSD.webp",alt:"Архитектурная схема FSD со слоями, слайсами и сегментами",width:800,height:400}),(0,s.jsx)("p",{ref:f,children:"Дополнительно были подключены код-форматтеры и лиÐ

1½Ñ‚еры. Инструменты автоматически корректируют стиль программирования по заданным правилам, экономят время разработчиков и создают единообразие кодовой базы."})]}),(0,s.jsxs)("article",{children:[(0,s.jsx)("header",{children:(0,s.jsx)("h3",{ref:m,children:"UI-дизайн"})}),(0,s.jsx)("p",{ref:p,children:"Важно было сделать так, чтобы интерфейс загружался быстро. Существующие UI-библиотеки оказались недостаточно скоростными — их элементы замедляли работу приложения. Это подтолкнуло команду к созданию собственных UI-компонентов, что ускорило загрузку, позволило кастомизировать дизайн и сохранило полную совместимость элементов."}),(0,s.jsx)(n(),{ref:_,className:h().image,src:"/assets/images/slimmer/UI.webp",alt:"График сравнения производительности: готовая UI-library vs свои компоненты",width:800,height:400})]}),(0,s.jsxs)("article",{children:[(0,s.jsx)("header",{children:(0,s.jsx)("h3",{ref:x,children:"Внедрение чата"})}),(0,s.jsx)("p",{ref:y,children:"Одним из ключевых функциональных элементов стал чат — неотъемлемая часть приложения для коммуникации врачей и пациентов. Однако реализация вышла за рамки базового текстового обмена: для отправки файлов с анализами и фотографиями справок потребовалось внедрение Websocket-протокола. Его изучение заняло время, но именно это решение сделало чат инструментом, соответствующим потребностям пользователей."}),(0,s.jsx)(n(),{ref:j,className:h().image,src:"/assets/images/slimmer/integrate-chat.webp",alt:"Интерфейс чата с текстовыми сообщениями, файлами и фото документов",width:800,height:400})]})]})})}},31911:function(r){r.exports={Heading:"style_Heading__OaSKi",h1:"style_h1__8VDCS",h2:"style_h2__no6nd",h3:"style_h3__usYgY",h4:"style_h4__ZbV2Y",h5:"style_h5__gAtZ3",gutterBottom:"style_gutterBottom__v8Jtu",fadeIn:"style_fadeIn__Xh6tC"}},42924:function(r){r.exports={SlimmerTechnicalPart:"styles_SlimmerTechnicalPart__d0V0E",heading:"styles_heading__6I2pO",title:"styles_title__6F7sq",description:"styles_description__SDvY1",image:"styles_image__c3XEh",fadeIn:"styles_fadeIn__Wb0SA"}}}]);