Dalykai, kuriuos norėčiau žinoti prieš dirbdamas su Electron.js

Šiame straipsnyje pasidalinsiu, kaip galite išvengti kai kurių klaidų, kurias padariau sužinodama apie Electron.js? ‍♂️. Tikiuosi, kad tai padės!

Pastaba : Tai nebus kodavimo pamoka, o diskusija apie mano asmeninius išsinešimus.

Praėjus porai mėnesių nusprendžiau daugiau dėmesio skirti savo šalutinio produkto - taggr - kūrimui . Mane įkvėpė jį kurti dėl to, kiek nuotraukų turiu savo kompiuteryje.

Tiems iš mūsų, kurie saugo savo nuotraukų atsarginę kopiją, tos kolekcijos dažnai būna tokios didelės ir sudėtingos, kad tampa visą darbo dieną tvarkomu darbu. Aplankų ir antrinių aplankų derinyje gali būti tiesioginių pranešimų nuotraukų atsarginės kopijos, didelės raiškos nuotraukos iš kelionės į Balį, dėdės vestuvių ar praėjusių metų bernvakario.

Visada tvarkyti tokias kolekcijas yra nuobodu (patikėk manimi, aš bandžiau daugelį metų). Tai taip pat sunkuatrasti jums labiausiai patikusius kadrus, paslėptus giliai aplankuose.

Taigi taggryra darbalaukio programa, kuri išsprendžia šią problemą. Tai leidžia vartotojams atrasti savo prisiminimus išsaugant jų privatumą .

Kuriu „ taggr“ kaip daugiaplatformę darbalaukio programą. Čia aš pasidalysiu kai kuriais dalykais, kuriuos sužinojau apie „cross-platform“ programų kūrimą su „Electron.js“ ir kuriuos norėčiau žinoti iš pat pradžių. Pradėkime!

Fonas

Prieš pristatydamas savo išsinešimus šioje vykstančioje kelionėje su „Electron“, norėčiau pateikti šiek tiek daugiau informacijos apie save ir „ taggr “ reikalavimus .

Kiekvienas kūrėjas yra kilęs iš skirtingos aplinkos, taip pat ir jų kuriamų programų reikalavimai.

Kontekstualizuodamas pasirinkimus, kuriuos padariau šiam projektui, būsimi kūrėjai gali padėti pasirinkti tinkamus įrankius, atsižvelgdami į jų poreikius ir kompetenciją (o ne į tai, kas ten užgauta - „GitHub“, aš žiūriu į tave).

Kaip minėta anksčiau, nuo pat pradžių aš įsivaizdavau taggr kaip daugiaplatformę programą. Programa atliktų visus reikalingus išankstinio apdorojimo ir mašininio mokymosi skaičiavimus kliento pusėje, nes dėmesys sutelktas į privatumą.

Kaip vieno asmens šou norėjau turėti galimybę vieną kartą parašyti savo programą ir išsiųsti ją į skirtingas sistemas, neprarandant sveiko proto.

Iš savo pusės aš esu inžinierius, įsimylėjęs internetą ir „JavaScript“. Anksčiau dirbau su „Java“ ir „C #“, bet man patinka internetas ir jo gyvybinga ekosistema.

Anksčiau patyręs skausmą naudojant tokius įrankius kaip „Eclipse RCP“ kuriant kliento programas, žinojau, kad nenoriu vėl dirbti su šia technologija.

Trumpai tariant, mano žymos reikalavimai „taggr“ virto maždaug taip:

  • Tai turėtų teikti paramą tarp platformų, idealiu atveju - sistemos lygmeniu. ?
  • Tai turėtų leisti man vieną kartą parašyti kodą ir, jei reikia, pakoreguoti kiekvieną platformą. ? ️
  • Tai turėtų sudaryti galimybes naudotis mašininio mokymosi galimybėmis , neatsižvelgiant į pagrindinę aplinką, be specialių vykdymo laiko. Tai turėtų būti neskausminga įrengti. ?
  • Jei įmanoma, ji turėtų naudoti žiniatinklio technologijas . Būtų puiku pasinaudoti savo turimomis žiniomis. ?

Kaip matote, reikalavimai nėra tokie: turėčiau naudoti „React with Redux“, „observable“ ir „WebSockets“ . Tai yra žemesnio lygio įgyvendinimo detalės, ir jas reikėtų nuspręsti kada ir prireikus .

Pasirinkite tinkamą darbo įrankį, o ne rinkite kaminą nuo pat pradžių, nepaisydami iškilusių problemų.

Taigi, po įnirtingo googlinimo nusprendžiau pabandyti „Electron“. Anksčiau nenaudojau tos sistemos, bet žinojau, kad daugelis kompanijų sėkmingai ją naudoja tokiuose produktuose kaip „Atom“, „VS Code“, „Discord“, „Signal“, „Slack“ ir kt.

