Μάθημα 1Διαχείριση φορμών και έλεγχος εγκυρότητας (ελεγχόμενες vs μη ελεγχόμενες, βιβλιοθήκες: Formik, React Hook Form, VeeValidate)Υλοποιήστε ισχυρή διαχείριση φορμών και έλεγχο εγκυρότητας. Συγκρίνετε ελεγχόμενες και μη ελεγχόμενες εισόδους, χρησιμοποιήστε βιβλιοθήκες όπως Formik, React Hook Form και VeeValidate, και σχεδιάστε έλεγχο εγκυρότητας, μηνύματα σφάλματος και ροές υποβολής για σύνθετες φόρμες.
Στρατηγικές ελεγχόμενων vs μη ελεγχόμενων εισόδωνFormik και React Hook Form στην πράξηVeeValidate και μοτίβα φορμών VueΣυγχρονισμένοι και ασύγχρονοι κανόνες ελέγχουΜηνύματα σφάλματος, UX και προσβασιμότηταΜάθημα 2Βιβλιοθήκες UI components και πρακτικές προσβασιμότητας (Tailwind, Material, Chakra, ARIA roles, πλοήγηση πληκτρολογίου)Μάθετε να χρησιμοποιείτε σύγχρονες βιβλιοθήκες UI διατηρώντας ισχυρή προσβασιμότητα. Εξερευνήστε Tailwind, Material UI και Chakra, εφαρμόστε ARIA roles, διαχείριση εστίασης και μοτίβα πλοήγησης πληκτρολογίου για να δημιουργήσετε περιεκτικές, παραγωγής έτοιμες διεπαφές.
Συστήματα σχεδιασμού με Tailwind και utility classesMaterial UI και Chakra μοτίβα componentsSemantic HTML και στρατηγικές ARIA rolesΔιαχείριση εστίασης και πλοήγηση πληκτρολογίουΑντίθεση χρωμάτων, theming και μειωμένη κίνησηΜάθημα 3Επιλογή frontend framework και αιτιολόγηση (React, Vue, Svelte) και συμβιβασμούς οικοσυστήματοςΑξιολογήστε και αιτιολογήστε την επιλογή σας frontend framework. Συγκρίνετε αρχιτεκτονικές React, Vue και Svelte, ωριμότητα οικοσυστήματος, απόδοση και καμπύλες εκμάθησης ώστε να επιλέξετε και να υπερασπιστείτε την καλύτερη επιλογή για κάθε context project.
Βασικές έννοιες React, Vue και SvelteΩριμότητα οικοσυστήματος και υποστήριξη κοινότηταςΣυμβιβασμοί απόδοσης και μεγέθους bundleΕνσωμάτωση TypeScript και εργαλείωνΠλαίσια απόφασης για πραγματικά projectsΜάθημα 4Build, bundling και βελτιστοποίηση: Webpack/Vite/Rollup, code splitting, tree-shaking, διαχείριση assetsΚατακτήστε σύγχρονα εργαλεία build για αποδοτικά frontends. Συγκρίνετε Webpack, Vite και Rollup, ρυθμίστε code splitting και tree-shaking, και βελτιστοποιήστε διαχείριση assets, caching και source maps για γρήγορα, διατηρήσιμα production bundles.
Σύγκριση ρυθμίσεων Webpack, Vite και RollupCode splitting και dynamic importsTree-shaking και αφαίρεση νεκρού κώδικαΒελτιστοποίηση εικόνων, γραμματοσειρών και στατικών assetsΣτρατηγικές caching, hashes και source mapsΜάθημα 5Client-side tests: unit testing components, integration tests, επιλογές testing library και παραδείγματαΑναπτύξτε ισχυρή στρατηγική δοκιμών client-side. Μάθετε unit testing για components, integration tests σε routes και APIs, και πώς να επιλέξετε μεταξύ Jest, Vitest, Cypress και Testing Library για αξιόπιστες, διατηρήσιμες suites δοκιμών.
Unit testing UI components σε απομόνωσηIntegration tests για ροές και δρομολόγησηΧρήση Testing Library για user-centric testsΕπιλογή Jest, Vitest, Cypress ή PlaywrightMocking APIs και διαχείριση flaky testsΜάθημα 6Τοπική ανάπτυξη και ρύθμιση περιβάλλοντος: env vars, .env files, feature flags για frontendΡυθμίστε αξιόπιστα frontend περιβάλλοντα για τοπικές και cloud ρυθμίσεις. Μάθετε να διαχειρίζεστε environment variables, .env files, build-time injection και feature flags ώστε να ενεργοποιείτε λειτουργίες με ασφάλεια σε development, staging και production.
Διαχείριση .env files και build-time μεταβλητώνΔιαχωρισμός configs dev, staging και productionRuntime configuration και ασφάλεια περιβάλλοντοςΕφαρμογή frontend feature flagsΔιαχείριση secrets και παγίδες configurationΜάθημα 7Δομή project και conventions φακέλων για single-page apps (components, pages, services, hooks)Σχεδιάστε κλιμακούμενες δομές project για single-page apps. Μάθετε conventions φακέλων για components, pages, services και hooks, και πώς να οργανώσετε shared utilities, tests και styles για να διατηρήσετε μεγάλους codebases εύκολα ανακαλύψιμους και διατηρήσιμους.
Οργάνωση components, pages και layoutsServices, hooks και data access layersShared utilities, types και constantsΔομή tests και story filesRefactoring προς modular boundariesΜάθημα 8Μοτίβα ενσωμάτωσης API: REST vs GraphQL clients, error handling, request retries, timeoutsΥλοποιήστε ισχυρά μοτίβα ενσωμάτωσης API στον client. Συγκρίνετε REST και GraphQL clients, ρυθμίστε Axios ή Fetch, διαχειριστείτε σφάλματα και retries, και σχεδιάστε timeouts, cancellation και normalization για ανθεκτικά layers ανάκτησης δεδομένων.
Ρύθμιση REST clients με Axios ή FetchΧρήση GraphQL clients όπως Apollo ή URQLGlobal error handling και μηνύματα χρήστηRequest retries, backoff και timeoutsCancellation, abort controllers και cachingΜάθημα 9Authentication στο frontend: αποθήκευση tokens, refresh flows και ασφαλείς προσεγγίσεις cookiesΚατανοήστε ασφαλή μοτίβα authentication frontend. Συγκρίνετε localStorage, sessionStorage και cookies, σχεδιάστε refresh token flows, και υλοποιήστε HttpOnly cookies, CSRF defenses και στρατηγικές logout που προστατεύουν χρήστες σε πραγματικές εφαρμογές.
Αποθήκευση tokens: localStorage vs cookiesΑσφαλής υλοποίηση refresh token flowsHttpOnly cookies και CSRF προστασίαΔιαχείριση logout, revocation και rotationAuth error handling και feedback χρήστηΜάθημα 10Επιλογές και μοτίβα state management (local component state, Context, Redux/Pinia/MobX, React Query)Συγκρίνετε επιλογές state management για σύνθετα frontends. Εξερευνήστε local state, Context, Redux, Pinia, MobX και React Query, και μάθετε μοτίβα για caching, normalization και αποφυγή περιττών re-renders σε μεγάλες εφαρμογές.
Local component state και lifting patternsContext API για cross-cutting concernsRedux, Pinia και MobX store designServer state με React Query ή SWRPerformance tuning και selector patternsΜάθημα 11Δρομολόγηση και προστατευμένες διαδρομές: client-side routing, route guards, lazy loadingΔημιουργήστε αξιόπιστη client-side δρομολόγηση με προστατευμένες διαδρομές. Μάθετε ρύθμιση διαδρομών, nested routes, lazy loading και route guards που επιβάλλουν authentication και authorization διατηρώντας γρήγορη και προσβάσιμη πλοήγηση.
Ρύθμιση client-side routers και διαδρομώνNested routes και ιεραρχίες layoutΥλοποίηση lazy loading και code splittingRoute guards και redirects βασισμένα σε authΔιαχείριση 404 pages και fallback routes