Πράγματα που θέλω να ήξερα πριν συνεργαστώ με το Electron.js

Σε αυτό το άρθρο, θα μοιραστώ πώς μπορείτε να αποφύγετε μερικά από τα λάθη που έκανα όταν μαθαίνω για το Electron.js; ‍♂️. Ελπίζω να βοηθήσει!

Σημείωση : Αυτό δεν θα είναι ένα σεμινάριο κωδικοποίησης, αλλά μάλλον μια συζήτηση για τα προσωπικά μου πράγματα.

Λίγους μήνες πίσω, αποφάσισα να επικεντρωθώ περισσότερο στην κατασκευή του δευτερεύοντος προϊόντος μου, του taggr . Εμπνεύστηκα να το δημιουργήσω λόγω του αριθμού των φωτογραφιών που έχω στον υπολογιστή μου.

Για όσους από εμάς διατηρούν αντίγραφο ασφαλείας των φωτογραφιών τους, αυτές οι συλλογές συχνά γίνονται τόσο μεγάλες και περίπλοκες που γίνονται μια εργασία πλήρους απασχόλησης για διαχείριση. Ένας συνδυασμός φακέλων και υποφακέλων μπορεί να περιέχει αντίγραφα ασφαλείας εικόνων ανταλλαγής άμεσων μηνυμάτων, εικόνες υψηλής ανάλυσης από το ταξίδι σας στο Μπαλί, το γάμο του θείου σας ή το πτυχίο πέρυσι.

Διατηρώντας πάντα αυτές τις συλλογές τακτοποιημένες είναι κουραστική (πιστέψτε με, έχω δοκιμάσει εδώ και χρόνια). Είναι επίσης δύσκολογια να ανακαλύψετε τις λήψεις που σας αρέσουν περισσότερο, κρυμμένες βαθιά μέσα στους φακέλους.

Έτσι taggrείναι μια εφαρμογή για επιτραπέζιους υπολογιστές που λύνει αυτό το πρόβλημα. Επιτρέπει στους χρήστες να ανακαλύψουν ξανά τις αναμνήσεις τους διατηρώντας παράλληλα το απόρρητό τους .

Δημιουργώ το taggr ως εφαρμογή για υπολογιστές πολλαπλών πλατφορμών. Εδώ θα μοιραστώ ορισμένα από τα πράγματα που έχω μάθει για την ανάπτυξη εφαρμογών μεταξύ πλατφορμών με το Electron.js που εύχομαι να ήξερα από την αρχή. Ας αρχίσουμε!

Ιστορικό

Πριν παρουσιάσω τα takeaways μου σε αυτό το συνεχιζόμενο ταξίδι με την Electron, θα ήθελα να δώσω λίγο περισσότερο υπόβαθρο για τον εαυτό μου και τις απαιτήσεις του taggr .

Κάθε προγραμματιστής προέρχεται από διαφορετικό υπόβαθρο, όπως και οι απαιτήσεις των εφαρμογών που αναπτύσσουν.

