5 levinud veebiarenduse viga ja kuidas neid vältida

Sissejuhatus

Veebirakendusi luues korduvad sageli samad probleemid. Vaatame viit levinud viga ja töövõtteid, mis aitavad neid vältida.

1. Telefonikasutajate vajaduste eiramine

Viga

Leht kujundatakse esmalt ainult arvutile ning mobiilivaatega tegeletakse alles lõpus.

Mõju

• Telefonikasutajal on raske sisu lugeda või toiminguid teha
• Ebamugav mobiilivaade võib panna külastaja lahkuma
• Mobiilivaates puuduv sisu võib jääda ka otsingumootorile kättesaamatuks

Lahendus

Kavanda leht esmalt väikesele ekraanile:

/* Alusta mobiilivaate kujundusest */
.container {
  padding: 1rem; /* Vaikimisi telefonile */
}

@media (min-width: 768px) {
  .container {
    padding: 2rem; /* Tahvelarvuti */
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 3rem; /* Arvuti */
  }
}

Testi päris seadmetel. Emulaatorid ei näita kõiki probleeme:

• Erinevad ekraanisuurused ja eraldusvõimed
• Puudutused ja žestid
• Võrguühenduse mõju jõudlusele
• Brauserite erinevused

2. Halb vigade käsitlemine

Viga

Eeldatakse, et kõik päringud õnnestuvad, ega kavandata, mida kasutaja tõrke korral näeb.

// Halb: Vigade käsitlemist pole
async function fetchUserData() {
  const response = await fetch('/api/user')
  const data = await response.json()
  return data
}

Mõju

• Kasutajad näevad segaseid veateateid või tühje ekraane
• Kasutuses oleva rakenduse tõrkeid on raske uurida
• Liiga üksikasjalik veateade võib avaldada tundlikku süsteemiinfot

Lahendus

Rakenda põhjalik vigade käsitlemine:

// Hea: Korralik vigade käsitlemine
async function fetchUserData() {
  try {
    const response = await fetch('/api/user')

    if (!response.ok) {
      throw new Error(`HTTP viga! staatus: ${response.status}`)
    }

    const data = await response.json()
    return { success: true, data }
  } catch (error) {
    console.error('Viga kasutajaandmete laadimisel:', error)

    return {
      success: false,
      error: 'Kasutajaandmete laadimine ebaõnnestus. Palun proovi uuesti.',
    }
  }
}

Head tavad:

• Näita arusaadavaid veateateid
• Logi vead silumiseks (kasuta teenuseid nagu Sentry)
• Proovi ajutise tõrke korral päringut uuesti
• Kavanda tõrkevaade ja paku kasutajale võimalus uuesti proovida

3. Turvalisuse tähelepanuta jätmine

Viga

Turvalisusega plaanitakse tegeleda hiljem, kuigi see peaks olema osa lahenduse kavandamisest.

Mõju

• Kasutajaandmete lekkimise oht
• SQL-süstid, XSS-ründed ja muud turvanõrkused
• Usalduse ja maine kahjustumine
• Kulukad erakorralised parandused

Lahendus

Kontrolli sisestatud andmeid juba serveris:

// Kontrolli sisendi vormingut ja lubatud väärtusi
import { z } from 'zod'

const userSchema = z.object({
  email: z.string().email(),
  age: z.number().min(18).max(120),
})

app.post('/api/user', async (req, res) => {
  try {
    const validatedData = userSchema.parse(req.body)
    // Töötle valideeritud andmeid
  } catch (error) {
    res.status(400).json({ error: 'Vigane sisend' })
  }
})

Turvalisuse kontrollnimekiri:

• ✅ Kasuta HTTPS-i kõikjal
• ✅ Kasuta rakendusele sobivat autentimist ja õiguste kontrolli
• ✅ Kontrolli kogu kasutaja sisendit
• ✅ Kasuta parameetristatud päringuid SQL-süstide vältimiseks
• ✅ Määra turvalised HTTP-päised (CSP, HSTS, X-Frame-Options)
• ✅ Hoia sõltuvused ajakohased
• ✅ Piira päringute sagedust
• ✅ Räsi paroolid bcrypti või Argon2 abil

4. Ligipääsetavuse tähelepanuta jätmine

Viga

Ei arvestata kasutajatega, kes kasutavad klaviatuuri, ekraanilugejat või muid abivahendeid.

Mõju

• Osa kasutajaid ei saa teenust kasutada
• Vormide täitmine ja lehel liikumine muutub keeruliseks
• Oluline info võib jääda abitehnoloogia kasutajale kättesaamatuks
• Kasutusmugavus kannatab ka ajutiste piirangute korral

