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

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

Ξεκινώντας με το Svelte

Θα ρυθμίσετε τα πράγματα με το Εργαλείο κατασκευής Vite. Ανοίξτε το τερματικό και εκτελέστε τις παρακάτω εντολές με τη σειρά. Ονομάστε το έργο "svelte-app" (ή την επιλογή σας), επιλέξτε Svelte ως πλαίσιο και ορίστε το JavaScript ως παραλλαγή.

νήμα δημιουργία βιτέ
CD σβέλτη εφαρμογή
νήμα
νήματα dev

Ανοίξτε το έργο σε ένα πρόγραμμα επεξεργασίας κώδικα, διαγράψτε το lib φάκελο και διαγράψτε τα περιεχόμενα του app.css αρχείο και το App.svelte αρχείο.

Πώς συγκρίνεται το Svelte με το να αντιδρά

ο Το DOM είναι μια δομή που μοιάζει με δέντρο

instagram viewer
που δημιουργείται από το HTML ενός ιστότοπου, το οποίο δείχνει τις σχέσεις μεταξύ των διαφορετικών στοιχείων που απαρτίζουν τη σελίδα.

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

Reactivity and Animation στο Svelte

Η δομή των περισσότερων εφαρμογών Svelte απεικονίζεται παρακάτω. Μπορείτε να επιλέξετε να μην συμπεριλάβετε το στυλ ετικέτες αφήνοντας μόνο το γραφή και σήμανση: