Ehita pangarakendus osa 1: HTML mallid ja marsruudid veebirakenduses

Kui Apollo 11 juhtimisarvuti navigeeris 1969. aastal Kuule, pidi see lülituma erinevate programmide vahel ilma kogu süsteemi taaskäivitamata. Kaasaegsed veebirakendused töötavad sarnaselt – nad muudavad nähtavat sisu ilma kõike algusest laadimata. See loob sujuva, reageerimisvõimelise kogemuse, mida kasutajad täna ootavad. Erinevalt traditsioonilistest veebisaitidest, mis laadivad iga toimingu puhul terve lehe uuesti, uuendavad kaasaegsed veebirakendused vaid vajalikke osi. See lähenemine, nagu missioonijuhtimine, mis vahetab ekraane, hoides samal ajal pidevat suhtlust, loob voolava kasutajakogemuse, mida oleme harjunud ootama. Siin on, mis muudab vahe nii märkimisväärseks: Evolutsiooni mõistmine: - Traditsioonilised rakendused nõuavad iga navigeerimise jaoks serveripäringut - Kaasaegsed SPAd laadivad ühe korra ja uuendavad sisu dünaamiliselt JavaScripti abil - Kasutaja ootused soosivad nüüd kohest ja sujuvat interaktsiooni - Tõhususe eelised hõlmavad vähendatud andmeedastusmahtu ja kiirust Selles õppetükis loome pangarakenduse mitme ekraaniga, mis sujuvalt üksteisega liituvad. Nagu teadlased kasutavad modulaarseid instrumente, mida saab katseteks ümber seadistada, kasutame ka HTML malle taaskasutatavate komponentidena, mida kuvatakse vastavalt vajadusele. Sa töötad HTML mallide (taaskasutatavad ekraanide plaanid), JavaScripti marsruutimise (süsteem, mis lülitab ekraanide vahel) ja brauseri ajaloo API-ga (mis hoiab nupu „tagasi“ ootuspäraselt toimimas). Need on samad põhimõtted, mida kasutavad ka React, Vue ja Angular raamistiku lahendused. Õppetüki lõpuks on sul toimiv pangarakendus, mis demonstreerib professionaalse üheleheküljelise rakenduse põhimõtteid.

Eel-loengu viktoriin

Eel-loengu viktoriin

Mida sul vaja läheb

Me vajame kohalikku veebiserverit, et testida meie pangarakendust – ära muretse, see on lihtsam kui kõlab! Kui sul veel pole paigaldatud, siis installi lihtsalt Node.js ja käivita projektikaustas npx lite-server. See mugav käsklus käivitab kohalik serveri ja avab su rakenduse automaatselt brauseris.

Ettevalmistus

Loo oma arvutis kaust nimega bank ja selle sisse fail index.html. Alustame sellest HTML boilerplate’st: See boilerplate sisaldab: - Määrab HTML5 dokumendi struktuuri koos korrektse DOCTYPE deklaratsiooniga - Seab märgistusena UTF-8 rahvusvahelise teksti toe - Lubab mobiilisõbralikku disaini vaateakna meta-täpi abil - Seadistab kirjeldusega tiitli, mis ilmub brauseri vahekaardil

- Loodab puhta body sektsiooni, kuhu ehitame oma rakenduse

HTML mallid

Mallid lahendavad veebiarenduses põhiprobleemi. Kui Gutenberg leiutas 1440ndatel liikuvate trükikujutiste meetodi, mõistis ta, et terveid lehti pole vaja raiuda, vaid ta saab luua taaskasutatavad täheplokid ja korraldada neid vastavalt vajadusele. HTML mallid töötavad sama põhimõtte järgi – selle asemel, et teha iga ekraani jaoks eraldi HTML faile, defineerid taaskasutatavad struktuurid, mida saab vajadusel kuvada. Mõtle mallidele kui plaanidele sinu rakenduse erinevate osade jaoks. Nii nagu arhitekt loob ühe plaani ja kasutab seda mitmel korral, selle asemel et joonistada identsed ruumid uuesti, loome ka mallid ühekordselt ja käivitame neid vastavalt vajadusele. Brauser hoiab need mallid peidetuna kuni JavaScript nad aktiveerib. Kui tahad veebilehe jaoks luua mitu ekraani, võib üks lahendus olla igale ekraanile eraldi HTML faili tegemine. Kuid see lahendus toob kaasa mõned ebamugavused: - Ekraani vahetades tuleb kogu HTML uuesti laadida, mis võib olla aeglane. - Andmete jagamine erinevate ekraanide vahel on keeruline. Teine lähenemine on kõigi ekraanide jaoks kasutada ühte HTML faili ja defineerida mitu HTML malli