Χρειαζόμαστε ακόμα πλαίσια JavaScript;

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

Τι είναι το πλαίσιο JavaScript;

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

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

Τα πλαίσια που είναι δημοφιλή σήμερα έχουν μερικές βασικές ομοιότητες. Τα περισσότερα πλαίσια / βιβλιοθήκες διεπαφής, από το Vue έως το React, παρέχουν κάποιο συνδυασμό των εξής:

  • Συγχρονισμός κατάστασης και προβολής
  • Δρομολόγηση
  • Ένα σύστημα προτύπων
  • Επαναχρησιμοποιήσιμα εξαρτήματα

Εξακολουθούν να είναι απαραίτητα τα πλαίσια;

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

Το ερώτημα λοιπόν είναι: είναι τα σημερινά πλαίσια του jQuery; Θα αντιμετωπιστούν τα προβλήματα που επιλύουν με αλλαγές όπως αυτές του API DOM;

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

Για να το εξετάσω περαιτέρω, ανέπτυξα μια εφαρμογή μιας σελίδας χρησιμοποιώντας μόνο JavaScript βανίλιας, εγγενή Web Components και Parcel. Υπήρχαν μερικές παγίδες και δυσκολίες στην πορεία που υπογράμμισαν τα πλεονεκτήματα των πλαισίων JS.

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

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Η εφαρμογή είναι απλή. Είναι μια εφαρμογή συνταγών με βασικές δυνατότητες CRUD. Ο χρήστης μπορεί να δημιουργήσει, να επεξεργαστεί, να διαγράψει, να προτιμήσει και να φιλτράρει μια λίστα συνταγών.

Συστατικά

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

Μπορείτε επίσης να χρησιμοποιήσετε άγκιστρα κύκλου ζωής, όπως connectCallback, disconnectedCallback, attributeChangedCallback.

Δρομολόγηση

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

Αρχικά, χρησιμοποιούσα ένα πακέτο npm που ονομάζεται Vanilla JS Router. Με το API ιστορικού προγράμματος περιήγησης, δεν είναι τόσο περίπλοκο να εφαρμόσετε το δικό σας σε λιγότερες από 100 γραμμές κώδικα! Σημείωση: Δεν εφαρμόζω πολύ περίπλοκη λογική, όπως φρουρά διαδρομών.

Αυτή είναι μια σύντομη περίληψη. Θέλω να διατηρήσω αυτό το άρθρο σε εύλογο μήκος. Μπορώ να γράψω μια επόμενη ανάρτηση με μια πιο λεπτομερή εξήγηση της αίτησης. Υλοποίησα μερικές διασκεδαστικές λειτουργίες όπως απεριόριστη κύλιση, ένα προσαρμοσμένο πρόγραμμα μεταφόρτωσης μεταφοράς και απόθεσης και πολλά άλλα!

Αναδρομικός

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

Μειονεκτήματα

Η προδιαγραφή είναι ακόμα σε ροή

Η προδιαγραφή του ιστού είναι παλιά και νέα. Έχει περάσει πολύ περισσότερο από ό, τι είχα αρχικά σκεφτεί. Τα Web Components παρουσιάστηκαν για πρώτη φορά από τον Alex Russell στο Fronteers Conference 2011. Ωστόσο, η ώθηση πίσω από τα στοιχεία ιστού έχει αυξηθεί πραγματικά κατά το τελευταίο έτος ή δύο. Ως εκ τούτου, εξακολουθεί να υπάρχει μεγάλη αναταραχή στις προδιαγραφές. Για παράδειγμα, οι εισαγωγές HTML έχουν εγκαταλειφθεί, αν και τα περισσότερα έγγραφα / πόροι εξακολουθούν να αναφέρονται.

Δοκιμές

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

Αλλαγή ανίχνευσης

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

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

Το Shadow DOM

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

Δημιουργία δομών DOM

Μέρος του μεγαλείου των πλαισίων / βιβλιοθηκών όπως το Angular και το React είναι ότι είναι κύριοι του DOMain τους. Δηλαδή, είναι άριστα στην απόδοση και την εκ νέου απόδοση δομών στο DOM. Από το blog του Angular University:

Το Angular δεν δημιουργεί HTML και, στη συνέχεια, το διαβιβάζει στο πρόγραμμα περιήγησης για να το αναλύσει, αντ 'αυτού το Angular δημιουργεί απευθείας δομές δεδομένων DOM!

Γωνιακό, για παράδειγμα, σε αντίθεση με το jQuery, δίνει απευθείας δομές δεδομένων DOM. Δηλαδή, αντί να μεταδίδεται HTML στο πρόγραμμα περιήγησης που θα αναλυθεί και στη συνέχεια να μετατραπεί σε δομές δεδομένων DOM. Αυτό είναι πιο αποτελεσματικό καθώς εξαλείφει το βήμα ανάλυσης. Το Virtual DOM είναι επίσης πολύ χρήσιμο, καθώς σας εμποδίζουν να κάνετε εκ νέου τα πάντα κάθε φορά που χρειάζεστε για να ενημερώσετε την προβολή σας.

