Salesforce Lightning Components

download Salesforce Lightning Components

If you can't read please download the document

  • date post

    16-Apr-2017
  • Category

    Software

  • view

    54
  • download

    0

Embed Size (px)

Transcript of Salesforce Lightning Components

Salesforce Developer Group Zaragoza

Salesforce Zaragoza Developer GroupLightning ComponentsViernes 9 de abril de 2016

David Carnicer@tangerinelies

Pero, qu son los Lightning Components?

Qu son los Lightning Components?

Qu son los Lightning Components?Son la respuesta de Salesforce a la nueva ola de frameworks MVC JS como Angular, Ember, React, etc.Utilizan una implementacin del framework Aura, que es Open Source, un framework orientado a componentes (no MVC per-s).Trasladan parte de la lgica que de manera clsica estaba en el backend al frontend, es decir, traen Salesforce al siglo XXI. Entregas una aplicacin al front y el servidor se olvida.Son componentes empaquetados que pueden ser insertados en prticamente cualquier sitio: dentro de SF (Apps, SF1, Comunidades) y fuera (Lightning Out).Son altamente reutilizables, aunque depender de lo buen programador que seas ;)Hay componentes standard que da SF y componentes custom que t mismo te creas y otros que puedes descargar de AppExchange.

Qu son los Lightning Components?

5

Qu son los Lightning Components?

6

Que tampoco se flipenEl debugging es infernal (console.log a dolor en una aplicacin basada en eventos (asincronismo), debugging; statement). Cdigo minificado y precompilacin usando closures JSLockerService ha hecho algo ms complejo el desarrollo y ha hecho revisar cosas ya hechas.Y AN AS SIGUEN MOLANDO INFINITO

Lightning vs. Visualforce

PERO QU ESPERABASBIBA LAIGHGHGHNTNING

Lightning vs. VisualforceVisualforceLightningGeneracion de la UIServidorClienteWorkflow1. Usuario pide pgina2. El servidor ejecuta el cdigo back y enva el HTML al cliente3. El navegador renderiza el HTML4. Cuando el usuario interacta con la pgina se vuelve al paso 1.1. Usuario pide aplicacin o componente2. Se devuelve todo el bundle al cliente3. El navegador carga el bundle al completo4. La App JS genera toda la UI5. Cuando el usuario interacta con la pgina, la app JS modifica la interfaz.

Lightning vs. VisualforceVisualforceLightningVentajasModelo de funcionamiento comprobadoFcil de implementarGrandes aplicaciones en pequeas pginas manteniblesIntegracin total y directa con modelo de metadatos de SF.Experiencias de usuario inmersivas y muy interactivasTu interfaz custom se alinea con la estratega de interfaz de Salesforce (Lightning Experience)

DesventajasInteractividad limitadaLatencias altas dependiendo de tu red y de la cantidad de operaciones con el back, etc.Curva de aprendizaje dura si no se conoce el framework o alguno equivalenteMayor complejidad que visualforce debido a que se construye una aplicacin y no una pgina (manejo de eventos y otros)Lightning est en beta an y hay cosas que simplemente no estn listas para salir (soporte libreras JS externas).La cantidad de componentes standard es muy limitada

PeroJohnny, seria increble poder unir los dos mundos. Quiero exponer un dashboard del superBI de Salesforce llamado Wave, muchas pginas legadas que no estoy dispuesto a rehacer y a las que le tengo cario y a mi gato le gusta verme poner tags HTML como si no hubiera maana

BAM!

BETASAFE HARBORREADY TO GO?Y LA DOCU?

Visualforce & Lightning les trae amor

QUE NO PANDA EL CNICO:Hay un mdulo de Trailhead que mola para aprender a usarlo.Salesforce va a poner bastante atencin a este tema por el tema de los sistemas legados.Juntas lo mejor de los dos mundos.Puedes usar Visualforce como simple contenedor de apps, embeberlo en un Lightning Component y a funcionar.

De qu se compone un Lightning Component?

HelperControllerStyleDocumentationRendererDesignSVGComponent

Component

Sintaxis tipo HTML aunque con limitaciones.Uso de tags propios de Aura (input boxes, outputs y mil movidas ms)No se puede incorporar cdigo JS si no es en el Controller o en el Helper (olvdate de los alerts, pilln)Se especifican los imports de recursos externos (Static Resources) mediante la etiqueta Hay modificadores de comportamiento del componente (uso en comunidades)Se especifican los eventos que el componente lanza o escuchaSe pueden anidar componentes (standard o custom)Declaracin de atributos y eventos a recibir y escuchar.

