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 : Introduction6.15 – 7.30 : Lightning Component Development7.30 – 7.45 : Break out for Snacks7.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