Alexey Grachev: Go Frontend

Kyiv Go Meetup Μάιος 2018:

Alexey Grachev: Go Frontend

Μόλυβδος: - Γεια σε όλους! Ευχαριστώ που βρίσκεσαι εδώ! Σήμερα έχουμε δύο επίσημους ομιλητές - τον Lyosha και τον Vanya. Θα υπάρξουν άλλα δύο αν έχουμε αρκετό χρόνο. Ο πρώτος ομιλητής είναι ο Alexey Grachev, θα μας μιλήσει για το GopherJS.

Alexey Grachev (εφεξής – AG): – Είμαι προγραμματιστής Go και γράφω υπηρεσίες web στο Go. Μερικές φορές πρέπει να ασχοληθείς με το frontend, μερικές φορές πρέπει να μπεις σε αυτό χειροκίνητα. Θέλω να μιλήσω για την εμπειρία και την έρευνά μου στο Go on the frontend.

Ο μύθος είναι ο εξής: πρώτα θα μιλήσουμε για το γιατί θέλουμε να τρέξουμε το Go στο frontend, μετά θα μιλήσουμε για το πώς μπορεί να γίνει αυτό. Υπάρχουν δύο τρόποι - Συναρμολόγηση Web και GopherJS. Ας δούμε ποια είναι η κατάσταση αυτών των λύσεων και τι μπορεί να γίνει.

Τι συμβαίνει με το frontend;

Συμφωνούν όλοι ότι όλα είναι καλά με το frontend;

Alexey Grachev: Go Frontend

Δεν υπάρχουν αρκετά τεστ; Αργή κατασκευή; Οικοσύστημα; Πρόστιμο.

Όσον αφορά το frontend, μου αρέσει το απόσπασμα που είπε ένας από τους προγραμματιστές του frontend στο βιβλίο του:

Alexey Grachev: Go Frontend

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

Το σύστημα τύπων γενικά δύσκολα μπορεί να ονομαστεί σύστημα τύπων στο Javasript - υπάρχουν γραμμές που υποδεικνύουν τον τύπο του αντικειμένου, αλλά στην πραγματικότητα αυτό δεν έχει καμία σχέση με τους τύπους. Αυτό το πρόβλημα επιλύεται στο TypeScript (ένα πρόσθετο στο Javasript) και στο Flow (ένας έλεγχος στατικού τύπου σε Javascript). Στην πραγματικότητα, το frontend έχει ήδη φτάσει στο σημείο να λύσει το πρόβλημα ενός κακού τύπου συστήματος στο Javascript.

Alexey Grachev: Go Frontend

Δεν υπάρχει τυπική βιβλιοθήκη στο πρόγραμμα περιήγησης - υπάρχουν ορισμένα ενσωματωμένα αντικείμενα και "μαγικές" λειτουργίες στα προγράμματα περιήγησης. Αλλά στο Javascript δεν υπάρχει τυπική βιβλιοθήκη ως τέτοια. Αυτό το πρόβλημα είχε ήδη λυθεί μια φορά από το jQuery (όλοι χρησιμοποιούσαν το jQuery με όλα τα πρωτότυπα, βοηθούς, λειτουργίες που χρειάζονταν για να λειτουργήσουν). Τώρα όλοι χρησιμοποιούν το Lodash:

Alexey Grachev: Go Frontend

Κόλαση επανάκλησης. Νομίζω ότι όλοι είδαν τον κώδικα Javascript πριν από περίπου 5 χρόνια, και έμοιαζε με ένα "noodle" μιας απίστευτης πολυπλοκότητας επανακλήσεων. Τώρα αυτό το πρόβλημα έχει λυθεί (με την κυκλοφορία του ES-15 ή του ES-16), προστέθηκαν υποσχέσεις στο Javascript και όλοι μπορούν να αναπνεύσουν πιο εύκολα για λίγο.

Alexey Grachev: Go Frontend

Μέχρι να φτάσει η κόλαση του Promice... Δεν ξέρω πώς τα καταφέρνει η βιομηχανία του front-end, αλλά πάντα οδηγούν τον εαυτό τους σε κάποια περίεργη ζούγκλα. Καταφέραμε επίσης να κάνουμε κόλαση στις υποσχέσεις. Στη συνέχεια, λύσαμε αυτό το πρόβλημα προσθέτοντας ένα νέο πρωτόγονο - async/wait:

