Bienvenido, soy Miguel y en esta ocasión les traigo este post.
Es el tipo de sitio web más "básico"
: una página de inicio, un blog, una página de marketing. Y ahora parece que hay un nuevo generador de sitios estáticos, o un marco JAMStack
como Gatsby
o Gridsome
, cada dos semanas.
Si bien muchos argumentarían que simplemente deberíamos construir esto en una pila Vanilla HTML
, CSS
, JS
, hay algunas razones convincentes para escribir en un marco JAMStack
.
Sin embargo, estos beneficios se basan en la idea de que en realidad es más fácil y rápido desarrollar e iterar con estos JAMStacks
.
Un gran problema es que terminamos escribiendo componentes difíciles de mantener. La idea de una composición simple y fácil de componentes nunca parece estar a la altura de su promesa.
Crear una nueva página siempre parece sentirse como escribir desde cero o piratear componentes que no funcionan como queremos.
Índice
Los problemas
Demos un paso atrás y entendamos por qué escribir un sitio web estático "básico"
nunca es tan fácil, incluso con todas las herramientas y marcos nuevos.
El paradigma actual más popular en la construcción de interfaces de usuario es tener componentes controlados por estados declarativos. Muchos de estos marcos están diseñados para ser flexibles y sin opiniones. Un componente, en su esencia, tiene tres partes principales:
- Marcado y estilo.
- Props y datos.
- Métodos / Interacción.
Como puede ver, los componentes no resuelven el problema más difícil de prescribir cómo separar nuestras preocupaciones para hacerlas componibles.
Como tal, a menudo tenemos un desglose arbitrario de los componentes. Algo difícil de adaptar a nuevas situaciones.
A continuación se muestra un ejemplo clave del tipo de problemas con los que se encuentra a menudo:
¡Ves el diseño y piensas genial! Es hora de crear ese nuevo componente.
Crearemos un div
con background-color: $beige
. Dentro agregaremos redondeado div
con margin: 0 auto
… Etc.
Genial, ahora tenemos un componente '<HowItWorksSection />'
. Es hora de colocarlo en nuestra página de inicio.
// Homepage Template/JSX <DefaultLayout> <HeroSection /> <PricingSection /> /* NEW COMPONENT */ <HowItWorksSection /> </DefaultLayout>
¡Perfecto! ¡Se ve bien!
Ahora, dos meses después, su diseñador llega con una nueva página y ve esto …
¿Ahora que?
Podría agregar accesorios al componente para establecer el color de fondo, ¡pero la segunda versión de esta sección tiene un fondo de dos tonos!
Creó un nuevo componente que es <HowItWorksDarkSection />
pero eso significaría mucho código duplicado …
Al definir un componente, establece compromisos: compromisos de marcado, compromisos / dependencias de datos (a través de accesorios y estado interno) y dependencias de componentes. Cuando crea un componente, más o menos tiene que usarlo como está.
Separar preocupaciones en un sitio centrado en el contenido
Como tal, debes considerar qué compromisos quieres tener.
A continuación, se muestran 4 tipos de componentes, sus responsabilidades y cómo le ayudan a escribir sitios de contenido mantenibles.
Responsabilidades
- Colores
- Estilo de caja: color de fondo, borde, radio del borde, varios colores, etc.
- Ancho máximo interno, relleno / espaciado / margen.
Esto le permite escribir el contenido de sus secciones sin preocuparse por cosas que variarán de una página a otra. Esto resuelve el problema descrito anteriormente.
// Homepage Template/JSX <DefaultLayout> {/* Page 1 with single background */} <BasicSectionWrapper text-color="text" bg-color="off-white"> <HowItWorksSection /> </BasicSectionWrapper> {/* Page 2 wtih Two Tone background */} <TwoToneSectionWrapper top-color="navy" bottom-color="turquoise"> <HowItWorksSection /> </TwoToneSectionWrapper></DefaultLayout>
Responsabilidades
- Administra los diseños comunes que utilizará para mostrar contenido.
- Cambios receptivos.
Tomemos otra sección de componentes.
Considere siempre si tiene sentido convertir esto en una sección "Especial"
o "Específica de la página"
.
// Option 1: Page Specific Section <TwoToneSectionWrapper top-color=”navy” bottom-color=”turquoise”> <JournyYourWay /> </TwoToneSectionWrapper>
Cuando crea componentes como página específica, ahora es reutilizable de forma limitada. Tienes que agregar un accesorio para cada área de texto: title
, subtitle
, columns
.
Especialmente con las columnas, el contenido se fija en este formato. ¿Quiere agregar o eliminar otra fila de contenido a las columnas? ¿Diferentes estilos de botones? Necesita agregar accesorios para que sea ajustable.
Para cuando esto sea "verdaderamente"
reutilizable, terminará con demasiados accesorios. El problema principal es que ni siquiera funcionará si el contenido cambia por completo.
En su lugar, considere la segunda opción.
// Journy Your Way <SectionWrapper bg-color=”off-white”> <VStack> <AHeading level=”2">Journy Your Way</AHeading> <AHeading level=”4">Whether …</AHeading> <Columns> { cards.map(card => ( <ImageCard props=card />)} </Columns> </VStack> </SectionWrapper>
Esto será un poco más detallado en los componentes de la Vista de contenido. Sin embargo, incluso con 5-6
secciones, la plantilla debe caber en una sola página y aún así poder escanearse fácilmente.
Responsabilidades
- Tienen accesorios, pero con el diseño predeterminado.
- Anular los cambios.
Las secciones de contenido específico de la página son secciones para mostrar diseños y datos muy personalizados. Elegimos poner esto en un componente simplemente por conveniencia.
Es más fácil de administrar, fácil de copiar de una página a otra y más fácil de analizar en la página de visualización.
La clave para diseñar contenido específico de una página es que no están diseñadas, y no deberían diseñarse, para ser flexibles.
Hacer que el componente sea flexible haría que el componente fuera demasiado difícil de usar, o tan detallado que sería más conveniente simplemente construirlo desde cero en otro componente.
Queremos poder reutilizar estos componentes en otras páginas, con datos ligeramente diferentes. Como tal, los únicos accesorios que debemos usar son los de contenido y los de color.
Intentemos averiguar cuál debería ser una sección de contenido específico de la página.
Aquí podríamos tener la tentación de convertir toda esta sección en un componente. En su lugar, deberíamos considerar qué componentes se pueden cambiar y cómo.
<SectionWrapper bg-color=”dark-turquoise”> <VStack> <AHeading level=”2">Pricing by day</AHeading> <AHeading level=”4">With a simple, flat-rate planning fee.</AHeading> {/* Page Specific Section */} <PricingCards /> {/* Page Specific Section */} <InclusionsList color=”white” accent-color=”turquoise” /> </VStack> </SectionWrapper>
Sigamos considerando qué podría cambiar con estos componentes en el futuro. Los más comunes son solo copiar cambios. Por lo tanto, debemos establecer los accesorios para estos componentes que faciliten su cambio.
// Pricing Props const pricingCardsProps = { // Might be more cards on the left. So all cards will be arrays. leftCards: { type: Array, default: [ { color: "dark", // Allow Card color theme to change. title: "Fewer than 5-Day Trip", price: "60", priceUnit: "per day of travel, per group", ctaText: "Plan My Trip", ctaUrl: "/url", }, ], }, // All Text might change separator: { type: String, default: "OR" }, rightCards: { type: Array, default: [ { color: "light", title: "5-Day Trip", tag: "save $25", price: "275", priceUnit: "per group", ctaText: "Plan My Trip", ctaUrl: "/url", }, *{ color: "light", title: "10-Day Trip", tag: "save $100", price: "500", priceUnit: "per group", ctaText: "Plan My Trip", ctaUrl: "/url", },* ], }, };// Pricing Props const inclusionsListProps = { title: { type: String, default: "All Journy Trips include", }, subTitle: { type: String, default: "...", }, list: { type: Array, default: [ "point 1", "point 2", "point 3", // Etc. ], }, };
Ahora, en el futuro, si los diseñadores desean utilizar estos componentes específicos de la página, podemos cambiar fácilmente el texto que tenga sentido.
Responsabilidades
- Importaciones secciones.
- Definir diseño.
- Utiliza envoltorios de sección para envolver componentes.
- Proporciona anulaciones de datos que se envían como accesorios.
Las vistas de contenido son el último tipo de componente que veremos. Esta página debe ser lo suficientemente simple como para que una persona "no técnica"
pueda ingresar y hacer ediciones (según corresponda).
Idealmente, puede hacer que los datos ingresen a través de un CMS.
import HowItWorksSection from '@/components/HowItWorksSection' import PricingCards from '@/components/HowItWorksSection'// Homepage Template/JSX <DefaultLayout> {/* Regular Section */} <BackgroundImageSection image="./background-image.jpg"> <Columns> <div> <AHeading level="2">Travel Tips</AHeading> <AHeading level="4">......</AHeading> </div><div> <img src="./content-image.jpg" /> </div> </Columns> </BackgroundImageSection>{/* Pricing Section */} <SectionWrapper bg-color="dark-turquoise"> <VStack> <AHeading level="2">Pricing by day</AHeading> <AHeading level="4">With a simple, flat-rate planning fee.</AHeading> {/* Page Specific Section */} <PricingCards /> {/* Page Specific Section */} <InclusionsList color="white" accent-color="turquoise" /> </VStack> </SectionWrapper>;{/* How it works section */} <TwoToneSectionWrapper top-color="navy" bottom-color="turquoise"> <HowItWorksSection /> </TwoToneSectionWrapper></DefaultLayout>
Siempre que esté construyendo componentes, asegúrese de dedicar algún tiempo a considerar que es probable que cambie y qué no. Averigua los elementos básicos que se pueden componer y usa los accesorios con moderación para el contenido.
- Use Section
Wrapper
para controlar los colores de las secciones, el ancho máximo del contenido interno y el relleno. - Defina diseños comunes con componentes componibles.
- Los elementos con diseños especiales deben envolverse, exponiendo solo el contenido a través de accesorios. Los accesorios deben tener valores predeterminados, que se relacionan con el primer diseño predeterminado.
- En sus vistas reales, defina el diseño y el contenido generales con envoltorios de sección y componentes de diseño. En su mayoría, la plantilla solo debe usar componentes componibles predefinidos.
Espero que te haya sido de utilidad. Gracias por leer este post.
Añadir comentario