Ман ҳамеша ба он таваҷҷӯҳ доштам, ки Ҳабр аз дарун чӣ гуна сохтор шудааст, ҷараёни кор чӣ гуна сохтор шудааст, иртибот чӣ гуна сохтор шудааст, кадом стандартҳо истифода мешаванд ва дар ин ҷо код чӣ гуна навишта шудааст. Хушбахтона, ман чунин имконият пайдо кардам, зеро ман ба наздикӣ узви дастаи хабра шудам. Бо истифода аз мисоли рефактори хурди версияи мобилӣ, ман кӯшиш мекунам ба савол ҷавоб диҳам: кор кардан дар ин ҷо дар фронт чӣ гуна аст. Дар барнома: Node, Vue, Vuex ва SSR бо чошнӣ аз қайдҳо дар бораи таҷрибаи шахсӣ дар Habr.
Аввалин чизе, ки шумо бояд дар бораи гурӯҳи таҳиягарон донед, ин аст, ки шумораи мо кам аст. Кифоя нест — ин се фронт, ду акибгох ва пешвои техникии хамаи Хабр — Баклей. Албатта, инчунин як озмоишгар, дизайнер, се Вадим, ҷорӯби мӯъҷизавӣ, мутахассиси маркетинг ва дигар Бумбурумҳо мавҷуданд. Аммо дар сарчашмаҳои Ҳабр ҳамагӣ шаш саҳмгузори мустақим мавҷуданд. Ин хеле нодир аст - лоиҳа бо аудиторияи бисёрмиллионадор, ки аз берун ба як корхонаи азим ба назар мерасад, дар асл ба як стартапи бароҳат бо ҳамвортарин сохтори ташкилӣ имконпазир аст.
Мисли бисёре аз ширкатҳои дигари IT, Habr ғояҳои Agile, таҷрибаҳои CI-ро эътироф мекунад ва ин ҳама аст. Аммо тибқи эҳсосоти ман, Ҳабр ҳамчун маҳсулот бештар дар мавҷҳо инкишоф меёбад, на пайваста. Ҳамин тавр, дар тӯли якчанд спринтҳо дар як саф мо бодиққат чизеро рамзгузорӣ мекунем, тарроҳӣ ва аз нав тарҳрезӣ мекунем, чизеро шикаста ва ислоҳ мекунем, чиптаҳоро ҳал мекунем ва чиптаҳои нав эҷод мекунем, ба рейк қадам мезанем ва худро ба пойҳо мепарронем, то ки дар ниҳоят ин хусусиятро дар истехсолот. Ва он гоҳ як оромии муайян, давраи бозсозӣ, вақти иҷро кардани он чизе, ки дар чорчӯбаи "муҳим - на таъҷилӣ" аст, фаро мерасад.
Маҳз ин спринти "ғайримавсимӣ" аст, ки дар поён муҳокима карда мешавад. Ин дафъа он рефакторинги версияи мобилии Ҳабрро дар бар гирифт. Умуман, ширкат ба он умеди калон дорад ва дар оянда он бояд тамоми боғи ҳайвоноти Ҳабрро иваз кунад ва як ҳалли универсалии кросс-платформа гардад. Рӯзе тарҳбандии мутобиқшавӣ, PWA, ҳолати офлайнӣ, мутобиқсозии корбар ва бисёр чизҳои ҷолиби дигар вуҷуд хоҳанд дошт.
Биёед вазифаро ба миён гузорем
Боре, дар стенд-ап оддӣ, яке аз фронтҳо дар бораи мушкилот дар меъмории ҷузъи шарҳҳои версияи мобилӣ сухан гуфт. Бо дарназардошти ин мо дар шакли психотерапияи гурӯҳӣ як вохӯрии хурд ташкил кардем. Ҳама бо навбат мегуфтанд, ки куҷо дард мекунад, ҳама чизро рӯи коғаз сабт карданд, ҳамдардӣ карданд, фаҳмиданд, ҷуз ин ки касе чапак назад. Дар натиҷа як рӯйхати 20 мушкилот буд, ки равшан нишон дод, ки Habr мобилӣ ҳанӯз роҳи тӯлонӣ ва душвор барои муваффақият дорад.
Ман пеш аз ҳама дар бораи самаранокии истифодаи захираҳо ва он чизе ки интерфейси ҳамвор номида мешавад, нигарон будам. Ҳар рӯз, дар масири хона-кор-хона, ман дидам, ки телефони кӯҳнаи худ сахт кӯшиш мекард, ки 20 сарлавҳаро дар канал нишон диҳад. Чунин менамуд:
Интерфейси Mobile Habr пеш аз рефакторинг
Дар ин ҷо чӣ гап? Хулоса, сервер саҳифаи HTML-ро ба ҳама як хел хидмат мекард, новобаста аз он ки корбар ворид шудааст ё не. Сипас муштарии JS бор карда мешавад ва боз маълумоти заруриро талаб мекунад, аммо барои иҷозатдиҳӣ танзим карда мешавад. Яъне мо дар асл як корро ду маротиба ичро кардем. Интерфейс парид ва корбар сад килобайти иловагӣ бор кард. Ба таври муфассал ҳама чиз боз ҳам даҳшатноктар ба назар мерасид.
Нақшаи кӯҳнаи СССР-CSR. Авторизатсия танҳо дар марҳилаҳои C3 ва C4 имконпазир аст, вақте ки Node JS бо тавлиди HTML банд нест ва метавонад дархостҳои проксиро ба API иҷро кунад.
Меъмории мо дар он замонро яке аз корбарони Ҳабр хеле дақиқ тавсиф карда буд:
Варианти мобилӣ ифлос аст. Ман инро мисли он мегӯям. Омезиши даҳшатноки SSR ва CSR.
Мо бояд иқрор шавем, ҳарчанд ғамгин буд.
Ман вариантҳоро арзёбӣ кардам, чиптаро дар Ҷира бо тавсиф дар сатҳи "ҳоло бад аст, дуруст кунед" сохтам ва вазифаро бо зарбаҳои васеъ тақсим кардам:
- аз нав истифода бурдани маълумот,
- кам кардани шумораи такрорӣ,
- бартараф кардани дархостҳои такрорӣ,
- процесси боркуниро равшантар гардонад.
Биёед маълумотро дубора истифода барем
Дар назария, намоиши сервер барои ҳалли ду мушкилот тарҳрезӣ шудааст: аз маҳдудиятҳои системаи ҷустуҷӯӣ аз ҷиҳати ва такмил додани метрика (нохоҳ бадтар мешавад ). Дар сенарияи классикӣ, ки ниҳоят сол (то ҳол дар Backbone.js), SSR ҳамон як барномаи изоморфии JS мебошад, ки дар муҳити Node кор мекунад. Сервер танҳо тарҳбандии тавлидшударо ҳамчун посух ба дархост мефиристад. Сипас регидратсия дар тарафи муштарӣ сурат мегирад ва он гоҳ ҳама чиз бе дубора боркунии саҳифа кор мекунад. Барои Ҳабр, ба монанди бисёр дигар захираҳои дорои мундариҷаи матн, рендеринги сервер як ҷузъи муҳими эҷоди муносибатҳои дӯстона бо системаҳои ҷустуҷӯӣ мебошад.
Сарфи назар аз он, ки аз пайдоиши технология беш аз шаш сол гузаштааст ва дар ин муддат дар ҷаҳони пешрафта дар ҳақиқат оби зиёде дар зери купрук мерехт, барои бисёре аз таҳиягарон ин идея то ҳол махфӣ аст. Мо дар канор намеистодем ва як барномаи Vue-ро бо дастгирии SSR ба истеҳсолот паҳн кардем ва як ҷузъиёти хурдро аз даст додем: мо ҳолати ибтидоиро ба муштарӣ нафиристодем.
Чаро? Ба ин савол ҷавоби дақиқ вуҷуд надорад. Ё онҳо намехостанд, ки андозаи посухро аз сервер зиёд кунанд, ё аз сабаби як қатор мушкилоти меъморӣ, ё он танҳо аз байн нарафт. Бо ин ё он роҳ, хориҷ кардани ҳолат ва дубора истифода бурдани ҳама чизе, ки сервер анҷом додааст, хеле мувофиқ ва муфид ба назар мерасад. Вазифа воқеан ночиз аст - ба контексти иҷро, ва Vue онро ба таври худкор ба тарҳбандии тавлидшуда ҳамчун тағирёбандаи глобалӣ илова мекунад: window.__INITIAL_STATE__.
Яке аз мушкилоте, ки ба миён омадааст, имконнопазирии табдил додани сохторҳои даврӣ ба JSON мебошад (); бо рохи оддй иваз кардани чунин конструкцияхо бо хамкасбонашон хал карда шуд.
Илова бар ин, ҳангоми кор бо мундариҷаи UGC, шумо бояд дар хотир доред, ки маълумот бояд ба объектҳои HTML табдил дода шавад, то HTML вайрон нашавад. Барои ин мақсадҳо мо истифода мебарем .
Кам кардани тасвирҳои дубора
Тавре ки шумо аз диаграммаи боло мебинед, дар ҳолати мо як намунаи Node JS ду вазифаро иҷро мекунад: SSR ва "прокси" дар API, ки дар он иҷозати корбар сурат мегирад. Ин ҳолат иҷозат медиҳад, ки ҳангоми кор кардани коди JS дар сервер иҷозат дода шавад, зеро гиреҳ як ришта аст ва функсияи SSR синхронӣ аст. Яъне, сервер наметавонад ба худ дархостҳо фиристад, вақте ки зангҳо бо чизе банд аст. Маълум шуд, ки мо вазъро нав кардем, аммо интерфейс қафо намондааст, зеро маълумот дар бораи муштарӣ бояд бо назардошти сессияи корбар нав карда мешуд. Мо бояд ба замимаи худ таълим диҳем, ки маълумоти дурустро дар ҳолати аввала бо назардошти воридшавии корбар ҷойгир кунад.
Танҳо ду роҳи ҳалли мушкилот вуҷуд дошт:
- ба дархостҳои байнисерверӣ маълумот замима кунед;
- қабатҳои Node JS-ро ба ду мисоли алоҳида тақсим кунед.
Ҳалли аввал истифодаи тағирёбандаҳои глобалиро дар сервер талаб мекард ва дуввумӣ мӯҳлати иҷрои вазифаро ҳадди аққал як моҳ тамдид мекард.
Чӣ тавр интихоб кардан мумкин аст? Ҳабр аксар вақт бо роҳи муқобилияти камтарин ҳаракат мекунад. Ба таври ғайрирасмӣ, хоҳиши умумӣ барои кам кардани давра аз идея то прототип ба ҳадди ақал вуҷуд дорад. Модели муносибат ба маҳсулот то андозае постулатҳои booking.com-ро ба хотир меорад ва ягона фарқият дар он аст, ки Ҳабр фикру мулоҳизаҳои корбаронро ба таври ҷиддӣ қабул мекунад ва ба шумо ҳамчун як таҳиягар барои қабули чунин қарорҳо боварӣ дорад.
Бо назардошти ин мантиқ ва хоҳиши худам барои зуд ҳал кардани мушкилот, ман тағирёбандаҳои глобалиро интихоб кардам. Ва, чунон ки аксар вақт рӯй медиҳад, шумо бояд дер ё зуд барои онҳо пардохт кунед. Мо қариб фавран пардохт кардем: мо дар рӯзҳои истироҳат кор кардем, оқибатҳоро бартараф кардем, навишт ва ба ду қисм тақсим кардани сервер оғоз кард. Хатогӣ хеле беақл буд ва хатогие, ки бо он алоқаманд буд, дубора тавлид кардан осон набуд. Ва ҳа, ин шармовар аст, аммо ин ё он тавр, пешпо хӯрдан ва нола кардан, PoC-и ман бо тағирёбандаҳои глобалӣ ба ҳар ҳол ба истеҳсолот даромад ва дар интизори гузариш ба меъмории нави "ду гиреҳ" хеле бомуваффақият кор мекунад. Ин як қадами муҳим буд, зеро ба таври расмӣ ҳадаф ба даст омад - SSR саҳифаи комилан омодаро омӯзад ва UI хеле оромтар шуд.
Интерфейси Mobile Habr пас аз марҳилаи якуми рефакторинг
Дар ниҳоят, меъмории SSR-CSR версияи мобилӣ ба ин тасвир оварда мерасонад:
Схемаи «Ду гирех» РСС-ЧШС. Node JS API ҳамеша барои вуруди асинхронӣ / баромад омода аст ва аз ҷониби функсияи SSR баста намешавад, зеро охирин дар як мисоли алоҳида ҷойгир аст. Занҷири дархости №3 лозим нест.
Бартараф кардани дархостҳои такрорӣ
Пас аз анҷом додани манипуляцияҳо, тасвири ибтидоии саҳифа дигар эпилепсияро ба вуҷуд наовард. Аммо истифодаи минбаъдаи Habr дар ҳолати SPA то ҳол нофаҳмиҳо ба вуҷуд овард.
Азбаски асоси ҷараёни корбарон гузаришҳои форма мебошад рӯйхати мақолаҳо → мақола → шарҳҳо ва баръакс, дар навбати аввал истеъмоли захираҳои ин занҷирро оптимизатсия кардан муҳим буд.
Бозгашт ба канали пост дархости нави маълумотро ба вуҷуд меорад
Чукур кофтан лозим набуд. Дар экрани боло шумо мебинед, ки барнома ҳангоми лағжидани бозгашт рӯйхати мақолаҳоро дубора дархост мекунад ва ҳангоми дархост мо мақолаҳоро намебинем, ки ин маънои онро дорад, ки маълумоти қаблӣ дар ҷое нопадид мешавад. Чунин ба назар мерасад, ки ҷузъи рӯйхати мақолаҳо ҳолати маҳаллиро истифода мебарад ва ҳангоми нест кардан онро аз даст медиҳад. Дар асл, барнома як ҳолати глобалиро истифода бурд, аммо меъмории Vuex сар ба рӯи сохта шудааст: модулҳо ба саҳифаҳо, ки дар навбати худ ба хатсайрҳо алоқаманданд. Ғайр аз он, ҳама модулҳо "якдафъаина" мебошанд - ҳар як сафари минбаъда ба саҳифа тамоми модулро аз нав навиштааст:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
Дар маҷмӯъ, мо як модул доштем Рӯйхати мақолаҳо, ки дорои объектҳои намуди Моддаи ва модул Саҳифа мақола, ки версияи васеъи объект буд Моддаи, монанди Мақолаи пурра. Умуман, ин амалисозӣ дар худ ягон чизи даҳшатнок надорад - ин хеле содда аст, ҳатто метавон гуфт, ки соддалавҳона, вале хеле фаҳмо аст. Агар шумо ҳар дафъае, ки масирро иваз мекунед, модулро аз нав танзим кунед, шумо ҳатто метавонед бо он зиндагӣ кунед. Бо вуҷуди ин, гузариш дар байни маҷаллаҳои мақола, масалан / feed → /ҳама, кафолат дода мешавад, ки ҳама чизи марбут ба хўроки шахсӣ партофта шавад, зеро мо танҳо якто дорем Рӯйхати мақолаҳо, ки шумо бояд ба он маълумоти нав ворид кунед. Ин боз моро ба такрори дархостҳо мебарад.
Хамаи он чиро, ки дар мавзуъ кофта тавонистам, гирд оварда, сохтори нави давлатиро тартиб дода, ба хамкасбонам пешниход кардам. Муҳокимаҳо тӯлонӣ буданд, аммо дар ниҳоят далелҳо ба тарафдорӣ аз шубҳаҳо бартарӣ доштанд ва ман ба татбиқи он шурӯъ кардам.
Мантиқи ҳалли беҳтарин дар ду марҳила ошкор карда мешавад. Аввалан мо кӯшиш мекунем, ки модули Vuex-ро аз саҳифаҳо ҷудо кунем ва мустақиман ба хатсайрҳо пайваст кунем. Бале, дар мағоза маълумоти каме бештар хоҳад буд, қабулкунандаҳо каме мураккабтар мешаванд, аммо мо мақолаҳоро ду маротиба бор намекунем. Барои версияи мобилӣ, ин шояд далели қавитарин бошад. Он чизе монанди ин хоҳад буд:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Аммо чӣ мешавад, агар рӯйхатҳои мақолаҳо байни якчанд хатсайрҳо мувофиқат кунанд ва агар мо хоҳем, ки маълумоти объектро дубора истифода барем Моддаи барои намоиш додани саҳифаи почта, табдил додани он ба Мақолаи пурра? Дар ин ҳолат истифодаи чунин сохтор мантиқтар мебуд:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
Рӯйхати мақолаҳо дар ин ҷо танҳо як навъ анбори мақолаҳост. Ҳама мақолаҳое, ки дар давоми сессияи корбар зеркашӣ карда шудаанд. Мо ба онҳо бодиққат муносибат мекунем, зеро ин трафикест, ки шояд тавассути дард дар ягон ҷо дар метро байни истгоҳҳо бор карда шуда бошад ва мо бешубҳа намехоҳем, ки дубора ба корбар ин дардро ба бор оварем ва ӯро маҷбур созем, ки маълумотеро, ки ӯ аллакай дорад, бор кунад. бор карда шудааст. Объект МақолаҳоИдҳо ин танҳо як массиви ID (мисли "пайвандҳо") ба объектҳост Моддаи. Ин сохтор ба шумо имкон медиҳад, ки аз такрори маълумоти умумӣ барои масирҳо ва истифодаи дубораи объект худдорӣ намоед Моддаи ҳангоми пешниҳоди саҳифаи пост тавассути якҷоя кардани маълумоти васеъ ба он.
Натиҷаи рӯйхати мақолаҳо низ шаффофтар шуд: ҷузъи итератор тавассути массив бо ID-ҳои мақола такрор мешавад ва ҷузъи тизери мақоларо кашида, Id-ро ҳамчун такягоҳ мегузаронад ва ҷузъи кӯдак, дар навбати худ, маълумоти заруриро аз Рӯйхати мақолаҳо. Вақте ки шумо ба саҳифаи нашр меравед, мо санаи мавҷударо аз он мегирем Рӯйхати мақолаҳо, мо дархост мекунем, ки маълумоти гумшударо ба даст орем ва онро ба объекти мавҷуда илова кунем.
Чаро ин равиш беҳтар аст? Тавре ки ман дар боло навишта будам, ин равиш нисбат ба маълумоти зеркашида нармтар аст ва ба шумо имкон медиҳад, ки онро дубора истифода баред. Аммо ба ҷуз ин, он ба баъзе имкониятҳои нав, ки ба чунин меъморӣ комилан мувофиқат мекунанд, роҳ мекушояд. Масалан, пурсиш ва бор кардани мақолаҳо ба канал, вақте ки онҳо пайдо мешаванд. Мо метавонем танҳо паёмҳои охиринро дар "анбор" ҷойгир кунем Рӯйхати мақолаҳо, рӯйхати алоҳидаи ID-ҳои навро дар МақолаҳоИдҳо ва истифодабарандаро дар ин бора огоҳ созед. Вақте ки мо тугмаи "Намоиш додани нашрияҳои нав" -ро пахш мекунем, мо танҳо Id-ҳои навро ба оғози массиви рӯйхати ҷории мақолаҳо дохил мекунем ва ҳама чиз қариб ба таври ҷодугарӣ кор хоҳад кард.
Зеркаширо ҷолибтар мегардонад
Дар яхбандӣ дар торт refactoring мафҳуми скелетҳо аст, ки раванди зеркашии маводи дар Интернет суст каме нафратовар камтар мекунад. Дар ин бора ҳеҷ гуна баҳсҳо сурат нагирифтанд; роҳ аз идея то прототип аслан ду соат тӯл кашид. Тарҳ амалан худашро кашид ва мо ба ҷузъҳои худ таълим додем, ки ҳангоми интизории маълумот блокҳои оддии div-ро базӯр нишон диҳанд. Субъективӣ, ин равиш ба боркунӣ воқеан миқдори гормонҳои стрессро дар бадани корбар коҳиш медиҳад. Скелет чунин менамояд:
Habraloading
Инъикос кардан
Ман шаш моҳ дар Ҳабре кор мекунам ва дӯстони ман то ҳол мепурсанд: хуб, он ҷо ба шумо чӣ гуна маъқул аст? Хуб, бароҳат - ҳа. Аммо як чиз аст, ки ин кор аз дигарон фарк мекунад. Ман дар дастаҳое кор мекардам, ки ба маҳсулоти худ тамоман бепарво буданд, корбарони онҳо кистанд ва намедонистам. Аммо дар ин ҷо ҳама чиз дигар аст. Дар ин ҷо шумо барои кори худ масъулият ҳис мекунед. Дар ҷараёни таҳияи хусусият, шумо қисман соҳиби он мешавед, дар ҳама вохӯриҳои маҳсулот, ки ба функсияи шумо алоқаманданд, иштирок мекунед, пешниҳодҳо пешниҳод мекунед ва худатон қарор қабул мекунед. Сохтани маҳсулоте, ки шумо ҳамарӯза худатон истифода мебаред, хеле олиҷаноб аст, аммо навиштани код барои одамоне, ки эҳтимолан дар ин кор аз шумо беҳтаранд, танҳо як эҳсоси бениҳоят аст (бе киноя).
Пас аз интишори ҳамаи ин тағйирот, мо фикру мулоҳизаҳои мусбӣ гирифтем ва ин хеле ва хеле хуб буд. Ин рӯҳбаландкунанда аст. Сипос! Бештар нависед.
Хотиррасон мекунам, ки пас аз тағирёбандаҳои глобалӣ мо тасмим гирифтем, ки меъмориро тағир диҳем ва қабати проксиро ба як мисоли алоҳида ҷудо кунем. Меъмории "ду гиреҳ" аллакай дар шакли санҷиши бета оммавӣ ба нашр расидааст. Акнун ҳар кас метавонад ба он гузарад ва ба мо дар беҳтар кардани Habr мобилӣ кӯмак расонад. Ин ҳама барои имрӯз аст. Ман бо камоли майл ба ҳама саволҳои шумо дар шарҳҳо ҷавоб медиҳам.
Манбаъ: will.com