Uso de Salesforce Lightning Design System
¿Qué es Salesforce Lightning Design System? ¿Debería usarlo?
Por Randalyn Hill-Coffer·Revisado por el equipo de Blue Canvas··5 min de lectura
Es fácil olvidar que hubo una época antes de Bootstrap en la que los desarrolladores web tenían que configurar minuciosamente sus propias cuadrículas y reglas de estilo. Cuando llegó Bootstrap, aumentó enormemente la productividad de los desarrolladores. En tan solo unos segundos podías crear una interfaz de usuario con buena apariencia y volver a escribir la lógica que aporta valor a la aplicación.
Hoy, los desarrolladores de Salesforce tienen suerte porque existe una versión de Bootstrap aún más adaptada a Salesforce, que les permite crear interfaces y experiencias de usuario coherentes con la estética de diseño de Salesforce. Se llama Salesforce Lightning Design System. Fue creado por el equipo de UX de Salesforce. Y, lo que es más importante, sigue siendo mantenido por el equipo de UX de Salesforce. Esto significa que, cada vez que la interfaz de usuario de la plataforma Salesforce se actualice o cambie, puedes tener la tranquilidad de que tu aplicación seguirá siendo compatible en lo visual de forma automática.
El Lightning Design System está alojado en GitHub y es de código abierto, por lo que puedes contribuir a su desarrollo. Se puede usar con Lightning, Salesforce1, Visualforce y Heroku. Incluso lo usamos para nuestra interfaz de usuario principal de Blue Canvas.
Estética
Lightning Design System se basa en cuatro principios de diseño: claridad, belleza, eficiencia y coherencia. Al igual que Bootstrap, Lightning Design System ofrece CSS compatible con distintos navegadores, íconos, pautas de tipografía y diseño, y marcado semántico y accesible para componentes. Incluso tiene su propia tipografía, conocida como Salesforce Sans.
El sistema de diseño también ofrece una lista de colores de fondo, colores de texto y tamaños de fuente para usar.
Componentes
Al igual que Bootstrap, Lightning Design System ofrece componentes y CSS que puedes usar rápidamente para crear aplicaciones visualmente atractivas. Sin embargo, el sistema va más allá del CSS. Incluye el javascript que te permite incorporar funcionalidades más complejas a tu experiencia de usuario. Algunos de nuestros favoritos son:
Cronología de actividades
¿Alguna vez has querido crear un panel o un flujo de eventos con la misma apariencia que el panel de Salesforce? Puedes hacerlo con el componente de cronología de actividades. Luego puedes incluir distintas acciones siguientes para el usuario, como una llamada, un correo electrónico, un evento o una tarea.
Ventanas modales
Salesforce ofrece componentes prediseñados de ventanas modales que puedes usar para brindar información importante a tus usuarios.
Selector de fecha
¿Cuántas veces has lidiado con complicados selectores de fecha y terminaste deseando que hubiera una forma más fácil de mejorar su apariencia y funcionamiento? Salesforce Lightning Design System tiene lo que necesitas.
Recorrido guiado
Lightning Design System va más allá de las paletas de colores y las tipografías. Se trata de darte libertad para crear excelentes aplicaciones con grandes experiencias de usuario. El Recorrido guiado componente de recorrido guiado es un gran ejemplo de esto, ya que te permite crear una mejor experiencia de incorporación, anuncios de productos y capacitación para los nuevos usuarios.
Editor de texto enriquecido
El Editor de texto enriquecido te permite ofrecer a tus usuarios potentes componentes textarea sin tener que escribir mucho código JavaScript propio. Hay muchos componentes más también disponibles.
Tokens de diseño
Uno de los mayores desafíos para cualquier diseñador es garantizar que el diseño de su aplicación se mantenga coherente y escalable. Cuanto más desarrollas, más complejo se vuelve tu diseño. Y si has definido valores fijos en todo tu CSS, hacer actualizaciones y cambios será complicado. Además, si Salesforce hace cambios en su interfaz, tendrás que asegurarte manualmente de que todo se actualice.
Los tokens de diseño son la solución a este problema. Son “entidades con nombre que almacenan atributos de diseño visual”. Puedes usarlos en lugar de valores fijos en píxeles o valores hexadecimales.
Y no se trata solo del color de fondo, sino también de line-height, spacing, opacity, font, font-size, z-index y más.
Cómo usar Lightning Design System
Hay varias formas de instalar Lightning Design System, como npm, Bower y los clásicos archivos CSS. Como podemos ver en este tutorial de Trailhead, la forma más rápida de empezar a experimentar con Lightning Design System es crear una nueva página de Visualforce y agregar el siguiente código:
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Salesforce Lightning Design System Trailhead Module</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Import the Design System style sheet -->
<apex:slds />
</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds-scope ">
<!-- MASTHEAD -->
<p class="slds-text-heading--label slds-m-bottom--small">
Módulo de Trailhead sobre Salesforce Lightning Design System
</p>
<!-- / MASTHEAD -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<!-- SECTION - BADGE COMPONENTS -->
<section aria-labelledby="badges">
<h2 id="badges" class="slds-text-heading--large slds-m-vertical--large">Badges</h2>
<div>
<span class="slds-badge">Badge</span>
<span class="slds-badge slds-theme--inverse">Badge</span>
</div>
</section>
<!-- / SECTION - BADGE COMPONENTS -->
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
</html>
</apex:page>
Ahora supongamos que queremos agregar otro componente (ten en cuenta que aquí solo mostraremos los estilos, no todo el backend). Agreguemos una tabla. Agrega este código en algún lugar de la página:
<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Close Date">Close Date</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Stage">Stage</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Confidence">Confidence</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Amount">Amount</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Contact">Contact</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">Cloudhub</div>
</td>
<td data-label="Close Date">
<div class="slds-truncate" title="4/14/2015">4/14/2015</div>
</td>
<td data-label="Prospecting">
<div class="slds-truncate" title="Prospecting">Prospecting</div>
</td>
<td data-label="Confidence">
<div class="slds-truncate" title="20%">20%</div>
</td>
<td data-label="Amount">
<div class="slds-truncate" title="$25k">$25k</div>
</td>
<td data-label="Contact">
<div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
</td>
</tr>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">Cloudhub</div>
</td>
<td data-label="Close Date">
<div class="slds-truncate" title="4/14/2015">4/14/2015</div>
</td>
<td data-label="Prospecting">
<div class="slds-truncate" title="Prospecting">Prospecting</div>
</td>
<td data-label="Confidence">
<div class="slds-truncate" title="20%">20%</div>
</td>
<td data-label="Amount">
<div class="slds-truncate" title="$25k">$25k</div>
</td>
<td data-label="Contact">
<div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
</td>
</tr>
</tbody>
</table>
Ahora haz clic en Guardado rápido y Vista previa. Ahora deberías ver la tabla con los estilos de Lightning Design System. Ten en cuenta que, si vas a tu Panel de Blue Canvas, verás cómo Blue Canvas detecta automáticamente este cambio y lo registra en el historial de Git. Así, ahora tienes un registro completo Respaldo de metadatos de Salesforce y registro de auditoría para saber exactamente qué ha cambiado en este código a lo largo del tiempo. Esto es útil si alguna vez necesitas revertir cambios o realizar una auditoría de cumplimiento.
Lightning Design System es una excelente manera de ampliar tu diseño para facilitar su mantenimiento y garantizar que siempre sigas las mejores prácticas y la estética de diseño de Salesforce. Te permite ahorrar mucho tiempo y evitar complicaciones. En Blue Canvas usamos Lightning Design System y lo recomendamos a todos los desarrolladores que trabajan en aplicaciones de Salesforce. También te recomendamos poner tu código de Lightning Design System bajo control de versiones para que puedas seguir la evolución de tu diseño y volver a estados anteriores cuando sea necesario.
