La herramienta que menciona el profesor en el minuto 11 se puede encontrar en https://tomekdev.com/posts/throttle-vs-debounce-on-real-examples
Introducción
¿Cuándo optimizar el código?
Throttling y Debouncing
Analizando nuestra página de búsqueda
Nuestro propio hook debouncer: useDebouncer
Throttling y Debouncing con Lodash en React
Cache en memoria
Asincronía, cache y re-validación de recursos HTTP
Hashmaps vs. arrays
Memoización
Identificando re-renders problemáticos
Memoization en React
Scrolling
Patrón Windowing
Conclusiones
Próximos pasos
Analizando nuestra página de búsqueda
2/10Recursos
Transcripción
¿Qué son Trolllink y Bowsering en desarrollo web?
En el vasto universo del desarrollo web, conceptos como Trolllink y Bowsering no solo son tus aliados, sino que se consideran esenciales para optimizar cualquier aplicación que interactúe con usuarios. Al involucrarte en un curso avanzado de Next.js, estarás en contacto constante con estos términos. Al hablar de su relevancia, es vital entender cómo se integran en tu proyecto web para mejorar la eficiencia y proteger los recursos del servidor.
¿Cómo configurar una aplicación con Next.js?
Comenzar con Next.js implica seguir una serie de pasos estructurados que aseguran una arquitectura robusta para tu aplicación.
- Generación estática: Aprende a crear una arquitectura mediante la generación estática que facilita el despliegue y mantenimiento de tu aplicación.
- Integración de Contentful: Configura tu cuenta en Contentful y carga tu API con más de cuatrocientos registros listos para su uso.
- Usa tu stack personalizado: Aunque se sugiere seguir el mismo stack presentando, también puedes implementar tus propias configuraciones para aplicar conceptos tales como Trolllink y Bowsering.
¿Cómo opera la página de búsqueda en tu aplicación?
Una funcionalidad crítica de cualquier aplicación interactiva es la página de búsqueda. Un buen diseño y configuración de esta página son imprescindibles para ofrecer una experiencia de usuario satisfactoria.
- Configuración del servidor: Inicia tu servidor utilizando
yarn devy asegúrate de que está operando enlocalhosten el puerto 3000. - Estructura de la página de búsqueda: Utiliza un componente de input para permitir a los usuarios buscar términos específicos. Implementa un sistema de estados y efectos con useEffect para manejar la entrada del usuario.
- Conexión con la API: Utiliza métodos asincrónicos para buscar plantas en la API y manejar los resultados a través de componentes de React, como el
plan collection.
¿Cómo mejorar la eficiencia con Trolllink y Bowsering?
La eficiencia en el uso de recursos del servidor es crucial para el rendimiento de tu aplicación. Aquí es donde Trolllink y Bowsering aportan soluciones efectivas.
- Detección de inefficiencies: Observa cómo se realizan demasiadas llamadas API con cada pulsación de tecla durante una búsqueda, lo que representa una sobrecarga innecesaria de recursos.
- Implementación de Trolllink y Bowsering:
- Trottle (acelerador): Controla el flujo de solicitudes API permitiendo solo una solicitud cada cierto tiempo. Esto regula la avalancha de llamadas al servidor con cada keystroke.
- Debounce (rebote): Espera a que el usuario termine de escribir antes de hacer una solicitud, disminuyendo significativamente las llamadas innecesarias al servidor.
Estos métodos no solo optimizan el uso de recursos, sino que mejoran la experiencia del usuario, asegurando que las búsquedas sean más precisas y sin retrasos.
¿Por qué elegir Trolllink y Bowsering en tus implementaciones?
Elegir implementar estrategias como Trolllink y Bowsering en tu aplicación no es solo una opción, sino una necesidad para cualquier desarrollador serio que busque proteger y optimizar sus recursos.
- Reducción del tráfico al servidor: Minimiza el número de solicitudes al servidor, lo que se traduce en menos carga y un uso más eficiente del ancho de banda.
- Mejora de la experiencia del usuario: Ofrece resultados de búsqueda más relevantes y rápidos, reduciendo el tiempo de espera y aumentando la satisfacción del usuario.
- Ejemplo práctico: Utiliza la plataforma de Thomas para experimentar y comparar entre no usar optimización, usar Trottle o Debounce, y observa la diferencia en la eficiencia.
Estos conceptos son fundamentales para cualquier desarrollador web que busque llevar sus habilidades y proyectos al siguiente nivel. ¿Estás listo para aplicarlos y optimizar tus aplicaciones? ¡Sigue explorando y nunca pares de aprender!
Aportes 7
Preguntas 0
Ordenar por:
Archivos base de la clase.
pages/search.tsx
import { useState, ChangeEventHandler, useEffect } from 'react'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useTranslation } from 'next-i18next'
import { GetStaticProps } from 'next'
import {
OutlinedInput,
InputLabel,
InputAdornment,
FormControl,
} from '@ui/FormField'
import { SearchIcon } from '@ui/icon/Search'
import { Typography } from '@ui/Typography'
import { Layout } from '@components/Layout'
import { PlantCollection } from '@components/PlantCollection'
import { searchPlants, QueryStatus } from '@api'
export const getStaticProps: GetStaticProps = async ({ locale }) => ({
props: await serverSideTranslations(locale!),
})
export default function Search() {
const { t } = useTranslation(['page-search'])
const [term, setTerm] = useState('')
const [status, setStatus] = useState<QueryStatus>('idle')
const [results, setResults] = useState<Plant[]>([])
const updateTerm: ChangeEventHandler<HTMLInputElement> = (event) =>
setTerm(event.currentTarget.value)
const emptyResults = status === 'success' && results.length === 0
useEffect(() => {
if (term.trim().length < 3) {
setStatus('idle')
setResults([])
return
}
setStatus('loading')
// Pagination not supported... yet
searchPlants({
term,
limit: 10,
}).then((data) => {
setResults(data)
setStatus('success')
})
}, [term])
return (
<Layout>
<main className="pt-16 text-center">
<div className="max-w-5xl mx-auto mb-6">
<FormControl fullWidth className="" variant="outlined">
<InputLabel htmlFor="search-term-field">{t('term')}</InputLabel>
<OutlinedInput
id="search-term-field"
value={term}
onChange={updateTerm}
startAdornment={
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
}
labelWidth={100}
/>
</FormControl>
</div>
<div>
{emptyResults ? (
<Typography variant="body1">{t('notFound', { term })}</Typography>
) : null}
</div>
<div>
{!emptyResults ? (
<PlantCollection plants={results} variant="square" />
) : null}
</div>
</main>
</Layout>
)
}
components/Header/Header.tsx
import { PropsWithChildren } from 'react'
import Link, { LinkProps } from 'next/link'
import { useTranslation } from 'next-i18next'
import { NavBar } from '@ui/NavBar'
import { Button } from '@ui/Button'
import { PreviewModeBanner } from './PreviewModeBanner'
import { TopArea } from './TopArea'
export function Header() {
const { t } = useTranslation(['common'])
return (
<>
<PreviewModeBanner />
<div className='px-8 py-3'>
<TopArea />
</div>
<div className="mx-auto" style={{ maxWidth: '98%' }}>
<NavBar title="🌿 Plantpedia">
<div>
<NavLink href="/top-stories">{t('topStories')}</NavLink>
</div>
<NavLink href="/search">{t('search')}</NavLink>
</NavBar>
</div>
</>
)
}
function NavLink({ children, ...linkProps }: PropsWithChildren<LinkProps>) {
return (
<Link {...linkProps} passHref>
<Button color="inherit" variant="text" component="a">
{children}
</Button>
</Link>
)
}
¿Por qué optimizar?
-
Invocar una función menos veces.
-
Proteger y optimizar recursos.
No me gusta la idea de seguir la saga de next, en lo particular me gustaría más que para futuros cursos no se tuviera ligado a un proyecto de un curso anterior.
Los archivos y el comando mostrados en los recursos no corresponden con lo que el profesor muestra…
Se puede cambiar
labelWidth={100}
Por
label={t('term')}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?