Mumbai Salesforce Developers Group
Inaugural Meetup
Introduction to Lightning Component Development
- Akhil Anil (@Akanil403)
Mumbai DG Leader
www.force-base.com
Agenda
6.00 - 6.15 : Introduction
6.15 – 7.30 : Lightning Component Development
7.30 – 7.45 : Break out for Snacks
7.45 – 8.30 : Questions & Answer session
What is the Lightning Component Framework ?
The Lightning Component framework is a UI framework for
developing dynamic web apps for mobile and desktop
devices. It’s a modern framework for building single-page
applications engineered for growth.
The framework supports partitioned multi-tier component
development that bridges the client and server. It uses
JavaScript on the client side and Apex on the server side.
Highlights of the Lightning Framework
- Client centric UI framework for building dynamic apps for mobile and
desktop devices
- Heavily relies on JavaScript on the client side to manage UI component
metadata
- Uses an event-driven architecture for better decoupling between
components
- Empowers the capability of building apps visually without code
Traditional Architecture of VF page and Server
How is the Lightning Framework different from the
traditional one ?
Detailed Architecture
A Glance of the Lightning Component
Tools to be used for Development of
Lightning applications
- Eclipse with Force.com IDE
- Sublime text with Force.com IDE
- Salesforce Developer Console
Build your First Lightning Component
Use Case : Build a Lightning component that would
fetch the first 10 records from the Account object. This
example is basically to illustrate how to call an apex
method from a Lightning Component.
Start by building the Apex class method
which can be recognized by the Lightning
framework
All the methods that are exposed to the Lightning framework should have the
@AuraEnabled annotation in it’s declaration as seen below
Construct the code for Lightning Component
-Associate the component with Apex controller in the header
-implement the force:appHostable interface so that component tab can be created
-Define an attribute for the Account List
Define the methods for the Client Side
Javascript Controller
-Define a reference to the apex method
-Invoke the apex method
-Define a callback function for the callout.
Associate the component with a
Lightning tab and see it in Lightning
Experience
How to use the Lightning Design System to
improve the look and feel of this Component ?
-Visit www.lightningdesignsystem.com and incorporate the Data tables in your component
-Data tables are an enhanced version of an HTML table and are used to display tabular data.
How would the component look after
incorporating the Lightning Design System ?
Notable videos to learn about Lightning
Lightning Developer Center in Salesforce
Introduction to Lightning Components (Salesforce)
Mastering Lightning Framework - Part 1 (JF Paradis)
Mastering Lightning Framework - Part 2 (JF Paradis)
Creating Lightning Components by Don Robis
Getting Started with Lightning By Sara Robin
Developing Lightning Components by Thomas Crouse
Learn Lightning Out with Andrew Fawcett
Notable blogs which talks about lightning
components
http://bobbuzzard.blogspot.com/
http://peterknolle.com/posts
http://cloudyworlds.blogspot.com/
http://www.jitendrazaa.com/blog
http://pchittum.com/
http://andyinthecloud.com/category/lightning/
http://paulbattisson.com/blog
Thank You

Lightning components ver1.0

  • 1.
    Mumbai Salesforce DevelopersGroup Inaugural Meetup Introduction to Lightning Component Development - Akhil Anil (@Akanil403) Mumbai DG Leader www.force-base.com
  • 2.
    Agenda 6.00 - 6.15: Introduction 6.15 – 7.30 : Lightning Component Development 7.30 – 7.45 : Break out for Snacks 7.45 – 8.30 : Questions & Answer session
  • 3.
    What is theLightning Component Framework ? The Lightning Component framework is a UI framework for developing dynamic web apps for mobile and desktop devices. It’s a modern framework for building single-page applications engineered for growth. The framework supports partitioned multi-tier component development that bridges the client and server. It uses JavaScript on the client side and Apex on the server side.
  • 4.
    Highlights of theLightning Framework - Client centric UI framework for building dynamic apps for mobile and desktop devices - Heavily relies on JavaScript on the client side to manage UI component metadata - Uses an event-driven architecture for better decoupling between components - Empowers the capability of building apps visually without code
  • 5.
    Traditional Architecture ofVF page and Server
  • 6.
    How is theLightning Framework different from the traditional one ?
  • 7.
  • 8.
    A Glance ofthe Lightning Component
  • 9.
    Tools to beused for Development of Lightning applications - Eclipse with Force.com IDE - Sublime text with Force.com IDE - Salesforce Developer Console
  • 10.
    Build your FirstLightning Component Use Case : Build a Lightning component that would fetch the first 10 records from the Account object. This example is basically to illustrate how to call an apex method from a Lightning Component.
  • 11.
    Start by buildingthe Apex class method which can be recognized by the Lightning framework All the methods that are exposed to the Lightning framework should have the @AuraEnabled annotation in it’s declaration as seen below
  • 12.
    Construct the codefor Lightning Component -Associate the component with Apex controller in the header -implement the force:appHostable interface so that component tab can be created -Define an attribute for the Account List
  • 13.
    Define the methodsfor the Client Side Javascript Controller -Define a reference to the apex method -Invoke the apex method -Define a callback function for the callout.
  • 14.
    Associate the componentwith a Lightning tab and see it in Lightning Experience
  • 15.
    How to usethe Lightning Design System to improve the look and feel of this Component ? -Visit www.lightningdesignsystem.com and incorporate the Data tables in your component -Data tables are an enhanced version of an HTML table and are used to display tabular data.
  • 17.
    How would thecomponent look after incorporating the Lightning Design System ?
  • 18.
    Notable videos tolearn about Lightning Lightning Developer Center in Salesforce Introduction to Lightning Components (Salesforce) Mastering Lightning Framework - Part 1 (JF Paradis) Mastering Lightning Framework - Part 2 (JF Paradis) Creating Lightning Components by Don Robis Getting Started with Lightning By Sara Robin Developing Lightning Components by Thomas Crouse Learn Lightning Out with Andrew Fawcett
  • 19.
    Notable blogs whichtalks about lightning components http://bobbuzzard.blogspot.com/ http://peterknolle.com/posts http://cloudyworlds.blogspot.com/ http://www.jitendrazaa.com/blog http://pchittum.com/ http://andyinthecloud.com/category/lightning/ http://paulbattisson.com/blog
  • 20.