Lekcija 1Obravnava in validacija obrazcev (nadzorovani proti nenadzorovanemu, knjižnice: Formik, React Hook Form, VeeValidate)Izvedite robustno obravnavo obrazcev in validacijo. Primerjajte nadzorovane in nenadzorovane vnose, uporabljajte knjižnice kot Formik, React Hook Form in VeeValidate ter oblikujte validacijo, sporočila o napakah in tokove oddajanja za kompleksne obrazce.
Controlled vs uncontrolled input strategiesFormik and React Hook Form in practiceVeeValidate and Vue form patternsSynchronous and async validation rulesError messages, UX, and accessibilityLekcija 2Knjižnice komponent UI in prakse dostopnosti (Tailwind, Material, Chakra, vloge ARIA, navigacija s tipkovnico)Naučite se uporabljati moderne knjižnice UI ob ohranjanju močne dostopnosti. Raziskujte Tailwind, Material UI in Chakra, nato pa uporabite vloge ARIA, upravljanje fokusa in vzorce navigacije s tipkovnico za gradnjo vključujočih, za produkcijo pripravljenih vmesnikov.
Design systems with Tailwind and utility classesMaterial UI and Chakra component patternsSemantic HTML and ARIA role strategiesFocus management and keyboard navigationColor contrast, theming, and reduced motionLekcija 3Izbira frontend okvira in utemeljitev (React, Vue, Svelte) ter kompromise ekosistemaOcenite in utemeljite izbiro frontend okvira. Primerjajte arhitekture React, Vue in Svelte, zrelost ekosistema, zmogljivost in krivulje učenja, da boste lahko izbrali in branili najboljšo možnost za vsak kontekst projekta.
React, Vue, and Svelte core conceptsEcosystem maturity and community supportPerformance and bundle size tradeoffsTypeScript and tooling integrationDecision frameworks for real projectsLekcija 4Sestavljanje, pakiranje in optimizacija: Webpack/Vite/Rollup, razdelitev kode, tree-shaking, obravnava sredstevOpravite z moderno tehnologijo sestavljanja za zmogljive frontend-e. Primerjajte Webpack, Vite in Rollup, konfigurirajte razdelitev kode in tree-shaking ter optimizirajte obravnavo sredstev, predpomnenje in izvorne zemljevide za dostavo hitrih, vzdrževljivih produkcijskih paketov.
Comparing Webpack, Vite, and Rollup setupsCode splitting and dynamic importsTree-shaking and dead code eliminationOptimizing images, fonts, and static assetsCaching, hashes, and source map strategiesLekcija 5Testi na strani odjemalca: enotno testiranje komponent, integracijski testi, izbira testnih knjižnic in primeriRazvijte robustno strategijo testiranja na strani odjemalca. Naučite se enotnega testiranja komponent, integracijskih testov čez poti in API-je ter kako izbrati med Jest, Vitest, Cypress in Testing Library za zanesljive, vzdrževljive teste.
Unit testing UI components in isolationIntegration tests for flows and routingUsing Testing Library for user-centric testsChoosing Jest, Vitest, Cypress, or PlaywrightMocking APIs and handling flaky testsLekcija 6Lokalni razvoj in konfiguracija okolja: spremenljivke okolja, datoteke .env, zastavice funkcij za frontendKonfigurirajte zanesljiva okolja frontend-a za lokalne in oblačne nastavitve. Naučite se upravljati spremenljivke okolja, datoteke .env, vbrizgavanje ob sestavljanju in zastavice funkcij, da boste lahko varno preklapljali funkcionalnost čez razvoj, staging in produkcijo.
Managing .env files and build-time variablesSeparating dev, staging, and production configsRuntime configuration and environment safetyImplementing frontend feature flagsSecrets handling and configuration pitfallsLekcija 7Struktura projekta in konvencije map za enostranske aplikacije (komponente, strani, storitve, kljuke)Oblikujte skalabilne strukture projektov za enostranske aplikacije. Naučite se konvencij map za komponente, strani, storitve in kljuke ter kako organizirati skupne pripomočke, teste in sloge, da bodo velike kode baze odkrijive in vzdrževljive.
Organizing components, pages, and layoutsServices, hooks, and data access layersShared utilities, types, and constantsStructuring tests and story filesRefactoring toward modular boundariesLekcija 8Vzorci integracije API: odjemalci REST proti GraphQL, obravnava napak, ponovni poskusi zahtev, časovne omejitveIzvedite robustne vzorce integracije API na odjemalcu. Primerjajte odjemalce REST in GraphQL, konfigurirajte Axios ali Fetch, obravnavajte napake in ponovne poskuse ter oblikujte časovne omejitve, preklic in normalizacijo za odporne plasti pridobivanja podatkov.
Configuring REST clients with Axios or FetchUsing GraphQL clients like Apollo or URQLGlobal error handling and user messagingRequest retries, backoff, and timeoutsCancellation, abort controllers, and cachingLekcija 9Avtentikacija na frontend-u: shranjevanje žetonov, tokovi osveževanja in varni pristopi s piškotkiRazumite varne vzorce avtentikacije frontend-a. Primerjajte localStorage, sessionStorage in piškotke, oblikujte tokove osveževanja žetonov ter izvedite piškotke HttpOnly, obrambo CSRF in strategije odjave, ki ščitijo uporabnike v resničnih aplikacijah.
Token storage: localStorage vs cookiesImplementing refresh token flows safelyHttpOnly cookies and CSRF protectionHandling logout, revocation, and rotationAuth error handling and user feedbackLekcija 10Možnosti in vzorci upravljanja stanja (lokalno stanje komponent, Context, Redux/Pinia/MobX, React Query)Primerjajte možnosti upravljanja stanja za kompleksne frontend-e. Raziskujte lokalno stanje, Context, Redux, Pinia, MobX in React Query ter se naučite vzorcev za predpomnenje, normalizacijo in izogibanje nepotrebnim ponovnim izrisom v velikih aplikacijah.
Local component state and lifting patternsContext API for cross-cutting concernsRedux, Pinia, and MobX store designServer state with React Query or SWRPerformance tuning and selector patternsLekcija 11Usmerjanje in zaščitene poti: usmerjanje na strani odjemalca, stražarji poti, leno nalaganjeGradi zanesljivo usmerjanje na strani odjemalca z zaščitenimi potmi. Naučite se konfiguracije poti, ugnezdenih poti, lenega nalaganja in stražarjev poti, ki uveljavljajo avtentikacijo in avtorizacijo, medtem ko ohranjajo hitro in dostopno navigacijo.
Configuring client-side routers and routesNested routes and layout hierarchiesImplementing lazy loading and code splittingAuth-based route guards and redirectsHandling 404 pages and fallback routes