Πλεονεκτήματα

Από την άλλη πλευρά, υπάρχουν ορισμένα αναμφισβήτητα οφέλη για την ανάπτυξη εφαρμογών με αυτόν τον τρόπο:

Μέγεθος δέσμης

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

Σημείωση: Αυτά είναι τα ενημερωμένα, βελτιστοποιημένα μεγέθη πακέτων.

Κατανόηση

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

Εκτέλεση

Αυτό που κάνουν αυτά τα μπροστινά πλαίσια και βιβλιοθήκες στο παρασκήνιο είναι εκπληκτικό. Ωστόσο, μπορείτε να πληρώσετε μια τιμή απόδοσης εάν αποφασίσετε να χρησιμοποιήσετε οποιαδήποτε από αυτές. δεν υπάρχει δωρεάν γεύμα. Υπάρχουν πολλές πιθανές ελλείψεις απόδοσης σε κλίμακα: είτε πρόκειται για σπατάλη εκ νέου απόδοσης, περιττούς ακροατές, βαθιά σύγκριση αντικειμένων ή περιττούς και μεγάλους χειρισμούς DOM. Μπορείτε να μειώσετε την πολυπλοκότητα εδώ εφαρμόζοντας πράγματα από το μηδέν.

Οι ομάδες Angular και React φαίνεται να γνωρίζουν αυτές τις παγίδες και έχουν παράσχει πράγματα όπως αντικαταστάσεις μεθόδου θα πρέπει να ενημερώσετε και onPush ChangeDetection ως μέσο περαιτέρω βελτιστοποίησης της απόδοσης.

Απλότητα και ιδιοκτησία κώδικα

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

Σημειώσεις και ενδιαφέρουσες πληροφορίες

Είχα μια εκρηκτική δουλειά με τον Parcel. Ένιωσα λίγο πιο περιορισμένο από το Webpack μερικές φορές όταν προσπαθούσα να επιλύσω συγκεκριμένες θήκες, αλλά βρήκα ότι η γραμμή ετικετών «zero config» διατηρείται αληθινή, ως επί το πλείστον.

Είναι επίσης σαφές για μένα ότι πολλές ετικέτες React a 'library' και Vue a 'progressive' framework. Ενώ καταλαβαίνω τους λόγους για αυτό, πιστεύω ότι το React, το Vue και το Angular λύνουν πολλά από τα ίδια προβλήματα. Έτσι, τα σκέφτομαι όλα μαζί με τον όρο «πλαίσια».

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

Υπάρχουν σίγουροι ότι πολλοί άλλοι τρόποι ανάπτυξης ενός SPA ή μιας εφαρμογής front end γενικά χωρίς ένα σημαντικό πλαίσιο ή βιβλιοθήκη, δοκίμασα έναν τρόπο εδώ και θα ήθελα πολύ να ακούσω για άλλους!

Περίληψη

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

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

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

συμπέρασμα

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

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

Πόροι

Οδηγός Angular For Beginners: Γιατί Angular; Τα κορυφαία οφέλη

Σημείωση: Αυτή η ανάρτηση είναι μέρος της τρέχουσας σειράς Angular for Beginners, εδώ είναι η πλήρης σειρά: Angular For Beginners… blog.angular-university.io Σύγκριση με άλλα πλαίσια - Vue.js

Vue.js - Το Προοδευτικό Πλαίσιο JavaScript vuejs.org Βελτιστοποίηση απόδοσης - Αντιδρά

Εσωτερικά, το React χρησιμοποιεί αρκετές έξυπνες τεχνικές για να ελαχιστοποιήσει τον αριθμό των δαπανηρών λειτουργιών DOM που απαιτούνται για την ενημέρωση των… reactjs.org Web Components

Ως προγραμματιστές, όλοι γνωρίζουμε ότι η επαναχρησιμοποίηση του κώδικα όσο το δυνατόν περισσότερο είναι καλή ιδέα. Παραδοσιακά δεν ήταν έτσι… developer.mozilla.org Ο βαθύτερος λόγος για τον οποίο υπάρχουν σύγχρονα πλαίσια JavaScript

Έχω δει πολλούς, πολλούς ανθρώπους να χρησιμοποιούν ένα σύγχρονο πλαίσιο όπως το React, το Angular ή το Vue.js τυφλά. Αυτά τα πλαίσια παρέχουν… medium.com Styling Web Components Using A Shared Style Sheet

Τα στοιχεία του ιστού είναι μια εκπληκτική νέα δυνατότητα του διαδικτύου, επιτρέποντας στους προγραμματιστές να ορίσουν τα δικά τους προσαρμοσμένα στοιχεία HTML… www.smashingmagazine.com