Ο Ίδιος Χάρτης, Τρεις Τρόποι: SVG, Rust και Flutter

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

Έτσι κάναμε ένα πείραμα. Πήραμε τον χάρτη στην αρχική μας σελίδα και τον ξαναφτιάξαμε δύο φορές: μία φορά σε Rust μεταγλωττισμένο σε WebAssembly, και μία φορά σε Flutter. Αυτό το άρθρο βάζει και τα τρία σε μία σελίδα και τα συγκρίνει.

1. Το πρωτότυπο: SVG, CSS και λίγη JavaScript

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

Είναι ένα σχέδιο SVG. Ο περιηγητής τρέχει τις περισσότερες κινήσεις από το CSS, και ένα μικρό σκριπτ χειρίζεται τα υπόλοιπα.

Υπέρ του: δεν υπάρχει βήμα κατασκευής, οπότε ένα πρότυπο Hugo είναι ό,τι χρειάζεται. Είναι διανυσματικό, οπότε παραμένει καθαρό σε οποιοδήποτε μέγεθος. Όλες οι 44 κουκκίδες μπορούν να προσεγγιστούν με το πληκτρολόγιο, η καθεμία με ετικέτα για αναγνώστες οθόνης. Και οι λίγες λέξεις του είναι μεταφρασμένες σε όλες τις γλώσσες μας.

Το κόστος είναι το βάρος στη σελίδα. Το markup του χάρτη είναι περίπου 107 KB (περίπου 30 KB συμπιεσμένο), και όταν τρέχει έχει περίπου 670 στοιχεία και περίπου 200 κινήσεις CSS. Η λογική είναι επίσης δύσκολη στο να δοκιμαστεί: ο χρονισμός ζει μέσα σε CSS keyframes και ένα σκριπτ στη σελίδα, οπότε η μόνη δοκιμή είναι να το κοιτάξεις.

2. Rust και WebAssembly

Με απλά λόγια: Το Rust είναι μια γλώσσα προγραμματισμού γνωστή για την ταχύτητά της και για το ότι εντοπίζει πολλά λάθη πριν καν τρέξει ένα πρόγραμμα. Εδώ γράψαμε τον «εγκέφαλο» του χάρτη σε Rust, τον πακετάραμε σε μια συμπαγή μορφή που μπορούν να τρέξουν οι περιηγητές (που ονομάζεται WebAssembly), και τον αφήσαμε να ζωγραφίσει ολόκληρο τον χάρτη μόνος του, σαν έναν ζωγράφο που ξαναζωγραφίζει έναν καμβά πολλές φορές το δευτερόλεπτο. Σε εσάς φαίνεται το ίδιο.

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

Το κομμάτι που μας άρεσε είναι ότι η λογική είναι απλό Rust χωρίς τίποτα από τον περιηγητή μέσα: τα μαθηματικά για το πού πηγαίνουν τα πράγματα και πότε αλλάζουν, και ο αναλυτής που διαβάζει το περίγραμμα της γης. Έχει 13 τεστ που τρέχουν σε κλάσμα του δευτερολέπτου, και αν ο χρόνος του κύκλου είναι λάθος, ένα τεστ αποτυγχάνει αντί να παρατηρήσει κάποιος ότι φαίνεται παράξενο. Περίπου το ένα τρίτο από τις περίπου 1.070 γραμμές Rust είναι αυτός ο δοκιμασμένος πυρήνας (με τα τεστ του)· το υπόλοιπο σχεδιάζει στον καμβά και χειρίζεται τα γεγονότα του ποντικιού.

Η σελίδα καταλήγει πολύ ελαφριά: ένα στοιχείο καμβά. Αλλά η λήψη είναι μεγαλύτερη. Το μεταγλωττισμένο module είναι περίπου 254 KB (περίπου 92 KB συμπιεσμένο) συν περίπου 28 KB JavaScript κόλλας που παράγει το εργαλείο κατασκευής. Και υπάρχουν κόστη που νιώθουμε όταν δουλεύουμε πάνω σε αυτό:

• Μια αλυσίδα εργαλείων. Η κατασκευή απαιτεί Rust, τον στόχο WebAssembly και ένα εργαλείο γραμμής εντολών του οποίου η έκδοση πρέπει να ταιριάζει ακριβώς με αυτή της βιβλιοθήκης. Το script κατασκευής μας εκτελεί πρώτα τις δοκιμές και σταματά αν κάποια αποτύχει.
• Χωρίς πρόσβαση με πληκτρολόγιο ή οθόνη ανάγνωσης σε μεμονωμένες πόλεις. Ένας καμβάς είναι μια εικόνα. Τα 44 εστιαζόμενα σημεία της έκδοσης SVG έχουν εξαφανιστεί.
• Μόνο αγγλικά. Οι ετικέτες είναι γραμμένες μέσα στο πρόγραμμα.
• Θόλωση. Η μαλακή σκιά στην άκρη χρησιμοποιεί φίλτρο θόλωσης καμβά, το οποίο δεν υποστηρίζουν όλοι οι περιηγητές. Δεν έχουμε δοκιμάσει το Safari, όπου η άκρη μπορεί να είναι σκληρή.

3. Flutter

Με απλά λόγια: Το Flutter είναι ένα σετ εργαλείων από την Google για την κατασκευή εφαρμογών που τρέχουν σε τηλέφωνα, υπολογιστές και το διαδίκτυο από ένα μόνο σύνολο κώδικα. Δεν χρησιμοποιεί τα δικά του δομικά στοιχεία της ιστοσελίδας. Σχεδιάζει τα πάντα μόνο του. Εδώ ο χάρτης είναι μια μικρή εφαρμογή που εμφανίζεται μέσα σε αυτή τη σελίδα, το ίδιο σετ εργαλείων που τροφοδοτεί τον υπολογιστή φόρτισης.

Ζωγραφίζει τον χάρτη με έναν προσαρμοσμένο ζωγράφο, και εμφανίζεται εδώ μέσα σε ένα πλαίσιο. Το Flutter μπορεί επίσης να κατασκευάσει εφαρμογές για τηλέφωνα και υπολογιστές από τον ίδιο κώδικα, που είναι το βασικό του επιχείρημα: γράψε τον χάρτη μία φορά, τρέξε τον σε πολλά μέρη.

Είναι η ίδια λογική με τον χάρτη Rust, μεταφερμένη σε Dart, με 11 δοκιμές. Περίπου 1.100 γραμμές συμπεριλαμβανομένων των δοκιμών. Το Flutter παρέχει σε κάθε πόλη πρόσβαση σε αναγνώστες οθόνης ως κουμπί με ετικέτα, κάτι που η έκδοση με καμβά δεν διαθέτει (δεν έχουμε ελέγξει πόσο καλά λειτουργεί με έναν πραγματικό αναγνώστη οθόνης). Είναι επίσης η μεγαλύτερη λήψη: η εφαρμογή είναι περίπου 1,8 MB (περίπου 535 KB συμπιεσμένα). Η μηχανή σχεδίασης του Flutter είναι μια επιπλέον λήψη, αλλά ο ιστότοπος ήδη μοιράζεται ένα αντίγραφο με την αριθμομηχανή, οπότε ένας επισκέπτης που έχει ανοίξει την αριθμομηχανή δεν το κατεβάζει ξανά. Το κείμενό της είναι ρυθμισμένο στη γραμματοσειρά του ιστότοπου, Merriweather, την οποία ο περιηγητής φορτώνει κατά το χρόνο εκτέλεσης.

Τι βρήκαμε

Μια ακόμη σημείωση για την ταχύτητα. Στον έλεγχό μας, τόσο ο χάρτης SVG όσο και ο χάρτης Rust έτρεχαν με ρυθμό ανανέωσης της οθόνης (περίπου 120 καρέ ανά δευτερόλεπτο στην οθόνη δοκιμής), οπότε ο ρυθμός καρέ δεν τους ξεχώρισε. Δεν μετρήσαμε τον ρυθμό καρέ του Flutter, και δεν μετρήσαμε τη χρήση μπαταρίας ή CPU, οπότε δεν μπορούμε να πούμε ποιος είναι πιο ελαφρύς σε ένα τηλέφωνο.

Πράγματα που μας εξέπληξαν

Κάποιες λεπτομέρειες είναι εύκολο να γίνουν λάθος. Οι πρώτες μας κλώνες σχεδίασαν το κλειδί και τα ρολόγια σε σταθερό ποσοστό του χάρτη, οπότε συρρικνώνονταν σε μικρές οθόνες και φαίνονταν μικροσκοπικά σε σχέση με το πρωτότυπο. Το πρωτότυπο τα μεγεθύνει με τη μονάδα γραμματοσειράς της σελίδας (rem, που αλλάζει με το πλάτος της οθόνης). Οι κλώνες τώρα διαβάζουν αυτό το μέγεθος από τη σελίδα. Τα ρολόγια διαφέρουν επίσης: τα δείκτες του πρωτοτύπου κινούνται σε βήματα 15 λεπτών, ενώ στις εκδόσεις Rust και Flutter περιστρέφονται συνεχώς.

