Πώς να προσθέσετε JavaScript στην εφαρμογή Rails 6

Ως κατώτερος προγραμματιστής Full-Stack, η κύρια εστίασή μου ήταν το backend. Ήθελα να μάθω πώς να προγραμματίζω τον διακομιστή υποστήριξης για την εξυπηρέτηση της εφαρμογής ιστού μου.

Αλλά αφού έμαθα τα βασικά του backend, έμαθα ότι το frontend ήταν εξίσου σημαντικό με το backend. Και ένας τρόπος για να αυξήσετε τη ζωντάνια της εφαρμογής ιστού σας είναι με την προσθήκη JavaScript.

Το JavaScript είναι απαραίτητο για να προσθέσετε διαδραστικότητα στην εφαρμογή ιστού σας. Φυσικά, έχει γίνει πολύ περισσότερο από αυτό τώρα. Είναι μια γλώσσα προγραμματισμού που εκτελούν τα προγράμματα περιήγησης ιστού. Πολλοί ιστότοποι που έχετε επισκεφτεί χρησιμοποιούν κάποιον κώδικα JavaScript στο frontend τους.

Ίσως έχετε αρχίσει να χρησιμοποιείτε το Ruby on Rails για να δημιουργήσετε την εφαρμογή σας στο Web και αναρωτηθήκατε πώς να προσθέσετε JavaScript στον κώδικά σας. Σε αυτό το άρθρο, θα σας δείξω πώς να προσθέσετε κώδικα JavaScript στην εφαρμογή Rails.

Γιατί το JavaScript;

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

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

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

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

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

Αυτές και άλλες περιπτώσεις χρήσης είναι εξαιρετικοί λόγοι για τη χρήση JavaScript στην εφαρμογή σας. Στην πραγματικότητα, η ζήτηση για JavaScript αυξάνεται. Μπορείτε ακόμη να το χρησιμοποιήσετε για να γράψετε το backend σας

Αγαπάμε όμως το Rails, οπότε θα μείνουμε μαζί του για λίγο.

Τι θα καλύψουμε εδώ

Τη στιγμή της σύνταξης, η τελευταία έκδοση του πλαισίου είναι το Rails 6 και έχει φέρει κάποιες αλλαγές στον τρόπο αλληλεπίδρασης με το JavaScript.

Πριν από το Rails 6, είχαμε τον αγωγό στοιχείων για τη διαχείριση αρχείων CSS και JavaScript. Αλλά ξεκινώντας από το Rails 6, το Webpacker είναι ο προεπιλεγμένος μεταγλωττιστής για το JavaScript. Η διαχείριση του CSS εξακολουθεί να γίνεται από τον αγωγό στοιχείων, αλλά μπορείτε επίσης να χρησιμοποιήσετε το Webpack για τη μεταγλώττιση του CSS.

Δεν θα βρείτε το φάκελο JavaScript στο ίδιο μέρος που κάνατε στο Rails 5. Η δομή του καταλόγου για το JavaScript έχει αλλάξει σε app / javascript / packs / folder.

Σε αυτόν το φάκελο θα βρείτε το αρχείο application.js , το οποίο είναι ακριβώς όπως το αρχείο application.css . Θα εισαχθεί από προεπιλογή στο αρχείο application.html.erb όταν δημιουργείτε τη νέα σας εφαρμογή Rails.

Το αρχείο application.html.erb θα χρησιμοποιηθεί από όλες τις προβολές.

Προσθήκη σεναρίου που θα χρησιμοποιηθεί από όλες τις προβολές

Εάν θέλετε το JavaScript να είναι διαθέσιμο σε όλες τις προβολές ή τις σελίδες, μπορείτε απλώς να το βάλετε στο αρχείο application.js :

require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") console.log('Hello from application.js')

Οι τέσσερις πρώτες γραμμές υπάρχουν από προεπιλογή. Έχω προσθέσει μια console.logδήλωση για να σας δείξω ότι το JavaScript θα είναι διαθέσιμο παντού.

Μπορείτε να το δοκιμάσετε προβάλλοντας οποιαδήποτε σελίδα στην εφαρμογή σας και ανοίγοντας την κονσόλα προγραμματιστή.

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

Προσθήκη σεναρίου που θα χρησιμοποιηθεί από ένα συγκεκριμένο αρχείο

Εάν θέλετε το JavaScript να είναι διαθέσιμο μόνο για μια συγκεκριμένη προβολή, τότε μπορείτε να χρησιμοποιήσετε το javascript_pack_tag για να εισαγάγετε το συγκεκριμένο αρχείο:

I want my JS here only

console.log('Hello from My JS')

Να θυμάστε ότι πρέπει να προσθέσετε το αρχείο στον κατάλογο πακέτων . Το javascript_pack_tag θα πρέπει επίσης να αναφέρεται στο όνομα του αρχείου JavaScript που δημιουργήσατε.

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

Τυλίγοντας

Ελπίζω ότι αυτό το άρθρο βοηθά στην εξάλειψη τυχόν σύγχυσης που μπορεί να έχετε κατά την ενημέρωση της εφαρμογής σας στο Rails 6 ή εάν μόλις ξεκινήσατε με το Rails.

Μπορείτε να με ακολουθήσετε στο Github εάν θέλετε να μάθετε περισσότερα.