Lightning components - o que são, quais os seus objectivos e exemplos práticos
-
Upload
dom-digital -
Category
Software
-
view
2.496 -
download
6
Transcript of Lightning components - o que são, quais os seus objectivos e exemplos práticos
![Page 1: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/1.jpg)
Lightning ComponentsRicardo Coutinho
5 de Agosto 2016
![Page 2: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/2.jpg)
Índice• Parte 1 - Teórica• O que é?• Objetivos• Exemplos
• Parte 2 - Técnica • Funcionamento • Componentes• Eventos• Demo ArdinaPress
• Conclusões
![Page 3: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/3.jpg)
Parte 1 - Teórica• O que é?• Aura Framework• Objetivos• Exemplos • Salesforce1• Lightning Experience
![Page 4: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/4.jpg)
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
![Page 5: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/5.jpg)
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
![Page 6: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/6.jpg)
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
![Page 7: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/7.jpg)
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.
![Page 8: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/8.jpg)
Exemplo – “Meetup” ComponentSalesforce1 e Lightning Experience
![Page 9: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/9.jpg)
Exemplo – “In The Area” ComponentNa página de um contacto e em Tab.
![Page 10: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/10.jpg)
Parte 2 - Técnica• Funcionamento• Componentes• Eventos• Lightning Components vs Visualforce Pages• Lightning Out• Demo ArdinaPress
![Page 11: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/11.jpg)
Funcionamento
Referências: https://developer.salesforce.com/trailhead/modules
• Utiliza JavaScript do lado do cliente.• Utiliza Apex do lado
do servidor.
![Page 12: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/12.jpg)
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
![Page 13: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/13.jpg)
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
![Page 14: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/14.jpg)
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.
![Page 15: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/15.jpg)
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.
![Page 16: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/16.jpg)
- 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.
![Page 17: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/17.jpg)
- 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.
![Page 18: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/18.jpg)
- 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.
![Page 19: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/19.jpg)
- 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.
![Page 20: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/20.jpg)
- 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.
![Page 21: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/21.jpg)
- 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.
![Page 22: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/22.jpg)
- 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.
![Page 23: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/23.jpg)
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
![Page 24: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/24.jpg)
Demo ArdinaPress
![Page 25: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/25.jpg)
Conclusões
![Page 26: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/26.jpg)
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
![Page 27: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/27.jpg)
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
![Page 28: Lightning components - o que são, quais os seus objectivos e exemplos práticos](https://reader035.fdocumentos.tips/reader035/viewer/2022081503/58e60cd01a28ab44778b57c7/html5/thumbnails/28.jpg)
Referências• Lightning Components Developer Guide• Trailhead• Aura Development Guide