Ψστ! Να γιατί το ReasonReact είναι ο καλύτερος τρόπος για να γράψετε το React

Χρησιμοποιείτε το React για τη δημιουργία διεπαφών χρήστη; Λοιπόν, είμαι κι εγώ. Και τώρα, θα μάθετε γιατί πρέπει να γράψετε τις εφαρμογές React χρησιμοποιώντας το ReasonML.

Το React είναι ένας πολύ καλός τρόπος για να γράψετε διεπαφές χρήστη. Αλλά, θα μπορούσαμε να το κάνουμε ακόμα πιο δροσερό; Καλύτερα?

Για να το βελτιώσουμε, πρέπει πρώτα να εντοπίσουμε τα προβλήματά του. Λοιπόν, ποιο είναι το κύριο πρόβλημα του React ως βιβλιοθήκη JavaScript;

Το React δεν αναπτύχθηκε αρχικά για JavaScript

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

Το αμετάβλητο είναι μια από τις βασικές αρχές του React. Δεν θέλετε να μεταλλάξετε τα στηρίγματα ή την κατάστασή σας, επειδή εάν το κάνετε, ενδέχεται να αντιμετωπίσετε απρόβλεπτες συνέπειες. Στο JavaScript, δεν έχουμε αμετάβλητο από το κουτί. Διατηρούμε αμετάβλητες τις δομές δεδομένων μας από μια σύμβαση ή χρησιμοποιούμε βιβλιοθήκες όπως το immutableJS για να το επιτύχουμε.

Το React βασίζεται στις αρχές του λειτουργικού προγραμματισμού, καθώς οι εφαρμογές του είναι συνθέσεις λειτουργιών. Παρόλο που το JavaScript έχει μερικές από αυτές τις λειτουργίες, όπως λειτουργίες πρώτης κατηγορίας, δεν είναι λειτουργική γλώσσα προγραμματισμού. Όταν θέλουμε να γράψουμε έναν ωραίο δηλωτικό κώδικα, πρέπει να χρησιμοποιήσουμε εξωτερικές βιβλιοθήκες όπως το Lodash / fp ή το Ramda.

Λοιπόν, τι συμβαίνει με το σύστημα τύπου; Στο React, είχαμε PropTypes. Τους χρησιμοποιήσαμε για να μιμηθούμε τους τύπους σε JavaScript, καθώς δεν είναι η ίδια μια στατικά δακτυλογραφημένη γλώσσα. Για να επωφεληθούμε από την προηγμένη στατική πληκτρολόγηση, πρέπει και πάλι να χρησιμοποιήσουμε εξωτερικές εξαρτήσεις, όπως το Flow και το TypeScript.

Όπως μπορείτε να δείτε, το JavaScript δεν είναι συμβατό με τις βασικές αρχές του React.

Υπάρχει άλλη γλώσσα προγραμματισμού που θα ήταν πιο συμβατή με το React από το JavaScript;

Ευτυχώς, έχουμε το ReasonML.

Στο Reason, παίρνουμε αμετάβλητο από το κουτί. Δεδομένου ότι βασίζεται στο OCaml, τη λειτουργική γλώσσα προγραμματισμού, έχουμε τέτοιες δυνατότητες ενσωματωμένες και στην ίδια τη γλώσσα. Ο λόγος μας παρέχει επίσης ένα ισχυρό σύστημα τύπου από μόνο του.

Ο λόγος είναι συμβατός με τις βασικές αρχές της React.

Λόγος

Δεν είναι μια νέα γλώσσα. Είναι μια εναλλακτική σύνταξη και αλυσίδα εργαλείων που μοιάζει με JavaScript για το OCaml, μια λειτουργική γλώσσα προγραμματισμού που υπάρχει εδώ και περισσότερα από 20 χρόνια. Το Reason δημιουργήθηκε από προγραμματιστές του Facebook που χρησιμοποίησαν ήδη το OCaml στα έργα τους (Flow, Infer).

Ο λόγος, με τη σύνταξή του τύπου C, καθιστά το OCaml προσιτό για άτομα που προέρχονται από γενικές γλώσσες όπως η JavaScript ή η Java. Σας παρέχει καλύτερη τεκμηρίωση (σε σύγκριση με το OCaml) και μια αυξανόμενη κοινότητα γύρω από αυτό. Επιπλέον, διευκολύνει την ενσωμάτωση με την υπάρχουσα βάση κώδικα JavaScript.

