Είναι το Remix Framework το μέλλον της ανάπτυξης Ιστού;

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

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

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

Πίνακας περιεχομένων

Τι είναι το Remix Framework;

Το Remix είναι ένα πλαίσιο ανάπτυξης ιστού πλήρους στοίβας χτισμένο πάνω από το React. Μπορείτε να χρησιμοποιήσετε μια εφαρμογή Remix για να δημιουργήσετε το backend και το front end της εφαρμογής σας. Το Remix σάς επιτρέπει να εστιάσετε στη διεπαφή χρήστη και να σας βοηθήσει να προσφέρετε μια ανθεκτική και γρήγορη εμπειρία χρήστη.

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

Το Remix ήταν αρχικά μια υπηρεσία επί πληρωμή, αλλά έγινε ανοιχτού κώδικα στα τέλη του 2021. Ήταν επίσης αποκτήθηκε από το Shopify το 2022.

Χαρακτηριστικά Remix Framework

Στοίβες Remix: Αυτή η δυνατότητα Remix CLI σάς επιτρέπει να δημιουργείτε γρήγορα εφαρμογές Remix. Μερικές από αυτές τις στοίβες είναι ενσωματωμένες. Μπορείτε επίσης να δημιουργήσετε μια εφαρμογή από την αρχή μόνοι σας. Οι επίσημες ενσωματωμένες στοίβες διαθέτουν χαρακτηριστικά όπως αγωγούς αυτόματης ανάπτυξης, βάσεις δεδομένων, δοκιμές, έλεγχο ταυτότητας και λίπανση. Μερικές από τις στοίβες είναι το δημοφιλές Blues Stack, το Indie Stack και το Στοίβα Grunge.
Απόδοση από την πλευρά του διακομιστή (SSR): Αυτό το πλαίσιο επιτρέπει την απόδοση από την πλευρά του διακομιστή των στοιχείων React. Η αρχική απόδοση στο Remix πραγματοποιείται στον διακομιστή, στέλνοντας ένα έγγραφο HTML που έχει αποδοθεί πλήρως στον πελάτη. Η απόδοση από την πλευρά του διακομιστή έχει πολλά πλεονεκτήματα, όπως η βελτίωση της προσβασιμότητας, η δυνατότητα στις μηχανές αναζήτησης να ανιχνεύουν το περιεχόμενο και η βελτίωση της ταχύτητας.
Δρομολόγηση με ένθετες διαδρομές: Το Remix χρησιμοποιεί το React Router 6. Με αυτό το πλαίσιο, χρειάζεται μόνο να αποθέσετε τα αρχεία στο φάκελο διαδρομής και η λειτουργική μονάδα διαδρομής του Remix θα τα μετατρέψει σε πλοηγήσιμα μονοπάτια. Μια ένθετη διαδρομή είναι μια διαδρομή που περιέχεται μέσα σε μια άλλη διαδρομή.
Υποστηρίζει TypeScript και JavaScript: Μπορείτε να χρησιμοποιήσετε το Remix ανεξάρτητα από το αν χρησιμοποιείτε JavaScript ή TypeScript. Το πλεονέκτημα της χρήσης TypeScript είναι ότι σας επιτρέπει να δηλώνετε μεταβλητές και να διευκολύνετε την έγκαιρη αναγνώριση σφαλμάτων.
Ενσωματωμένη φόρτωση και αποθήκευση δεδομένων: Αυτό το πλαίσιο επιτρέπει στους προγραμματιστές να ορίζουν φορτωτές που ανακτούν δεδομένα από διάφορες πηγές. Το Remix χειρίζεται την ανάκτηση δεδομένων τόσο από την πλευρά του πελάτη όσο και από την πλευρά του διακομιστή. Ο μηχανισμός προσωρινής αποθήκευσης που παρέχεται από αυτό το πλαίσιο διευκολύνει τη μείωση της περιττής ανάκτησης δεδομένων και τη βελτιστοποίηση των επακόλουθων αιτημάτων.
Διαίρεση κώδικα και προ-ανάκτηση: Μπορείτε να διαιρέσετε τον κώδικα σε μια εφαρμογή Remix σε μικρά, φόρτωμα bits κατά παραγγελία. Αυτή η προσέγγιση μειώνει το αρχικό μέγεθος του πακέτου και τις δυνατότητες προανάκτησης που φορτώνουν δεδομένα και κώδικα στο παρασκήνιο.

