Best Practices for Lightning Apps

33
TO BE REPLACED

Transcript of Best Practices for Lightning Apps

Page 1: Best Practices for Lightning Apps

TO BE REPLACED

Page 2: Best Practices for Lightning Apps

Forward-Looking StatementStatement 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.

Page 3: Best Practices for Lightning Apps

Go Social!

Salesforce Developers

Salesforce Developers

Salesforce Developers

The video will be posted to YouTube & thewebinar recap page (same URL as registration).

This webinar is being recorded!

@salesforcedevs / #forcewebinar

Page 4: Best Practices for Lightning Apps

▪ Don’t wait until the end to ask your question! – Technical support will answer questions starting now.

▪ Respect Q&A etiquette– Please don’t repeat questions. The support team is working

their way down the queue.▪ Stick around for live Q&A at the end

– Speakers will tackle more questions at the end, time-allowing.

▪ Head to Developer Forums– More questions? Visit developer.salesforce.com/forums

Have Questions?

Page 5: Best Practices for Lightning Apps

Agenda

1. Advanced Apps for Lightning Experience2. Lightning Component Architecture3. Lightning Utility Bar4. Designing for Performance

Page 6: Best Practices for Lightning Apps

Advanced Apps for Lightning Experience

Page 7: Best Practices for Lightning Apps
Page 8: Best Practices for Lightning Apps

Let’s define the scope… Native, built from the ground-up for Lightning Experience

Some functionality exposed in Salesforce1

Combines declarative and programmatic elements Does not conform to 80% declarative / 20% programmatic UX driven mostly by custom Lightning Components Customised using declarative tools (e.g. App Builder, Metadata, Utility Bar)

Examples: Significant customisation of Sales Cloud Horizontal apps such as HR, Accounting Vertical apps such as Insurance, Retail, Public Sector

Page 9: Best Practices for Lightning Apps

What is an Advanced Lightning App?Designed from the ground-up for Lightning Experience

- Some functionality exposed in Salesforce1

Combines declarative and programmatic elements- Does not conform to 80% declarative / 20% programmatic- UX driven mostly by custom Lightning Components- Customised using declarative tools (e.g. App Builder, Metadata, Utility Bar)

Examples:- Significant customisation of Sales Cloud- Horizontal apps such as HR, Accounting- Vertical apps such as Real Estate, Insurance, Retail, Public Sector

Page 10: Best Practices for Lightning Apps

How can I design this app?

Page 11: Best Practices for Lightning Apps

Lightning toolkitDeclarative ProgrammaticLightning AppsLightning PagesLightning Utility BarLightning ActionsTabs

+Metadata (Custom Objects, CMT)Data ModelSecurity Model

Standard EventsBase/Standard Lightning ComponentsCustom Lightning Components/EventsLightning Design SystemLightning Data Service

+VisualforceApex/SOQL/SOSL/APIs

Page 12: Best Practices for Lightning Apps

Lightning Component Architecture

Page 13: Best Practices for Lightning Apps

Lightning Component ArchitecturePurpose Markup Comments

Service Components

Extended/used by other componentsHandle server callsShared code base

Minimal Extensible = true

Helper Components

Event interactionMetadata caching Minimal When applicable

Building Block Components

Implement UX functionality at

different levels of granularity

Base Lightning Components

Lightning Design SystemBuilding Block

Components/Content

Majority of code

Experience Components

Available in App Builder / AppExchange

for ComponentsBuilding Block

Components/Content

Simple:Lightning Data Service

Advanced:Dynamic if applicablePotentially metadata-

driven

Page 14: Best Practices for Lightning Apps

Lightning Components – Release Roadmap

Release Theme Components

Spring ‘17 Adding depth to single record foundational components

Eg: avatar, inputSearch, inputSelect, picklist, inputRichText, tile, pill, modal and notification

Summer ‘17 Introducing experience and databound components

Eg: inputField, outputField, list, lookup

Page 15: Best Practices for Lightning Apps

Service Component: Example

<aura:component description=”ServiceComponent" extensible="true"> <div>{!v.body}</div></aura:component>

callToServer function:

Parameters:Name of Apex @AuraEnabled MethodMethod ParametersAction properties:

setAbortable()setStorable() + ignoreExistingsetBackground()

Fires $A.enqueueAction(), defines callback function

Component Markup

Client-side Helper

Page 16: Best Practices for Lightning Apps

Service Component: Example<c:ServiceComponent/

> <c:UtilityBarMenu/> UtilityBarController

UtilityBarConfig__c

