Ua hoihoi mau au i ka hana ʻana o Habr mai loko mai, pehea ke ʻano o ke kaʻina hana, pehea ka hoʻonohonoho ʻia ʻana o nā kamaʻilio, he aha nā kūlana i hoʻohana ʻia a pehea e kākau ʻia ai nā code ma aneʻi. ʻO ka mea pōmaikaʻi, ua loaʻa iaʻu kahi manawa kūpono, no ka mea, ua lilo wau i ʻāpana o ka hui habra. Ke hoʻohana nei i ka laʻana o kahi refactoring liʻiliʻi o ka mana kelepona, e hoʻāʻo wau e pane i ka nīnau: he aha ke ʻano o ka hana ʻana ma mua. Ma ka papahana: Node, Vue, Vuex a me SSR me ka ʻai mai nā memo e pili ana i ka ʻike pilikino ma Habr.
ʻO ka mea mua e pono ai ʻoe e ʻike e pili ana i ka hui hoʻomohala ʻo ia ka liʻiliʻi o mākou. ʻAʻole lawa - ʻekolu mau mua kēia, ʻelua kua a me ke alakaʻi ʻenehana o nā Habr - Baxley āpau. Aia nō, he mea ho'āʻo, he mea hoʻolālā, ʻekolu Vadim, kahi pulumi hana mana, kahi loea kūʻai a me nā Bumburums ʻē aʻe. Akā ʻeono wale nō mea kōkua pololei i nā kumu o Habr. He mea kakaikahi kēia - he papahana me ka lehulehu miliona miliona, mai waho mai e like me kahi ʻoihana nunui, ʻoiaʻiʻo, ʻoi aku ka like me kahi hoʻomaka ʻoluʻolu me ka hoʻolālā hoʻonohonoho ʻoi loa.
E like me nā ʻoihana IT ʻē aʻe, ʻōlelo ʻo Habr i nā manaʻo Agile, nā hana CI, a ʻo ia wale nō. Akā e like me koʻu mau manaʻo, ʻo Habr ma ke ʻano he huahana ke ulu nei i nā nalu ma mua o ka hoʻomau. No laila, no kekahi mau sprints i ka lālani, hoʻopaʻa inoa mākou i kekahi mea, hoʻolālā a hoʻolālā hou, wāwahi i kahi mea a hoʻoponopono, hoʻoholo i nā tiketi a hana i nā mea hou, hehi i ka rake a pana iā mākou iho i nā wāwae, i mea e hoʻokuʻu hope ai i ka hiʻohiʻona i loko. hana ʻana. A laila hiki mai kahi lull, kahi manawa o ke kūkulu hou ʻana, ka manawa e hana ai i ka mea i loko o ka quadrant "mea nui-ʻaʻole wikiwiki".
ʻO kēia ka "off-season" sprint e kūkākūkā ʻia ma lalo nei. I kēia manawa ua hoʻokomo ʻia kahi refactoring o ka polokalamu kelepona o Habr. Ma keʻano laulā, nui ka manaʻolana o ka hui no ia mea, a i ka wā e hiki mai ana e hoʻololi i ka zoo holoʻokoʻa o nā incarnations o Habr a lilo i mea hoʻonā honua cross-platform. I kekahi lā e loaʻa kahi hoʻonohonoho adaptive, PWA, mode offline, hoʻoponopono mea hoʻohana, a me nā mea hoihoi ʻē aʻe.
E hoʻonohonoho kāua i ka hana
I kekahi manawa, ma kahi kū maʻamau, ua ʻōlelo kekahi o ka mua e pili ana i nā pilikia i ka hoʻolālā ʻana o nā ʻōlelo ʻōlelo o ka mana kelepona. Me kēia i ka noʻonoʻo, ua hoʻonohonoho mākou i kahi micro-hui ma ke ʻano o ka psychotherapy hui. Ua hoʻololi nā mea a pau i ka ʻōlelo ʻana i kahi e ʻeha ai, hoʻopaʻa lākou i nā mea āpau ma ka pepa, aloha lākou, hoʻomaopopo lākou, koe wale nō ʻaʻohe mea i paʻi. ʻO ka hopena he papa inoa o nā pilikia he 20, kahi i hoʻomaopopo ʻia he ala lōʻihi a paʻakikī hoʻi ʻo Habr mobile i ka holomua.
Ua hopohopo nui wau e pili ana i ka pono o ka hoʻohana ʻana i nā kumuwaiwai a me ka mea i kapa ʻia he interface maʻalahi. I kēlā me kēia lā, ma ke ala home-work-home, ʻike wau i kaʻu kelepona kahiko e hoʻāʻo nui ana e hōʻike i nā poʻomanaʻo 20 i ka hānai. Ua like me keia:
Mobile Habr interface ma mua o ka refactoring
He aha ka hana ma ʻaneʻi? I ka pōkole, lawelawe ke kikowaena i ka ʻaoʻao HTML i kēlā me kēia kanaka i ke ala like, me ka nānā ʻole i ka mea hoʻohana a i ʻole. A laila hoʻouka ʻia ka mea kūʻai JS a noi hou i ka ʻikepili pono, akā hoʻoponopono ʻia no ka ʻae. ʻO ia hoʻi, ua hana mākou i ka hana like ʻelua. Hoʻopili ka mea hoʻohana, a hoʻoiho ka mea hoʻohana i hoʻokahi haneli mau kilobytes. Ma ke kiko'ī, ua ʻoi aku ka weliweli o nā mea a pau.
Hoʻolālā SSR-CSR kahiko. Hiki ke ʻae ʻia ma nā ʻanuʻu C3 a me C4, i ka wā ʻaʻole paʻa ʻo Node JS i ka hoʻokumu ʻana i HTML a hiki ke koho i nā noi i ka API.
Ua wehewehe pololei ʻia kā mākou hale hana o ia manawa e kekahi o nā mea hoʻohana Habr:
ʻO ka manaʻo paʻa lima he crap. Ke hai aku nei au e like me ia. He hui weliweli o SSR a me CSR.
Pono mākou e ʻae, ʻaʻohe mea kaumaha.
Ua loiloi au i nā koho, hana i kahi tikiki ma Jira me ka wehewehe ʻana i ke kiʻekiʻe o "ʻino i kēia manawa, hana pololei" a hoʻopau i ka hana ma nā kī ākea:
- hoʻohana hou i ka ʻikepili,
- e hōʻemi i ka helu o nā kiʻi hou,
- hoʻopau i nā noi pālua,
- e hoʻomaopopo i ka hoʻouka ʻana.
E hoʻohana hou kākou i ka ʻikepili
Ma ke kumumanaʻo, ua hoʻolālā ʻia ka hoʻololi ʻana i ka ʻaoʻao server e hoʻoponopono i nā pilikia ʻelua: ʻaʻole e ʻeha i nā palena ʻenekini hulina ma ke ʻano o a hoʻomaikaʻi i ka metric (e hoʻomāhuahua mau ana ). Ma kahi hiʻohiʻona maʻamau i hope makahiki (mau ma Backbone.js), ʻo SSR ka noi like isomorphic JS e holo ana ma ka pōʻaiapili Node. Hoʻouna wale ke kikowaena i ka hoʻolālā i hana ʻia ma ke ʻano he pane i ka noi. A laila hoʻomaka ka rehydration ma ka ʻaoʻao o ka mea kūʻai aku, a laila hana nā mea āpau me ka hoʻouka ʻole ʻana o ka ʻaoʻao. No Habr, e like me nā kumuwaiwai ʻē aʻe me ka ʻike kikokikona, ʻo ka hāʻawi ʻana i ka server he mea koʻikoʻi i ke kūkulu ʻana i nā pilina aloha me nā ʻenekini huli.
ʻOiai ʻoi aku ka nui o nā makahiki ʻeono i hala ma hope o ka hiki ʻana mai o ka ʻenehana, a i kēia manawa ua kahe maoli ka nui o ka wai ma lalo o ke alahaka i ka honua mua, no ka nui o nā mea hoʻomohala ua uhi ʻia kēia manaʻo i kahi huna. ʻAʻole mākou i kū ʻokoʻa a ʻōwili i kahi noi Vue me ke kākoʻo SSR i ka hana ʻana, nalowale kahi kikoʻī liʻiliʻi: ʻaʻole mākou i hoʻouna i ka mokuʻāina mua i ka mea kūʻai.
No ke aha mai? ʻAʻohe pane pololei i kēia nīnau. ʻAʻole paha lākou i makemake e hoʻonui i ka nui o ka pane mai ke kikowaena, a i ʻole no ka nui o nā pilikia hoʻolālā ʻē aʻe, a ʻaʻole i lawe wale. Hoʻokahi ʻaoʻao a i ʻole, hoʻolei i ka mokuʻāina a hoʻohana hou i nā mea āpau i hana ʻia e ke kikowaena me he mea kūpono a pono hoʻi. He mea ʻole ka hana - i loko o ka pōʻaiapili hoʻokō, a hoʻohui ʻokoʻa ʻo Vue iā ia i ka hoʻolālā i hana ʻia ma ke ʻano he hoʻololi honua: window.__INITIAL_STATE__.
ʻO kekahi o nā pilikia i kū mai ʻo ia ka hiki ʻole ke hoʻololi i nā hanana cyclic i JSON (); ua hoʻoholo ʻia ma ka hoʻololi wale ʻana i ia mau hale me ko lākou mau hoa palahalaha.
Eia kekahi, i ka wā e pili ana i ka ʻikepili UGC, pono ʻoe e hoʻomanaʻo pono e hoʻohuli ʻia ka ʻikepili i nā mea HTML i ʻole e wāwahi i ka HTML. No kēia mau hana mākou e hoʻohana ai .
Hoʻemi i nā kaha kiʻi hou
E like me kāu e ʻike ai mai ke kiʻikuhi ma luna, i kā mākou hihia, hoʻokahi Node JS instance e hana i ʻelua mau hana: SSR a me "proxy" i ka API, kahi i loaʻa ai ka mana mea hoʻohana. ʻAʻole hiki ke ʻae ʻia kēia kūlana i ka wā e holo ana ke code JS ma ke kikowaena, no ka mea, ʻo ka node he kaula hoʻokahi, a ʻo ka hana SSR he synchronous. ʻO ia hoʻi, ʻaʻole hiki i ke kikowaena ke hoʻouna i nā noi iā ia iho i ka wā e paʻa ana ka callstack me kekahi mea. Ua ʻike ʻia ua hoʻonui mākou i ka mokuʻāina, akā ʻaʻole i hoʻōki ka interface i ka twitching, no ka mea, pono e hoʻonui ʻia ka ʻikepili i ka mea kūʻai aku e noʻonoʻo ana i ka hālāwai mea hoʻohana. Pono mākou e aʻo i kā mākou noi e hoʻokomo i ka ʻikepili pololei i ka mokuʻāina mua, me ka noʻonoʻo ʻana i ke komo ʻana o ka mea hoʻohana.
ʻElua wale nō hoʻonā i ka pilikia:
- e hoʻopili i ka ʻikepili mana i nā noi cross-server;
- e hoʻokaʻawale i nā papa Node JS i ʻelua mau manawa kaʻawale.
Pono ka hoʻonā mua i ka hoʻohana ʻana i nā mea hoʻololi honua ma ka kikowaena, a ʻo ka lua i hoʻolōʻihi i ka lā palena no ka hoʻopau ʻana i ka hana ma kahi o hoʻokahi mahina.
Pehea e hana ai i kahi koho? Hele pinepine ʻo Habr ma ke ala o ke kūʻē liʻiliʻi. Ma ka ʻike ʻole, aia ka makemake nui e hōʻemi i ka pōʻai mai ka manaʻo i ka prototype i ka liʻiliʻi. ʻO ke kumu hoʻohālike o ka manaʻo e pili ana i ka huahana he mea hoʻomanaʻo i nā postulates o booking.com, me ka ʻokoʻa wale nō ʻo Habr e ʻoi aku ka koʻikoʻi o ka manaʻo o ka mea hoʻohana a hilinaʻi iā ʻoe, ma ke ʻano he mea hoʻomohala, e hana i kēlā mau hoʻoholo.
Ma hope o kēia loiloi a me koʻu makemake ponoʻī e hoʻoponopono koke i ka pilikia, ua koho wau i nā ʻano hoʻololi honua. A, e like me ka hana pinepine ʻana, pono ʻoe e uku no lākou ma hope a ma hope paha. Ua uku koke mākou: hana mākou i ka hopena pule, hoʻomaʻemaʻe i nā hopena, kākau a hoʻomaka e māhele i ke kikowaena i ʻelua ʻāpana. He naʻaupō loa ka hewa, a ʻaʻole maʻalahi ka hoʻopili ʻana i ka hewa. A ʻae, he mea hilahila no kēia, akā hoʻokahi ʻaoʻao a i ʻole, ʻo ka hina a me ke kaniʻuhū ʻana, ʻo kaʻu PoC me nā ʻano like ʻole o ka honua i hele i ka hana a ke hana maikaʻi nei i ka wā e kali ana i ka neʻe ʻana i kahi hoʻolālā "ʻelua-node" hou. He ʻanuʻu koʻikoʻi kēia, no ka mea, ua hoʻokō ʻia ka pahuhopu - ua aʻo ʻo SSR e hāʻawi i kahi ʻaoʻao mākaukau loa e hoʻohana, a ua ʻoi aku ka mālie o ka UI.
Mobile Habr interface ma hope o ka pae mua o ka refactoring
ʻO ka hope loa, ke alakaʻi nei ke kiʻi SSR-CSR o ka polokalamu kelepona i kēia kiʻi:
Η"ʻElua-node" SSR-CSR kaapuni. Mākaukau mau ka Node JS API no ka I/O asynchronous a ʻaʻole i ālai ʻia e ka hana SSR, no ka mea, aia ka hope ma kahi ʻokoʻa. ʻAʻole pono ke kaulahao nīnau #3.
Hoʻopau i nā noi ʻelua
Ma hope o ka hana ʻana i nā manipulations, ʻaʻole i hoʻonāukiuki hou ka epilepsy i ka hoʻopuka mua ʻana o ka ʻaoʻao. Akā ʻo ka hoʻohana hou ʻana i ka Habr i ke ʻano SPA i hoʻohālikelike ʻia.
No ka mea, ʻo ke kumu o ke kahe o ka mea hoʻohana ke hoʻololi o ke ʻano papa inoa o nā ʻatikala → ʻatikala → manaʻo a ʻo ia hoʻi, he mea nui e hoʻonui i ka hoʻohana waiwai o kēia kaulahao ma kahi mua.
ʻO ka hoʻi ʻana i ka pou hānai e hoʻonāukiuki i kahi noi ʻikepili hou
ʻAʻole pono e ʻeli hohonu. Ma ka screencast ma luna aʻe hiki iā ʻoe ke ʻike i ka noi hou ʻana i ka papa inoa o nā ʻatikala i ka wā e hoʻi ai i hope, a i ka wā o ka noi ʻaʻole mākou e ʻike i nā ʻatikala, ʻo ia hoʻi, ua nalowale nā ʻikepili mua ma kahi. Me he mea lā e hoʻohana ana ka ʻatikala papa inoa i kahi mokuʻāina kūloko a nalowale iā ia i ka luku ʻana. ʻO kaʻoiaʻiʻo, ua hoʻohana ka noi i kahi moku'āina honua, akā ua kūkuluʻia ka hoʻolālā Vuex i ke poʻo: ua hoʻopaʻaʻia nā modula i nāʻaoʻao, a ua nakinakiʻia i nā ala. Eia kekahi, ʻo nā modula āpau he "disposable" - kēlā me kēia kipa ʻana i ka ʻaoʻao i kākau hou i ka module holoʻokoʻa:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
I ka huina, loaʻa iā mākou kahi module Palapala ʻatikala, i loaʻa nā mea o ke ʻano Paukū a me ka module ʻAoʻao ʻatikala, he mana lōʻihi ia o ka mea Paukū, ʻano Paukū. Ma ka nui, ʻaʻole lawe kēia hoʻokō i kekahi mea weliweli iā ia iho - he maʻalahi loa ia, ʻōlelo paha kekahi naive, akā maopopo loa. Inā hoʻonohonoho hou ʻoe i ka module i kēlā me kēia manawa āu e hoʻololi ai i ke ala, a laila hiki iā ʻoe ke noho pū me ia. Eia naʻe, ka neʻe ʻana ma waena o nā ʻatikala hānai, no ka laʻana / hānai → / a pau, ua hōʻoiaʻiʻo e hoʻolei i nā mea a pau e pili ana i ka hānai pilikino, no ka mea, hoʻokahi wale nō kā mākou Palapala ʻatikala, pono ʻoe e hoʻokomo i nā ʻikepili hou. Ke alakaʻi hou nei kēia iā mākou i ke kope ʻana i nā noi.
Ma hope o ka hōʻiliʻili ʻana i nā mea āpau i hiki iaʻu ke ʻeli i ke kumuhana, ua hoʻokumu wau i kahi hoʻolālā mokuʻāina hou a hōʻike i kaʻu mau hoa hana. Ua lōʻihi nā kūkākūkāʻana, akā i ka hopena, uaʻoi aku ka nui o nā manaʻo kūpono ma mua o nā kānalua, a ua hoʻomaka wau i ka hoʻokō.
ʻOi aku ka maikaʻi o ka hōʻike ʻana i ka loina o kahi hoʻonā ma nā ʻanuʻu ʻelua. E ho'āʻo mua mākou e wehe i ka module Vuex mai nā ʻaoʻao a hoʻopaʻa pololei i nā ala. ʻAe, ʻoi aku ka liʻiliʻi o ka ʻikepili i loko o ka hale kūʻai, e lilo nā getters i mea paʻakikī iki, akā ʻaʻole mākou e hoʻouka ʻelua ʻatikala. No ka polokalamu kelepona, ʻo ia paha ka hoʻopaʻapaʻa ikaika loa. E like me kēia:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Akā pehea inā hiki ke hoʻopili ʻia nā papa inoa ʻatikala ma waena o nā ala he nui a pehea inā makemake mākou e hoʻohana hou i ka ʻikepili mea Paukū e hoʻolilo i ka ʻaoʻao pou, e hoʻohuli iā ia i loko Paukū? I kēia hihia, ʻoi aku ka maikaʻi o ka hoʻohana ʻana i kēlā ʻano hana:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
Palapala ʻatikala eia he ʻano waihona ʻatikala wale nō. ʻO nā ʻatikala a pau i hoʻoiho ʻia i ka wā hoʻohana. Mālama mākou iā lākou me ka mālama nui loa, no ka mea, ʻo ia ka mea i hoʻoiho ʻia ma o ka ʻeha ma kahi o ka metro ma waena o nā kikowaena, a ʻaʻole makemake mākou e hoʻokau hou i kēia ʻeha i ka mea hoʻohana ma ke koi ʻana iā ia e hoʻouka i ka ʻikepili i loaʻa iā ia. hoʻoiho ʻia. He mea ArticlesIds ʻO ia wale nō kahi ʻano o nā ID (me he mea lā "nā loulou") i nā mea Paukū. Hāʻawi kēia ʻōnaehana iā ʻoe e pale i ka hoʻolike ʻana i ka ʻikepili maʻamau i nā ala a me ka hoʻohana hou ʻana i ka mea Paukū ke hāʻawi ʻana i kahi ʻaoʻao pou ma ka hoʻohui ʻana i nā ʻikepili i hoʻonui ʻia i loko.
Ua ʻoi aku ka akaka o ka hoʻopuka ʻana o ka papa inoa o nā ʻatikala: ʻike ʻia ka ʻāpana iterator ma o ka laha me nā ID ʻatikala a huki i ka ʻāpana teaser ʻatikala, e hāʻawi ana i ka Id ma ke ʻano he prop, a ʻo ka ʻāpana keiki, e kiʻi i ka ʻikepili pono mai. Palapala ʻatikala. Ke hele ʻoe i ka ʻaoʻao hoʻolaha, loaʻa iā mākou ka lā i loaʻa mai Palapala ʻatikala, noi mākou e kiʻi i ka ʻikepili i nalowale a hoʻohui wale iā ia i ka mea i loaʻa.
No ke aha i ʻoi aku ka maikaʻi o kēia ala? E like me kaʻu i kākau ai ma luna, ʻoi aku ka maʻalahi o kēia ala e pili ana i ka ʻikepili i hoʻoiho ʻia a hiki iā ʻoe ke hoʻohana hou. Akā ma waho aʻe o kēia, wehe ia i ke ala i kekahi mau mea hou e kūpono i loko o ia ʻano hoʻolālā. No ka laʻana, koho a hoʻouka ʻana i nā ʻatikala i loko o ka hānai e like me ka ʻike ʻana. Hiki iā mākou ke hoʻokomo i nā pou hou loa i loko o kahi "waihona" Palapala ʻatikala, mālama i kahi papa inoa o nā ID hou i loko ArticlesIds a haʻi aku i ka mea hoʻohana no ia mea. Ke kaomi nei mākou i ka pihi "Show new publications", e hoʻokomo wale mākou i nā Id hou i ka hoʻomaka o ka papa inoa o nā ʻatikala o kēia manawa a e hana nā mea āpau.
ʻOi aku ka leʻaleʻa o ka hoʻoiho ʻana
ʻO ka icing ma luna o ka refactoring keke ka manaʻo o nā iwi, kahi e hoʻohaʻahaʻa iki ai i ke kaʻina o ka hoʻoiho ʻana i nā ʻike ma ka pūnaewele lohi. ʻAʻohe kūkākūkā e pili ana i kēia mea; ʻo ke ala mai ka manaʻo a i ka prototype he ʻelua mau hola. Ua kiʻi maoli ka hoʻolālā iā ia iho, a ua aʻo mākou i kā mākou mau ʻāpana e hana i nā poloka div maʻalahi i ka wā e kali ana i ka ʻikepili. Ma ke kumuhana, hoʻemi maoli kēia ala i ka hoʻouka ʻana i ka nui o nā hormones stress i loko o ke kino o ka mea hoʻohana. Penei ke ano o ka iwi.
Habraloading
E noonoo ana
Ua hana au ma Habré no ʻeono mahina a ke nīnau mau nei koʻu mau hoaaloha: ʻAe, pehea ʻoe e makemake ai ma laila? ʻAe, ʻoluʻolu - ʻae. Akā aia kekahi mea e ʻokoʻa ai kēia hana mai nā mea ʻē aʻe. Ua hana au i loko o nā hui i mālama ʻole i kā lākou huahana, ʻaʻole ʻike a hoʻomaopopo paha ʻo wai kā lākou mea hoʻohana. Akā ma ʻaneʻi he ʻokoʻa nā mea a pau. Maanei ʻoe e manaʻo ai i ke kuleana no kāu hana. I ke kaʻina o ka hoʻomohala ʻana i kahi hiʻohiʻona, lilo ʻoe i mea nona, e komo i nā hālāwai huahana āpau e pili ana i kāu hana, e hana i nā manaʻo a hoʻoholo iā ʻoe iho. ʻO ka hana ʻana i kahi huahana āu e hoʻohana ai i kēlā me kēia lā iā ʻoe iho he ʻoluʻolu loa, akā ʻo ke kākau ʻana i nā code no ka poʻe i ʻoi aku ka maikaʻi ma mua o ʻoe he manaʻo kupaianaha wale nō (ʻaʻohe hoʻomākeʻaka).
Ma hope o ka hoʻokuʻu ʻia ʻana o kēia mau hoʻololi, loaʻa iā mākou nā manaʻo maikaʻi, a maikaʻi loa. He mea hoolana. Mahalo iā ʻoe! Kākau hou aku.
E hoʻomanaʻo wau iā ʻoe ma hope o nā hoʻololi honua ua hoʻoholo mākou e hoʻololi i ka hoʻolālā a hoʻokaʻawale i ka papa proxy i kahi ʻokoʻa. Ua hoʻokuʻu ʻia ka hoʻolālā "ʻelua-node" ma ke ʻano o ka hoʻāʻo beta lehulehu. I kēia manawa hiki i kekahi ke hoʻololi iā ia a kōkua iā mākou e hoʻomaikaʻi i ka mobile Habr. ʻO ia wale nō no kēia lā. E hauʻoli wau e pane i kāu mau nīnau a pau ma nā manaʻo.
Source: www.habr.com