Διορθώστε το σφάλμα εγγραφής δίσκου Dota 2

Πλεονεκτήματα του Remix Framework

Full-stack: Οι περισσότεροι άνθρωποι χρησιμοποιούν διαφορετικές γλώσσες ή πλαίσια για να δημιουργήσουν τις πλευρές πελάτη και διακομιστή των εφαρμογών τους. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε το React για τη διεπαφή και να χρησιμοποιήσετε ένα πλαίσιο Node.js όπως το ExpressJS για το backend σας. Σε άλλες περιπτώσεις, μπορείτε να χρησιμοποιήσετε ένα πλαίσιο Python όπως το Django στο backend σας. Το Remix είναι ένα πλαίσιο πλήρους στοίβας, που σημαίνει ότι το front-end και το back-end σας θα βρίσκονται στην ίδια εφαρμογή.
Εξαιρετικός χειρισμός δεδομένων: Το Remix βασίζεται σε χαρακτηριστικά και συμβάσεις εγγενών προγράμματος περιήγησης. Η εξαιρετική ροή δεδομένων καθιστά εύκολη τη μετάδοση των δεδομένων μεταξύ του front-end και του back-end της εφαρμογής σας.
Εύκολος χειρισμός κατάστασης: Η διαχείριση της κατάστασης στις εφαρμογές React μπορεί να είναι επώδυνη και οι περισσότεροι προγραμματιστές χρησιμοποιούν βιβλιοθήκες τρίτων όπως το Redux. Remix χρήσεις φορτωτές για τη διαχείριση της κατάστασης από την πλευρά του διακομιστή. Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό “useLoaderData” από οποιοδήποτε στοιχείο στην τρέχουσα διαδρομή.
Όρια σφάλματος: Εάν λάβετε ένα σφάλμα σε μια ένθετη διαδρομή ή στοιχείο σε μια εφαρμογή Remix, τα σφάλματα θα περιοριστούν μόνο σε αυτό το στοιχείο. Ένα τέτοιο σφάλμα δεν θα σπάσει ολόκληρη την εφαρμογή, όπως σε άλλα πλαίσια. Παρόλο που μπορείτε να εφαρμόσετε τη δυνατότητα ορίου σφάλματος σε ορισμένα πλαίσια React όπως το Next.js, αυτή η δυνατότητα είναι ενσωματωμένη στο Remix.

Προϋποθέσεις ρύθμισης εφαρμογής Remix

Εάν θέλετε να ρυθμίσετε μια εφαρμογή Remix, αυτά είναι μερικά από τα πράγματα που χρειάζεστε.

Node.js έκδοση από 14.17.0 ή νεότερη έκδοση
Ένας διαχειριστής πακέτων όπως το npm (7 ή μεγαλύτερο)
Ένας επεξεργαστής κώδικα
Κατανόηση του τρόπου λειτουργίας των εφαρμογών React

Πώς να ρυθμίσετε το “Hello, World!” στο Remix

Θα δημιουργήσουμε ένα απλό έργο και θα το ονομάσουμε “Remix-app”. Μπορείτε να ακολουθήσετε?

Μεταβείτε στη θέση όπου θέλετε να δημιουργήσετε την εφαρμογή σας, ανοίξτε το τερματικό σας και εκτελέστε αυτήν την εντολή.

npx [email protected] remix-app

Το τερματικό θα σας ζητήσει να απαντήσετε σε πολλές ερωτήσεις και να ρυθμίσετε την αίτησή σας. Μπορούμε να μείνουμε με τα βασικά και να επιλέξουμε την TypeScript ως γλώσσα μας.

Πλοηγηθείτε στην εφαρμογή που δημιουργήθηκε (Remix-app) και ανοίξτε την στον αγαπημένο σας επεξεργαστή κώδικα. Η δομή του φακέλου θα είναι η εξής.

Πώς να δημιουργήσετε αντίγραφα ασφαλείας και να κατεβάσετε τα αγαπημένα σας Vines ως αρχεία MP4

Δημιουργήστε την εφαρμογή σας χρησιμοποιώντας αυτήν την εντολή.