<c:CardListView/> CardListViewController

Account Opportunity Custom__c

Apex+

SOQL

DynamicApex

+SOQL

extends c:serviceComponent

extends c:serviceComponent

Page 17: Best Practices for Lightning Apps

Example Experience Components

Page 18: Best Practices for Lightning Apps

Designing a custom Experience Component

Page 19: Best Practices for Lightning Apps

Dynamic, metadata-driven ComponentsSupport your own use casesWhen possible support any SObjectMaximise code reusabilitySimplify component logicProviding admins with a greater

degree of flexibility… ... while simplifying App Builder

experienceField to filter onStandard actions availableLightning actions availableColumns to displaySOQL query

Card List View titleNumber of rowsEnable paginationReference to metadata record

Metadata:

App Builder attributes:

Page 20: Best Practices for Lightning Apps

Component Tree: custom Card List View<c:CardListView/>

<c:Header/> <c:Table/> <c:Footer/>

<c:GenericListView/>

<c:TableData/>

<c:OutputField/><c:OutputField/><c:OutputField/>

<lightning:buttonMenu/><lightning:buttonMenu/

><lightning:buttonMenu/>

<lightning:(…)/><ui:(…)/> <c:Action/>

<lightning:buttonGroup/> <c:Pagination/>

App BuilderAttributes (incl.

Metadata reference)

Which type of list view?

Handle UI events

What data to render?

Which actions?

Renders data and actions

Record selection

Render filters?Which mass

actions?

Display and fire mass actions

Display and fire record-level

actions

Links e.g. Visualforce, Record

Home Page

Render pagination? Or link

to list view?

Display and fire pagination events

Component event bubbles up,

handled, pagination

attributes updated

Page 21: Best Practices for Lightning Apps

How do I fire platform actions?

Page 22: Best Practices for Lightning Apps

Firing Platform ActionsWhich actions to display?

Metadata – pre-selected actions Display all available actions for SObject in specific context

Query PlatformAction object to obtain action type e.g.:

Action Type Examples Implementation

Standard Action View, Edit Fire createRecord, editRecord event

Visualforce Action E-mail PDF CV Fire force:navigateToURL event

Lightning Action Reject Candidate Display Modal, inject Lightning Component, pass appropriate parameters

Page 23: Best Practices for Lightning Apps

Lightning Utility Bar

Page 24: Best Practices for Lightning Apps

Utility Bar OverviewAlways availableUnique per appFlexipage containing a number of Lightning

Components – Standard or customCustomisable via UI (Spring ‘17)Component Properties:

Height + Width Icon + Label Background Load

Page 25: Best Practices for Lightning Apps

Dynamic Content in the Utility Bar

<c:UtilityBarMenu/> UtilityBarController

UtilityBarConfig__c

Menu Metadata

Handles c:PageChanged events

<c:CardListView/>

<c:PageChanged/>Application Event

On click

Containing e.g. help button

Page 26: Best Practices for Lightning Apps

Designing for Performance

Page 27: Best Practices for Lightning Apps

SOQL Queries LimitTypical of chatty custom Experience ComponentsCause:

Calls to server on init are aggregated into same Apex transactionMitigation:

Use Lightning Data Service when possible Use cached data (for static data/metadata) Leverage Custom Metadata Types

Do not count against SOQL Limits Use setBackground() on calls to server

Calls processed separately, designed for lower priority calls but generally processed quickly

Chain component loading by groups Last component to load in a group fires application event to load 2nd group – and

so on

Page 28: Best Practices for Lightning Apps

Performance Best PracticesEnable Secure Cache and LockerServiceDisable Lightning Components debuggingUse Lightning Data Service when possibleLazy load when appropriate

Load data upon user intervention (e.g. click) Pre-load when possible

Load data in background (especially static data)Use setStorable() on calls to server

Local cache provides recent copy of data. Separate call to server takes place to obtain refreshed copy

Implement data store for metadata/data that remains static

Page 29: Best Practices for Lightning Apps

Demo

Page 30: Best Practices for Lightning Apps

New York CityDecember 15, 2016

Join us at theSalesforce World Tour

http://www.salesforce.com/events/worldtour/nyc/

Page 31: Best Practices for Lightning Apps

SurveyYour feedback is crucial to the successof our webinar programs. Thank you!

http://bit.ly/BestLightning

Page 32: Best Practices for Lightning Apps

Q & A

Try Trailhead: trailhead.salesforce.comJoin the conversation: @salesforcedevs

Page 33: Best Practices for Lightning Apps

Thank You