Lahendus

Kasuta sobivaid HTML-elemente ja seosta vormiväljad siltidega:

<!-- Halb: Ligipääsetavust pole -->
<div onclick="submitForm()">Saada</div>

<!-- Hea: Ligipääsetav -->
<button type="submit" aria-label="Saada vorm" onclick="submitForm()">
  Saada
</button>

<!-- Parem: Semantiline HTML -->
<form onsubmit="handleSubmit(event)">
  <label for="email">
    E-posti aadress
    <input id="email" type="email" required aria-describedby="email-help" />
  </label>
  <span id="email-help" class="help-text">
    Kasutame sinu e-posti aadressi päringule vastamiseks
  </span>
  <button type="submit">Saada</button>
</form>

Ligipääsetavuse põhitõed:

• Kasuta semantilisi HTML-elemente
• Paku piltidele tekstialternatiive
• Veendu, et klaviatuurinavigatsioon töötab
• Säilita piisav värvikontrast (WCAG 4.5:1)
• Testi ekraanilugejatega
• Lisa ARIA-sildid vajaduse korral, eelistades võimaluse korral semantilist HTML-i

5. Jõudluseelarve puudumine

Viga

Lisatakse funktsioone ja teeke, hindamata nende mõju laadimiskiirusele ja kasutusmugavusele.

Mõju

• Aeglased laadimisajad ajavad kasutajad minema
• Kehvad jõudlusnäitajad raskendavad lehe kasutamist
• Suurenenud majutuskulud
• Halb kasutajakogemus aeglasemate ühendustega

Lahendus

Määra failide suurusele piirangud ja kontrolli neid ehituse käigus:

// webpack.config.js
module.exports = {
  performance: {
    maxAssetSize: 250000, // 250KB
    maxEntrypointSize: 250000,
    hints: 'error',
  },
}

Enne uue teegi lisamist küsi:

1. Kas me tõesti vajame seda sõltuvust?
2. Kas on olemas kergem alternatiiv?
3. Kas saame vajaliku funktsiooni ise luua?
4. Kui palju suureneb kasutajale saadetava koodi maht?

Näide: kuupäeva vormindamine

// Mahukam lahendus: Moment.js
import moment from 'moment'
const formatted = moment().format('YYYY-MM-DD')

// Brauserisse sisseehitatud Intl API ei vaja lisateeki
const formatted = new Intl.DateTimeFormat('en-CA').format(new Date())

// Teine võimalus: impordi date-fnsi teegist ainult vajalik funktsioon
import { format } from 'date-fns'
const formatted = format(new Date(), 'yyyy-MM-dd')

Boonus: Skaleeritavuse planeerimata jätmine

Viga

Rakendus luuakse praeguse kasutajate arvu jaoks, mõtlemata tulevasele koormusele.

Lahendus

Arvesta võimaliku kasvuga:

• Kasuta andmebaasi indekseid õigesti
• Kasuta sobivates kohtades vahemälu (Redis, CDN)
• Piira API-päringute sagedust
• Kasuta asünkroonsete ülesannete jaoks sõnumijärjekorda
• Arvesta võimalusega lisada servereid
• Jälgi jõudlusmõõdikuid

// Näide: suurte andmehulkade jagamine lehekülgedeks
app.get('/api/posts', async (req, res) => {
  const page = parseInt(req.query.page) || 1
  const limit = 20
  const offset = (page - 1) * limit

  const posts = await db.posts.findMany({
    take: limit,
    skip: offset,
    orderBy: { createdAt: 'desc' },
  })

  res.json({
    data: posts,
    pagination: {
      page,
      limit,
      hasMore: posts.length === limit,
    },
  })
})

Kokkuvõte

Paljusid probleeme saab ennetada lihtsate töövõtetega:

1. Lähtu headest tavadest — arvesta nendega juba lahendust kavandades
2. Testi varakult ja sageli — päris seadmetel ja kasutajatega
3. Kontrolli tulemust — hinda jõudlust, ligipääsetavust ja turvalisust
4. Hoia teadmised ajakohased — veebiarendus areneb kiiresti
5. Õpi teiste kogemusest — loe juhtumiuuringuid ja tõrgete analüüse

CodeInvis aitame neid küsimusi läbi mõelda nii uue rakenduse loomisel kui ka olemasoleva tarkvara edasiarendamisel. Kirjuta meile, kui soovid oma projekti arutada.