Atvirojo kodo ir suderinamas tiek su JS, tiek su „Node“ ekosistemomis („Electron“ yra sukurtas naudojant „Chromium“ ir „Node“), „Electron.js“ buvo patrauklus įrankis atliekamam darbui.

Per daug nesigilinsiu dėl likusio kamino, nes prireikus kelis kartus keičiau pagrindines dalis (patvarumo ir peržiūros sluoksnius), ir tai nepatenka į šio straipsnio taikymo sritį.

Vis dėlto norėčiau paminėti „Tensorflow.js“, kuris leidžia vykdyti treniruotes ir įdiegti ML modelius tiesiai naršyklėje (su „WebGL“) ir „Node“ (su C susiejimais), pagrindiniame kompiuteryje neįdiegus konkrečių ML vykdymo laiko.

Taigi grįžkime prie „Electron“ - manydamas, kad jis buvo tobulas, prasidėjo linksmybės. ??

Pakanka kalbėti apie foną. Pasinerkime į išsinešimus.

1. Pradėti nuo mažo (ir lėtai)?

Tai nėra nauja koncepcija, tačiau ją verta periodiškai iškelti. Tai, kad yra daugybė nuostabių startuolių projektų su „Electron“, dar nereiškia, kad turėtumėte pasirinkti vieną iš jų.

Laukti. Ką?

Lėtas yra lygus, o sklandus - greitas. - Karinio jūrų laivyno sakymas

Su patogumu ateina ir sudėtingumas

Nors šie startuoliai apima daug naudingų integracijų („Webpack“, „Babel“, „Vue“, „React“, „Angular“, „Express“, „Jest“, „Redux“), jie taip pat turi savo problemų.

Būdamas „Electron“ naujokas nusprendžiau pasirinkti „lean“ šabloną, kuriame būtų „Electron programų kūrimo, publikavimo ir diegimo“ pagrindai be papildomų skambučių ir švilpukų. Pradžioje net ne „Webpack“.

Aš rekomenduoju pradėti nuo kažko panašaus į elektronų kalimą, kad greitai atsistotų ir veiktų. Galitenustatykite savo priklausomybės grafiką ir struktūrą viršuje, kad išmoktumėte „Electron“ lynus.

Kai iškils problemos (ir jos bus), jums bus geriau, jei sukursite savo pasirinktinį starterio projektą, o ne išsirinksite vieną iš +30 npm scenarijų ir +180 priklausomybių.

Be to, kai jaučiatės patogiai su „Electron“ pagrindu, nedvejodami paspartinkite žaidimą naudodami „Webpack / React / Redux“ / „TheNextHotFramework“. Aš tai dariau palaipsniui ir tada, kai prireikė. Nepridėkite realaus laiko duomenų bazės prie savo programėlės tik todėl, kad kažkur perskaitėte šaunų straipsnį apie ją.

2. Sąmoningai suformuokite savo programą? ‍♂️

Šis teisingai užtruko šiek tiek ilgiau, nei džiaugiuosi galėdamas pripažinti. ?

Pradžioje gali būti pagunda sumaišyti vartotojo sąsają ir „Backend“ kodą (prieiga prie failo, išplėstos procesoriaus operacijos), tačiau viskas komplikuojasi gana greitai. Kai mano programa augo funkcijomis, dydžiu ir sudėtingumu, išlaikyti vieną susivėlusią vartotojo sąsajos ir „Backend“ kodų bazę tapo sudėtingiau ir labiau linkę į klaidas. Taip pat dėl ​​sukabinimo buvo sunku išbandyti kiekvieną dalį atskirai.

Kuriant darbalaukio programą, atliekančią daugiau nei įdėtą tinklalapį (prieiga prie DB, failų prieiga, intensyvios procesoriaus užduotys ...), rekomenduoju suskaidyti programą į modulius ir sumažinti susiejimą. Įrenginių testavimas tampa vėjeliu ir yra aiškus kelias į integravimo testavimą tarp modulių. Kalbant apie taggr , aš laisvai laikiausi čia siūlomos struktūros.

Be to, yra našumas . Reikalavimai ir vartotojų lūkesčiai šiuo klausimu gali labai skirtis, priklausomai nuo jūsų kuriamos programos. Tačiau blokuoti pagrindines arba perteikimo gijas brangiais skambučiais niekada nėra gera idėja.

3. Dizainas atsižvelgiant į sriegimo modelį?

Čia per daug nesigilinsiu - tiesiog daugiausia dvejojuosi tuo, kas nuostabiai paaiškinta oficialiuose dokumentuose.

Konkrečiu atveju „ taggr“ yra daug ilgai veikiančių procesoriaus, GPU ir IO intensyvių operacijų. Vykdant šias operacijas pagrindiniame „Electron“ arba atvaizdavimo tinkle, FPS skaičius sumažėja nuo 60, todėl vartotojo sąsaja jaučiasi vangiai.

