Dreamforce 2016 slides on Introduction To Lightning Out

1. Mohith Shrivastava
Salesforce MVP, Salesforce Engineer CodeScience INC
mohith@codescience.com
@msrivastav13
Introduction To Lightning Out

2. • Founded in 2008
• 75 Employees
• Offices in Chattanooga & San Francisco
• Built 90+ products on the AppExchange
• Clients range from Fortune 5 to five-person startups
• Your SaaS is in our hands: we empower SaaS businesses by providing professional services
centered on the Salesforce platform.
• Lightning Certified PDO & first partner in Product Development Outsourcing (PDO) program
• @codescience

3. Forward-Looking Statements
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 product or
service availability, 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, new products and services, 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, the outcome of any litigation, risks associated with completed and any 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 year and in our quarterly report on Form 10-Q for the most
recent fiscal quarter. These documents and others containing important disclosures 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 presentations, 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.

4. Lightning Component Framework
Javascript Framework that
helps you build javascript
applications by dividing into
components
Build once and use
everywhere
1. App builder
2. Community builder
3. Salesforce1
4. Visualforce
5. External apps outside
salesforce (Node
,Sharepoint ,Office 365)

5. Introduction To SLDS
Salesforce Lightning Design
System is an open source
CSS Framework to design
and build UI with unified
experience .
Benefits of SLDS
1. Design guidelines for
designers
2. Complete Markup for
developers
3. Design Tokens
4. Responsive

6. Demo
SalesLeaderBoard App

7. Key Takeaways
Interfaces decide where all your components can appear in salesforce
Events
Use Events to communicate between two different components .Application Events and Component Events
Use Design Attributes For Admins To Make attributes Configurable
1
2
3

8. Lightning Out
Take your components
outside salesforce in a remote
web container
Completely Secure - Supports
CORS , HTTPS
Lightning components inside
visualforce container is
powered by Lightning Out
Technology

9. Lightning Out Requirements
The remote web container must be able to modify HTML and CSS served on the
browser .
Securely Obtain Salesforce Session Id via Oauth (Create a Connected App in
SFDC) or SSO with Salesforce or use login() call
Ability to reach salesforce - If the server is behind firewall ,it needs to securely
exposed to access internet
1
2
3

10. Create a Connected App CORS
Creating Lightning Out
Dependency App
The same-origin policy
restricts the browser to only
making an XMLHttpRequest
to the same host that served
the page.
extends ltng:outApp
aura:dependency
Connected apps use
standard SAML and OAuth
protocols to authenticate,
provide Single Sign-On, and
provide tokens for use with
Salesforce APIs
Configuration In Salesforce For Lightning Out

11. Heroku Node Application Demo
Uses web server oauth for authentication
Uses EJS Templates
App URL - https://protected-fortress-46904.herokuapp.com/

12. Sharepoint Demo
Uses oauth for Authentication
Use napacloud to build office 365 plugins or visualstudio
code
https://microsoftdevmoh.sharepoint.com/sites/Lightning/_lay
outs/15/start.aspx#/SitePages/DevHome.aspx

13. Styling Lightning Out Components
From winter 17 Lightning Design System
styling is the default, and Lightning Out
automatically includes the current version of
the Lightning Design System onto the page
that’s using Lightning Out
ltng:outAppUnstyled - Use this extension in
your dependency app to for custom styles to
your lightning components .

14. References
https://github.com/msrivastav13/DF16---Introduction-To-Lightning-Out
https://github.com/msrivastav13/NodeLightningOut
The Code for the Mirosoft Sharepoint Plugin is available in below link
http://aka.ms/Ilona7

15. Q&A

16. Thank Y u
@codescience