Building a directory site sounds trivial until you find yourself wiring up databases, caching layers, and reactive front

Kujenga tovuti ya directory kunaonekana kuwa jambo rahisi mpaka unajikuta unaunganisha kanzidata, tabaka za kashia, na mifumo ya mbele ya upande wa mtumiaji (reactive front-end frameworks) ili tu kuonyesha kitu ambacho kimsingi ni orodha iliyopangwa vizuri ya maudhui. Hivi karibuni nilijenga Social Tools List, tovuti ya kulinganisha programu za mitandao ya kijamii. Lengo langu lilikuwa kuifanya iingie mtandaoni haraka, iwe na kasi, na kuepuka kusimamia miundombinu kwa maudhui ambayo hubadilika tu ninapoongeza au kusasisha kifaa. Nilichagua mfumo wa kwanza-static: Astro kwa ajili ya uundaji wa tovuti, TypeScript kwa data iliyopangwa, na Cloudflare Workers kwa ajili ya kuweka tovuti hewani (deployment). Matokeo yake ni tovuti inayofunguka papo hapo, inayogharimu karibu sifuri kuihifadhi, na inayohitaji usimamizi wa kanzidata.

Kwa Nini Mfumo wa Kwanza-Static Una Mantiki kwa Directory

Programu nyingi za wavuti hutumia kwa kawaida uwasilishaji wa seva (server rendering) au mifumo ya ukurasa mmoja (single-page architectures) kwa sababu zinaonekana kama chaguzi salama na za kisasa. Lakini si kila tovuti inayopokea ingizo la mtumiaji kila wakati wa ombi. Social Tools List ni rasilimali inayotumiwa zaidi kusoma. Data ya ulinganisho hubadilika ninapoweka sasisho, si wakati mgeni anapofanya 'refresh'. Kuwasilisha HTML mapema kunaondoa hitaji la kuuliza kanzidata (database queries) kwenye 'edge', uundaji wa kiolezo (template compilation) papo hapo, au mzigo wa 'hydration' kwenye kivinjari. Nautengeneza tovuti wakati wa ujenzi (build time), ninaweka faili za static, na kuacha 'worker' mwepesi usimamie sehemu ya nje. Hii huweka muda wa majibu kuwa mdogo na huondoa aina nzima ya hitilafu za wakati wa utendaji (runtime failures).

Hifadhi Data kwenye TypeScript, Sio Kanzidata

Situmii kanzidata. Kila kifaa kwenye directory kimefafanuliwa kama kitu cha TypeScript (TypeScript object) chenye slug, jina, domain, na orodha (array) ya workflow zinazoungwa mkono. Ingizo la kawaida linaonekana hivi:

{
  slug: 'buffer',
  name: 'Buffer',
  domain: 'buffer.com',
  workflows: ['scheduling', 'analytics']
}

Kuhifadhi data katika lugha ile ile inayojenga tovuti kuna faida mbili za haraka. Kwanza, 'pull requests' zinakuwa mapitio ya maudhui. Ninapoongeza kifaa, 'diff' inaonyesha nyanja (fields) na thamani kamili, na mwenzangu anaweza kugundua makosa ya kimaandishi au domain isiyo sahihi bila kuhitaji kujifunza kiolesura cha CMS. Pili, 'compiler' ya TypeScript inahakikisha muundo wa kila rekodi. Nikisahau kuweka slug au nikikosea kuandika ufunguo wa workflow, ujenzi (build) hushindwa kabla ya data mbaya kufika kwenye ukurasa.

Kanzidata ingeleta mchakato wa 'migrations', 'connection strings', mikakati ya kashia (caching strategies), na taratibu za nakala ya akiba (backup routines). Kwa directory yenye ingizo kadhaa mamia ninachokisimamia mwenyewe, mzigo huo ni kizuizi tu. Data za static kwenye moduli za TypeScript ndicho chaguo sahihi na cha bei rahisi zaidi kwa mfumo huu. Sehemu ya "sahihi" ni muhimu. Sio tu kuhusu kuokoa pesa; ni kuhusu kuondoa tabaka za uabstraktioni (abstraction layers) zinazotatua matatizo ambayo sina.

