A session on Introduction to Lightning Components !

1. Mumbai Salesforce Developers Group
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 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.

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

5. Traditional Architecture of VF page and Server

6. How is the Lightning Framework different from the
traditional one ?

7. Detailed Architecture

8. A Glance of the Lightning Component

9. Tools to be used for Development of
Lightning applications
- Eclipse with Force.com IDE
- Sublime text with Force.com IDE
- Salesforce Developer Console

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

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

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

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

14. Associate the component with a
Lightning tab and see it in Lightning
Experience

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

17. How would the component look after
incorporating the Lightning Design System ?

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

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

20. Thank You