U ovom ću članku podijeliti kako možete izbjeći neke pogreške koje sam počinio kada sam učio o Electron.js? ♂️. Nadam se da će pomoći!
Napomena : Ovo neće biti vodič za kodiranje, već rasprava o mojim osobnim preuzimanjima.
Prije nekoliko mjeseci odlučio sam se više usredotočiti na izgradnju svog sporednog proizvoda, taggr . Inspiriran sam za njegovu izradu zbog toga koliko fotografija imam na računalu.
Za one od nas koji imaju sigurnosne kopije svojih slika, te zbirke često postaju toliko velike i složene da postaju posao s punim radnim vremenom. Kombinacija mapa i podmapa može sadržavati sigurnosne kopije slika razmjene trenutnih poruka, slike visoke razlučivosti s putovanja na Bali, vjenčanja ujaka ili prošlogodišnje momačke večeri.
Uvijek je uredno držati takve kolekcije dosadno (vjerujte mi, pokušavao sam godinama). Također je teškoda biste otkrili snimke koje vam se najviše sviđaju, skrivene duboko u mapama.
Dakle taggrje stolna aplikacija koja rješava taj problem. Omogućuje korisnicima da ponovno otkriju svoja sjećanja, a pritom zadržavaju privatnost .
Gradim taggr kao desktop aplikacija platformi. Ovdje ću podijeliti neke stvari koje sam naučio o razvoju različitih platformi s Electron.js za koje bih volio da ih znam od početka. Započnimo!
Pozadina
Prije predstavljanja svojih ponosa na ovom tekućem putovanju s Electronom, želio bih dati malo više informacija o sebi i zahtjevima taggr-a .
Svaki programer dolazi iz drugačije pozadine, pa tako i zahtjevi aplikacija koje razvijaju.
Kontekstualiziranje izbora koje sam donio za ovaj projekt može pomoći budućim programerima da odaberu prave alate na temelju svojih potreba i stručnosti (a ne onoga što je tamo uočeno - GitHub?, Gledam vas).
Kao što je ranije spomenuto, od početka sam zamišljao taggr kao platformu za više platformi. Aplikacija bi izvodila sve potrebne obrade predobrade i strojnog učenja na strani klijenta zbog usredotočenosti na privatnost.
Kao emisija za jednu osobu, želio sam moći jednom napisati svoju aplikaciju i poslati je u različite sustave, a da pritom ne izgubim razum.
Sa svoje strane ja sam inženjer koji je zaljubljen u web i JavaScript. Prije sam radio s Javom i C #, ali uživam u fleksibilnosti koju pruža web i njegovom živahnom ekosustavu.
Nakon što sam iz prve ruke iskusio bol korištenja alata poput Eclipse RCP za izgradnju aplikacija na strani klijenta, znao sam da ne želim ponovno raditi s tom tehnologijom.
Ukratko, moji zahtjevi za stogom za taggr svodili su se na otprilike sljedeće:
- Trebao bi pružiti podršku na više platformi, idealno na razini okvira. ?
- Trebao bi mi omogućiti da jednom napišem kod i po potrebi prilagodim svaku platformu. ? ️
- Trebao bi omogućiti pristup mogućnostima strojnog učenja , bez obzira na okruženje domaćina, bez instaliranja posebnih vremena izvođenja. Trebalo bi biti bezbolno postavljati. ?
- Ako je izvedivo, trebao bi koristiti web tehnologije . Bilo bi sjajno iskoristiti moje postojeće znanje. ?
Kao što vidite, zahtjevi se ne glase kao: Trebao bih koristiti React s Reduxom, observables i WebSockets . To su detalji provedbe na nižoj razini i o njima treba odlučiti kada i ako se ukaže potreba.
Odaberite pravi alat za posao, umjesto da odabirete stog od početka, ne obazirući se na postojeće probleme.
Tako sam, nakon bijesnog guglanja, odlučio probati Electron. Prije nisam koristio taj okvir, ali znao sam da ga mnoge tvrtke uspješno koriste u proizvodima kao što su Atom, VS Code, Discord, Signal, Slack i drugi.
Otvoreni izvor i s izvanrednom kompatibilnošću s JS i Node ekosustavima (Electron se izrađuje pomoću Chromium-a i Node-a), Electron.js je bio atraktivan alat za rad.
Neću ulaziti previše u detalje u vezi s ostatkom stoga, jer sam po potrebi mijenjao temeljne dijelove (postojanost i slojeve prikaza), a to ispada iz opsega ovog članka.
Međutim, želio bih spomenuti Tensorflow.js, koji omogućuje izvođenje treninga i postavljanje modela ML izravno u preglednik (s WebGL-om) i Node (s C vezima), bez instaliranja specifičnih runtimeova za ML na hostu.
Vratimo se na Electron - misleći da je savršen, zabava je započela. ??
Dosta razgovora o pozadini. Zaronimo u hranu za poneti.
1. Početi s malim (i polaganim)?
To nije novi koncept, ali vrijedi ga povremeno spominjati. Samo zato što je na raspolaganju mnoštvo sjajnih početnih projekata s Electronom, ne znači da biste ih trebali odabrati odmah.
Čekati. Što?
Sporo je glatko, a glatko brzo. - Mornarička izrekaUz praktičnost dolazi i složenost
Iako ti početnici uključuju mnoge korisne integracije (Webpack, Babel, Vue, React, Angular, Express, Jest, Redux), oni također imaju svojih problema.
Kao novak Electrona, odlučio sam se za mršav predložak koji je sadržavao osnove za 'stvaranje, objavljivanje i instaliranje Electron aplikacija' bez dodatnih zvižduka. Ni Webpack na početku.
Preporučujem da započnete s nečim sličnim electron-forgeu da biste se brzo pokrenuli, možetepostavite svoj grafikon i strukturu ovisnosti na vrh da biste naučili užad Electrona.
Kada problemi dođu (i hoće), bit će vam bolje ako izradite svoj prilagođeni početni projekt, umjesto da za početak odaberete jedan sa +30 npm skripti i +180 ovisnosti.
Jednom kad se osjećate ugodno s Electronovom osnovom, slobodno pojačajte igru s Webpack / React / Redux / TheNextHotFramework. Radio sam to postupno i po potrebi. Ne dodavajte bazu podataka u stvarnom vremenu u svoju aplikaciju todo samo zato što ste negdje pročitali cool članak o tome.
2. Pažljivo strukturirajte svoju aplikaciju? ♂️
Ovaj je trebao malo više vremena da se popravi, nego što rado priznajem. ?
U početku će možda biti primamljivo pomiješati korisničko sučelje i pozadinski kôd (pristup datotekama, prošireni CPU postupci), ali stvari se prilično brzo slože. Kako je moja aplikacija rasla u značajkama, veličini i složenosti, održavanje jednog zapetljanog UI + Backend koda postajalo je sve složenije i sklonije pogreškama. Također, spojnica je otežala pojedinačno testiranje svakog dijela.
Kada gradite desktop aplikaciju koja radi više od ugrađene web stranice (DB pristup, pristup datotekama, intenzivni CPU zadaci ...), preporučujem rezanje aplikacije na module i smanjenje sprezanja. Jedinstveno testiranje postaje povjetarac i jasan je put ka integracijskom testiranju između modula. Za taggr , ja labavo slijedi strukturu ovdje predloženi.
Povrh toga tu su i performanse . Zahtjevi i očekivanja korisnika po tom pitanju mogu se jako razlikovati ovisno o aplikaciji koju gradite. Ali blokiranje glavnih niti prikazivanja niti skupim pozivima nikad nije dobra ideja.
3. Dizajn imajući na umu model navoja?
Neću ovdje ulaziti previše u detalje - samo uglavnom udvostručujem ono što je sjajno objašnjeno u službenim dokumentima.
U konkretnom slučaju taggr-a postoji mnogo dugotrajnih CPU, GPU-a i IO-operacija. Pri izvršavanju tih operacija u glavnoj ili prikazivačkoj niti Electrona, broj FPS-a pada sa 60, čineći da se korisničko sučelje osjeća tromo.
Electron nudi nekoliko alternativa za uklanjanje tih operacija iz glavne niti i niti za prikazivanje , kao što su WebWorkers, Node Worker Threads ili BrowserWindow instance. Svaka od njih ima svoje prednosti i primjedbe, a slučaj upotrebe s kojim ćete se suočiti odredit će koji vam najbolje odgovara.
Bez obzira koju alternativu odabrali za rasterećenje operacija iz glavne niti i niti za prikazivanje (kada je potrebno), razmislite kako će biti komunikacijsko sučelje . Trebalo mi je vremena da smislim sučelje s kojim sam bio zadovoljan, jer to jako utječe na strukturiranje i funkcioniranje vaše aplikacije. Pronašao sam korisno eksperimentiranje s različitim pristupima prije nego što sam odabrao jedan.
Na primjer, ako mislite da sučelje za prosljeđivanje poruka WebWorkers možda nije najlakše otkloniti pogreške, probajte comlink.
4. Test ❌, test ❌ i test ✔️
Stare vijesti, zar ne? Htio sam ovo dodati kao posljednju točku zbog nekoliko anegdotalnih 'problema' s kojima sam se nedavno suočio. Čvrsto povezan s prvom i drugom točkom, izgradnja vašeg prilagođenog početnog projekta i rano počinjanje pogrešaka uštedjet će vam dragocjeno vrijeme za uklanjanje pogrešaka u daljnjem razvoju.
Ako ste slijedili moje preporuke za razdvajanje korisničkog sučelja i backenda aplikacije na module s čistim sučeljem između njih, postavljanje automatiziranih testova jedinice i integracije trebalo bi biti lako. Kako aplikacija sazrijeva, možda ćete htjeti dodati podršku i za e2e testiranje.
Izdvajanje GPS lokacije? ️
Prije dva dana, dok sam implementirao značajku GPS izvlačenja lokacije za taggr , nakon što su jedinični testovi postali zeleni i kada je značajka radila u razvoju (s Webpackom), odlučio sam je isprobati u proizvodnom okruženju.
Iako je značajka dobro radila u razvoju, u proizvodnji nije uspjela. EXIF podaci sa slika pročitani su kao binarni i obrađeni u neovisnoj knjižnici. Iako su binarni podaci ispravno učitani u oba okruženja (provjereno s diff), knjižnica treće strane nije uspjela prilikom raščlanjivanja takvih podataka u produkcijskoj gradnji. Ispričajte me, ??
Rješenje : Otkrio sam da postavke kodiranja u razvojnom i proizvodnom okruženju koje je postavio Webpack nisu iste. Zbog toga su binarni podaci raščlanjeni kao UTF-8 u razvoju, ali ne i u proizvodnji. Problem je riješen postavljanjem ispravnih zaglavlja kodiranja u HTML datotekama koje je učitao Electron.
Funky slike?
Kada manipulirate slikama i radite sa njima, možete pomisliti da je JPEG, ako na vašem računalu "samo djeluje", važeći JPEG. Pogrešno .
Dok je radio s Node obradu slike knjižnica oštar , veličine nekoliko JPEG slika srušio aplikaciju. Nakon pažljivog pogleda, uzrok su bile netočne JPEG slike koje je generirao Samsungov firmware. ? ♂️
Rješenje : postavljanje poboljšanih granica pogrešaka u aplikaciji (npr. Blokovi try-catch), dotjerivanje JPEG modula za raščlanjivanje i sumnja u sve. ? ️
Sažetak
Ekosustavi Node i JavaScripts cvjetaju, a svakodnevno se stvaraju i dijele mnogi moćni alati.
Količina opcija otežava odabir jasnog puta za početak izrade vaše nove izvrsne aplikacije Electron. Bez obzira na odabrane okvire, preporučio bih da se usredotočite na sljedeće:
- Započnite s malim i postupno dodajte složenost.
- Pažljivo strukturirajte svoju aplikaciju , zadržavajući pozadinu i probleme korisničkog sučelja modularizirano.
- Dizajnirajte imajući na umu model navoja , čak i prilikom izrade malih aplikacija.
- Testirajte i testirajte ponovo , kako biste rano uhvatili većinu pogrešaka i spasili glavobolju.
Hvala što ste se zadržali do kraja! ?
taggr je radna površina za više platformi koja omogućava korisnicima da ponovno otkriju svoje digitalne uspomene zadržavajući privatnost . Open-alpha uskoro dolazi za Linux, Windows i Mac OS. Stoga pripazite na Twitter i Instagram, gdje objavljujem razvojna ažuriranja, nadolazeće značajke i vijesti.