npm run build

Ξεκινήστε τον διακομιστή ανάπτυξης χρησιμοποιώντας αυτήν την εντολή.

npm start

Τώρα μπορείτε να ανοίξετε το παράθυρο στο πρόγραμμα περιήγησής σας χρησιμοποιώντας το σύνδεσμο http://localhost:3000 και αυτό θα εμφανιστεί στο πρόγραμμα περιήγησής σας.

Τροποποιήστε τα περιεχόμενα του αρχείου app/root.tsx με τα εξής:

import { LiveReload } from "@remix-run/react";

export default function App() {

  return (

    <html lang="en">

      <head>

        <meta charSet="utf-8" />

        <meta

          name="viewport"

          content="width=device-width,initial-scale=1"

        />

        <title>Remix Demo</title>

      </head>

      <body>

        Hello world

        <LiveReload />

      </body>

    </html>

  );

}

Η σελίδα που αποδίδεται θα είναι η εξής.

Πού χρησιμοποιείται το Remix Framework

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

Εφαρμογές μιας σελίδας: Όλος ο κώδικας σε μια εφαρμογή Remix φορτώνεται μία φορά. Η προσέγγιση απόδοσης από διακομιστή επιτρέπει γρήγορες αρχικές φορτώσεις ενώ ο πελάτης χειρίζεται τα επόμενα αιτήματα απρόσκοπτα.
Ιστότοποι φιλικοί προς το SEO: Το Remix χρησιμοποιεί τη δυνατότητα προ-απόδοσης για τη δημιουργία στατικών σελίδων HTML. Αυτό καθιστά δυνατή την ευρετηρίαση ιστότοπων ακόμα και αν έχετε να κάνετε με δυναμικό περιεχόμενο.
Δυναμικοί ιστότοποι: Το Remix χρησιμοποιεί απόδοση από την πλευρά του διακομιστή στις εφαρμογές του. Το SSR φορτώνει τις σελίδες στον διακομιστή πριν στείλει μια σελίδα HTML στον πελάτη. Έτσι, το Remix ταιριάζει απόλυτα σε ιστότοπους των οποίων το περιεχόμενο δημιουργείται δυναμικά.

Πώς λειτουργεί το πλαίσιο Remix στην πλευρά του διακομιστή και στην πλευρά του πελάτη

Απόδοση από την πλευρά του διακομιστή

Το Remix αποδίδει τον κώδικά σας σε απλό HTML στην πλευρά του διακομιστή. Αυτή η προσέγγιση μειώνει την ποσότητα JavaScript, αυξάνοντας έτσι την ταχύτητα φόρτωσης. Το Remix χρησιμοποιεί βασικά τις εγγενείς λειτουργίες «action» και «loader». Ο διακομιστής θα εκτελέσει τυχόν ενέργειες από την πλευρά του διακομιστή που παρέχετε, θα αποδώσει τον κώδικα React απλό και HTML και, στη συνέχεια, θα τον στείλει στο πρόγραμμα περιήγησης πελάτη.

Απόδοση από την πλευρά του πελάτη

Το Remix, όπως και το Next.js, προσφέρει τη δυνατότητα «προαναφοράς» που προσφέρει ομαλή πλοήγηση στους χρήστες.

Στο Next.js, το στοιχείο επιτρέπει στον ιστότοπό μας να προφορτώνει μια σελίδα στην οποία το ανακατευθύνει και δεν χρειάζεται να περιμένει τη λήψη της σελίδας. Ωστόσο, μια τέτοια προσέγγιση λειτουργεί καλά μόνο με στατικούς ιστότοπους.

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

Περιορισμοί Remix

Μικρή κοινότητα: Το Remix ήταν αρχικά ένα πλαίσιο επί πληρωμή. Ωστόσο, έγινε ανοιχτού κώδικα το 2021 και είναι ακόμα νέος. Αυτό σημαίνει ότι υπάρχουν περιορισμένοι πόροι και εργαλεία για να κάνετε τη δημιουργία της εφαρμογής σας παιχνιδάκι.
Πιο απότομη καμπύλη εκμάθησης: Το Remix εισάγει την έννοια των ένθετων διαδρομών και μπορεί να προκαλέσει σύγχυση αν προέρχεστε από το React ή τα πλαίσια του όπως το Next.js. Ωστόσο, μόλις αποκτήσετε το άγκιστρο, η χρήση αυτού του πλαισίου γίνεται εύκολη.