„Electron“ siūlo keletą alternatyvų toms operacijoms iškrauti iš pagrindinių ir atvaizdavimo gijų , tokių kaip „WebWorkers“, „Node Worker Threads“ ar „BrowserWindow“ egzemplioriai. Kiekvienas iš jų turi savo privalumų ir įspėjimų, o naudos atvejis, su kuriuo susidursite, nustatys, kuris iš jų geriausiai tinka.

Nepriklausomai nuo to, kurią alternatyvą pasirinksite iškrauti operacijas iš pagrindinių ir atvaizdavimo gijų (kai reikia), apsvarstykite, kokia bus ryšio sąsaja . Užtrukau, kol sugalvojau sąsają, kuria buvau patenkinta, nes tai labai paveikė jūsų programos struktūrą ir funkcijas. Radau naudos eksperimentuoti su skirtingais požiūriais prieš pasirinkdamas vieną.

Pvz., Jei manote, kad „WebWorkers“ žinučių perdavimo sąsają nėra paprasčiausia derinti, pabandykite „comlink“.

4. Išbandykite ❌, išbandykite ❌ ir išbandykite ✔️

Senos žinios, tiesa? Norėjau tai pridėti kaip paskutinį dalyką dėl kelių anekdotinių „problemų“, su kuriomis neseniai susidūriau. Tvirtai susietas su pirmuoju ir antruoju taškais, kurdami savo pasirinktinį starterio projektą ir anksti padarę klaidų, sutaupysite brangaus derinimo laiko, kurį turėsite kurdami.

Jei laikysitės mano rekomendacijų padalinti programos vartotojo sąsają ir „Backend“ į modulius su švaria sąsaja tarp jų, automatinius „Unit“ ir „Integration“ testus turėtų būti lengva nustatyti. Kai programa subręsta, galbūt norėsite pridėti palaikymą ir e2e bandymams.

GPS vietos nustatymas? ️

Prieš dvi dienas, įgyvendindamas „GPS“ vietos nustatymo funkciją „ taggr“ , kai vieneto bandymai buvo žali ir ši funkcija veikė kuriant (su „Webpack“), nusprendžiau išbandyti ją gamybos aplinkoje.

Nors ši funkcija gerai veikė kuriant, gamyboje nepavyko. EXIF informacija iš paveikslėlių buvo nuskaityta kaip dvejetainė ir apdorota trečiosios šalies bibliotekoje. Nors dvejetainė informacija buvo teisingai įkelta abiejose aplinkose (patikrinta su diff), trečiosios šalies biblioteka nepavyko analizuojant tokių duomenų gamybos versijoje. Atsiprašau, ??

Sprendimas : Sužinojau, kad „Webpack“ nustatytos kūrimo ir gamybos aplinkos kodavimo parametrai nebuvo vienodi. Tai sukėlė dvejetainių duomenų analizę kaip UTF-8, bet ne gamyboje. Problema buvo išspręsta nustatant tinkamas kodavimo antraštes į „Electron“ įkeltus HTML failus.

Funkingos nuotraukos?

Manipikuodami ir dirbdami su vaizdais galite pagalvoti, kad jei JPEG jūsų kompiuteryje tiesiog veikia, tai yra galiojantis JPEG. Neteisingai .

Dirbdamas su mazgo vaizdo apdorojimo bibliotekoje aštrus , dydį kai JPEG vaizdus sudužo programą. Atidžiai apžiūrėjus, priežastis buvo neteisingi JPEG vaizdai, kuriuos sugeneravo „Samsung“ programinė įranga. ? ‍♂️

Sprendimas : nustatykite patobulintas klaidų ribas programoje (pvz., „Try-catch“ blokai), pakoreguokite JPEG analizavimo modulį ir įtarkite viską. ? ️

Santrauka

„Node“ ir „JavaScripts“ ekosistemos žydi, kiekvieną dieną sukuriama ir naudojama daug galingų įrankių.

Dėl daugybės galimybių sunku pasirinkti aiškų kelią pradėti kurti naują nuostabią „Electron“ programą. Nepriklausomai nuo pasirinktų sistemų, rekomenduočiau sutelkti dėmesį į šiuos dalykus:

  1. Pradėkite nuo mažo ir palaipsniui pridėkite sudėtingumo.
  2. Atidžiai struktūrizuokite savo programą , išlaikydami programinę įrangą, o vartotojo sąsaja yra moduliuojama.
  3. Kurkite galvodami sriegimo modelį , net kurdami mažas programas.
  4. Išbandykite ir išbandykite dar kartą , kad kuo anksčiau užfiksuotumėte didžiąją dalį klaidų ir sutaupytumėte galvos skausmą.

Ačiū, kad laikėtės iki galo! ?

„taggr“ yra daugiaplatformė darbalaukio programa, leidžianti vartotojams iš naujo atrasti savo skaitmenines atmintines , išlaikant jų privatumą . „Open-alpha“ netrukus pasirodys „Linux“, „Windows“ ir „Mac OS“. Taigi stebėkite „Twitter“ ir „Instagram“, kur skelbiu plėtros naujinius, būsimas funkcijas ir naujienas.