Σας παρουσιάζουμε την Καμπάνια Συμμαζέματος της Εφαρμογής

Με λίγα λόγια: τους επόμενους έξι μήνες πάνω-κάτω θα κάνουμε μια σειρά από αλλαγές και βελτιώσεις στην τεχνική υποδομή της εφαρμογής του League. Για να παρακολουθήσουμε την πρόοδό μας, θα ανακοινώνουμε συγκεκριμένους στόχους για τα δύο βασικά στοιχεία με τα οποία θα μετράμε την απόδοση της εφαρμογής: τον χρόνο που διαρκεί το bootstrap της εφαρμογής (δηλαδή πόση ώρα χρειάζεται η εφαρμογή για να ξεκινήσει) και τον χρόνο κλειδώματος στην Επιλογή Ήρωα. Στην προσπάθειά μας να βελτιώσουμε αυτά τα στοιχεία απόδοσης, θα ασχολούμαστε με την επίλυση διαφόρων προβλημάτων, όπως σφάλματα, κρασαρίσματα, κ.λπ. Με λίγα λόγια, ο στόχος είναι να διορθώσουμε την εφαρμογή.

«Riot, πότε θα διορθώσεις επιτέλους την εφαρμογή;»

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

Γι' αυτό θέλουμε τώρα να δοκιμάσουμε κάτι διαφορετικό.

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

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

Η ΕΦΑΡΜΟΓΗ ΣΕ ΑΡΙΘΜΟΥΣ

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

Θέλουμε η συνολική διάρκεια του bootstrap να πέσει κάτω από τα 15 δευτερόλεπτα, ακόμα και για τους παίκτες με σχετικά αργούς υπολογιστές. Ωστόσο, διαπιστώσαμε ότι, αυτήν τη στιγμή, η διάρκεια του bootstrap μπορεί να γίνει τριπλάσια ή ακόμα και τετραπλάσια για κάποιους παίκτες.

Ένα άλλο σημαντικό μέτρο απόδοσης που παρακολουθούμε είναι ο χρόνος «κλειδώματος στην Επιλογή Ήρωα». Πρόκειται για τον χρόνο που χρειάζεται η εφαρμογή για να καταγράψει το κλείδωμα της επιλογής του Ήρωα από τη στιγμή που θα κάνετε κλικ στο κουμπί. Στο γράφημα που ακολουθεί, βλέπετε τους μέσους χρόνους απόκρισης για το κλείδωμα της επιλογής του Ήρωα κατά την Eνημέρωση 9.22 (πορτοκαλί γραμμή) και την Eνημέρωση 10.2 (μπλε γραμμή). Ο χρόνος απόκρισης κλειδώματος υπολογίζεται σε χιλιοστά του δευτερολέπτου.

Στο παραπάνω γράφημα μπορείτε να δείτε πόσο μπορούν να διαφέρουν οι χρόνοι απόκρισης επιλογής Ήρωα από παίκτη σε παίκτη. Βέβαια, η απόδοση της εφαρμογής εξαρτάται και από το πόσο γρήγορος είναι ο υπολογιστής σας. Αν, για παράδειγμα, το κλείδωμα συμμετοχής σας γίνεται μέσα σε 200 ms, τότε ο υπολογιστής σας βρίσκεται στο 10ο εκατοστημόριο και οι χρόνοι απόκρισής σας είναι ταχύτεροι από το 90% όλων των παικτών. Αντίστοιχα, αν οι χρόνοι απόκρισής σας είναι πάνω από 800 ms, βρίσκεστε στο 90ό εκατοστημόριο, πράγμα που σημαίνει ότι η εφαρμογή σας τρέχει πιο αργά από το 90% όλων των παικτών.

Όπως βλέπετε, οι χρόνοι κλειδώματος βελτιώθηκαν σημαντικά για τους παίκτες στη 10.2, συγκριτικά με την 9.22. Ο κύριος λόγος για αυτήν τη βελτίωση είναι ότι στην 9.23 ενημερώσαμε την έκδοση του Chromium που χρησιμοποιεί η εφαρμογή. Πετύχαμε σημαντική βελτίωση, αλλά πιστεύουμε ότι η εφαρμογή εξακολουθεί να είναι υπερβολικά αργή για πολλούς από εσάς.

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