Το OCaml χρησιμεύει ως υποστηρικτική γλώσσα για το Reason. Ο λόγος έχει την ίδια σημασιολογία με το OCaml - μόνο η σύνταξη είναι διαφορετική. Αυτό σημαίνει ότι μπορείτε να γράψετε OCaml χρησιμοποιώντας τη σύνταξη που μοιάζει με JavaScript του Reason. Ως αποτέλεσμα, μπορείτε να επωφεληθείτε από τις εκπληκτικές δυνατότητες του OCaml, όπως το ισχυρό σύστημα τύπου και η αντιστοίχιση μοτίβων.

Ας ρίξουμε μια ματιά σε ένα παράδειγμα σύνταξης του Reason.

let fizzbuzz = (i) => switch (i mod 3, i mod 5)  ; for (i in 1 to 100) { Js.log(fizzbuzz(i)) };

Παρόλο που χρησιμοποιούμε αντιστοίχιση μοτίβων σε αυτό το παράδειγμα, εξακολουθεί να μοιάζει πολύ με το JavaScript, σωστά;

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

BuckleScript

Μία από τις ισχυρές δυνατότητες του Reason είναι ο μεταγλωττιστής BuckleScript, ο οποίος παίρνει τον κωδικό Reason σας και τον μεταγλωττίζει σε αναγνώσιμο και εκτελεστικό JavaScript με εξαιρετική εξάλειψη κώδικα. Θα εκτιμήσετε την αναγνωσιμότητα αν εργάζεστε σε μια ομάδα όπου δεν είναι όλοι εξοικειωμένοι με το Reason, καθώς θα μπορούν ακόμα να διαβάσουν τον μεταγλωττισμένο κώδικα JavaScript.

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

let add = (a, b) => a + b;add(6, 9);

Αυτός είναι έγκυρος κώδικας τόσο στο Reason όσο και στο JavaScript.

Το BuckleScript αποστέλλεται με τέσσερις βιβλιοθήκες: η τυπική βιβλιοθήκη που ονομάζεται Belt (η τυπική βιβλιοθήκη OCaml είναι ανεπαρκής) και συνδέσεις με API JavaScript, Node.js και, DOM.

Δεδομένου ότι το BuckleScript βασίζεται σε μεταγλωττιστή OCaml, θα λάβετε μια εκπληκτικά γρήγορη συλλογή που είναι πολύ πιο γρήγορη από το Babel και αρκετές φορές πιο γρήγορη από το TypeScript.

Ας συντάξουμε τον αλγόριθμο FizzBuzz που γράφτηκε στο Reason σε JavaScript.

Όπως μπορείτε να δείτε, ο κωδικός JavaScript που προκύπτει είναι αρκετά αναγνώσιμος. Φαίνεται ότι γράφτηκε από προγραμματιστή JavaScript.

Το Reason δεν μεταγλωττίζεται μόνο σε JavaScript, αλλά και σε εγγενή και bytecode. Έτσι, μπορείτε να γράψετε μία εφαρμογή χρησιμοποιώντας τη σύνταξη Reason και να μπορείτε να την εκτελέσετε στο πρόγραμμα περιήγησης σε τηλέφωνα MacOS, Android και iOS. Υπάρχει ένα παιχνίδι που ονομάζεται Gravitron από τον Jared Forsyth, το οποίο είναι γραμμένο στο Reason και μπορεί να εκτελεστεί σε όλες τις πλατφόρμες που μόλις ανέφερα.

Διακοπή JavaScript

Το BuckleScript μας παρέχει επίσης διαλειτουργικότητα JavaScript. Όχι μόνο μπορείτε να επικολλήσετε τον κώδικα JavaScript που λειτουργεί στη βάση κώδικα του Reason, αλλά και ο κώδικας του Reason μπορεί επίσης να αλληλεπιδράσει με αυτόν τον JavaScript. Αυτό σημαίνει ότι μπορείτε εύκολα να ενσωματώσετε τον κώδικα Reason στην υπάρχουσα βάση κώδικα JavaScript. Επιπλέον, μπορείτε να χρησιμοποιήσετε όλα τα πακέτα JavaScript από το οικοσύστημα NPM στον κωδικό σας. Για παράδειγμα, μπορείτε να συνδυάσετε Flow, TypeScript και Reason μαζί σε ένα μεμονωμένο έργο.