Οι ζώνες ώρας δεν ήταν ενσωματωμένες. Ούτε το Rust που μεταγλωττίζεται σε WebAssembly ούτε το Dart διαθέτουν βάση δεδομένων ζωνών ώρας που γνωρίζει το “Asia/Dubai”. Και τα δύο ρωτούν τον περιηγητή, μέσω της ενσωματωμένης υπηρεσίας Intl, που επίσης χειρίζεται σωστά τη θερινή ώρα.

Και οι τρεις μοιράζονται τις εισόδους τους. Οι χάρτες Rust και Flutter διαβάζουν τη λίστα πόλεων και το περίγραμμα της γης από τη σελίδα στην οποία βρίσκονται, τα ίδια δεδομένα που χρησιμοποιεί ο χάρτης SVG. Αλλάζοντας μια πόλη, αλλάζουν και οι τρεις. Αυτό σημαίνει επίσης ότι οι χάρτες μπορούν να τρέξουν μόνο σε μια σελίδα που τους παρέχει αυτά τα δεδομένα.

Το Flutter web θυμάται. Το Flutter web εγκαθιστά τη δική του προσωρινή μνήμη (cache), οπότε μετά την αναδόμηση βλέπαμε την παλιά έκδοση μέχρι να την καθαρίσουμε.

Το συμπέρασμά μας

Ο χάρτης SVG παραμένει στην αρχική σελίδα. Για ένα σχέδιο αυτού του μεγέθους είναι ο πιο ελαφρύς, είναι προσβάσιμος, είναι μεταφρασμένος και δεν χρειάζεται τίποτα για να κατασκευαστεί. Το Rust είναι ο πιο ενδιαφέρων δεύτερος: αν ποτέ χρειαστούμε η λογική του χάρτη να είναι αποδεδειγμένα σωστή, ή χρειαστεί να κάνουμε βαριά υπολογιστικά σε περιηγητή, ένας δοκιμασμένος πυρήνας Rust είναι ένας καλός τρόπος να το πετύχουμε. Το Flutter έχει νόημα αν ο χάρτης χρειαστεί ποτέ να ζήσει μέσα σε μια εφαρμογή Flutter.

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

Τι χτίζουν οι ιδρυτές μας στη συνέχεια

Μια σταθερή πλατφόρμα αφήνει χρόνο για άλλες ιδέες. Εκτός από το EVnSteven, οι ιδρυτές μας εργάζονται σε αυτά:

Υπηρεσία κλήσης μεταφορικών, έρχεται πολύ σύντομα Kimem ↗ (opens in a new tab) Μια υπηρεσία κλήσης μεταφορικών για το Bahir Dar, Αιθιοπία, από τον ιδρυτή Mekonnen Alemu. Οι επιβάτες βλέπουν μια εκτίμηση κόστους πριν κάνουν κράτηση, παρακολουθούν τον πλησιέστερο οδηγό να πλησιάζει σε χάρτη και πληρώνουν το μετρημένο κόμιστρο με μετρητά στο τέλος της διαδρομής.

Μη κερδοσκοπικό, ανοιχτού κώδικα StrayCats ↗ (opens in a new tab) Ένα έργο από τον David για να βοηθήσει ανθρώπους που φροντίζουν αδέσποτες γάτες, αδέσποτες γάτες ή οποιαδήποτε γάτα, ακόμα κι αν αυτή η γάτα είναι σκύλος. Βρίσκεται ακόμα στο στάδιο της ιδέας, χωρίς εφαρμογή ακόμη, και ο David θα εκτιμούσε τις ιδέες και τα σχόλιά σας. Αφιερωμένο στη Saibo, 2010–2026.

Παρακολούθηση μετρητών, δωρεάν, έρχεται σύντομα Effectivo ↗ (opens in a new tab) Ατελής λογιστική με μια ανατροπή, για όσους χρησιμοποιούν μετρητά. Καταγράψτε μια αγορά με λίγα πατήματα, μετρήστε τι έχετε στο πορτοφόλι σας και δείτε πίσω τι άξιζε. Η ανατροπή είναι ότι όλοι όσοι συνεχίζουν να χρησιμοποιούν μετρητά βοηθούν να διατηρηθούν διαθέσιμα για όλους τους υπόλοιπους. Δωρεάν και χωρίς διαφημίσεις, έρχεται σε Android και iPhone, με beta και web demo που λειτουργούν τώρα.