Όπως βλέπετε, η μπλε γραμμή αντιστοιχεί στο 50ό εκατοστημόριο, δηλαδή αυτό που λέμε «μέσος» παίκτης. Η σημαντική πτώση του χρόνου απόκρισης για τον μέσο παίκτη είναι μια θετική εξέλιξη. Όμως φαίνεται επίσης ότι, από τις αρχές του 2020, οι χρόνοι απόκρισης επιλογής Ήρωα για τον μέσο παίκτη κυμαίνονται γύρω στα 300 ms. Αυτή η απόδοση δεν είναι και τόσο κακή, αλλά υπάρχει αισθητή καθυστέρηση.

Οι παίκτες του 70ού εκατοστημορίου (πράσινη γραμμή) είδαν κι αυτοί πρόσφατα σημαντικές βελτιώσεις, αλλά οι χρόνοι απόκρισης επιλογής Ήρωα για αυτήν την κατηγορία παικτών κυμαίνονται γύρω στα 450 ms. Αυτό αντιστοιχεί σε καθυστέρηση σχεδόν μισού δευτερολέπτου, αρκετά υψηλότερη από αυτό που θα θέλαμε για έναν παίκτη με αξιοπρεπή υπολογιστή.

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

Λοιπόν! Για να δούμε τι θα κάνουμε στη συνέχεια.

ΟΙ ΠΡΟΤΕΡΑΙΟΤΗΤΕΣ ΜΑΣ ΓΙΑ ΤΟ ΠΡΟΣΕΧΕΣ ΜΕΛΛΟΝ

Η βασική μας προτεραιότητα στο εξής θα είναι δύο συγκεκριμένοι, μακροπρόθεσμοι στόχοι:

1. Θέλουμε να μειώσουμε τον χρόνο bootstrap και να τον φέρουμε γύρω στα 15 δευτερόλεπτα, ακόμα και για τους παίκτες του 90ού εκατοστημορίου. Δηλαδή θέλουμε να τον μειώσουμε στο ένα τρίτο ή ένα τέταρτο από τη σημερινή του κατάσταση.
2. Θέλουμε επίσης να μειώσουμε τους χρόνους απόκρισης κλειδώματος στην Επιλογή Ήρωα ώστε να πέσουν γύρω στα 100 ms για τους παίκτες του 90ού εκατοστημορίου. Δηλαδή να γίνεται οχτώ φορές πιο γρήγορα απ' όσο γίνεται τώρα.

Ξέρουμε τι σκέφτεστε. Και τι θα γίνει με τα σφάλματα; Τα κρασαρίσματα, τις διαρροές μνήμης;

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

Διάφορα θέματα, όπως το σφάλμα με τη μαύρη οθόνη στην Επιλογή Ήρωα και οι Σελίδες Ρούνων που δεν αποθηκεύονται σωστά είναι μερικά παραδείγματα από τη δουλειά που σκοπεύουμε να κάνουμε στο πλαίσιο αυτής της διαδικασίας. Θέλουμε όμως να ξεκαθαρίσουμε από την αρχή ότι όλα αυτά θα χρειαστούν χρόνο. Έχουμε ένα πλάνο έξι μηνών που πιστεύουμε ότι θα μας βοηθήσει να κάνουμε σημαντική πρόοδο για να πετύχουμε τους στόχους μας. Όμως, η επίτευξη των μακροπρόθεσμων στόχων μας λογικά θα χρειαστεί περισσότερο χρόνο.

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

Η επόμενη λογική ερώτηση είναι πώς ακριβώς θα τα καταφέρουμε όλα αυτά;

ΠΩΣ ΘΑ ΤΑ ΚΑΤΑΦΕΡΟΥΜΕ