Alexey Grachev: Go Frontend

Το πρόβλημα με τον ασυγχρονισμό έχει λυθεί. Το Async/wait είναι ένα αρκετά δημοφιλές πρωτόγονο σε διάφορες γλώσσες. Η Python και άλλοι έχουν αυτήν την προσέγγιση - είναι πολύ καλή. Το πρόβλημα λύθηκε.

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

Alexey Grachev: Go Frontend

  • Η σύνταξη Javascript είναι λίγο περίεργη. Όλοι γνωρίζουμε τα προβλήματα με την προσθήκη ενός πίνακα και ενός αντικειμένου και άλλα αστεία.
  • Η Javascript είναι πολλαπλών παραδειγμάτων. Αυτό είναι ένα ιδιαίτερα πιεστικό σύστημα τώρα όταν το οικοσύστημα είναι πολύ μεγάλο:
    • Όλοι γράφουν με διαφορετικά στυλ - κάποιοι γράφουν δομικά, άλλοι γράφουν λειτουργικά, διαφορετικοί προγραμματιστές γράφουν με διαφορετικούς τρόπους.
    • από διαφορετικά πακέτα, διαφορετικά παραδείγματα όταν χρησιμοποιείτε διαφορετικά πακέτα.
    • υπάρχει πολλή «διασκέδαση» με τον λειτουργικό προγραμματισμό στο Javasript - εμφανίστηκε η βιβλιοθήκη rambda και τώρα κανείς δεν μπορεί να διαβάσει προγράμματα γραμμένα σε αυτήν τη βιβλιοθήκη.

  • Όλα αυτά έχουν μεγάλο αντίκτυπο στο οικοσύστημα και έχει αυξηθεί απίστευτα. Τα πακέτα είναι ασύμβατα μεταξύ τους: ορισμένα βασίζονται σε υποσχέσεις, άλλα βασίζονται σε async/αναμονή, μερικά βασίζονται σε ανακλήσεις. Γράφουν επίσης σε διαφορετικά παραδείγματα!
  • Αυτό καθιστά δύσκολη τη συντήρηση του έργου. Είναι δύσκολο να βρείτε ένα σφάλμα αν δεν μπορείτε να διαβάσετε τον κώδικα.

Τι είναι το Web Assembly;

Οι γενναίοι τύποι από το Ίδρυμα Mozilla και από μια σειρά άλλων εταιρειών βρήκαν ένα τέτοιο πράγμα όπως το Web Assembly. Τι είναι αυτό?

Alexey Grachev: Go Frontend

  • Αυτή είναι μια εικονική μηχανή ενσωματωμένη στο πρόγραμμα περιήγησης που υποστηρίζει τη δυαδική μορφή.
  • Τα δυαδικά προγράμματα φτάνουν εκεί και εκτελούνται σχεδόν εγγενώς, δηλαδή, το πρόγραμμα περιήγησης δεν χρειάζεται να αναλύει όλα τα "noodles" του κώδικα javascript κάθε φορά.
  • Όλα τα προγράμματα περιήγησης έχουν δηλώσει υποστήριξη.
  • Εφόσον πρόκειται για bytecode, μπορείτε να γράψετε έναν μεταγλωττιστή για οποιαδήποτε γλώσσα.
  • Τέσσερα μεγάλα προγράμματα περιήγησης διατίθενται ήδη με υποστήριξη Web Assembly.
  • Αναμένουμε εγγενή υποστήριξη στο Go σύντομα. Αυτή η νέα αρχιτεκτονική έχει ήδη προστεθεί: GOARCH=wasm GOOS=js (σύντομα). Μέχρι στιγμής, όπως καταλαβαίνω, δεν είναι λειτουργικό, αλλά υπάρχει δήλωση ότι σίγουρα θα είναι στο Go.

Τι να κάνουμε τώρα? GopherJS

Αν και δεν έχουμε υποστήριξη για το Web Assembly, υπάρχει ένα transpiler όπως το GopherJS.