Ωστόσο, δεν είναι τόσο απλό. Για να χρησιμοποιήσετε βιβλιοθήκες JavaScript ή κώδικα στο Reason, πρέπει να το μεταφέρετε στο Reason πρώτα μέσω του Reason bindings. Με άλλα λόγια, χρειάζεστε τύπους για τον μη τυποποιημένο κώδικα JavaScript για να μπορείτε να εκμεταλλευτείτε το ισχυρό σύστημα τύπου του Reason.

Κάθε φορά που πρέπει να χρησιμοποιήσετε μια βιβλιοθήκη JavaScript στον κωδικό του Reason, ελέγξτε αν η βιβλιοθήκη έχει ήδη μεταφερθεί στο Reason, μεταβαίνοντας στη βάση δεδομένων του Reason Package Index (Redex). Είναι ένας ιστότοπος που συγκεντρώνει διαφορετικές βιβλιοθήκες και εργαλεία γραμμένα σε βιβλιοθήκες Reason και JavaScript με δεσμεύσεις Reason. Εάν βρήκατε τη βιβλιοθήκη σας εκεί, μπορείτε απλώς να την εγκαταστήσετε ως εξάρτηση και να την χρησιμοποιήσετε στην εφαρμογή Reason.

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

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

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

ReasonReact

Αυτό το άρθρο αφορά τη σύνταξη του React in Reason, το οποίο μπορείτε να κάνετε χάρη στη βιβλιοθήκη ReasonReact.

Ίσως σκέφτεστε τώρα "Δεν ξέρω ακόμα γιατί πρέπει να χρησιμοποιήσω το React in Reason".

Έχουμε ήδη αναφέρει τον κύριο λόγο να το κάνουμε - Ο λόγος είναι πιο συμβατός με το React παρά το JavaScript. Γιατί είναι πιο συμβατό; Επειδή το React αναπτύχθηκε για το Reason, ή πιο συγκεκριμένα, για το OCaml.

Δρόμος προς ReasonReact

Το πρώτο πρωτότυπο του React αναπτύχθηκε από το Facebook και γράφτηκε στην Standard Meta Language (StandardML), ξάδερφος του OCaml. Στη συνέχεια, μεταφέρθηκε στο OCaml. Το React μεταγράφηκε επίσης σε JavaScript.

Αυτό οφείλεται στο γεγονός ότι ολόκληρος ο ιστός χρησιμοποιούσε JavaScript και μάλλον δεν ήταν έξυπνο να πούμε, "Τώρα θα δημιουργήσουμε UI στο OCaml." Και λειτούργησε - Το React σε JavaScript έχει υιοθετηθεί ευρέως.

Έτσι, συνηθίσαμε να αντιδράμε ως βιβλιοθήκη JavaScript. Αντιδράστε μαζί με άλλες βιβλιοθήκες και γλώσσες - Elm, Redux, Recompose, Ramda και PureScript - έκανε λειτουργικό προγραμματισμό σε JavaScript δημοφιλή. Και με την άνοδο των Flow και TypeScript, έγινε επίσης δημοφιλής η στατική πληκτρολόγηση. Ως αποτέλεσμα, το πρότυπο λειτουργικού προγραμματισμού με στατικούς τύπους έγινε mainstream στον κόσμο του front-end.

Το 2016, το Bloomberg ανέπτυξε και BuckleScript ανοιχτού κώδικα, τον μεταγλωττιστή που μετατρέπει το OCaml σε JavaScript. Αυτό τους επέτρεψε να γράψουν ασφαλή κώδικα στο front-end χρησιμοποιώντας το ισχυρό σύστημα OCaml. Πήραν τον βελτιστοποιημένο και εκπληκτικά γρήγορο μεταγλωττιστή OCaml και άλλαξαν τον εγγενή κώδικα δημιουργίας back-end για έναν που δημιουργεί JavaScript.