Acha Astro Isimamie Routing na Rendering

Astro inatengeneza ukurasa mmoja wa HTML kwa kila kifaa kutoka kwenye njia moja ya kidinamiki (dynamic route). Ninafafanua kiungo kimoja cha mpangilio (layout component), na Astro inatengeneza metadata, vichwa vya habari, na data iliyopangwa kwa kila ingizo kiotomatiki. Kwa sababu seti ile ile ya data inaendesha ukurasa mkuu (index), vituo vya kategoria za workflow, na kurasa za maelezo ya kila kifaa, hakuna uwezekano kwamba kadi kwenye ukurasa wa nyumbani itaonyesha maelezo tofauti na ukurasa wenyewe wa maelezo. Katika mipangilio ya CMS ya jadi, mara nyingi huona mabadiliko yasiyolingana: API inarudisha toleo moja, kashia (cache) lingine, na uwasilishaji wa upande wa mteja (client-side render) lingine la tatu. Uundaji wa static kutoka kwenye chanzo kimoja cha ukweli (single source of truth) huzuia hilo.

Usanifu wa 'island architecture' wa Astro pia unafanya iwe rahisi kuongeza vipande vidogo vya mwingiliano (interactive pieces) bila kuharibu ukurasa mzima kwa JavaScript. Tovuti inatolewa kama HTML ya static, na ni skripti ya kuchuja tu inayofanya 'hydration' kwenye sehemu yake mahususi ya DOM. Hakuna 'runtime' ya mfumo inayozunguka hati nzima. Astro pia inachukulia metadata ya ukurasa kama jambo la msingi. Kila ukurasa wa kifaa unapata lebo yake ya kichwa (title tag) na maelezo ya meta (meta description) yanayotokana moja kwa moja na rekodi ya TypeScript, hivyo sijahitaji programu nyongeza (plugin) au maktaba ya usimamizi wa 'head'.

Kuchuja Bila Mfumo

Utafutaji na uchujaji mara nyingi huwahamasisha watengenezaji kusakinisha React, Vue, au maktaba nzito ya usimamizi wa hali (state management library). Nilipinga hilo. Astro inawasilisha orodha nzima kama HTML ya kawaida kwenye seva. Skripti ndogo ya vanilla JavaScript, chini ya kilobyte moja, hukimbia kwenye kivinjari na kubadilisha sifa ya kuonyesha (display property) ya vitu vya orodha kulingana na lebo ya workflow au mlinganisho wa maandishi.

Kutoa markup nzima kunaonekana kutokuwa na ufanisi ikiwa unatokana na mazingira ya kutegemea API. Lakini fikiria mzigo wa ziada wa njia ya kawaida ya kidinamiki. Kivinjari kinapakua kifurushi cha JavaScript, kinahidrate mti wa vipengele, kinaita endpoint, kinasubiri JSON, na kisha kinatoa mistari. Kwa orodha inayoorodhesha zana chini ya mia moja, utaratibu huo ni wa polepole zaidi na hauna uhakika kuliko kuficha div ambazo tayari zipo kwenye hati. Skripti yangu inaunganisha wasikilizaji wa matukio kwenye vitufe vya kuchuja, inasoma sifa ya data-workflow kwenye kila mstari, na kuweka zisizolingana kuwa zimefichwa. Operesheni hiyo inachukua milisekunde chache.

Kwa sababu orodha ipo kwenye HTML ya awali, tovuti inaweza kutumika bila JavaScript. Watafuta wa injini za utafutaji wanaona kila kiungo na kila maelezo. Watumiaji wenye mitandao ya polepole au wenye vizuizi vya skripti bado wanapata orodha kamili. Kuchuja ni uboreshaji, siyo kizuizi.

Sitemaps na Robots kama Code

Sitemaps na robots.txt si mambo ya ziada yanayoandikwa kwa mkono. Ni Astro routes zinazotumia seti ile ile ya data na URL helpers kama