Alexey Grachev: Go Frontend

  • Ο κώδικας Go μεταφράζεται σε "καθαρή" Javascript.
  • Εκτελείται σε όλα τα προγράμματα περιήγησης - δεν υπάρχουν νέες δυνατότητες που να υποστηρίζονται μόνο από σύγχρονα προγράμματα περιήγησης (αυτό είναι το Vanilla JS, το οποίο εκτελείται σε οτιδήποτε).
  • Υπάρχει υποστήριξη για σχεδόν όλα όσα έχει το Go, συμπεριλαμβανομένων των γορουτίν και των καναλιών... όλα όσα αγαπάμε και γνωρίζουμε τόσο πολύ.
  • Υποστηρίζεται σχεδόν ολόκληρη η τυπική βιβλιοθήκη, εκτός από εκείνα τα πακέτα που δεν έχει νόημα να υποστηρίζονται στο πρόγραμμα περιήγησης: syscall, αλληλεπιδράσεις δικτύου (υπάρχει πελάτης net/http, αλλά όχι διακομιστής και ο πελάτης προσομοιώνεται μέσω XMLHttpRequest). Γενικά, ολόκληρη η τυπική βιβλιοθήκη είναι διαθέσιμη - εδώ είναι στο πρόγραμμα περιήγησης, εδώ είναι το stdlib του Go, το οποίο αγαπάμε.
  • Ολόκληρο το οικοσύστημα πακέτου στο Go, όλες οι λύσεις τρίτων κατασκευαστών (πρότυπο κ.λπ.) μπορούν να μεταγλωττιστούν χρησιμοποιώντας το GopherJS και να εκτελεστούν στο πρόγραμμα περιήγησης.

Το GopherJS είναι πολύ εύκολο να το αποκτήσετε - είναι απλώς ένα κανονικό πακέτο Go. Πηγαίνουμε να πάρουμε και έχουμε μια εντολή GopherJS για να δημιουργήσουμε την εφαρμογή:

Alexey Grachev: Go Frontend

Αυτός είναι ένας τόσο μικρός κόσμος γεια...

Alexey Grachev: Go Frontend

...Ένα κανονικό πρόγραμμα Go, ένα κανονικό πακέτο fmt βιβλιοθήκης και Binding Js για πρόσβαση στο API του προγράμματος περιήγησης. Το Println τελικά θα μετατραπεί σε αρχείο καταγραφής κονσόλας και το πρόγραμμα περιήγησης θα γράψει "Hello gophers"! Είναι τόσο απλό: κάνουμε το GopherJS build – το εκκινούμε στο πρόγραμμα περιήγησης – όλα λειτουργούν!

Τι έχετε αυτή τη στιγμή; Δεσίματα

Alexey Grachev: Go Frontend

Υπάρχουν δεσμεύσεις για όλα τα δημοφιλή πλαίσια js:

  • JQuery;
  • Angular.js;
  • D3.js για σχεδίαση και εργασία με μεγάλα δεδομένα.
  • React.js;
  • VueJS;
  • υπάρχει υποστήριξη ακόμη και για το Electron (δηλαδή μπορούμε ήδη να γράφουμε εφαρμογές επιφάνειας εργασίας στο Electron).
  • και το πιο αστείο είναι το WebGL (μπορούμε να φτιάξουμε εφαρμογές πλήρους γραφικών, συμπεριλαμβανομένων παιχνιδιών με τρισδιάστατα γραφικά, μουσική και όλα τα καλούδια).
  • και πολλές άλλες συνδέσεις σε όλα τα δημοφιλή πλαίσια και βιβλιοθήκες javascript.

Πλαίσιο

  1. Υπάρχει ήδη ένα πλαίσιο web που έχει αναπτυχθεί ειδικά για το GopherJS - Vecty. Αυτό είναι ένα πλήρες ανάλογο του React.js, αλλά αναπτύχθηκε μόνο στο Go, με τις ιδιαιτερότητες του GopherJS.
  2. Υπάρχουν τσάντες παιχνιδιών (έκπληξη!). Βρήκα τα δύο πιο δημοφιλή:
    • Engo;
    • Έμπιτεν.

