Lightning components - o que são, quais os seus objectivos e exemplos práticos

Lightning ComponentsRicardo Coutinho

5 de Agosto 2016

Índice• Parte 1 - Teórica• O que é?• Objetivos• Exemplos

• Parte 2 - Técnica • Funcionamento • Componentes• Eventos• Demo ArdinaPress

• Conclusões

Parte 1 - Teórica• O que é?• Aura Framework• Objetivos• Exemplos • Salesforce1• Lightning Experience

O que é?• O Lightning Components é uma User Interface Framework

de desenvolvimento de aplicações web dinâmicas para mobile e desktop.• Foi desenvolvida com base na Aura Framework.• Consiste na criação de vários componentes que

comunicam entre si através de eventos.• Utiliza JavaScript do lado do cliente e Apex do lado do

servidor.Referências:

https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

https://developer.salesforce.com/trailhead/modules

Aura Framework• É uma framework de User Interface.• Contém componentes que

optimizam as apps para diferentes dispositivos.• Utiliza o servidor, o browser e a

network de forma inteligente para que o programador se possa focar na lógica e na interação das apps.

Referências:

https://github.com/forcedotcom/aura/blob/master/aura_oss.pdf

Objetivos Lightning Components

• Acelerar o desenvolvimento de aplicações e a sua performance.• Facilitar o desenvolvimento para Salesforce1 e Lightning

Experience.Referências: https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

https://developer.salesforce.com/trailhead/modules

Lightning App Builder

• Permite criar uma app com Lightning Components através de Drag and Drop.• Os clientes podem criar as

suas próprias apps juntando os componentes que pretendem.

Exemplo – “Meetup” ComponentSalesforce1 e Lightning Experience

Exemplo – “In The Area” ComponentNa página de um contacto e em Tab.

Parte 2 - Técnica• Funcionamento• Componentes• Eventos• Lightning Components vs Visualforce Pages• Lightning Out• Demo ArdinaPress

Funcionamento

Referências: https://developer.salesforce.com/trailhead/modules

• Utiliza JavaScript do lado do cliente.• Utiliza Apex do lado

do servidor.

Componentes• São unidades independentes e reutilizáveis que fazem parte de uma aplicação.• Podem ser trabalhados individualmente sem afetar o

funcionamento da aplicação.• Comunicam entre si através de eventos.• Cada componente é constituído por: Component,

Controller, Helper, Style, Documentation, Renderer, Design e SVG.Referências:

https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

https://developer.salesforce.com/trailhead/modules

Eventos• São utilizados para que os componentes possam comunicar

entre si.• São “respostas” às interações do utilizador com os elementos de

UI, ou seja, consoante as ações do utilizador os eventos podem ser, ou não, disparados.• Existem dois tipos de eventos:

• Component Events: São manipulados pelos componentes.• Application Events: Podem ser manipulados pela

aplicação.

Referências:

https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

https://developer.salesforce.com/trailhead/modules

Funcionamento- COMPONENT- CONTROLLER- HELPER- STYLE- DOCUMENTATION- RENDERER- DESIGN- SVG

Referências: https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

Quando criamos um Lightning Component é gerado um Bundle.

Funcionamento- COMPONENT- CONTROLLER- HELPER- STYLE- DOCUMENTATION- RENDERER- DESIGN- SVG

Referências: https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

O Component contém toda a estrutura HTML.

- COMPONENT- CONTROLLER- HELPER- STYLE- DOCUMENTATION- RENDERER- DESIGN- SVG

Funcionamento

Referências: https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

O Controller é o controlador principal e é escrito em JavaScript.

- COMPONENT- CONTROLLER- HELPER- STYLE- DOCUMENTATION- RENDERER- DESIGN- SVG

Funcionamento

Referências: https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

O Helper é outro ficheiro escrito em JavaScript e contém funções partilhadas por todo o componente.

- COMPONENT- CONTROLLER- HELPER- STYLE- DOCUMENTATION- RENDERER- DESIGN- SVG

Funcionamento

Referências: https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

O Style contém todo o CSS do componente.

- COMPONENT- CONTROLLER- HELPER- STYLE- DOCUMENTATION- RENDERER- DESIGN- SVG

Funcionamento

Referências: https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

O Documentation contém informações do funcionamento do componente.

- COMPONENT- CONTROLLER- HELPER- STYLE- DOCUMENTATION- RENDERER- DESIGN- SVG

Funcionamento

Referências: https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

O Renderer é outro ficheiro JavaScript que serve para interagir com o DOM.

- COMPONENT- CONTROLLER- HELPER- STYLE- DOCUMENTATION- RENDERER- DESIGN- SVG

Funcionamento

Referências: https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

O Design permite disponibilizar o componente no Lightning App Builder.

- COMPONENT- CONTROLLER- HELPER- STYLE- DOCUMENTATION- RENDERER- DESIGN- SVG

Funcionamento

Referências: https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

O SVG permite alterar o ícone do componente.

Lightning Out• O Lightning Out permite correr Lightning

Components fora dos servidores de Salesforce.• O Lightning Out é adicionado em apps externas em

formato de biblioteca JavaScript.• Esta funcionalidade está ainda em fase de testes e

não funciona na sua totalidade.Referências:

https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

Demo ArdinaPress

Conclusões

Lightning Components vs Visualforce Pages• O Lightning Components não substitui as Visualforce

Pages.• Cada uma destas tecnologias tem os seus pontos fortes

e os seus pontos fracos e podem ser utilizados em conjunto.• Não existe necessidade de migrar para Lightning

Components embora em alguns casos seja aconselhável.

Referências:

https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

Lightning Components vs Visualforce PagesVantagens• Facilita a criação de apps.• Fácil incorporação no

Salesforce1.• Reutilização de

componentes.• Trabalha mais o “client-

side” o que permitir aliviar o servidor.

Desvantagens• É mais complexo de aprender

do que as Visualforce Pages.• Não suporta integração direta

de Frameworks.• Algumas funcionalidades

ainda não estão disponíveis.

Referências: https://developer.salesforce.com/trailhead/modules

Referências• Lightning Components Developer Guide• Trailhead• Aura Development Guide