build faster with base lightning components

21
Build Faster with Base Lightning Components

Upload: salesforce-developers

Post on 21-Jan-2018

3.579 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Build Faster with Base Lightning Components

Build Faster with Base

Lightning Components

Page 2: Build Faster with Base Lightning Components

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: Build Faster with Base Lightning Components

Go Social!

Salesforce Developers

Salesforce Developers

Salesforce Developers

The video will be posted to YouTube & the

webinar recap page (same URL as registration).This webinar is being recorded!

@salesforcedevs / #forcewebinar

Page 4: Build Faster with Base Lightning Components

Agenda

• Components & UI Application Layer

• Component Development

• Piecing it all together

• CODE DEMO

• Component Roadmap

Page 5: Build Faster with Base Lightning Components

TRUST

SHARED SERVICE

& TOOLS

DATA & EVENTS

FORCE.COM

APEX RUNTIMEAPPLICATION LAYER

Framework

Testing

Instrumentation

SLDS

Navigation

Offline

Accessibility

Locker

Data

EXPERIENCE

COMPONENTS

Salesforce Platform for Sales, Service, Communities and Force

BASE

COMPONENTS

Page 6: Build Faster with Base Lightning Components

What is the Application layer?

The layer for creating and

customizing CRM

applications on desktop &

mobile for Sales, Service and

Force.

THIS IS HOW WE BUILD

APPLICATIONS BOTH INTERNALLY

AND EXTERNALLY

Page 7: Build Faster with Base Lightning Components

Components are the building blocks of all Lightning UI

Base ComponentsThe basic building blocks, accessible to

developers through code

Input Button

Badge Avatar Icon Spinner

Tabset and Tab

Experience ComponentsComposed of Base Components, integrated

component accessible via the App Builder

ButtonButton

Icons

Tabs

Input Rich Text

Page 8: Build Faster with Base Lightning Components

Lightning pages are made of experience components

Activity

Timeline

Publisher

Tabs

Highlights

Panel

Sales Path

News

Page 9: Build Faster with Base Lightning Components

Lightning Experience is made up of Lightning Pages

Home

Opportunity

Home

Account

Home

Page 10: Build Faster with Base Lightning Components

App Builder to Drag & Drop Components

• Customize Lightning Pages

with custom components

• Build Apps with sets of

components

• Customize pages by

– Record Type

– Profile

– App

Page 11: Build Faster with Base Lightning Components

Component Development

Page 12: Build Faster with Base Lightning Components

Component Bundle

• .cmp: component markup

• .js: client-side controller

• helper.js: shared functions

• .css: component styles

• .auradoc: component documentation

• .design: app builder config

• .svg: custom icon

• renderer.js: override renderer

Page 13: Build Faster with Base Lightning Components

Lightning Design System

Consistent User Experience

Salesforce style guides and modern enterprise design

patterns

Auto Styling Updates

Easy migration path with Design Tokens versioned for

each release

Open, Reusable, Fast

Open source framework and reusable HTML code base to

build apps in record time

Page 14: Build Faster with Base Lightning Components

Development Tools

Dev console Sublime Force IDE

Page 15: Build Faster with Base Lightning Components

$ slides.stop()

$ console.log( ‘LET\’S CODE’ )

Page 16: Build Faster with Base Lightning Components

Component Roadmap

Winter ‘18

Page 17: Build Faster with Base Lightning Components

lightning:formattedText

lightning:formattedUrl

lightning:helpText

lightning:input type='color' (color picker)

lightning:inputLocation

lightning:outputField

lightning:path

lightning:picklistPath

lightning:progressBar

lightning:progressIndicator

lightning:radioGroup

lightning:slider

lightning:tree

lightning:verticalNavigation

lightning:verticalNavigationItem

lightning:verticalNavigationItemBadge

lightning:verticalNavigationItemIcon

lightning:verticalNavigationOverflow

lightning:verticalNavigationSection

Base Components:

lightning:accordion

lightning:accordionSection

lightning:buttonIconStateful

lightning:checkboxGroup

lightning:clickToDial

lightning:comboBox

lightning:dataTable

lightning:dualListBox

lightning:dynamicIcon

lightning:fileCard

lightning:fileUpload

lightning:flexipageRegionInfo

lightning:flow

lightning:formattedEmail

lightning:formattedLocation

lightning:formattedPhone

lightning:formattedRichText

Component Roadmap

Winter ‘18

Component Libraries:

lightning:notificationsLibrary

lightning:overlayLibrary

45%

component increase!

Page 18: Build Faster with Base Lightning Components
Page 19: Build Faster with Base Lightning Components

SurveyYour feedback is crucial to the success of our

webinar programs. Please fill out the survey at

the end of the webinar. Thank you!

Page 20: Build Faster with Base Lightning Components

Q & ATry Trailhead: trailhead.salesforce.com

Join the conversation: @salesforcedevs

Page 21: Build Faster with Base Lightning Components