Το πλαίσιο των επιλογών που έκανα για αυτό το έργο μπορεί να βοηθήσει τους μελλοντικούς προγραμματιστές να επιλέξουν τα σωστά εργαλεία βάσει των αναγκών και της εμπειρογνωμοσύνης τους (αντί για ό, τι υποτίθεται - GitHub;

Όπως αναφέρθηκε νωρίτερα, από την αρχή οραματίστηκα το taggr ως εφαρμογή πολλαπλών πλατφορμών. Η εφαρμογή θα εκτελούσε όλους τους απαιτούμενους υπολογισμούς προεπεξεργασίας και μηχανικής μάθησης από την πλευρά του πελάτη λόγω της εστίασης στο απόρρητο.

Ως σόου ενός ατόμου, ήθελα να μπορώ να γράφω την εφαρμογή μου μία φορά και να την στείλω σε διαφορετικά συστήματα χωρίς να χάσω τη λογική μου.

Από την πλευρά μου, είμαι ένας μηχανικός front-end ερωτευμένος με τον Ιστό και τη JavaScript. Δούλευα προηγουμένως με Java και C #, αλλά μου αρέσει η ευελιξία που παρέχει ο ιστός και το ζωντανό οικοσύστημα του.

Έχοντας βιώσει από πρώτο χέρι τον πόνο από τη χρήση εργαλείων όπως το Eclipse RCP για τη δημιουργία εφαρμογών από την πλευρά του πελάτη στο παρελθόν, ήξερα ότι δεν ήθελα να συνεργαστώ ξανά με αυτήν την τεχνολογία.

Εν ολίγοις, οι απαιτήσεις στοίβας μου για το taggr έπεσαν σε κάτι σαν το εξής:

  • Θα πρέπει να παρέχει υποστήριξη μεταξύ πλατφορμών, ιδανικά σε επίπεδο πλαισίου. ;
  • Θα μου επιτρέψει να γράψω τον κωδικό μία φορά και να τροποποιήσω για κάθε πλατφόρμα, αν χρειαστεί. ; ️
  • Θα πρέπει να επιτρέπει την πρόσβαση σε δυνατότητες μηχανικής μάθησης , ανεξάρτητα από το περιβάλλον του κεντρικού υπολογιστή, χωρίς την εγκατάσταση συγκεκριμένων χρόνων εκτέλεσης. Θα πρέπει να είναι ανώδυνη η εγκατάσταση. ;
  • Εάν είναι εφικτό, θα πρέπει να χρησιμοποιεί τεχνολογίες ιστού . Θα ήταν υπέροχο να αξιοποιήσω τις υπάρχουσες γνώσεις μου. ;

Όπως μπορείτε να δείτε, οι απαιτήσεις δεν διαβάζονται ως εξής: Πρέπει να χρησιμοποιήσω το React with Redux, παρατηρήσιμα και WebSockets . Αυτές είναι λεπτομέρειες εφαρμογής χαμηλότερου επιπέδου και θα πρέπει να αποφασίζονται πότε και εάν υπάρχει ανάγκη.

Διαλέξτε το σωστό εργαλείο για την εργασία αντί να επιλέξετε μια στοίβα από την αρχή, αγνοώντας τα προβλήματα που έχετε.

Έτσι, μετά από έξαλλο googling, αποφάσισα να δοκιμάσω την Electron. Δεν είχα χρησιμοποιήσει αυτό το πλαίσιο στο παρελθόν, αλλά ήξερα ότι πολλές εταιρείες το χρησιμοποιούσαν με επιτυχία σε προϊόντα όπως Atom, VS Code, Discord, Signal, Slack και άλλα.

Ανοιχτός κώδικας και με συμβατότητα με τα οικοσυστήματα JS και Node (το Electron κατασκευάζεται με χρήση Chromium και Node), το Electron.js ήταν ένα ελκυστικό εργαλείο για την εργασία.

Δεν θα πάω πάρα πολύ σε λεπτομέρειες σχετικά με την υπόλοιπη στοίβα, καθώς άλλαξα επανειλημμένα βασικά μέρη (ανθεκτικότητα και προβολή επιπέδων) όταν χρειαζόταν, και δεν εμπίπτει στο πεδίο αυτού του άρθρου.

Ωστόσο, θα ήθελα να αναφέρω το Tensorflow.js, το οποίο επιτρέπει την εκπαίδευση κατά την εκτέλεση και την ανάπτυξη μοντέλων ML απευθείας στο πρόγραμμα περιήγησης (με WebGL) και στον κόμβο (με συνδέσεις C), χωρίς να εγκαταστήσετε συγκεκριμένους χρόνους εκτέλεσης για ML στον κεντρικό υπολογιστή.

Έτσι πίσω στο Electron - νομίζοντας ότι ήταν τέλειο, η διασκέδαση ξεκίνησε. ??

Αρκετή συζήτηση για το φόντο. Ας βουτήξουμε στα takeaways.

1. Ξεκινήστε το μικρό (και αργό);

Αυτό δεν είναι μια νέα ιδέα, αλλά αξίζει να αναφέρετε περιοδικά. Ακριβώς επειδή υπάρχει ένας τόνος εκπληκτικών έργων εκκίνησης με το Electron διαθέσιμο, αυτό δεν σημαίνει ότι θα πρέπει να επιλέξετε ένα αμέσως.

Περίμενε. Τι?

Η αργή είναι ομαλή και η ομαλή είναι γρήγορη. - Το ναυτικό λέει

Με την ευκολία έρχεται η πολυπλοκότητα

Ενώ αυτοί οι εκκινητές περιλαμβάνουν πολλές χρήσιμες ενσωματώσεις (Webpack, Babel, Vue, React, Angular, Express, Jest, Redux), έχουν επίσης τα ζητήματά τους.

Ως αρχάριος Electron, αποφάσισα να πάω για ένα άπαχο πρότυπο που περιλάμβανε τα βασικά στοιχεία για τη «δημιουργία, δημοσίευση και εγκατάσταση εφαρμογών Electron» χωρίς τα επιπλέον κουδούνια και σφυρίχτρες. Ούτε καν το Webpack στην αρχή.

Προτείνω να ξεκινήσετε με κάτι παρόμοιο με το ηλεκτρονικό σφυρηλάτηση για να σηκωθείτε και να τρέξετε γρήγορα, μπορείτερυθμίστε το γράφημα εξάρτησης και τη δομή σας για να μάθετε τα σχοινιά του Ηλεκτρονίου.

Όταν έρθουν τα ζητήματα (και θα συμβούν), θα είστε καλύτερα αν δημιουργήσετε το προσαρμοσμένο πρόγραμμα εκκίνησης αντί να επιλέξετε ένα με σενάρια +30 npm και +180 εξαρτήσεις για να ξεκινήσετε.

Τούτου λεχθέντος, μόλις νιώσετε άνετα με τη βάση της Electron, μη διστάσετε να ανεβάσετε το παιχνίδι με το Webpack / React / Redux / TheNextHotFramework. Το έκανα σταδιακά και όταν χρειαζόμουν. Μην προσθέτετε μια βάση δεδομένων σε πραγματικό χρόνο στην εφαρμογή todo σας μόνο και μόνο επειδή διαβάζετε ένα υπέροχο άρθρο σχετικά με αυτό κάπου.

2. Δομή προσεκτικά την εφαρμογή σας; ‍♂️

Αυτό πήρε λίγο περισσότερο χρόνο για να πάει σωστά από ό, τι χαίρομαι που παραδέχομαι. ;

Στην αρχή, μπορεί να είναι δελεαστικό να συνδυάσετε τον κώδικα διεπαφής χρήστη και Backend (πρόσβαση σε αρχεία, εκτεταμένες λειτουργίες CPU), αλλά τα πράγματα γίνονται πολύπλοκα αρκετά γρήγορα. Καθώς η εφαρμογή μου μεγάλωνε σε χαρακτηριστικά, μέγεθος και πολυπλοκότητα, η διατήρηση μίας μπερδεμένης βάσης κώδικα UI + Backend έγινε πιο περίπλοκη και επιρρεπής σε σφάλματα. Επίσης, ο σύνδεσμος έκανε δύσκολη τη δοκιμή κάθε τμήματος μεμονωμένα.

Όταν δημιουργείτε μια εφαρμογή για επιτραπέζιους υπολογιστές που κάνει περισσότερα από μια ενσωματωμένη ιστοσελίδα (πρόσβαση DB, πρόσβαση σε αρχεία, εντατικές εργασίες CPU…), προτείνω να κόψετε την εφαρμογή σε λειτουργικές μονάδες και να μειώσετε τη σύνδεση. Η δοκιμή μονάδας γίνεται αεράκι, και υπάρχει μια σαφής πορεία προς τον έλεγχο ολοκλήρωσης μεταξύ των ενοτήτων. Για το taggr , ακολούθησα χαλαρά τη δομή που προτείνεται εδώ.

Επιπλέον, υπάρχει απόδοση . Οι απαιτήσεις και οι προσδοκίες των χρηστών σε αυτό το θέμα ενδέχεται να διαφέρουν έντονα ανάλογα με την εφαρμογή που δημιουργείτε. Αλλά το μπλοκάρισμα των κύριων ή η απόδοση νήματος με ακριβά κλήσεις δεν είναι ποτέ καλή ιδέα.

3. Σχεδιάστε με γνώμονα το μοντέλο σπειρώματος;

Δεν θα πάω πάρα πολύ στη λεπτομέρεια εδώ - απλώς διπλασιάζω αυτό που εξηγείται απαίσια στα επίσημα έγγραφα.

Στη συγκεκριμένη περίπτωση του taggr , υπάρχουν πολλές εντατικές λειτουργίες CPU, GPU και IO. Όταν εκτελείτε αυτές τις λειτουργίες στο κύριο νήμα ή στο renderer του Electron, ο αριθμός FPS μειώνεται από 60, κάνοντας το UI να νιώθει υποτονικό.

Το Electron προσφέρει πολλές εναλλακτικές λύσεις για την εκφόρτωση αυτών των λειτουργιών από τα κύρια θέματα και τα νήματα απόδοσης , όπως WebWorkers, Node Worker Threads ή παρουσίες BrowserWindow. Κάθε ένα έχει τα πλεονεκτήματα και τις προειδοποιήσεις του και η περίπτωση χρήσης που αντιμετωπίζετε θα καθορίσει ποια είναι η καλύτερη εφαρμογή.

Ανεξάρτητα από το ποια εναλλακτική λύση που θα επιλέξετε για την εκφόρτωση των εργασιών από τις κύριες και renderer θέματα (όταν χρειάζεται), θεωρούν πως η διεπαφή επικοινωνίας θα είναι . Μου πήρε λίγο χρόνο για να βρω μια διεπαφή με την οποία ήμουν ικανοποιημένος, καθώς επηρεάζει σε μεγάλο βαθμό τον τρόπο δομής και λειτουργίας της εφαρμογής σας. Βρήκα χρήσιμο να πειραματιστώ με διαφορετικές προσεγγίσεις πριν διαλέξω μία.

Για παράδειγμα, αν πιστεύετε ότι η διεπαφή μετάδοσης μηνυμάτων WebWorkers μπορεί να μην είναι η ευκολότερη για εντοπισμό σφαλμάτων, δοκιμάστε το comlink.

4. Δοκιμή ❌, δοκιμή ❌ και δοκιμή ✔️

Παλιά νέα, σωστά; Ήθελα να το προσθέσω ως το τελευταίο σημείο, λόγω μερικών ανέκδοτων «ζητημάτων» που αντιμετώπισα πρόσφατα. Συνδέεται στενά με το πρώτο και το δεύτερο σημείο, η κατασκευή του προσαρμοσμένου έργου εκκίνησης και η πραγματοποίηση λαθών νωρίς θα σας εξοικονομήσει πολύτιμο χρόνο εντοπισμού σφαλμάτων περαιτέρω στην ανάπτυξη.

Εάν ακολουθήσατε τις προτάσεις μου για το διαχωρισμό του UI και του Backend της εφαρμογής σε λειτουργικές μονάδες με καθαρή διεπαφή μεταξύ των δύο, η ρύθμιση αυτοματοποιημένων δοκιμών μονάδας και ενοποίησης θα πρέπει να είναι εύκολη. Καθώς η εφαρμογή ωριμάζει, ίσως θελήσετε να προσθέσετε υποστήριξη και για δοκιμές e2e.

Εξαγωγή θέσης GPS; ️

Πριν από δύο ημέρες, κατά την εφαρμογή της δυνατότητας εξαγωγής θέσης GPS για το taggr , όταν οι δοκιμές μονάδας ήταν πράσινες και η λειτουργία λειτούργησε σε ανάπτυξη (με το Webpack), αποφάσισα να το δοκιμάσω στο περιβάλλον παραγωγής.

Ενώ το χαρακτηριστικό λειτούργησε καλά στην ανάπτυξη, απέτυχε άσχημα στην παραγωγή. Οι πληροφορίες EXIF ​​από τις εικόνες διαβάστηκαν ως δυαδικές και υποβλήθηκαν σε επεξεργασία από μια βιβλιοθήκη τρίτων. Ενώ οι δυαδικές πληροφορίες φορτώθηκαν σωστά και στα δύο περιβάλλοντα (ελέγχθηκαν με διαφορά), η βιβλιοθήκη τρίτου μέρους απέτυχε κατά την ανάλυση τέτοιων δεδομένων στην κατασκευή παραγωγής. Με συγχωρείς, ??

Λύση : Ανακάλυψα ότι οι ρυθμίσεις κωδικοποίησης στα περιβάλλοντα ανάπτυξης και παραγωγής που ορίστηκαν από το Webpack δεν ήταν οι ίδιες. Αυτό προκάλεσε την ανάλυση των δυαδικών δεδομένων ως UTF-8 στην ανάπτυξη αλλά όχι στην παραγωγή. Το πρόβλημα επιλύθηκε ρυθμίζοντας τις κατάλληλες κεφαλίδες κωδικοποίησης στα αρχεία HTML που φορτώθηκαν από την Electron.

Funky φωτογραφίες;

Όταν χειρίζεστε και εργάζεστε με εικόνες, μπορεί να πιστεύετε ότι εάν ένα JPEG «λειτουργεί μόνο» στον υπολογιστή σας, είναι ένα έγκυρο JPEG. Λάθος .

Κατά την εργασία με τη βιβλιοθήκη επεξεργασίας εικόνας Κόμβος απότομη , αλλαγή μεγέθους μερικές εικόνες JPEG συνετρίβη την εφαρμογή. Αφού κοιτάξατε προσεκτικά, η αιτία ήταν λανθασμένες εικόνες JPEG που δημιουργήθηκαν από το υλικολογισμικό της Samsung. ; ‍♂️

Λύση : ρύθμιση βελτιωμένων ορίων σφάλματος στην εφαρμογή (π.χ. μπλοκ try-catch), τροποποίηση της μονάδας ανάλυσης JPEG και ύποπτος για τα πάντα. ; ️

Περίληψη

Τα οικοσυστήματα Node και JavaScripts ανθίζουν, με πολλά ισχυρά εργαλεία να δημιουργούνται και να κοινοποιούνται καθημερινά.

Το πλήθος των επιλογών καθιστά δύσκολο να επιλέξετε ένα σαφές μονοπάτι για να ξεκινήσετε να δημιουργείτε τη νέα σας εκπληκτική εφαρμογή Electron. Ανεξάρτητα από τα πλαίσια επιλογής σας, θα συνιστούσα να εστιάσετε στα ακόλουθα:

  1. Ξεκινήστε το μικρό και προσθέστε σταδιακά την πολυπλοκότητα.
  2. Διαμορφώστε προσεκτικά την εφαρμογή σας , διατηρώντας το backend και τις ανησυχίες διεπαφής χρήστη που έχουν διαμορφωθεί.
  3. Σχεδιάστε με γνώμονα το νήμα , ακόμη και όταν δημιουργείτε μικρές εφαρμογές.
  4. Δοκιμάστε και δοκιμάστε ξανά , για να εντοπίσετε τα περισσότερα από τα λάθη από νωρίς και να εξοικονομήσετε πονοκεφάλους.

Σας ευχαριστούμε που επιμείνατε μέχρι το τέλος! ;

Το taggr είναι μια εφαρμογή για υπολογιστές πολλαπλών πλατφορμών που επιτρέπει στους χρήστες να ανακαλύψουν ξανά τις ψηφιακές τους μνήμες διατηρώντας ταυτόχρονα το απόρρητό τους . Το Open-alpha έρχεται σύντομα σε Linux, Windows και Mac OS. Επομένως, παρακολουθήστε το Twitter και το Instagram, όπου δημοσιεύω ενημερώσεις ανάπτυξης, επερχόμενες λειτουργίες και ειδήσεις.