Εισαγωγή
Είτε είστε νέος στον προγραμματισμό είτε είστε ήδη έμπειρος προγραμματιστής, σε αυτόν τον κλάδο, η εκμάθηση νέων εννοιών και γλωσσών/πλαισίων είναι απαραίτητη για να συμβαδίζετε με τις τάσεις.
Πάρτε, για παράδειγμα, το React, το οποίο ήταν ανοιχτού κώδικα μόνο από το Facebook πριν από τέσσερα χρόνια και έχει ήδη γίνει η νούμερο ένα επιλογή για προγραμματιστές JavaScript σε όλο τον κόσμο.
Οι Vue και Angular, φυσικά, έχουν επίσης τη νόμιμη βάση των θαυμαστών τους. Και μετά, υπάρχουν Svelte και άλλα πλαίσια γενικού σκοπού όπως το Next.js ή το Nuxt.js. Και Gatsby, και Gridsome, και Quasar ... και πολλά άλλα.
Εάν θέλετε να αποδείξετε τον εαυτό σας ως έμπειρος προγραμματιστής JavaScript, πρέπει να έχετε τουλάχιστον κάποια εμπειρία με διάφορα πλαίσια και βιβλιοθήκες - εκτός από το να κάνετε παλιά καλή δουλειά JS.
Για να σας βοηθήσω να γίνετε κύριος του front-end το 2020, έχω συγκεντρώσει εννέα διαφορετικά έργα, το καθένα εστιάζοντας σε διαφορετικά πλαίσια JavaScript και βιβλιοθήκες ως μια στοίβα τεχνολογίας που μπορείτε να δημιουργήσετε και να προσθέσετε στο χαρτοφυλάκιό σας. Να θυμάστε ότι τίποτα δεν σας βοηθά περισσότερο από το να κάνετε τα πράγματα στην πράξη, οπότε προχωρήστε, ενεργοποιήστε το μυαλό σας και κάντε το δυνατό.
Το άρθρο μεταφράστηκε με την υποστήριξη της EDISON Software, η οποία Και .
Εφαρμογή αναζήτησης ταινιών με React (με γάντζους)
Το πρώτο πράγμα με το οποίο θα μπορούσατε να ξεκινήσετε είναι να δημιουργήσετε μια εφαρμογή αναζήτησης ταινιών με το React. Παρακάτω είναι μια εικόνα του πώς θα μοιάζει η τελική εφαρμογή:
Τι θα μάθεις
Με τη δημιουργία αυτής της εφαρμογής, θα βελτιώσετε τις δεξιότητές σας στο React χρησιμοποιώντας το σχετικά νέο Hooks API. Το δείγμα έργου χρησιμοποιεί στοιχεία React, πολλά άγκιστρα, ένα εξωτερικό API και φυσικά κάποιο στυλ CSS.
Τεχνική στοίβα και χαρακτηριστικά
- Αντιδράστε με γάντζους
- δημιουργία-αντίδραση-εφαρμογή
- JSX
- CSS
Χωρίς τη χρήση κλάσεων, αυτά τα έργα σας δίνουν το τέλειο σημείο εισόδου στο λειτουργικό React και σίγουρα θα σας βοηθήσουν το 2020. μπορείς να βρεις . Ακολουθήστε τις οδηγίες ή φτιάξτε το δικό σας.
Εφαρμογή συνομιλίας με το Vue
Ένα άλλο εξαιρετικό έργο για εσάς είναι να δημιουργήσετε μια εφαρμογή συνομιλίας χρησιμοποιώντας την αγαπημένη μου βιβλιοθήκη JavaScript: VueJS. Η εφαρμογή θα μοιάζει κάπως έτσι:
Τι θα μάθεις
Σε αυτό το σεμινάριο, θα μάθετε πώς να δημιουργείτε μια εφαρμογή Vue από την αρχή - να δημιουργείτε στοιχεία, να χειρίζεστε καταστάσεις, να δημιουργείτε διαδρομές, να συνδεθείτε σε υπηρεσίες τρίτων και ακόμη και να χειρίζεστε τον έλεγχο ταυτότητας.
Τεχνική στοίβα και χαρακτηριστικά
- Προβολή
- vuex
- Δρομολογητής Vue
- Προβολή CLI
- Pusher
- CSS
Αυτό είναι ένα πραγματικά υπέροχο έργο για να ξεκινήσετε με το Vue ή να βελτιώσετε τις υπάρχουσες δεξιότητές σας για να ξεκινήσετε την ανάπτυξη το 2020. μπορείς να βρεις .
Όμορφη εφαρμογή καιρού με το Angular 8
Αυτό το παράδειγμα θα σας βοηθήσει να δημιουργήσετε μια όμορφη εφαρμογή καιρού χρησιμοποιώντας το Angular 8:
Τι θα μάθεις
Αυτό το έργο θα σας διδάξει πολύτιμες δεξιότητες στη δημιουργία εφαρμογών από την αρχή - από το σχεδιασμό έως την ανάπτυξη, μέχρι μια εφαρμογή έτοιμη για ανάπτυξη.
Τεχνική στοίβα και χαρακτηριστικά
- Γωνιακό 8
- Firebase
- Απόδοση από την πλευρά του διακομιστή
- CSS με Grid και Flexbox
- Φιλικό προς το κινητό και προσαρμοστικότητα
- Σκοτεινή λειτουργία
- Όμορφη διεπαφή
Αυτό που μου αρέσει πολύ σε αυτό το ολοκληρωμένο έργο είναι ότι δεν μελετάς τα πράγματα μεμονωμένα. Αντίθετα, μαθαίνετε ολόκληρη τη διαδικασία ανάπτυξης από το σχεδιασμό έως την τελική ανάπτυξη.
Εφαρμογή υποχρεώσεων με Svelte
Το Svelte είναι σαν το νέο παιδί στην προσέγγιση των στοιχείων - τουλάχιστον παρόμοιο με το React, το Vue και το Angular. Και αυτό είναι ένα από τα πιο καυτά νέα προϊόντα για το 2020.
Οι εφαρμογές To-Do δεν είναι απαραίτητα το πιο καυτό θέμα, αλλά θα σας βοηθήσουν πραγματικά να βελτιώσετε τις Svelte δεξιότητές σας. Θα μοιάζει με αυτό:
Τι θα μάθεις
Αυτό το σεμινάριο θα σας δείξει πώς να δημιουργήσετε μια εφαρμογή χρησιμοποιώντας το Svelte 3, από την αρχή μέχρι το τέλος. Θα χρησιμοποιήσετε εξαρτήματα, στυλ και χειριστές συμβάντων
Τεχνική στοίβα και χαρακτηριστικά
- Σβέλτο 3
- Εξαρτήματα
- Styling με CSS
- Σύνταξη ES6
Δεν υπάρχουν πολλά καλά Svelte starter project, έτσι βρήκα .
Εφαρμογή ηλεκτρονικού εμπορίου με Next.js
Το Next.js είναι το πιο δημοφιλές πλαίσιο για τη δημιουργία εφαρμογών React που υποστηρίζουν την απόδοση από την πλευρά του διακομιστή.
Αυτό το έργο θα σας δείξει πώς να δημιουργήσετε μια εφαρμογή ηλεκτρονικού εμπορίου που μοιάζει με αυτό:
Τι θα μάθεις
Σε αυτό το έργο, θα μάθετε πώς να αναπτύσσετε με το Next.js—δημιουργείτε νέες σελίδες και στοιχεία, ανακτάτε δεδομένα και στυλ και αναπτύσσετε μια εφαρμογή Επόμενο.
Τεχνική στοίβα και χαρακτηριστικά
- Next.js
- Στοιχεία και σελίδες
- Δειγματοληψία δεδομένων
- Στυλ
- Ανάπτυξη Έργου
- SSR και SPA
Είναι πάντα υπέροχο να έχετε ένα πραγματικό παράδειγμα όπως μια εφαρμογή ηλεκτρονικού εμπορίου για να μάθετε κάτι νέο. Μπορείς .
Πλήρες πολύγλωσσο ιστολόγιο με Nuxt.js
Το Nuxt.js είναι για το Vue, όπως το Next.js για το React: ένα εξαιρετικό πλαίσιο για συνδυασμό απόδοσης από την πλευρά του διακομιστή και εφαρμογών μιας σελίδας
Η τελευταία εφαρμογή που μπορείτε να δημιουργήσετε θα μοιάζει με αυτό:
Τι θα μάθεις
Σε αυτό το δείγμα έργου, θα μάθετε πώς να δημιουργείτε έναν πλήρη ιστότοπο χρησιμοποιώντας το Nuxt.js, από την αρχική εγκατάσταση έως την τελική ανάπτυξη.
Εκμεταλλεύεται πολλές από τις εντυπωσιακές δυνατότητες που έχει να προσφέρει το Nuxt, όπως σελίδες και εξαρτήματα, καθώς και στυλ με SCSS.
Τεχνική στοίβα και χαρακτηριστικά
- Nuxt.js
- Στοιχεία και σελίδες
- ενότητα storyblock
- Μείγματα
- Vuex για κρατική διαχείριση
- SCSS για styling
- Nuxt middlewares
, το οποίο περιλαμβάνει πολλές από τις σπουδαίες δυνατότητες του Nuxt.js. Προσωπικά μου αρέσει να δουλεύω με το Nuxt, γι' αυτό θα πρέπει να το δοκιμάσετε, καθώς θα σας κάνει έναν εξαιρετικό προγραμματιστή του Vue.
Blog με τον Γκάτσμπι
Ο Gatsby είναι μια εξαιρετική δημιουργία στατικών τοποθεσιών που χρησιμοποιεί React και GraphQL. Αυτό είναι το αποτέλεσμα του έργου:
Τι θα μάθεις
Σε αυτό το σεμινάριο, θα μάθετε πώς να χρησιμοποιείτε τον Gatsby για να δημιουργήσετε ένα ιστολόγιο που θα χρησιμοποιείτε για να γράφετε τα δικά σας άρθρα χρησιμοποιώντας το React και το GraphQL.
Τεχνική στοίβα και χαρακτηριστικά
- Γκάτσμπι
- Αντίδραση
- GraphQL
- Πρόσθετα και θέματα
- MDX/Markdown
- Bootstrap CSS
- πρότυπα
Αν θελήσατε ποτέ να ξεκινήσετε ένα blog, πώς να το φτιάξετε χρησιμοποιώντας React και GraphQL.
Δεν λέω ότι το WordPress είναι μια κακή επιλογή, αλλά με τον Gatsby μπορείτε να δημιουργήσετε ιστότοπους υψηλής απόδοσης χρησιμοποιώντας το React - που είναι ένας εκπληκτικός συνδυασμός.
Blog με το Gridsome
Gridsome για το Vue… Εντάξει, το είχαμε ήδη με το Next/Nuxt.
Το ίδιο όμως ισχύει και για τους Gridsome και Gatsby. Και οι δύο χρησιμοποιούν το GraphQL ως επίπεδο δεδομένων, αλλά το Gridsome χρησιμοποιεί το VueJS. Είναι επίσης μια καταπληκτική δημιουργία στατικών ιστότοπων για να σας βοηθήσει να δημιουργήσετε υπέροχα ιστολόγια:
Τι θα μάθεις
Αυτό το έργο θα σας διδάξει πώς να δημιουργήσετε ένα απλό ιστολόγιο για να ξεκινήσετε με τα Gridsome, GraphQL και Markdown. Εξηγεί επίσης πώς να αναπτύξετε μια εφαρμογή μέσω του Netlify.
Τεχνική στοίβα και χαρακτηριστικά
- Πλέγμα
- Προβολή
- GraphQL
- Χαμήλωση τιμής
- δικτυώνω
Αυτό σίγουρα δεν είναι το πιο πλήρες σεμινάριο, αλλά καλύπτει τις βασικές έννοιες του Gridsome και .
Αναπαραγωγή ήχου παρόμοιο με το SoundCloud χρησιμοποιώντας Quasar
Το Quasar είναι ένα άλλο πλαίσιο Vue που μπορεί να χρησιμοποιηθεί για τη δημιουργία εφαρμογών για κινητά. Σε αυτό το έργο, θα δημιουργήσετε μια εφαρμογή αναπαραγωγής ήχου όπως:
Τι θα μάθεις
Ενώ άλλα έργα επικεντρώνονται κυρίως σε εφαρμογές ιστού, αυτό θα σας δείξει πώς να δημιουργήσετε μια εφαρμογή για κινητά χρησιμοποιώντας το Vue και το πλαίσιο Quasar.
Θα πρέπει να έχετε ήδη ρυθμίσει ένα λειτουργικό Cordova με Android Studio/Xcode. Εάν όχι, το εγχειρίδιο έχει έναν σύνδεσμο προς τον ιστότοπο Quasar όπου σας δείχνουν πώς να ρυθμίσετε τα πάντα.
Τεχνική στοίβα και χαρακτηριστικά
- Quasar
- Προβολή
- Κόρδοβα
- wavesurfer
- Στοιχεία διεπαφής χρήστη
, επιδεικνύοντας τις δυνατότητες του Quasar για τη δημιουργία εφαρμογών για κινητές συσκευές.
Πηγή: www.habr.com