SlideShare a Scribd company logo
Modern UI development with
Lightning Components
Alba Azcona Rivas
Architecture Lead FinancialForce
@Alba_ARivas
GREAT ALONE. BETTER TOGETHER.
Trabajando con Salesforce desde 2009
Salesforce compañía inversora
650+ empleados, base en San Francisco
2
Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements
that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results
of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements
other than statements of historical fact could be deemed forward-looking, including any projections of subscriber growth, earnings, revenues, or
other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any
statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality
for our service, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth,
interruptions or delays in our Web hosting, breach of our security measures, risks associated with possible mergers and acquisitions, the
immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and
manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com
products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results
of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal quarter. This document and others are available
on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other press releases or public statements are not currently available and may not be
delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently
available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
Forward looking statement
Lightning Experience
Desarrollo basado en componentes
App Builder
AppExchange
para Componentes
Construye y comparte UIs
responsivas
Construye aplicaciones con
drag & drop
Accede a una librería de
componentes predefinidos
por partners de Salesforce
Componentes
Visualforce: "Page-Centric”
1. Navegador pide la página
Cliente Servidor
4. Navegador renderiza html
2. Servidor ejecuta código Apex
3. Servidor devuelve la página (html + data)
Componentes Lightning: "App-Centric”
1. Navegador pide el componente
Cliente Servidor
3. Navegador construye la UI con JS
4. Navegador pide datos
7. Vuelta a 3
2. Servidor devuelve el bundle del
componente
5. Servidor ejecuta código Apex
6. Servidor devuelve datos (sólo
lo que hemos pedido!) JSON
Mostrar datos diferentes? Ir a 4
Mostrar UI diferente? Ir a 3
• Permite experiencias de usuario más fluidas e
interactivas
• Menos refrescos de página, menor latencia
• Fácil integración con el estilo de Lightning
Experience (componentes predefinidos +
Lightning Design System)
• Componentes ensamblables para crear
aplicaciones
• Integrado en Developer Console + extensión
chrome para debugging (Salesforce Lightning
Inspector)
Componentes Lightning: "App-Centric”
DEMO
Partes de un Componente
UI Markup
Data binding
Atributos
Componente
Partes de un Componente
UI Markup
Data binding
Atributos
Componente
Manejadores
Eventos
Controlador(js)
Partes de un Componente
UI Markup
Data binding
Atributos
Componente
Manejadores
Eventos
Controlador(js)Estilo
CSS
encapsulado
Partes de un Componente
UI Markup
Data binding
Atributos
Componente
Manejadores
Eventos
Lógica
compartida
Helper(js)Estilo
CSS
encapsulado
Controlador(js)
Agente de Eventos de aplicación
Event ObjectAccountFilter
<aura:handler event="c:GetAccounts"
action="{!c.handleGetAccountsEvent}"/>
<aura:registerEvent name="getAccounts"
type="c:GetAccounts"/>
var event = $A.get("e.c:GetAccounts");
event.setParams({"filter": filter});
event.fire();
AccountList
Eventos
Partes de un Componente
UI Markup
Data binding
Atributos
Componente
Manejadores
Eventos
Lógica
compartida
Helper(js)Estilo
CSS
encapsulado
Controlador(js)
Métodos
Aura enabled
Controlador(Apex)
Partes de un componente
UI Markup
Data binding
Atributos
Componente
Descriptor de diseño
Manejadores
Eventos
Lógica
compartida
Helper(js)Estilo
CSS
encapsulado
App Builder
Controlador(js)
Métodos
Aura enabled
Controlador(Apex)
 Aplicación standalone: .app  Visualforce!
 Otro componente: .cmp
 Menú navegación Salesforce1
 Lightning Experience
 Fuera de los servidores de Salesforce (Lightning Out) (beta)
 Communities
¿Dónde puedo usar un componente?
La forma divertida para
Admins, Developers y cualquiera
de aprender Salesforce
http://trailhead.salesforce.com
https://github.com/aazcona/accounts-app
@Alba_Arivas
alba.azconarivas@gmail.com
albasfdc.wordpress.com
¡Gracias!
¿Preguntas?

More Related Content

PPT
Advanced Platform Series - OAuth and Social Authentication
PPTX
Diving Into Heroku Private Spaces
PPTX
Winter'18 Developer Preview Webinar
PPTX
Build Better Communities with Lightning
PPTX
Introduction to lightning web component
PDF
Integrate CMS Content Into Lightning Communities with CMS Connect
PPTX
Build Faster with Base Lightning Components
PPTX
Unleash the Power of Apex Realtime Debugger
Advanced Platform Series - OAuth and Social Authentication
Diving Into Heroku Private Spaces
Winter'18 Developer Preview Webinar
Build Better Communities with Lightning
Introduction to lightning web component
Integrate CMS Content Into Lightning Communities with CMS Connect
Build Faster with Base Lightning Components
Unleash the Power of Apex Realtime Debugger

What's hot (20)

PDF
Spice up Your Internal Portal with Visualforce and Twitter Bootstrap
PPTX
Build and Package Lightning Components for Lightning Exchange
PPTX
Build custom user interfaces for your Salesforce data with the UI API
PPTX
Introduction to Apex for Developers
PDF
Build Amazing Website without coding using Salesforce SiteForce
PDF
Agile Development with Heroku webinar
PDF
Introducing the Salesforce Lightning Design System
PDF
Modern Development with Salesforce DX
PPTX
Webinar: Build Apps Customers Love as a Salesforce Developer
PPTX
Lightning Developer Experience, Eclipse IDE Evolved
PDF
Lightning Components - Advanced Features
PPTX
Preparing for Lightning: Replacing URL Hacks with Actions
PPTX
AppExchange for Components (General Components Information)
PPTX
Lightning Component Framework from 0 to App
PPTX
Building apps faster with lightning and winter '17
PDF
Introduction to Einstein Bots
PDF
Summer '18 Developer Highlights
PPTX
Embed Customer Support into your Apps with Snap-ins
PPTX
Lightning Updates: Summer, Winter & Beyond
PPTX
#Df17 Recap Series Build Apps Faster with the Salesforce Platform
Spice up Your Internal Portal with Visualforce and Twitter Bootstrap
Build and Package Lightning Components for Lightning Exchange
Build custom user interfaces for your Salesforce data with the UI API
Introduction to Apex for Developers
Build Amazing Website without coding using Salesforce SiteForce
Agile Development with Heroku webinar
Introducing the Salesforce Lightning Design System
Modern Development with Salesforce DX
Webinar: Build Apps Customers Love as a Salesforce Developer
Lightning Developer Experience, Eclipse IDE Evolved
Lightning Components - Advanced Features
Preparing for Lightning: Replacing URL Hacks with Actions
AppExchange for Components (General Components Information)
Lightning Component Framework from 0 to App
Building apps faster with lightning and winter '17
Introduction to Einstein Bots
Summer '18 Developer Highlights
Embed Customer Support into your Apps with Snap-ins
Lightning Updates: Summer, Winter & Beyond
#Df17 Recap Series Build Apps Faster with the Salesforce Platform
Ad

Viewers also liked (7)

PPTX
Essentials Madrid 2015 - Trabajando con APEX y SOQL
PPTX
Lightning Components and App Builder for admins
PPTX
Building a web application with Google Places and Lighning Connect
PDF
{a527545b-a57d-4544-b0bc-da54b8eb3d44}_Ezequiel_Aguilar
PPTX
Financial inclusion
PDF
The Future of Finance
PPTX
De la integración a la inclusión
Essentials Madrid 2015 - Trabajando con APEX y SOQL
Lightning Components and App Builder for admins
Building a web application with Google Places and Lighning Connect
{a527545b-a57d-4544-b0bc-da54b8eb3d44}_Ezequiel_Aguilar
Financial inclusion
The Future of Finance
De la integración a la inclusión
Ad

Similar to Modern UI development with Lightning Components - Spanish! (20)

PDF
New Lightning Experience: Build Custom Apps in a Flash
PPTX
Developers Introduction To Lightning
PDF
Advanced Lightning Components
PPTX
Salesforce Lightning component framework from 0 to app
PPTX
Building Apps Faster with Lightning and Winter '17
PPTX
AppExchange for Components First Call Deck
PPTX
Introduction to lightning out df16
PPTX
Elevate Madrid Essentials - Advance Track
PPTX
Build Next-gen Apps Faster with Lightning Components
PDF
Live coding with LWC
PDF
Salesforce: Go Faster with Lightning (DocuSign DevCon)
PDF
Lightning Components: The Future
PDF
Lightning breakout mun world tour 2015 sfsans
PPTX
Build Apps Visually with Lightning App Builder
PDF
Build Apps Fast with Lightning Components from Apttus
PPTX
Roadmap Lightning Updates (November 3, 2016)
PDF
Salesforce Lightning Components and App Builder EMEA World Tour 2015
PDF
Get Started with Lightning Web Components Open Source
PPTX
Trailhead live - Overview of Salesforce App Cloud
PPTX
Migrating Visualforce Pages to Lightning
New Lightning Experience: Build Custom Apps in a Flash
Developers Introduction To Lightning
Advanced Lightning Components
Salesforce Lightning component framework from 0 to app
Building Apps Faster with Lightning and Winter '17
AppExchange for Components First Call Deck
Introduction to lightning out df16
Elevate Madrid Essentials - Advance Track
Build Next-gen Apps Faster with Lightning Components
Live coding with LWC
Salesforce: Go Faster with Lightning (DocuSign DevCon)
Lightning Components: The Future
Lightning breakout mun world tour 2015 sfsans
Build Apps Visually with Lightning App Builder
Build Apps Fast with Lightning Components from Apttus
Roadmap Lightning Updates (November 3, 2016)
Salesforce Lightning Components and App Builder EMEA World Tour 2015
Get Started with Lightning Web Components Open Source
Trailhead live - Overview of Salesforce App Cloud
Migrating Visualforce Pages to Lightning

Recently uploaded (20)

PDF
BMEC211 - INTRODUCTION TO MECHATRONICS-1.pdf
PDF
July 2025 - Top 10 Read Articles in International Journal of Software Enginee...
PDF
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
PDF
R24 SURVEYING LAB MANUAL for civil enggi
PDF
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
PPT
CRASH COURSE IN ALTERNATIVE PLUMBING CLASS
PPTX
Foundation to blockchain - A guide to Blockchain Tech
PDF
PPT on Performance Review to get promotions
PPTX
CH1 Production IntroductoryConcepts.pptx
PPTX
Sustainable Sites - Green Building Construction
PPTX
UNIT-1 - COAL BASED THERMAL POWER PLANTS
PPTX
Infosys Presentation by1.Riyan Bagwan 2.Samadhan Naiknavare 3.Gaurav Shinde 4...
PPTX
UNIT 4 Total Quality Management .pptx
PDF
Evaluating the Democratization of the Turkish Armed Forces from a Normative P...
PPTX
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
PPTX
bas. eng. economics group 4 presentation 1.pptx
PPT
Mechanical Engineering MATERIALS Selection
PDF
Well-logging-methods_new................
PPTX
Internet of Things (IOT) - A guide to understanding
PDF
TFEC-4-2020-Design-Guide-for-Timber-Roof-Trusses.pdf
BMEC211 - INTRODUCTION TO MECHATRONICS-1.pdf
July 2025 - Top 10 Read Articles in International Journal of Software Enginee...
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
R24 SURVEYING LAB MANUAL for civil enggi
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
CRASH COURSE IN ALTERNATIVE PLUMBING CLASS
Foundation to blockchain - A guide to Blockchain Tech
PPT on Performance Review to get promotions
CH1 Production IntroductoryConcepts.pptx
Sustainable Sites - Green Building Construction
UNIT-1 - COAL BASED THERMAL POWER PLANTS
Infosys Presentation by1.Riyan Bagwan 2.Samadhan Naiknavare 3.Gaurav Shinde 4...
UNIT 4 Total Quality Management .pptx
Evaluating the Democratization of the Turkish Armed Forces from a Normative P...
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
bas. eng. economics group 4 presentation 1.pptx
Mechanical Engineering MATERIALS Selection
Well-logging-methods_new................
Internet of Things (IOT) - A guide to understanding
TFEC-4-2020-Design-Guide-for-Timber-Roof-Trusses.pdf

Modern UI development with Lightning Components - Spanish!

  • 1. Modern UI development with Lightning Components Alba Azcona Rivas Architecture Lead FinancialForce @Alba_ARivas
  • 2. GREAT ALONE. BETTER TOGETHER. Trabajando con Salesforce desde 2009 Salesforce compañía inversora 650+ empleados, base en San Francisco 2
  • 3. Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, risks associated with possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal quarter. This document and others are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements. Forward looking statement
  • 4. Lightning Experience Desarrollo basado en componentes App Builder AppExchange para Componentes Construye y comparte UIs responsivas Construye aplicaciones con drag & drop Accede a una librería de componentes predefinidos por partners de Salesforce Componentes
  • 5. Visualforce: "Page-Centric” 1. Navegador pide la página Cliente Servidor 4. Navegador renderiza html 2. Servidor ejecuta código Apex 3. Servidor devuelve la página (html + data)
  • 6. Componentes Lightning: "App-Centric” 1. Navegador pide el componente Cliente Servidor 3. Navegador construye la UI con JS 4. Navegador pide datos 7. Vuelta a 3 2. Servidor devuelve el bundle del componente 5. Servidor ejecuta código Apex 6. Servidor devuelve datos (sólo lo que hemos pedido!) JSON Mostrar datos diferentes? Ir a 4 Mostrar UI diferente? Ir a 3
  • 7. • Permite experiencias de usuario más fluidas e interactivas • Menos refrescos de página, menor latencia • Fácil integración con el estilo de Lightning Experience (componentes predefinidos + Lightning Design System) • Componentes ensamblables para crear aplicaciones • Integrado en Developer Console + extensión chrome para debugging (Salesforce Lightning Inspector) Componentes Lightning: "App-Centric”
  • 9. Partes de un Componente UI Markup Data binding Atributos Componente
  • 10. Partes de un Componente UI Markup Data binding Atributos Componente Manejadores Eventos Controlador(js)
  • 11. Partes de un Componente UI Markup Data binding Atributos Componente Manejadores Eventos Controlador(js)Estilo CSS encapsulado
  • 12. Partes de un Componente UI Markup Data binding Atributos Componente Manejadores Eventos Lógica compartida Helper(js)Estilo CSS encapsulado Controlador(js)
  • 13. Agente de Eventos de aplicación Event ObjectAccountFilter <aura:handler event="c:GetAccounts" action="{!c.handleGetAccountsEvent}"/> <aura:registerEvent name="getAccounts" type="c:GetAccounts"/> var event = $A.get("e.c:GetAccounts"); event.setParams({"filter": filter}); event.fire(); AccountList Eventos
  • 14. Partes de un Componente UI Markup Data binding Atributos Componente Manejadores Eventos Lógica compartida Helper(js)Estilo CSS encapsulado Controlador(js) Métodos Aura enabled Controlador(Apex)
  • 15. Partes de un componente UI Markup Data binding Atributos Componente Descriptor de diseño Manejadores Eventos Lógica compartida Helper(js)Estilo CSS encapsulado App Builder Controlador(js) Métodos Aura enabled Controlador(Apex)
  • 16.  Aplicación standalone: .app  Visualforce!  Otro componente: .cmp  Menú navegación Salesforce1  Lightning Experience  Fuera de los servidores de Salesforce (Lightning Out) (beta)  Communities ¿Dónde puedo usar un componente?
  • 17. La forma divertida para Admins, Developers y cualquiera de aprender Salesforce http://trailhead.salesforce.com