Μέχρι τώρα, έχουμε εντοπίσει δύο σημαντικά προβλήματα στην αρχιτεκτονική της εφαρμογής που επιβραδύνουν τους χρόνους bootstrap. Το πρώτο βρίσκεται στην αρχιτεκτονική των προσθηκών (plugin), η οποία μας επιτρέπει να χωρίζουμε τον κώδικα της εφαρμογής σε πιο εύχρηστα κομμάτια. Αυτή η αρχιτεκτονική έχει βαρύνει πολύ με την προσθήκη νέων λειτουργιών στην εφαρμογή. Δεύτερον, δεν χρησιμοποιούμε αποτελεσματικά το πλαίσιο Javascript (το Ember, όπως το αποκαλούμε) στο οποίο βασίζεται το UI μας.

Αυτήν τη στιγμή, η εφαρμογή χρησιμοποιεί υπερβολικά πολλές προσθήκες και επιμέρους εφαρμογές στο Ember. Για την ακρίβεια, κατά τη διάρκεια της διαδικασίας bootstrap της εφαρμογής φορτώνουν 41 διαφορετικές προσθήκες και 16 επιμέρους εφαρμογές. Η εκκίνηση καθενός από αυτά τα στοιχεία χρειάζεται από 100 ms έως 800 ms. Και αυτό δεν λέει καθόλου.

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

1Η ΦΑΣΗ: BOOTSTRAP

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

Πάρα πολλά στοιχεία της εφαρμογής, όπως οι ειδοποιήσεις, η λίστα φίλων και η καρτέλα Συλλογή επηρεάζονται από τις προσθήκες και τις επιμέρους εφαρμογές που φορτώνουν κατά τη διάρκεια του bootstrap. Άρα, αν και ο μακροπρόθεσμος στόχος μας είναι η μείωση του χρόνου bootstrap στα 15 δευτερόλεπτα για τους παίκτες του 90ού εκατοστημορίου, πιστεύουμε ότι στην πορεία θα χρειαστεί να διορθώσουμε πολλά από τα σφάλματα και τις αδυναμίες που επηρεάζουν την αποδοτικότητα της εφαρμογής.

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

2Η ΦΑΣΗ: ΕΠΙΛΟΓΗ ΗΡΩΑ

Η Επιλογή Ήρωα προσθέτει ακόμη περισσότερες προσθήκες και εφαρμογές του Ember. Για να το πούμε ευθέως, όλα σχεδόν τα πράγματα που μπορείτε να κάνετε στην Επιλογή Ήρωα δημιουργούν νέες εφαρμογές. Για παράδειγμα, η ανταλλαγή Ηρώων δημιουργεί δύο εφαρμογές. Το ίδιο και η αλλαγή Ξορκιών Επικαλεστή.

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

Το πραγματικό, θεμελιώδες πρόβλημα με την Επιλογή Ήρωα είναι ο τρόπος με τον οποίο τα συστήματα υποδομής μας διαχειρίζονται τα δεδομένα. Η τρέχουσα αρχιτεκτονική της Επιλογής Ήρωα μάς επιτρέπει να μεταδίδουμε μεγάλους όγκους σημαντικών δεδομένων μέσω των συστημάτων μας. Για παράδειγμα, αν η Riot αποφασίσει να απενεργοποιήσει έναν Ήρωα στην Κατάταξη, αυτός ο Ήρωας θα απενεργοποιηθεί σχεδόν αμέσως για όλους τους παίκτες, συμπεριλαμβανομένων και αυτών που βρίσκονται στην Επιλογή Ήρωα όταν φτάσει εκεί η εντολή απενεργοποίησης.

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

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

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

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

ΕΠΟΜΕΝΑ ΒΗΜΑΤΑ

Θα συνεχίσουμε να σας ενημερώνουμε για την πρόοδό μας με νέα dev blog κάθε λίγους μήνες, στα οποία θα δημοσιοποιούμε την απόδοση που έχουμε πετύχει με καθαρούς αριθμούς και θα σας ανακοινώνουμε τυχόν αλλαγές στο χρονοδιάγραμμα του έργου.

Ευχηθείτε μας καλή τύχη! Και σας ευχαριστούμε που παίζετε League. Θα τα ξαναπούμε σύντομα.