Η δημοτικότητα του λειτουργικού προγραμματισμού μαζί με την κυκλοφορία του BuckleScript δημιούργησε το ιδανικό κλίμα για το Facebook για να επιστρέψει στην αρχική ιδέα του React, η οποία αρχικά γράφτηκε σε γλώσσα ML.

Πήραν τη σημασιολογία OCaml και τη σύνταξη JavaScript και δημιούργησαν το Reason. Δημιούργησαν επίσης το Reason wrapper γύρω από τη βιβλιοθήκη React - ReasonReact - με πρόσθετες λειτουργίες όπως η ενθυλάκωση των αρχών του Redux σε συστατικά στοιχεία. Με αυτόν τον τρόπο, επέστρεψαν το React στις αρχικές του ρίζες.

Η δύναμη της αντίδρασης στη λογική

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

Αυτό πρόσθεσε ένα άλλο επίπεδο πολυπλοκότητας στην ανάπτυξη JavaScript.

Η τυπική σας εφαρμογή React θα έχει τουλάχιστον αυτές τις εξαρτήσεις:

  • στατική πληκτρολόγηση - Flow / TypeScript
  • αμετάβλητο - αμετάβλητο JS
  • routing - ReactRouter
  • μορφοποίηση - Πιο όμορφη
  • χνούδι - ESLint
  • λειτουργία βοηθού - Ramda / Lodash

Ας ανταλλάξουμε τώρα το JavaScript React για το ReasonReact.

Χρειαζόμαστε ακόμα όλες αυτές τις εξαρτήσεις;

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

Μπορείτε να μάθετε περισσότερα σχετικά με αυτές τις ενσωματωμένες λειτουργίες στην άλλη μου ανάρτηση.

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

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

Τύλιξε

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

Ωστόσο, πήγαν σε διαφορετικό δρόμο. Πήραν το OCaml ως ώριμη γλώσσα με εξαιρετική απόδοση και το τροποποίησαν έτσι ώστε να μοιάζει με JavaScript.

Το React βασίζεται επίσης στις αρχές του OCaml. Γι 'αυτό θα έχετε μια πολύ καλύτερη εμπειρία προγραμματιστή όταν τη χρησιμοποιείτε με το Reason. Το React in Reason αντιπροσωπεύει έναν ασφαλέστερο τρόπο δημιουργίας στοιχείων React, καθώς το σύστημα ισχυρού τύπου έχει την πλάτη σας και δεν χρειάζεται να αντιμετωπίσετε τα περισσότερα ζητήματα JavaScript (παλαιού τύπου).

Τι έπεται?

Εάν προέρχεστε από τον κόσμο της JavaScript, θα είναι πιο εύκολο για εσάς να ξεκινήσετε με το Reason, λόγω της συντακτικής ομοιότητας με το JavaScript. Εάν προγραμματίζετε στο React, θα είναι ακόμα πιο εύκολο για εσάς, καθώς μπορείτε να χρησιμοποιήσετε όλες τις γνώσεις σας στο React, καθώς το ReasonReact έχει το ίδιο διανοητικό μοντέλο με το React και πολύ παρόμοια ροή εργασίας. Αυτό σημαίνει ότι δεν χρειάζεται να ξεκινήσετε από το μηδέν. Θα μάθετε το Λόγο καθώς αναπτύσσεστε.

Ο καλύτερος τρόπος για να ξεκινήσετε να χρησιμοποιείτε το Reason στα έργα σας είναι να το κάνετε σταδιακά. Έχω ήδη αναφέρει ότι μπορείτε να πάρετε τον κωδικό Reason και να τον χρησιμοποιήσετε σε JavaScript και το αντίστροφο. Μπορείτε να κάνετε το ίδιο πράγμα με το ReasonReact. Παίρνετε το στοιχείο ReasonReact και το χρησιμοποιείτε στην εφαρμογή React JavaScript και το αντίστροφο.

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

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

Εάν έχετε οποιεσδήποτε ερωτήσεις, κριτικές, παρατηρήσεις ή συμβουλές για βελτίωση, μη διστάσετε να γράψετε ένα σχόλιο παρακάτω ή να επικοινωνήσετε μαζί μου μέσω Twitter ή του ιστολογίου μου.