Presenting SFDC lightning Architecture for beginners.

1. SALESFORCE LIGHTNING
FRAMEWORK
By – SAMAR SAHA

2. AGENDA
2 Salesforce Lightning Component Framework
1 What is Salesforce Lightning?
3 Quick Demo
4 Salesforce Lightning Design System (SLDS)
5 Important links to go through
6 Assignment

3. SALESFORCE LIGHTNING
Lightning is the collection of tools and technologies behind a significant upgrade to the Salesforce
platform. Lightning includes:
• Experience: A set of modern user interfaces optimized for speed. This includes the Lightning
Experience, Salesforce1 Mobile app and template-based communities.
• Lightning Component Framework: A JavaScript framework and set of standard components that
allow you to build reusable components to customize the Lightning Experience.
• Visual Building Tools: Drag-and-drop technologies for fast and easy app building &
customizations. Use the Lightning App Builder to customize the Lightning Experience.
• Lightning Exchange: A section of the AppExchange where you can find 70+ partner components
to jumpstart your development.
• Lightning Design System: Style guides and modern enterprise UX best practices to build pixel
perfect apps that match the look and feel of the Lightning Experience.

4. WHAT IS LIGHTNING COMPONENT FRAMEWORK?
• The Lightning component framework is a UI framework for developing
dynamic web apps that run on both mobile and desktop devices.
• It’s a modern framework for building single-page applications (SPA)
• It uses JavaScript on the client side and Apex on the server side.
• Derived from Open Source Aura Framework.
https://github.com/forcedotcom/aura

5. COMPONENT
• Components are the self-contained and reusable units of an app.
• They represent a reusable section of the UI, and can range in granularity
from a single line of text to an entire app.
• A component can contain other components as well as HTML, CSS, JS, or
any other web-enabled code.
• The details of a component’s implementation are encapsulated. This allows
consumer of component to focus on building the app while the component
author can innovate and make changes without breaking consumers.
• Components interact with their environment by listening to or publishing
events.

7. WHY USE THE LIGHTNING COMPONENT
FRAMEWORK?
The benefits are as follows –
1. Out-of-the-Box Component Set
2. Rich Component Ecosystem
3. Performance (Stateful client and stateless server arch.)
4. Event-driven architecture(Decoupling between components)
5. Faster development (Components are encapsulated)
6. Device-aware and cross browser compatibility.
(Supports latest in browser technology such as HTML5, CSS3 and touch events)

9. IS LIGHTNING COMPONENTS BUILT ON THE
MVC PATTERN?
• In a word, no. There are similarities, to be sure, but it would be more correct
to say that Lightning Components is View-Controller-Controller-Model, or
perhaps View-Controller-Controller-Database.
• Because when interacting with Salesforce, your components will have
a server-side controller in addition to the client-side controller. This dual
controller design is the key difference between Lightning Components and
MVC.

10. BUNDLES
Bundle is basically a folder, it’s a folder for base component along with its
optional resources.
1. Lightning Component Bundle
2. Application Bundle

11. CREATING NEW LIGHTNING COMPONENT

12. JAVA SCRIPT DRIVEN MODEL

13. HOW CONTROLLER JS WORKS?

14. HOW HELPER JS WORKS?

15. HOW RENDERER JS WORKS?

16. VF PAGE RENDERING MODEL

17. COMPONENT RENDERING MODEL

18. SIMPLER VIEW

19. STEPS TO CREATE DOMAIN NAME
Salesforce requires My Domain as a security measure to help prevent malicious attacks—just in
case a security hole lies hidden deep within a third-party or custom component.
• Choose your domain name
• From Setup, enter My Domain in the Quick Find box, then select My Domain.
• Enter a name for your domain after https:// and click Check Availability. If this name is already taken, choose another
one.
• Click Register Domain.
Salesforce updates its domain name registries with your new domain name. When it’s done, you receive an email with a
subject like, “Your Developer Edition domain ready for testing.” It takes just a few minutes.
• Roll out My Domain to your org
• In the activation email, click the link to log in to your Salesforce domain and return to the wizard.
• Notice that the URL in the browser address bar shows your new domain name.
• Click around your org to make sure that links point to your new domain. You probably haven’t created links in your DE
org, so we can go on. (When creating a domain in a production org, this important step is easily overlooked.)
• Click Deploy to Users, and then click OK.
• Click OK.

20. SALESFORCE LIGHTNING DESIGN SYSTEM (SLDS)
• CSS Framework + UI Library
• The Design System that enables you to build applications that comply with the
new Salesforce Lightning look and feel without reverse engineering the UI as
custom CSS.
• It is collection of design patterns, components, and guidelines for creating
unified UI in the Salesforce ecosystem.
• https://github.com/salesforce-ux/design-system

21. FAQS RELATED TO SLDS
 Is any JavaScript included as part of the framework?
• No. The Salesforce Lightning Design System is a pure CSS framework that you can use with any front-end
development framework you’d like, including Salesforce-specific technologies such as Visualforce and
Lightning, as well as third-party frameworks like React or Angular.
 Can I use the Salesforce Lightning Design System together with Bootstrap or any other CSS framework?
• Yes. All CSS selectors are prefixed with .slds- to prevent any collisions.
 What browsers are supported?
BROWSER VERSION
• Google Chrome Latest
• Mozilla Firefox Latest
• Safari Latest
• Internet Explorer 11
• Microsoft Edge Latest

22. WHY WE NEED SLDS?
• It has been long pending question for Salesforce.
• Many Partners apps look and work great but don’t feel like Salesforce due to lack
of resources.
• A 3rd Party Bootstrap Salesforce theme was created and used outside, since it was
not maintained by salesforce. Due to which it quickly grew out of sync with their UI
design updates.
• So, in order to have consistency through different UI experiences and applications,
Salesforce came up with new design system i.e. SLDS.

23. WHERE YOU CAN USE THE DESIGN SYSTEM
• Visualforce pages
• Lightning pages and components made available to Salesforce1 and Lightning
Experience
• Mobile apps accessing Salesforce through the Mobile SDK or another API
• Standalone web apps.
• QUICK DEMO

24. FEW LIGHTNING NAMESPACES USED IN
COMPONENT MARKUP
Namespaces Meaning
aura this namespace contains components to simplify your app logic
Ex - <aura:component/>, <aura:attribute/>
ui this namespace contains components for user interface elements
like buttons and input fields
Ex - <ui:inputNumber/>
force this namespace contains components specific to Salesforce
Ex - <force:inputField/>
lightning This component inherits styling from buttons in the Lightning
Design System.
Ex - <lightning:button/>
https://developer.salesforce.com/docs/atlas.en-
us.lightning.meta/lightning/aura_compref_force_inputField.htm
Link to Aura Ref doc – <yourdevorg>/auradocs/reference.app

25. QUERIES?

26. IMPORTANT LINKS
• https://www.youtube.com/watch?v=28CuoCYjCNw
• https://www.youtube.com/watch?v=amQ-Lt2a6dg
• https://www.youtube.com/watch?v=JKEQRYu79BQ&t=1865s
• https://developer.salesforce.com/lightning
• https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_framework.htm
• https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_actions_call.htm
• https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_application_handling_phases.htm
• https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_csp.htm
• https://developer.salesforce.com/blogs/developer-relations/2016/04/introducing-lockerservice-lightning-components.html
SLDS
• https://www.lightningdesignsystem.com/
• https://developer.salesforce.com/lightning/design-system

27. ASSIGNMENT
Trail Heads –
1. https://trailhead.salesforce.com/en/modules/lex_migration_introduction
2. https://trailhead.salesforce.com/en/trails/lex_admin_implementation/modules/lex_migration_rol
lout
3. https://trailhead.salesforce.com/en/modules/lightning_design_system (SLDS)
Code Zip-

28. THANK-YOU !!