Kuring geus salawasna geus kabetot dina kumaha Habr ieu terstruktur ti jero, kumaha workflow ieu terstruktur, kumaha komunikasi anu terstruktur, naon standar dipaké sarta kumaha kode umumna ditulis di dieu. Untungna, kuring meunang kasempetan kitu, sabab kuring anyar jadi bagian tina tim habra. Nganggo conto refactoring leutik tina versi mobile, kuring bakal nyobian ngajawab patarosan: kumaha éta damel di payun. Dina program: Node, Vue, Vuex sareng SSR kalayan saos tina catetan ngeunaan pangalaman pribadi dina Habr.
Hal kahiji anu anjeun kedah terang ngeunaan tim pamekaran nyaéta aya sababaraha urang. Teu cukup - ieu tilu fronts, dua bék sarta kalungguhan teknis sadaya Habr - Baxley. Aya, tangtosna, ogé tester, desainer, tilu Vadim, sapu mujijat, spesialis pamasaran jeung Bumburums séjén. Tapi ngan aya genep kontributor langsung kana sumber Habr. Ieu rada langka - hiji proyék kalawan panongton multimillion-dollar, nu ti luar kasampak kawas perusahaan raksasa, dina kanyataanana Sigana leuwih kawas ngamimitian cozy jeung struktur organisasi flattest mungkin.
Sapertos seueur perusahaan IT anu sanés, Habr nyatakeun ideu Agile, prakték CI, sareng éta waé. Tapi numutkeun parasaan kuring, Habr salaku produk langkung seueur dina gelombang tibatan terus-terusan. Ku kituna, pikeun sababaraha sprints sakaligus, urang rajin kode hiji hal, ngarancang jeung redesign, megatkeun hiji hal sarta ngalereskeun eta, ngabéréskeun tiket jeung nyieun nu anyar, lengkah dina rake jeung némbak sorangan dina suku, dina raraga tungtungna ngaleupaskeun fitur kana. produksi. Lajeng aya hiji lull tangtu, periode redevelopment, waktu pikeun ngalakukeun naon dina kuadran "penting-teu urgent".
Justru ieu "off-musim" ngutruk anu bakal dibahas di handap ieu. Waktos ieu kalebet refactoring versi mobile Habr. Sacara umum, parusahaan boga amoy tinggi pikeun eta, sarta dina mangsa nu bakal datang kudu ngaganti sakabéh kebon binatang tina incarnations Habr sarta jadi solusi cross-platform universal. Someday bakal aya perenah adaptif, PWA, mode offline, kustomisasi pamaké, sarta loba hal metot séjén.
Hayu urang nyetél tugas
Sakali, dina stand-up biasa, salah sahiji hareup spoke ngeunaan masalah dina arsitektur komponén koméntar tina versi mobile. Kalayan dina pikiran ieu, urang ngayakeun rapat mikro dina format psikoterapi grup. Sarerea nyandak robah warna ka warna di mana nyeri, aranjeunna dirékam sagalana dina kertas, aranjeunna simpati, ngartos, iwal teu aya nu keprok. hasilna éta daptar 20 masalah, nu nerangkeun yén mobile Habr masih jalan panjang tur thorny kana kasuksésan.
Kuring utamina prihatin ngeunaan efisiensi pamakean sumber daya sareng anu disebut antarmuka anu mulus. Saban poé, dina rute home-work-home, kuring nempo telepon heubeul kuring desperately nampilkeun 20 headline dina feed. Éta katingali sapertos kieu:
panganteur Mobile Habr saméméh refactoring
Aya naon di dieu? Pondokna, server ngalayanan halaman HTML ka sadayana dina cara anu sami, henteu paduli naha pangguna asup atanapi henteu. Lajeng klien JS ieu dimuat tur requests data diperlukeun deui, tapi disaluyukeun pikeun otorisasina. Nyaéta, kami leres-leres ngalakukeun padamelan anu sami dua kali. panganteur flickered, sarta pamaké diundeur alus saratus kilobyte tambahan. Sacara rinci sagalana katingali malah leuwih creepy.
Skéma SSR-CSR heubeul. Otorisasina ngan mungkin dina tahap C3 jeung C4, nalika Node JS teu sibuk generating HTML jeung bisa requests proxy kana API.
Arsitéktur urang dina waktos éta dijelaskeun sacara akurat ku salah sahiji pangguna Habr:
Versi mobile téh crap. Abdi nyarios sapertos kitu. Kombinasi dahsyat SSR sareng CSR.
Urang kedah ngaku, sanaos kumaha sedihna.
Kuring ditaksir pilihan, dijieun tikét di Jira kalawan déskripsi dina tingkat "éta goréng ayeuna, ngalakukeun hal eta katuhu" na decomposed tugas dina stroke lega:
- ngagunakeun deui data,
- ngaminimalkeun jumlah gambar ulang,
- ngaleungitkeun duplikat pamundut,
- ngajantenkeun prosés ngamuat langkung atra.
Hayu urang ngagunakeun deui data
Dina tiori, rendering sisi server dirancang pikeun ngajawab dua masalah: teu kakurangan tina watesan search engine dina watesan sareng ningkatkeun métrik (pasti tambah parah ). Dina skenario Palasik nu tungtungna sataun (masih on Backbone.js), SSR nyaéta aplikasi JS isomorphic sarua ngajalankeun di lingkungan Node. Server ngan saukur ngirimkeun perenah anu dibangkitkeun salaku réspon kana pamundut. Lajeng rehidrasi lumangsung di sisi klien, lajeng sagalana jalan tanpa reloads kaca. Pikeun Habr, sakumaha keur loba sumber sejenna kalawan eusi téks, rendering server mangrupa unsur kritis dina ngawangun hubungan ramah jeung mesin pencari.
Najan kanyataan yén leuwih ti genep taun geus kaliwat saprak mecenghulna téhnologi, sarta dina mangsa ieu loba cai geus bener flown handapeun sasak di dunya hareup-tungtung, keur loba pamekar gagasan ieu masih shrouded di rasiah. Simkuring teu nangtung kumisan jeung digulung kaluar aplikasi Vue kalayan rojongan SSR kana produksi, leungit hiji jéntré leutik: urang teu ngirim kaayaan awal ka klien nu.
Naha? Teu aya jawaban anu pasti pikeun patarosan ieu. Boh aranjeunna henteu hoyong ningkatkeun ukuran réspon ti server, atanapi kusabab sakumpulan masalah arsitéktur anu sanés, atanapi ngan saukur henteu angkat. Hiji cara atanapi anu sanés, ngalungkeun kaayaan sareng nganggo deui sadayana anu dilakukeun ku server sigana cocog sareng mangpaat. Tugas éta sabenerna sepele - kana konteks palaksanaan, sarta Vue otomatis nambahkeun kana perenah dihasilkeun salaku variabel global: window.__INITIAL_STATE__.
Salah sahiji masalah anu timbul nyaéta henteu mampuh ngarobih struktur siklik kana JSON (); ieu direngsekeun ku saukur ngaganti struktur misalna kalawan counterparts datar maranéhanana.
Salaku tambahan, nalika ngurus eusi UGC, anjeun kedah émut yén data kedah dirobih kana éntitas HTML supados henteu ngarobih HTML. Pikeun tujuan ieu kami nganggo .
Ngaminimalkeun redraws
Sakumaha anjeun tiasa tingali tina diagram di luhur, dina kasus urang, hiji conto Node JS ngalaksanakeun dua fungsi: SSR sareng "proxy" dina API, dimana otorisasina pangguna lumangsung. kaayaan ieu ngajadikeun eta teu mungkin mun otorisasi bari kode JS dijalankeun dina server, saprak titik hiji single-threaded, sarta fungsi SSR nyaeta sinkron. Hartina, server ngan saukur teu bisa ngirim requests ka sorangan bari callstack sibuk ku hal. Tétéla yén urang ngamutahirkeun kaayaan, tapi antarbeungeutna teu eureun twitching, saprak data dina klien kudu diropéa nyokot kana akun sési pamaké. Urang kedah ngajarkeun aplikasi urang pikeun nempatkeun data anu leres dina kaayaan awal, kalayan ngitung login pangguna.
Aya ngan dua solusi pikeun masalah:
- ngagantelkeun data otorisasina kana pamundut cross-server;
- pamisah Node JS lapisan kana dua instansi misah.
Solusi kahiji diperlukeun pamakéan variabel global dina server, sarta kadua ngalegaan deadline pikeun completing tugas ku sahanteuna sabulan.
Kumaha carana ngadamel pilihan? Habr mindeng ngalir sapanjang jalur sahenteuna lalawanan. Sacara informal, aya kahayang umum pikeun ngirangan siklus tina ide ka prototipe ka minimum. Modél sikep kana produk éta rada ngingetkeun kana postulat booking.com, ngan ukur bédana nyaéta Habr nyandak tanggapan pangguna langkung serius sareng percanten ka anjeun, salaku pamekar, pikeun nyandak kaputusan sapertos kitu.
Saatos logika ieu sareng kahayang kuring pikeun gancang ngajawab masalah, kuring milih variabel global. Jeung, sakumaha mindeng kajadian, anjeun kudu mayar aranjeunna sooner atanapi engké. Kami mayar ampir langsung: kami damel dina sabtu minggu, ngabersihkeun akibatna, nyerat sarta mimiti ngabagi server kana dua bagian. Kasalahan éta bodo pisan, sareng bug anu ngalibatkeun éta henteu gampang pikeun baranahan. Na enya, éta éra pikeun ieu, tapi hiji atawa cara séjén, stumbling na groaning, PoC abdi kalayan variabel global Tapi indit kana produksi jeung digawé rada suksés bari ngantosan pindah ka arsitéktur "dua-titik" anyar. Ieu mangrupikeun léngkah anu penting, sabab sacara resmi tujuanna dihontal - SSR diajar nganteurkeun halaman anu siap dianggo, sareng UI janten langkung tenang.
Antarbeungeut Mobile Habr saatos tahap mimiti refactoring
Pamustunganana, arsitéktur SSR-CSR tina versi sélulér ngarah kana gambar ieu:
"Dua-titik" sirkuit SSR-CSR. API Node JS sok siap pikeun Asynchronous I / O sarta henteu diblokir ku fungsi SSR, saprak dimungkinkeun aya dina instansi misah. ranté pamundut # 3 teu diperlukeun.
Ngaleungitkeun pamundut duplikat
Saatos manipulasi dilakukeun, rendering awal halaman henteu deui nyababkeun epilepsi. Tapi pamakéan salajengna Habr dina modeu SPA masih ngabalukarkeun kabingungan.
Kusabab dasar aliran pamaké téh transisi tina formulir daptar artikel → artikel → komentar sarta sabalikna, éta penting pikeun ngaoptimalkeun konsumsi sumberdaya ranté ieu di tempat munggaran.
Balik deui ka feed pos provokes pamundut data anyar
Teu perlu ngagali jero. Dina screencast di luhur anjeun tiasa ningali yén aplikasi naroskeun deui daptar tulisan nalika swiping deui, sareng salami pamundut urang henteu ningali tulisan, anu hartosna data sateuacana ngaleungit dimana waé. Sigana komponén daptar artikel ngagunakeun kaayaan lokal sarta leungit dina ngancurkeun. Kanyataanna, aplikasi nu dipaké kaayaan global, tapi arsitéktur Vuex diwangun sirah-on: modul dihijikeun ka kaca, anu dina gilirannana dihijikeun ka ruteu. Sumawona, sadaya modul "disposable" - unggal kunjungan salajengna ka halaman nyerat deui sadayana modul:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
Dina total, urang ngagaduhan modul Daptar Artikel, nu ngandung objék tina tipe artikel jeung modul PageArtikel, anu mangrupikeun versi obyék anu diperpanjang artikel, sapertos ArtikelLengkep. Sacara umum, palaksanaan ieu teu mawa nanaon dahsyat sorangan - éta basajan pisan, malah bisa disebutkeun naif, tapi pisan kaharti. Upami anjeun ngareset modul unggal waktos anjeun ngarobih rute, teras anjeun tiasa hirup sareng éta. Sanajan kitu, pindah antara feed artikel, contona / eupan → / sadayana, dijamin buang jauh sagalana nu patali jeung feed pribadi, saprak urang ngan boga hiji Daptar Artikel, dimana anjeun kedah nempatkeun data énggal. Ieu deui ngabalukarkeun urang duplikasi requests.
Saatos ngumpulkeun sadayana anu kuring tiasa ngagali dina topik, kuring ngarumuskeun struktur kaayaan énggal sareng masihan ka kolega kuring. Diskusi éta panjang, tapi tungtungna argumen anu nguntungkeun langkung seueur mamang, sareng kuring mimiti palaksanaan.
Logika hiji solusi anu pangalusna diungkabkeun dina dua hambalan. Kahiji urang nyoba decouple modul Vuex tina kaca jeung ngabeungkeut langsung ka ruteu. Sumuhun, bakal aya saeutik leuwih data di toko, getters bakal jadi saeutik leuwih kompleks, tapi urang moal muka artikel dua kali. Pikeun versi mobile, ieu meureun argumen neneng. Éta bakal katingali sapertos kieu:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Tapi kumaha upami daptar artikel tiasa tumpang tindih antara sababaraha rute sareng kumaha upami urang hoyong nganggo deui data obyék artikel pikeun nyieun kaca pos, ngarobahna kana ArtikelLengkep? Dina hal ieu, bakal langkung logis ngagunakeun struktur sapertos kieu:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
Daptar Artikel didieu éta ngan jenis gudang artikel. Sadaya tulisan anu diunduh salami sési pangguna. Kami ngarawat aranjeunna kalayan ati-ati pisan, sabab ieu mangrupikeun lalu lintas anu tiasa diunduh ku nyeri dimana waé di metro antara stasion, sareng kami pasti henteu hoyong nimbulkeun nyeri ieu ka pangguna deui ku maksa anjeunna ngamuat data anu parantos aya. diundeur. Hiji obyék ArtikelId ngan saukur hiji Asép Sunandar Sunarya ID (saolah-olah "numbu") ka objék artikel. Struktur ieu ngidinan Anjeun pikeun ngahindarkeun duplicating data umum pikeun ruteu jeung reusing objék artikel nalika rendering kaca pos ku merging data nambahan kana eta.
Kaluaran tina daptar artikel ogé geus jadi leuwih transparan: komponén iterator iterates ngaliwatan Asép Sunandar Sunarya kalawan ID artikel jeung draws komponén teaser artikel, ngalirkeun Id salaku prop, sarta komponén anak, gilirannana, retrieves data diperlukeun ti Daptar Artikel. Lamun anjeun buka kaca publikasi, urang meunang tanggal geus aya ti Daptar Artikel, urang ngadamel pamundut pikeun ménta data leungit tur saukur nambahkeun kana obyék aya.
Naha pendekatan ieu langkung saé? Sakumaha kuring nyerat di luhur, pendekatan ieu langkung lembut ngeunaan data anu diunduh sareng ngamungkinkeun anjeun nganggo deui. Tapi sagigireun ieu, éta muka jalan pikeun sababaraha kemungkinan anyar anu pas kana arsitektur sapertos kitu. Salaku conto, polling sareng ngamuat tulisan kana feed nalika muncul. Urang ngan saukur tiasa nempatkeun tulisan panganyarna dina "gudang" Daptar Artikel, simpen daptar misah tina KTP anyar dina ArtikelId jeung ngabéjaan pamaké ngeunaan eta. Nalika urang klik tombol "Témbongkeun publikasi anyar", urang ngan saukur bakal nyelapkeun ID anyar kana awal susunan daptar artikel ayeuna jeung sagalana bakal dianggo ampir magically.
Ngadamel unduhan langkung pikaresepeun
The icing on jajan refactoring nyaéta konsép skeletons, nu ngajadikeun prosés ngundeur eusi dina Internet slow saeutik kirang disgusting. Henteu aya diskusi ngeunaan masalah ieu; jalur ti ide ka prototipe nyandak sacara harfiah dua jam. Desain praktis ngagambar sorangan, sarta kami ngajarkeun komponén urang sangkan basajan, bieu kedip-kedip blok div bari ngantosan data. Sacara subyektif, pendekatan pikeun ngamuat ieu leres-leres ngirangan jumlah hormon setrés dina awak pangguna. Rorongkong kasampak kawas kieu:
Habraloading
Ngeunteung
Kuring geus digawé di Habré salila genep bulan jeung babaturan kuring masih nanya: sumur, kumaha anjeun resep dinya? Oké, nyaman - enya. Tapi aya hiji hal anu ngajadikeun karya ieu béda ti batur. Kuring digawé di tim anu sagemblengna acuh ka produk maranéhanana, teu nyaho atawa ngarti saha pamaké maranéhanana éta. Tapi di dieu sagalana béda. Di dieu anjeun ngarasa tanggung jawab naon anu anjeun lakukeun. Dina prosés ngembangkeun hiji fitur, anjeun sawaréh jadi nu bogana, ilubiung dina sagala rapat produk patali fungsionalitas anjeun, nyieun bongbolongan sarta nyieun kaputusan sorangan. Nyiptakeun produk anu anjeun anggo unggal dintenna keren pisan, tapi nyerat kodeu pikeun jalma anu sigana langkung saé tibatan anjeun ngan ukur perasaan anu luar biasa (henteu sarcasm).
Saatos sékrési sagala parobahan ieu, kami nampi eupan balik positif, tur éta pisan, pisan nice. Ieu mereun. Hatur nuhun! Tulis deui.
Hayu atuh ngingetan yén sanggeus variabel global urang mutuskeun pikeun ngarobah arsitektur jeung allocate lapisan proxy kana conto misah. Arsitéktur "dua-titik" parantos ngahontal sékrési dina bentuk tés béta umum. Ayeuna saha waé tiasa ngalih ka éta sareng ngabantosan urang ngajantenkeun Habr mobile langkung saé. Sakitu wae kanggo dinten ieu. Kuring bakal senang ngajawab sagala patarosan anjeun dina komentar.
sumber: www.habr.com