Θα σας δείξω μερικά παραδείγματα για το πώς φαίνεται και τι μπορείτε ήδη να γράψετε στο Go:

Alexey Grachev: Go Frontend

Ή αυτή η επιλογή (δεν μπόρεσα να βρω ένα shooter 3D, αλλά ίσως υπάρχει):

Alexey Grachev: Go Frontend

Τι προσφέρω;

Τώρα η βιομηχανία του front-end είναι σε τέτοια κατάσταση που όλες οι γλώσσες που προηγουμένως έκλαιγαν από το Javascript θα σπεύσουν εκεί. Τώρα όλα θα συγκεντρωθούν σε "Web Assemblies". Τι χρειαζόμαστε για να πάρουμε τη θέση που μας αξίζει εκεί ως Gophers;

Alexey Grachev: Go Frontend

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

Και τώρα είναι μια καλή ευκαιρία να δημιουργήσετε βιβλιοθήκες διεπαφής χρήστη στο Go που θα τρέχουν στο GopherJS! Μπορείτε επιτέλους να γράψετε το δικό σας πλαίσιο! Αυτή είναι η στιγμή που μπορείτε να γράψετε ένα πλαίσιο, και θα είναι ένα από τα πρώτα και θα λάβετε πρόωρη υιοθέτηση, και θα γίνετε αστέρι (αν είναι καλό πλαίσιο).

Μπορείτε να προσαρμόσετε πολλά διαφορετικά πακέτα που βρίσκονται ήδη στο οικοσύστημα Go στις ιδιαιτερότητες του προγράμματος περιήγησης (για παράδειγμα, Template engine). Θα λειτουργούν ήδη, μπορείτε να κάνετε βολικές συνδέσεις, ώστε να μπορείτε εύκολα να αποδώσετε το περιεχόμενο απευθείας στο πρόγραμμα περιήγησης. Επιπλέον, μπορείτε να δημιουργήσετε, για παράδειγμα, μια υπηρεσία που μπορεί να αποδώσει το ίδιο πράγμα στον διακομιστή και στο front-end, χρησιμοποιώντας τον ίδιο κώδικα - όλα όσα αρέσουν στους προγραμματιστές του front-end (μόνο τώρα στο Go).

Μπορείτε να γράψετε ένα παιχνίδι! Για πλάκα...

Μόνο αυτό ήθελα να πω.

Alexey Grachev: Go Frontend

ερωτήσεις

Ερώτηση (εφεξής Q): – Γράφω σε Go ή Js;

AG: – Γράφετε ρουτίνες, κανάλια, δομές, ενσωμάτωση – τα πάντα στο Go... Εγγράφεστε σε μια εκδήλωση, περνάτε μια λειτουργία εκεί.

ΣΤΟ: – Δηλαδή γράφω σε “γυμνό” Js;

AG: – Όχι, γράφετε σαν στο Go και συνδέεστε στο API του προγράμματος περιήγησης (το API δεν έχει αλλάξει). Μπορείτε να γράψετε τις δικές σας δεσμεύσεις για να αποστέλλονται μηνύματα στο κανάλι - δεν είναι δύσκολο.

ΣΤΟ: – Τι γίνεται με το κινητό;

AG: – Σίγουρα είδα: υπάρχουν δεσμεύσεις για το έμπλαστρο Cordova που εκτελεί ο Js. Στο React Native - δεν ξέρω. ίσως υπάρχει, ίσως όχι (δεν με ενδιέφερε ιδιαίτερα). Η μηχανή παιχνιδιών N-go υποστηρίζει και τις δύο εφαρμογές για κινητές συσκευές - iOS και Android.

ΣΤΟ: – Ερώτηση σχετικά με το Web Assembly. Όλο και περισσότερος χώρος καταλαμβάνεται, παρά τη συμπίεση και το «φερμουάρ»... Δεν θα σκοτώνουμε ακόμη περισσότερο τον κόσμο του front-end με αυτόν τον τρόπο;

AG: – Η Συνέλευση Web είναι μια δυαδική μορφή και η δυαδική από προεπιλογή δεν μπορεί να είναι στην τελική έκδοση περισσότερο από κείμενο... Παρασύρεστε στο χρόνο εκτέλεσης, αλλά αυτό είναι το ίδιο με το να σύρετε προς τα έξω την τυπική βιβλιοθήκη Javascript όταν δεν υπάρχει, οπότε χρησιμοποιήστε λίγο Lodash. Δεν ξέρω πόσα παίρνει ο Lodash.

