5 tavalist veebiarenduse viga (ja kuidas neid vältida)

Sissejuhatus

Aastate jooksul veebirakenduste loomisel oleme kohanud (ja teinud) palju vigu. Selles postituses jagame levinumaid lõkse, mida oleme näinud, ja kuidas neid oma projektides vältida.

1. Mobiilsete kasutajate ignoreerimine

Viga

Disainimine esmalt töölauaarvutile (või ainult sellele) ja mobiilne kui järelmõte.

Mõju

• 60%+ veebi liiklusest tuleb mobiilseadetest
• Halb mobiilikogemus viib kõrge põrkemäärani
• Google'i mobile-first indekseerimine karistab mittereageerivaid saite

Lahendus

Võta kasutusele mobile-first arendus:

/* Mobile-first lähenemine */
.container {
  padding: 1rem; /* Mobiilne vaikeväärtus */
}

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

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

Testi pärisseadmetel - Emulaatorid ei püüa kõike kinni:

• Erinevad ekraanisuurused ja resolutsioonid
• Puudutuse interaktsioonid ja žestid
• Võrgu tingimused ja jõudlus
• Brauserite erinevused

2. Halb vigade käsitlemine

Viga

Eeldada, et kõik töötab ideaalselt, ja mitte käsitleda vigu graatsiliselt.

// 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 veateada või tühje ekraane
• Raske on siluda tootmisprobleeme
• Turvaauk paljastub veateadete kaudu

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.'
    }
  }
}

Parimad praktikad:

• Näita kasutajasõbralikke veateada
• Logi vead silumiseks (kasuta teenuseid nagu Sentry)
• Rakenda kordamislogika ajutiste tõrgete korral
• Oma tagavaravaimiku olekuid

3. Turvalisuse tähelepanuta jätmine

Viga

Käsitleda turvalisust kui midagi, mida "lisatakse hiljem", selle asemel et seda algusest peale sisse ehitada.

Mõju

• Andmelekked ja kasutajate info leke
• SQL injection, XSS rünnakud ja muud haavatavused
• Juriidiline vastutus ja kahjustatud maine
• Kulukad hädaabimeetmed

Lahendus

Rakenda turvalisuse parimad praktikad:

// Valideeri ja puhasta kasutaja sisend
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
• ✅ Rakenda korralikku autentimist (JWT, OAuth)
• ✅ Puhasta kogu kasutaja sisend
• ✅ Kasuta parameetristatud päringuid SQL injectioni vältimiseks
• ✅ Määra turvalised HTTP päised (CSP, HSTS, X-Frame-Options)
• ✅ Hoia sõltuvused ajakohased
• ✅ Rakenda rate limiting
• ✅ Hashi paroolid bcrypt või argon2-ga

4. Ligipääsetavuse vahelejätmine

Viga

Mitte arvestada puuetega kasutajatega või nendega, kes kasutavad abistavaid tehnoloogiaid.

Mõju

• Jätta välja 15% globaalsest rahvastikust (1+ miljard inimest)
• Õiguslikud riskid (ADA nõuete täitmine)
• Halb SEO (ligipääsetavus ja SEO kattuvad oluliselt)
• Vähendatud kasutatavus kõigile

Lahendus

Ehita ligipääsetavust silmas pidades:

<!-- 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">
    Me ei jaga kunagi sinu e-posti
  </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 (kuid eelista semantilist HTML-i)

5. Jõudluseelarve puudumine

Viga

Funktsioonide ja teekide lisamine ilma nende mõju arvestamiseta jõudlusele.

Mõju

• Aeglased laadimisajad ajavad kasutajad minema
• Halvad Core Web Vitals kahjustavad SEO-d
• Suurenenud majutuskulud
• Halb kasutajakogemus aeglasemate ühendustega

Lahendus

Määra ja jõusta jõudluseelarved:

// 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 selle ise implementeerida?
4. Milline on bundle'i suuruse mõju?

Näide: Kuupäeva käsitlemine

// Raske: moment.js (72KB minifitseeritud)
import moment from 'moment'
const formatted = moment().format('YYYY-MM-DD')

// Kerge: natiivne Intl API (0KB - sisseehitatud brauseritesse)
const formatted = new Intl.DateTimeFormat('en-CA').format(new Date())

// Või kasuta date-fns (kerge, tree-shakeable)
import { format } from 'date-fns'
const formatted = format(new Date(), 'yyyy-MM-dd')

Boonus: Skaleeritavuse planeerimata jätmine

Viga

Ehitamine tänastele kasutajatele ilma kasvu arvestamiseta.

Lahendus

Disaini skaala silmas pidades:

• Kasuta andmebaasi indekseid õigesti
• Rakenda vahemälustamise kihte (Redis, CDN)
• Disaini API rate limitinguga
• Kasuta sõnumijärjekorda asünkroonsetele ülesannetele
• Planeeri horisontaalseks skaleerimiseks
• Jälgi jõudlusmõõdikuid

// Näide: Lehekülgede jaotus suurte andmehulkade jaoks
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
    }
  })
})

Järeldus

Vigadest õppimine on arendajana kasvu jaoks ülioluline. Võti on:

1. Alusta parimatest praktikatest - Ära oota, et neid hiljem lisada
2. Testi vara ja sageli - Pärisseadmetel, päris kasutajatega
3. Mõõda kõike - Jõudlust, ligipääsetavust, turvalisust
4. Püsi ajakohane - Veebiarendus areneb kiiresti
5. Õpi teistelt - Loe post-mortemeid ja juhtumiuuringuid

CodeInvis oleme õppinud need õppetunnid raskelt, et sina ei peaks. Olgu tegemist uue projekti alustamise või olemasoleva hooldamisega, saame aidata sul vältida neid levinud lõkse ja ehitada midagi suurepärast.