A framework Lightning Componente permite criar facilmente componentes e aplicações modernas na plataforma Salesforce. Neste slide descubra o que são lightning components, quais os seus objectivos. Copyright @ Dom Digital 2016

1. Lightning Components
Ricardo Coutinho
5 de Agosto 2016

2. Índice
• Parte 1 - Teórica
• O que é?
• Objetivos
• Exemplos
• Parte 2 - Técnica
• Funcionamento
• Componentes
• Eventos
• Demo ArdinaPress
• Conclusões

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

4. 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

5. 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

6. 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.salesforc
e.com/sfdc/pdf/lightning.pdf
https://developer.salesforce.com
/trailhead/modules

7. 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.

8. Exemplo – “Meetup” Component
Salesforce1 e Lightning Experience

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

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

11. Funcionamento
Referências:
https://developer.salesforce.com/trailhead/modules
• Utiliza JavaScript do lado do cliente.
• Utiliza Apex do lado do servidor.

12. 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

13. 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

14. 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.

15. 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.

16. - 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.

17. - 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.

18. - 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.

19. - 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.

20. - 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.

21. - 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.

22. - 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.

23. 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

24. Demo ArdinaPress

25. Conclusões

26. 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

27. Lightning Components vs Visualforce Pages
Vantagens
• 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

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