Δουλεύοντας σε ένα σύνθετο έργο, είτε είστε έμπειρος προγραμματιστής είτε πρωτοετής, πιθανότατα θα αντιμετωπίσετε προβλήματα. Όταν χωρίζετε το έργο σας σε πολλές ενότητες, προκύπτουν προβλήματα, γεγονός που καθιστά πιο δύσκολο τον εντοπισμό σφαλμάτων και την εύρεση λύσεων. Σε άλλες περιπτώσεις, ο εντοπισμός σφαλμάτων μεμονωμένων παρουσιών μπορεί να είναι δύσκολος επειδή δεν έχετε ανακαλύψει τη σωστή λύση στο πρόβλημα που εργάζεστε.
Εμφανίζεται επίσης ως ένα κομμάτι κώδικα κατά καιρούς, το οποίο μπορεί να φαίνεται περίπλοκο εκείνη τη στιγμή. Η JavaScript είναι μία από τις γλώσσες που βασίζονται στο Web και είναι εξαιρετικά απλή στην εκμάθηση. Απλώς εκκινήστε το πρόγραμμα περιήγησης στην επιφάνεια εργασίας και μεταβείτε στα Εργαλεία προγραμματιστών (συνήθως F12) και τελειώσατε! Στη συνέχεια, μπορείτε να πειραματιστείτε με το JS χωρίς να χρειάζεται να εγκαταστήσετε ή να εκτελέσετε κάποιο περίπλοκο λογισμικό.
Για να ξεκινήσετε, το μόνο που χρειάζεστε είναι ένα πρόγραμμα περιήγησης. Είναι υπέροχο να έχεις όλη αυτή την απλότητα αμέσως, αλλά υπάρχουν περιπτώσεις που χρειάζεσαι περισσότερα. Για παράδειγμα, ας υποθέσουμε ότι θέλετε να πειραματιστείτε με ένα νέο API Ιστού που ανακαλύψατε πρόσφατα, αλλά δεν θέλετε να ξεκινήσετε ένα νέο έργο.
Σε αυτήν την ανάρτηση, θα συγκρίνουμε και θα αντιπαραβάλλουμε τις τρεις πιο δημοφιλείς παιδικές χαρές JS, το CodePen, το CodeSandbox και το StackBlitz. Ας αρχίσουμε!
CodePen
Τα εργαλεία ανάπτυξης ιστού Frontend εξελίσσονται πάντα και οι επεξεργαστές κειμένου αποτελούν σημαντικό στοιχείο των πιο πρόσφατων τεχνολογιών που κάνουν τη ζωή ενός προγραμματιστή πιο απλή. Εκτός από τους αυτόνομους επεξεργαστές κειμένου όπως το Atom ή το Notepad ++, τα τελευταία χρόνια έχει υπάρξει μια έκρηξη επεξεργαστών που βασίζονται σε πρόγραμμα περιήγησης που δεν απαιτούν εγκατάσταση προγράμματος και προωθούν μεγαλύτερη συνεργασία.
Το CodePen είναι μια «διαδικτυακή κοινότητα για τη δοκιμή και την παρουσίαση αποσπασμάτων κώδικα HTML, CSS και JavaScript που δημιουργούνται από χρήστες» που προσφέρει φανταστικές ευκαιρίες για να μάθετε πώς να γράφετε καλύτερα ιστοσελίδες διεπαφής.
Το CodePen σάς δίνει δύο «λειτουργίες». Το πρώτο και πιο συχνά χρησιμοποιούμενο είναι το στυλό. Είναι τόσο απλό όσο να κάνετε κλικ σε ένα κουμπί και να μεταφερθείτε απευθείας στον επεξεργαστή. Από εκεί, μπορείτε να αποκτήσετε πρόσβαση σε έναν πίνακα προεπισκόπησης καθώς και σε βασικά παράθυρα επεξεργασίας HTML, CSS και JS.
Δεν υπάρχει «σύστημα αρχείων», «IntelliSense» ή οτιδήποτε άλλο – απλώς απλή επισήμανση σύνταξης και γρήγορες εντολές όπως το prettify. Στην καρτέλα επιλογές, μπορείτε να επιλέξετε από ένα περιορισμένο εύρος προεπεξεργαστών και για τις τρεις γλώσσες (όπως το TypeScript για JS) ή να προσθέσετε συνδέσεις σε εξωτερικές πηγές.
Εάν χρειάζεστε μόνο οτιδήποτε γίνεται δωρεάν, οποιοσδήποτε από τους συντάκτες θα είναι αρκετός. Θα πρότεινα το CodePen για οτιδήποτε δεν απαιτεί πολλές ρυθμίσεις ή βιβλιοθήκες – απλά HTML, CSS και JS με προαιρετικούς προεπεξεργαστές στην κορυφή. Εάν θέλετε να χρησιμοποιήσετε την παιδική χαρά για να βελτιώσετε την παρουσία σας στα μέσα κοινωνικής δικτύωσης ή να αναπτύξετε ένα προσωπικό χαρτοφυλάκιο, το CodePen είναι μια καλύτερη επιλογή.
Premium Έκδοση
Έχετε μερικές ακόμη εναλλακτικές για να επιλέξετε στο CodePen. Εάν πληρώνετε ετησίως, μπορείτε να λάβετε ένα από τα τρία προγράμματα premium για $12, $19 ή $39 κάθε μήνα. Μπορείτε να δημιουργήσετε έναν άπειρο αριθμό ιδιωτικών στυλό, αναρτήσεων και συλλογών σε οποιοδήποτε από τα τρία επίπεδα.
Θα λάβετε επίσης το σήμα Pro (μια κοινωνική ενίσχυση), πρόσβαση σε λειτουργία ζωντανής συνεργασίας, χωρίς διαφημίσεις και πολλά άλλα. Υπάρχουν επίσης συγκεκριμένες στρατηγικές για την ομάδα και άλλες διακρίσεις μεταξύ των επιπέδων. Ελέγξτε τον επίσημο πίνακα τιμολόγησης για περισσότερες πληροφορίες.
Βασικά χαρακτηριστικά
Εκτός από τη δημιουργία HTML, CSS και JavaScript στο CodePen, υπάρχουν μερικά ακόμη πράγματα που το ξεχωρίζουν.
- Η προβολή του κωδικού σας σε πραγματικό χρόνο είναι δυνατή. Δεν απαιτεί μεταγλώττιση.
- Ο πειραματισμός σας επιτρέπει να μάθετε νέα πράγματα.
- Δημιουργήστε μικροσκοπικές δοκιμές για να αναζητήσετε και να αντιμετωπίσετε προβλήματα.
- Προβάλετε τα υπέροχα έργα σας.
- Δημιουργήστε και αποθηκεύστε στυλό για μελλοντική χρήση.
- Δοκιμάστε τον κώδικα άλλων προγραμματιστών και δείτε τον σε δράση.
Πλεονεκτήματα
- Για αρχή, δεν υπάρχει κόστος.
- Ενσωματωμένοι πόροι εκμάθησης.
- Συνεργαστείτε με άλλους και συγκρίνετε έργα για να δείτε πού μπορούν να πάνε στο μέλλον.
- Το UI είναι απλό στη χρήση και απλό.
Μειονεκτήματα
- Η βιβλιοθήκη κωδικών είναι μικρή, η αυτόματη συμπλήρωση του κώδικα είναι ανεπαρκής. Είναι απλώς καλό για έργα μιας σελίδας και δεν μπορεί να χειριστεί τίποτα μεγαλύτερο.
- Στο CodePen, μπορείτε να δημιουργήσετε ιδιωτικά στυλό, αλλά θα χρειαστεί να κάνετε αναβάθμιση σε συνδρομή Pro (9$/μήνα).
κώδικας sandbox
Το CodeSandbox είναι ένα πρόγραμμα επεξεργασίας κώδικα που βασίζεται στο web. Αυτοματοποιεί τη διαχείριση του transpiring, της συσκευασίας και της εξάρτησης για εσάς, επιτρέποντάς σας να δημιουργήσετε ένα νέο έργο με ένα μόνο κλικ. Αφού δημιουργήσετε κάτι συναρπαστικό, μπορείτε να το μοιραστείτε με άλλους απλά κοινοποιώντας τον ιστότοπο.
Το πρόγραμμα επεξεργασίας είναι συμβατό με οποιαδήποτε έργα JavaScript, αν και περιλαμβάνει ορισμένες λειτουργίες ειδικά για το React, όπως την επιλογή αποθήκευσης του έργου σε ένα πρότυπο δημιουργίας-react-app.
Κάθε έργο που δημιουργείτε στο CodeSandbox ξεκινά με ένα πρότυπο. Μπορεί είτε να σχετίζεται με μια συγκεκριμένη βιβλιοθήκη, πλαίσιο ή χρόνο εκτέλεσης (συμπεριλαμβανομένου του Node.js) είτε να χρησιμοποιεί απλώς τυπικές τεχνολογίες Ιστού. Αφού επιλέξετε ένα πρότυπο, αποστέλλεστε στον επεξεργαστή, όπου θα βρείτε όλα τα απαραίτητα αρχεία και το παράθυρο προεπισκόπησης είναι ήδη ανοιχτό.
Έχετε πρόσβαση σε ένα "σύστημα αρχείων" σε όλα τα Sandboxes, πράγμα που σημαίνει ότι μπορείτε να δημιουργήσετε νέα αρχεία, να χρησιμοποιήσετε μονάδες (συμπεριλαμβανομένων των πακέτων NPM) και να αλληλεπιδράσετε με στατικά στοιχεία. Υπάρχει επίσης η ευκαιρία να τροποποιήσετε τα αρχεία ρυθμίσεων για το συγκεκριμένο πρότυπο.
Μπορείτε ακόμη και να δημιουργήσετε τα δικά σας πρότυπα για τη μοναδική σας περίπτωση χρήσης, πλήρη με δομή αρχείων και εξαρτήσεις, όπως σε ένα IDE. Επειδή το εργαλείο είναι συνδεδεμένο με το Github, μπορείτε να δημιουργήσετε γρήγορα δεσμεύσεις και να ανοίξετε PR. Μπορείτε να αναπτύξετε την αίτησή σας στο ZEIT ή στο Netlify αμέσως.
CodeSandbox Team Pro
Η CodeSandbox, μια ολλανδική επιχείρηση που επιτρέπει στους προγραμματιστές να κατασκευάσουν ένα sandbox ανάπτυξης εφαρμογών ιστού που βασίζεται σε πρόγραμμα περιήγησης, κυκλοφόρησε επίσημα μια πλατφόρμα συνεργασίας που επιτρέπει στις ομάδες να εργάζονται σε κώδικα στο cloud. Το νέο προϊόν, το Team Pro, είναι μια λύση χωρίς κώδικα που έχει κατασκευαστεί για ολοκληρωμένες ομάδες προϊόντων, που κυμαίνονται από σχεδιαστές και διαχειριστές έως ομάδες διασφάλισης ποιότητας (QA) και όχι μόνο.
Τα έργα παρέχονται σε μια φιλική προς το χρήστη διεπαφή για οποιονδήποτε επιθυμεί να κάνει ή να αποδεχτεί αλλαγές σε μια εφαρμογή Ιστού, αποφεύγοντας εναλλακτικές μεθόδους όπως η αποστολή σημειώσεων και συστάσεων στους προγραμματιστές για την εκτέλεση των αλλαγών, η επιστροφή τους για συζήτηση και η επανάληψη της διαδικασίας.
Βασικά χαρακτηριστικά
- Ένα εργαλείο επεξεργασίας κώδικα και πρωτότυπου βασισμένου στο web.
- Για τοπική χρήση, ένα sandbox μπορεί να ληφθεί εύκολα σε ένα αρχείο zip.
- Προγραμματισμός γίνεται σε sandboxes, τα οποία μπορούν εύκολα να μοιραστούν με τους συναδέλφους.
Πλεονεκτήματα
- Βελτιωμένη εμπειρία χρήστη και μεγαλύτερος έλεγχος στον επεξεργαστή.
- Η δυνατότητα ζωντανής προεπισκόπησης μπορεί να τροποποιηθεί και να προβληθεί σε ξεχωριστό παράθυρο.
- Ο κώδικας μορφοποιείται αυτόματα και περιλαμβάνει ένα CLI (codesandbox-cli)
- Υποστήριξη για προηγμένες μονάδες npm.
- Ωραία μηνύματα σφάλματος με συστάσεις.
- Βελτιώνει την εμπειρία εντοπισμού σφαλμάτων παρέχοντας καλύτερο τερματικό, δοκιμαστικό πρόγραμμα προβολής και πρόγραμμα προβολής προβλημάτων.
Μειονεκτήματα
- Ο τελικός καταναλωτής εκτίθεται σε πολλές προσωποποιήσεις.
- Η μεταφορά και απόθεση αρχείων από έναν τοπικό υπολογιστή δεν λειτουργεί σωστά.
- Πρέπει να ακολουθηθεί μια συγκεκριμένη δομή φακέλου στο CodeSandbox.
- Η λειτουργικότητα ενός ιδιωτικού sandbox είναι διαθέσιμη μόνο σε πελάτες.
StackBlitz
Το StackBlitz είναι ένα διαδικτυακό IDE με κώδικα Visual Studio για εφαρμογές web. Η πλατφόρμα είναι τόσο ανταποκρίσιμη και προσαρμόσιμη όσο και η έκδοση για υπολογιστές. Το StackBlitz είναι ένα διαδικτυακό IDE με προεγκατεστημένο Angular και React εργαλεία ανάπτυξης.
Το Thinkster.io δημιούργησε αυτό το φανταστικό έργο για να κάνει όσο το δυνατόν πιο απλό να ξεκινήσετε με το έργο Angular ή React χωρίς να χρειάζεται να ανησυχείτε για την εγκατάσταση εξάρτησης ή τις ρυθμίσεις έκδοσης. Το StackBlitz παρέχει πολλά εκπληκτικά και μοναδικά χαρακτηριστικά που κανένας άλλος διαδικτυακός επεξεργαστής κώδικα δεν διαθέτει αυτή τη στιγμή. Ως αποτέλεσμα, αξίζει τον κόπο να διερευνήσετε περαιτέρω το StackBlitz και να ανακαλύψετε τι έχει να προσφέρει αυτό το διαδικτυακό IDE.
Το Stackblitz είναι εξαιρετικά συγκρίσιμο με το πλήρες IDE, ειδικά αν δεν μπορείτε να πείτε αντίο στον κώδικα VS επειδή το εργαλείο βασίζεται σε αυτόν. Το πακέτο έχει μια ποικιλία λειτουργιών που σας επιτρέπουν να ξεκινήσετε και να συνεχίσετε τη δημιουργία μιας εφαρμογής full-stack.
Το πρόγραμμα τροφοδοτείται από το Visual Studio, το οποίο είναι γνωστό στους προγραμματιστές. Η επεξεργασία εκτός σύνδεσης είναι το χαρακτηριστικό γνώρισμα του έργου. Για να γίνει αυτό δυνατό, η ομάδα του Stackblitz δημιούργησε έναν διακομιστή ιστού εντός προγράμματος περιήγησης. Καθώς πληκτρολογείτε, εγκαθιστά αυτόματα εξαρτήσεις, μεταγλωττίζει, δεσμεύει και κάνει επανάληψη φόρτωσης.
Premium Έκδοση
Το Cadet, το Astronaut και το Commander είναι διαθέσιμα δωρεάν, 8 $/μήνα και 29 $/μήνα, αντίστοιχα. Το Astronaut and Commander περιλαμβάνει μια σειρά από λειτουργίες, όπως απεριόριστα ιδιωτικά έργα, απεριόριστες μεταφορτώσεις αρχείων, πρόσκληση σε χαλαρό κανάλι της βασικής ομάδας και ούτω καθεξής. Για περισσότερες πληροφορίες, ανατρέξτε στον επίσημο πίνακα τιμολόγησης.
Βασικά χαρακτηριστικά
- Προσθήκη πακέτων NPM στο έργο σας.
- Χάρη σε έναν καινοτόμο διακομιστή προγραμματισμού στο πρόγραμμα περιήγησης, μπορείτε να κάνετε επεξεργασία ενώ είστε εκτός σύνδεσης.
- Μια φιλοξενούμενη διεύθυνση URL εφαρμογής που μας επιτρέπει να έχουμε πρόσβαση (και να μοιραζόμαστε) τη ζωντανή εφαρμογή μας ανά πάσα στιγμή.
- Άλλες αξιοσημείωτες λειτουργίες του κώδικα του Visual Studio περιλαμβάνουν το Intellisense, το Project Search (Cmd/Ctrl+P), το Go to Definition και άλλα.
Πλεονεκτήματα
- Οι δυνατότητες του Firebase για ανάπτυξη.
- Το πρόγραμμα επεξεργασίας είναι πραγματικά εύκολο στη χρήση και εξαιρετικά γρήγορο.
- Οι χρήστες έχουν πρόσβαση στα package.json, index.html και index.js.
- Πηγαίος κώδικας με δυνατότητα κοινής χρήσης που μπορεί επίσης να ενσωματωθεί.
- Ζωντανή προεπισκόπηση σε ένα μεγάλο τμήμα της σελίδας, με την επιλογή να ανοίξει σε διαφορετική σελίδα εάν είναι απαραίτητο.
- Εκτός σύνδεσης, Επεξεργασία
- Έξυπνες ολοκληρώσεις και βελτιωμένο Intellisense.
- Ο πυρήνας του Stackblitz είναι ανοικτού κώδικα.
Μειονεκτήματα
- Δεν έχετε επιρροή στο κτίριο ή στον διακομιστή προγραμματιστών, επειδή η διαχείρισή τους γίνεται από την εντολή create-react-app.
- Στο React, θα πρέπει να παρατηρηθεί μια θεμελιώδης δομή φακέλου.
- Δεν είναι δυνατή η αυτόματη μορφοποίηση του κώδικα, αν και είναι δυνατό να γίνει χειροκίνητα.
Συμπέρασμα
Σήμερα, μια παιδική χαρά κωδικοποίησης όπως αυτές που είδαμε παραπάνω μπορεί να χρησιμοποιηθεί για την πλήρη κατασκευή οποιουδήποτε έργου web. Δεν χρειάζεται να εγκαταστήσετε δυσκίνητα IDE στον υπολογιστή σας όταν μπορείτε να δημιουργήσετε, να εντοπίσετε σφάλματα, να δοκιμάσετε και να αναπτύξετε απευθείας από το πρόγραμμα περιήγησής σας.
Κατά τη γνώμη μου, το StackBlitz θα ήταν το καλύτερο μεταξύ αυτών, επειδή είναι ένα IDE βασισμένο στον ιστό που επιτρέπει JavaScript, Angular και άλλα έργα ανάπτυξης αμέσως, χωρίς να χρειάζεται να εγκαταστήσετε τοπικά περιβάλλοντα ανάπτυξης όπως Node.js, npm, ή Angular. Παρέχει την ίδια εμπειρία με τη χρήση του Visual Studio Code τοπικά. Στην πραγματικότητα, επειδή το StackBlitz βασίζεται στον κώδικα του Visual Studio, είναι τόσο γρήγορο και ευέλικτο όσο η έκδοση για υπολογιστές.
Ποιο από τα CodePen, CodeSandbox και StackBlitz είναι το εργαλείο που προτιμάτε; Ενημερώστε μας στα σχόλια.
Abbatyya
Ευχαριστώ για αυτό το υπέροχο άρθρο, μόλις είδα το stackblitz.com, ξέρω ότι αυτό είναι που θέλω.