Düýn ýazan ýüzlerçe setirimi pozdum we ýerine 32 setir täze kod çalyşdym. Bu, sesiň çalynýandygyny ýa-da ýokdugyny görkezmek üçin ulanylýan   üçin aýratynlykdy. TheOpenPresenter  Everyygy-ýygydan, durmuşa geçirmek gaty gönümel görünýän bir funksiýanyň üstünde işleýärdim. Bu ýagdaýda diňe ses çalynanda bu nyşany görkezmeli boldum.   Enougheterlik ýönekeý. Bularyň hersi birnäçe plagini öz içine alýan sahna. Her bir pluginiň   ýaly öz aýratynlygy bar. Plaginleriň arasynda bahalary birleşdirip bileris, baýdak dogry bolsa, nyşany görkezip bileris. isPlaying  Çözüw gurmak  Esasy mesele, bu maglumatlary nädip almaly. Serediň, maglumatlara göni girip bilerdik. Emma her bir pluginiň öz shemasy bolup biler. Käbir pluginlerde ýönekeý   häsiýeti bolup bilse-de, käbirlerine oýun ýagdaýyny görkezmek üçin has çylşyrymly bir zat gerek bolup biler. isPlaying  Pleönekeý, näme üçin pluginiň ýagdaýy yzyna gaýtarýan / funksiýany hasaba almagyna rugsat bermeli däl?  Bu, TheOpenPresenter-iň köp pluginleri üçin ulanýan nagşy. Şonda-da, ony   obýektine abstrakt edip bileris. Şonuň üçin bize başga bir döwlet gerek bolsa, ony şu ýere goşup bileris. Plagin üçin nähili bolup biljekdigi: SceneState   // The pattern we use for plugins serverPluginApi.onPluginDataCreated(pluginName, onPluginDataCreated); serverPluginApi.onPluginDataLoaded(pluginName, onPluginDataLoaded); serverPluginApi.registerRemoteViewWebComponent( pluginName, remoteWebComponentTag, ); // Example of how the new API might look like serverPluginApi.registerSceneState( pluginName, (_, rendererData) => { return { audioIsPlaying: !!rendererData.find((x) => x.isPlaying), } }, );  Serwer bilen işlemek  Aboveokardaky kody serwerde işleýändigine üns beriň. Sebäbi TheOpenPresenter 3 aýry komponentden durýar:  Uzakdan - bu ses görkezijisi görkezilen ýerde  Renderer - ses çalýar  Serwer - ikisini birleşdirýär  Iň gowusy, serwere goşmaça ýük goşmazlyk üçin muny öň tarapda (uzakda) çözmeli. Şeýle-de bolsa, bu funksiýany hasaba almak bulaşyk bolup biler. Biziň öňümizde web komponentleri ýüklenen mikro-frontend arhitekturasy ulanylýar.  Aşakdaky gyzyl meýdan React gabygydyr. Greenaşyl meýdan web bölekleri arkaly ýüklenýär we her bir plugin tarapyndan dolandyrylýar.   Ses nyşanynyň gabygyň çep tarapynda ýerleşýändigine üns beriň. Gabykda zerur funksiýany nädip üpjün etmeli? JS komponentini web komponent bukjasyna goşup bileris, ýöne bu uzak möhletde bulaşyk ýaly bolup görünýär.  Muny serwerde dolandyrmak muny etmegiň dogry usuly ýaly bolup görünýär.  Maglumatlaryň üsti bilen  Bu karar bilen durmuşa geçirmegiň wagty geldi. Edilmeli birnäçe zat bar:  Plagin API dörediň  Bu maglumatlary öň tarapa beriň  UI-ni sarp ediň we täzeläň  Erine ýetirmek  Jikme-jiklikler bilen size jogap bermerin, şonuň üçin umumy syn. API gaty gönümel däldi, sebäbi maglumatlarymyz gaty bulaşyk bolup biler. Gysgaça: Bir sahnada birnäçe plugin bolup biler. Birnäçe görkeziji bolup biler, hersi bir sahnany başgaça görýär. Şeýlelik bilen, bir plugin ony dürli görnüşde görkezýän birnäçe görkeziji bolup biler. Dataöne birneme maglumat manipulýasiýasy bilen mesele çözüldi.   UI sarp etmek we täzelemek  Bahany sarp etmek gönümeldi. Yjs-yň habar beriş protokolyny maglumatlary bermek üçin ulanmagy göz öňünde tutdum, sebäbi real wagt we çarçuwasy eýýäm bar. Döwlet şeýle saklanýar. Şeýle-de bolsa, serwerden bu maglumatlary goşmak öz meselesi. Şonuň üçin ýerine GraphQL ulanmagy makul bildim - platformadaky beýleki zatlar üçin ulanýan teswirnamamyz.  Şonuň üçin etmeli zadymyz ahyrky nokada jaň etmek, GraphQL abunalygy bilen diňlemek we nyşany zerur bolanda görkezmek. Boldy.   Bu maglumatlary öň tarapda bermek  Bagtymyza, GraphQL shemasyny giňeltmegi aňsatlaşdyrýan   ulanýarys. Şeýle hem, GraphQL shemasyna   goşmak arkaly abuna edip bileris. Soňra bir mowzuga tomaşa eder we şol mowzukda   jaň edenimizde bahany täzelär. Mysal üçin: Postgraphile @pgSubscription pg_notify   await pgPool.query( `select pg_notify('graphql:sceneState:${id}','{}');`, [], );  Maglumatlary dolandyrmak bizar etdi, ýöne biraz sabyr etdi we gutardy!  Enigma iň soňky bölegi, gerek wagty   diýip atlandyrýar. pg_notify  Munuň üçin döwlete (Yjs) diňleýji goşup bileris we haýsydyr bir zat üýtgese habarnamany çagyryp bileris:   state.observeDeep(async () => { // Call pg_notify here });  Doeke-täk zat, öndürijiligi gowulandyrmak. Häzirki wagtda bu funksiýa her bir ownuk üýtgeşiklige çagyrylýar, öň hatarda täzelenýär. Netijäni hasaplap bileris we täzelenmä basmazdan ozal bir zat üýtgese, deňeşdirip bileris.  Has gowy çözgüt  Indi bu çözgüt elbetde işleýär. Everyöne her üýtgeşmäni diňleýändigimizi ýigrenýärdim. Gerek däl we ýerine ýetirişiň nähili ulaljagyna ynanamok. Has gowy çözgüt barmy?  Şeýdip, bir sekunt yza çekildim we bir pikir geldi:  Esasy zatlara gidip, Yjs-dan maglumatlary nädip ulanmaly?  Mesele, her bir plugin oýnamagyň ýagdaýyny görkezmek üçin dürli usullary ulanyp bilerdi. Şeýlelik bilen, emele gelen ýagdaýy özümiz nädip hasaplamalydygyny bilmegiň usuly gerekdi. Useröne ulanyja bir funksiýa geçmäge rugsat bermegiň ýerine,  muny görkezmek üçin ulanyp boljak emlägini näme üçin saklamaly däl?  Döwleti hasaplamak funksiýasyny ýerine ýetirmegiň ýerine, her bir plugin ätiýaçlandyrylan ýagdaýy   ýaly häsiýetleri bilen bar bolan maglumatlary bilen gönüden-göni düzüp biler. Bu bahany gönüden-göni ulanyp bilerler ýa-da bar bolan häsiýetleri bilen sinhron saklap bilerler: __audioIsPlaying   const onRendererDataLoaded = ( rendererData, ) => { watchYjs( // Watch the isPlaying property (x) => x.isPlaying, () => { // And if it changes, sync the __audioIsPlaying property rendererData.set("__audioIsPlaying", rendererData.get("isPlaying")); }, ); };  Köne kody pozmak  Täze usul ajaýyp. Goşmaça diňleýji ýok, goşmaça API ýok, diňe ýönekeý ätiýaçlyk emläk.  Bahasy? Dogrusy, ilkinji durmuşa geçirmegiň 95% -ini eýýäm ýazdym 🫣     “Şunça wagtlap işlänimde muny pozmak gaty utanç bolar. Bu bir zatdan başga hemme zat ajaýyp! ” - Meniň pikirim  Bu meniň ilkinji gezek däl. Ikinji ýa-da üçünji däl. Bu gezek bary-ýogy birnäçe sagat iş boldy. Durmuşa geçirmek üçin näçe wagt gerek bolsa, goýbermek şonça-da kyn. Seröne serwerlere birikdirilmesek, ýazýan kodumyz bilen hem baglanyşmaly däldiris.  Ikinji durmuşa geçirmegiň has gowudygy äşgärdir. Has çalt, az hereket edýän bölekler, az API üstü we saklamak üçin az kod.   289 täze setir goşdy,   diňe 32 täze setir goşdy. Birinji ýerine ýetiriş ikinji ýerine ýetiriş   Onda näme öwrenmeli?  Bolýar, belki ilki bilen iň ýönekeý çözgüdi tapyň. Sometimesöne käwagt diňe bu hakda pikirlenip iň oňat çözgüt tapyp bilmeris. Eger şeýle bolsa,   . Belki, ondan bir zat çykarmak üçin blog ýazyň! koduňyzy söýmäň we ony zyňmakdan gorkmaň  Şu wagta çenli okaýan bolsaňyz,   synap görüp bilersiňiz! Ekranyňyzyň islendik birini uzakdan dolandyrmaga mümkinçilik berýän açyk çeşme görkeziş ulgamy. TheOpenPresenter-i  Slaýdşowlary görkeziň, wideo oýnaň, dolandyryş paneli hökmünde ulanyň we başgalar. Bu ýazgydan aýdyşyňyz ýaly programma üpjünçiligi entek gaty ir, ýöne yzygiderli ulanmak üçin durnukly. Men muny her hepde duşuşmak üçin ulanýaryn.  Islendik sorag beriň. Ora-da   meseleler barada habar bermäge arkaýyn boluň. Github reposynda

2022 - HackerNoon Contributor of the Year - Developer

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Developer

Bu ses hekaýanyň asyl dilinde öndürildi!

Koduma aşyk boldum, soň öldürmeli boldum

About Author

JOGAPLAR

HANG TAGS

BU madda öňe sürüldi

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps