Upload
dom-digital
View
2.495
Download
6
Embed Size (px)
Citation preview
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