ΣΤΟ: – Προφανώς λιγότερο από το χρόνο εκτέλεσης...

AG: – Σε «καθαρή» Javascript;

ΣΤΟ: - Ναί. Το συμπιέζουμε πριν το στείλουμε...

AG: – Αλλά αυτό είναι κείμενο... Γενικά, ένα megabyte φαίνεται πολύ, αλλά αυτό είναι όλο (έχετε ολόκληρο τον χρόνο εκτέλεσης). Στη συνέχεια, γράφετε τη δική σας επιχειρηματική λογική, η οποία θα αυξήσει το δυαδικό σας κατά 1%. Μέχρι στιγμής δεν βλέπω αυτό να σκοτώνει το frontend. Επιπλέον, η Συνέλευση Web θα λειτουργεί πιο γρήγορα από την Javascript για τον προφανή λόγο - δεν χρειάζεται να αναλυθεί.

ΣΤΟ: – Αυτό είναι ακόμα ένα αμφιλεγόμενο σημείο... Δεν υπάρχει ακόμη καμία εφαρμογή αναφοράς του “Vasma” (Web Assembly) ώστε να μπορεί κανείς να κρίνει με σαφήνεια. Εννοιολογικά, ναι: όλοι καταλαβαίνουμε ότι το δυαδικό θα πρέπει να είναι πιο γρήγορο, αλλά η τρέχουσα υλοποίηση του ίδιου V8 είναι πολύ αποτελεσματική.

AG: - Ναί.

ΣΤΟ: – Η συλλογή εκεί λειτουργεί πολύ ωραία και δεν είναι γεγονός ότι θα υπάρχει μεγάλο πλεονέκτημα.

AG: – Το Web Assembly φτιάχνεται επίσης από μεγάλα παιδιά.

ΣΤΟ: – Μου φαίνεται ότι είναι ακόμα δύσκολο να κρίνουμε το Web Assembly. Υπάρχουν συζητήσεις εδώ και πολλά χρόνια, αλλά υπάρχουν λίγα πραγματικά επιτεύγματα που γίνονται αισθητά.

AG: - Μπορεί. Θα δούμε.

ΣΤΟ: – Δεν έχουμε προβλήματα στο backend... Ίσως θα έπρεπε να αφήσουμε αυτά τα προβλήματα στο frontend; Γιατί να πάτε εκεί;

AG: – Πρέπει να διατηρήσουμε ένα επιτελείο εργαζομένων πρώτης γραμμής.

Μερικές διαφημίσεις 🙂

Σας ευχαριστούμε που μείνατε μαζί μας. Σας αρέσουν τα άρθρα μας; Θέλετε να δείτε πιο ενδιαφέρον περιεχόμενο; Υποστηρίξτε μας κάνοντας μια παραγγελία ή προτείνοντας σε φίλους, cloud VPS για προγραμματιστές από 4.99 $, ένα μοναδικό ανάλογο διακομιστών εισαγωγικού επιπέδου, το οποίο εφευρέθηκε από εμάς για εσάς: Όλη η αλήθεια για το VPS (KVM) E5-2697 v3 (6 Cores) 10GB DDR4 480GB SSD 1Gbps από 19 $ ή πώς να μοιραστείτε έναν διακομιστή; (διατίθεται με RAID1 και RAID10, έως 24 πυρήνες και έως 40 GB DDR4).

Το Dell R730xd 2 φορές φθηνότερο στο κέντρο δεδομένων Equinix Tier IV στο Άμστερνταμ; Μόνο εδώ 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100 Τηλεόραση από 199$ στην Ολλανδία! Dell R420 - 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB - από 99$! Διαβάστε σχετικά Πώς να χτίσετε την υποδομή Corp. κατηγορίας με τη χρήση διακομιστών Dell R730xd E5-2650 v4 αξίας 9000 ευρώ για μια δεκάρα;

Πηγή: www.habr.com

Προσθέστε ένα σχόλιο