Το Snowflake αποκτά τη Neeva & Παίξτε παιχνίδια για κινητά στον υπολογιστή

Ποιο είναι το μέλλον του Remix;

Είναι πιθανό να δούμε αυξημένη υιοθέτηση: Το Remix είναι ακόμα νέο. Οι προγραμματιστές μπορεί να μην έχουν ανακαλύψει τις δυνατότητές του και είναι πιθανό να δούμε περισσότερες εταιρείες και προγραμματιστές να το χρησιμοποιούν στο μέλλον.
Το οικοσύστημα είναι πιθανό να αναπτυχθεί: Το Remix έχει ακόμα λίγα εργαλεία και βιβλιοθήκες για να υποστηρίξει το οικοσύστημά του. Μπορούμε να περιμένουμε περισσότερα εργαλεία και βιβλιοθήκες καθώς αυξάνεται η υιοθέτησή του.
Η κοινότητα θα αναπτυχθεί: Μια κοινότητα είναι κρίσιμη για την ανάπτυξη ενός πλαισίου/γλώσσας προγραμματισμού. Αναμένουμε ότι η κοινότητα θα μεγαλώσει καθώς οι προγραμματιστές ανακαλύπτουν τα πετράδια του Remix.

Είναι το Remix καλύτερο από το Next.js;

Η απάντηση σε αυτήν την ερώτηση θα εξαρτηθεί από τη φύση της εφαρμογής που δημιουργείτε. Εάν θέλετε να δημιουργήσετε μια εφαρμογή πλήρους στοίβας χρησιμοποιώντας ένα πλαίσιο, το Remix θα είναι καλύτερο από το Next.js. Ωστόσο, αν θέλετε ένα ώριμο πλαίσιο με πολλούς πόρους και καλούς ακόλουθους, το Next.js θα είναι η τέλεια επιλογή σας.

Είναι το Remix καλό πλαίσιο;

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

Είναι έτοιμη η παραγωγή Remix JS;

Ναί. Εάν είστε εξοικειωμένοι με την ανάπτυξη εφαρμογών Node.js, η εργασία και η ανάπτυξη εφαρμογών Remix θα είναι επίσης παιχνιδάκι.

Πρέπει να μάθω Remix ή React;

Το Remix είναι ένα πλαίσιο React. Πρέπει επομένως να κατανοήσετε πώς λειτουργεί το React προτού αρχίσετε να μαθαίνετε το Remix. Ωστόσο, εάν ο χρόνος σας είναι περιορισμένος και θέλετε να μάθετε μόνο ένα πλαίσιο, η επιλογή θα εξαρτηθεί από τους τελικούς σας στόχους.
Το Remix σάς επιτρέπει να δημιουργείτε εφαρμογές πλήρους στοίβας. Μπορείτε επίσης να μάθετε το Remix ακόμα κι αν δεν καταλαβαίνετε το React, αλλά η καμπύλη εκμάθησης θα είναι απότομη.
Ωστόσο, εάν χρησιμοποιείτε το React, πρέπει να χρησιμοποιήσετε ένα πλαίσιο υποστήριξης, όπως το Django ή το Ruby on Rails, εάν θέλετε μια εφαρμογή full-stack. Εάν αποφασίσετε να μάθετε το React, μπορείτε να αξιοποιήσετε τους πολλούς πόρους και την κοινότητά του.

συμπέρασμα

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

Ωστόσο, το Remix είναι ακόμα νέο και οι πόροι του είναι ακόμα περιορισμένοι. Έχει επίσης μια μικρή κοινότητα. Τα εργαλεία και οι βιβλιοθήκες του πλαισίου Remix JS είναι λίγα, καθώς τα περισσότερα πλαίσια ανοιχτού κώδικα εξαρτώνται από την υποστήριξη της κοινότητας και από εργαλεία τρίτων.

Μπορείτε επίσης να εξερευνήσετε ορισμένα πλαίσια και βιβλιοθήκες για να γνωρίζετε ως προγραμματιστής full-stack.