Controller

Controlador dentro de una estructura de Modelo-Vista-Controlador de frontendCdigo JS con gran componente asncrona. Necesario comprender funcionamiento de JS BIENSe recomienda que en el Controller solo se implemente la lgica de funcionamiento del componente.Resto de operaciones irn en el Helper.

Helper

Resto de cdigo JS, generalmente, relacionado con funcionamiento de libreras externas.

Style

Hoja de estilo CSS. Se puede utilizar para modificar cualquier parte del componente.THIS es una de las particularidades del framework y se refiere al propio componente

OtrosDocumentation: documentacin para la documentacin de Aura que es autogenerada. Muy recomendable rellenar la informacin cada vez que se genera un componente puesto que la web que se genera sobre Aura es buena a la hora de consultarla.Renderer: Para modificar el comportamiento del renderer por defecto del componente. Cdigo JS.Design: Utilizado para exponer parmetros a los operadores que introduzcan el componente. De este modo se puede modificar el comportamiento del componente sin tener que modificar su cdigo.SVG: Utilizado para grficos de uso en el componente.

Comunicacin entre componentesComunicacin mediante eventos. Distintas tipologas.Event Bubbling.

Comunicacin entre componentesSistema de eventos de distintas tipologas (aplicacin, componente).Son como un autobs que transporta cosas. Sale de una estacin y llega a todas las otras de su nmero.Conviene tener bien acotados todos los eventos de los componentes de una pgina para que la ejecucin no sea incontrolable.

21

Espero que no sea tan horrible como Visualforce

22

Salesforce Lightning Design SystemSalesforce esta yendo hacia una estrategia de unificar las UI de todos los desarrollos de todos los tipos. Para eso sacaron SLDS. Es un framework CSS que proporciona componentes para poder reutilizar en cualquier tipo de desarrollo web de cualquier plataforma.Tambin proporciona ayudas a nivel de diseo, lettering, colores, etc.Es open source y lo puedes descargar de GitHub o https://www.lightningdesignsystem.com/

23

Cundo uso uno u otro?

24

Usa Lightning siSi ests desarrollando una app SF1, Lightning mola porque Visualforce tiene un modelo no adecuado para aplicaciones mviles debido a que las malas redes de datos mviles producen altas latencias. Lightning sin embargo en eso es el rey.Si quieres hacer una UX super chanante con una app muy interactiva con multitud de animaciones y cosas guays, usa Lightning.Si quieres que admins, operadores o monos borrachos creen aplicaciones ensamblando componentes (por ejemplo en Community Builder y App Builder) en plan drag-drop esto les encantar porque estan bien empaquetados y son tan configurables como t los piques.Si quieres empezar a trastear con el futuro para que el da que sea el presente, empieza con Lightning. Si ests empezando un proyecto nuevo, seguro que a tu cliente le encantan las filigranas y volteretas de su UI, el bajo time to market, la disminucin de horas en las estimaciones que les vas a cobrar por su alta reutilizacinAPROVECHA LA HERENCIA! ES LO QUE LOS HACE REUTILIZABLES

Usa Visualforce siSi te va el rollo old-style porque te sientes cmodo y porque lo manejas genial y quieres construir una experiencia page-centric, usa VF.Si un da te casaste con Angular y le haces ojitos a React, usa VF.Si quieres hacer una experiencia interactiva con algn framework especfico (Sencha y esos rollos), usa VF como contendor.Si quieres exponer un sitio web sin autenticacin para el pblico, usa VF debido a que los componentes lightning no soportan contextos annimos.Los lightning components no se llevan bien con la renderizacin de pginas como PDF an.Si tienes que aadir cosas a un proyecto que ya tiene mucho hecho en VF pages. De todos modos considera que en poco tiempo estars desarrollando para un sistema legado.

Cosas nuevas que han metido ltimamenteLightning CLI (ES Lint) para auditar el cdigo de los Lightning Components.Lightning Data ServiceEventos nuevosLightning OutLightning TokensMejor integracin con merge fields.

27

ColoquioAlguien ha desarrollado con Lightning Components?Qu opinis de sus capacidades y manejo respecto a Visualforce?Cules creis que son las fortalezas de los Lightning Components?Qu opinis de la alta reutilizacin de los componentes y de poder usarlos en cualquier sitio?Os gustara hacer un taller ponindonos a hacer cdigo?

28

David Carnicer@tangerinelies

Alguna pregunta ms?

29

30