Building apps faster with lightning and winter '17


Published on

With the Lightning Framework you can build modern apps faster and run them across all your devices. With the Winter ’17 Release, we’ve delivered a number of enhancements to Lightning to help you build even faster including new Lightning Base Components and Lightning Data Services. Learn about these important new features and more in this must-attend webinar.

- Accessing data more easily and efficiently with the new Lightning Data Service
- Building Lightning Components faster with new Lightning Base Components
- Developing more interactive experiences with new Lightning Quick Actions and the Utility Bar

Published in: Software
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building apps faster with lightning and winter '17

  1. 1. Forward-Looking Statement 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, 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- products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of, 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., inc. assumes no obligation and does not intend to update these forward-looking statements.
  2. 2. 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
  3. 3. § 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 will work their way down the queue. § Stick around for live Q&A at the end – Speakers will tackle questions at the end, time-allowing. § Head to Developer Forums – More questions? Visit Have Questions?
  4. 4. Base Lightning Components
  5. 5. How can my app look like this?
  6. 6. Can I use the CSS in my app?
  7. 7. Can you make it easier?
  8. 8. Base Lightning Component Goals  Easy to adopt • Patterned after HTML standards making it easy to adopt.  Componentized • Components are self contained and can be composed to build experience components  Minimal CSS • Styled using the Salesforce Lightning Design System (SLDS), ensuring that your components match the Lightning Experience and Salesforce1 Mobile seamlessly • They evolve with SLDS  Accessible by design: Supporting WCAG 2.0 and Section 508 standards
  9. 9.  Facilitate reusability over all other principles  Start with restrictive shape and relax on request  Optimize for best practices and make bad practice harder to implement  Develop components for the 80% Base Lightning Component Philosophy Base Lightning Components
  10. 10. Most Used/Requested Components
  11. 11. Styling Is Baked In  Buttons  Icons  Badges  Inputs
  12. 12. Simple Markup  Buttons  Icons  Badges  Inputs <lightning:button … /> <lightning:icon … /> <lightning:input type="number" … /> <lightning:select … />
  13. 13. Base Lightning Components in Winter ‘17  icon  button  buttonGroup  buttonIcon  buttonMenu  input  badge  formattedNumber  formattedDateTime  menuItem  select  spinner  textarea
  14. 14. Button Patterns <lightning:buttonGroup> <lightning:button … /> <lightning:button … /> <lightning:button … /> <lightning:buttonMenu … > <lightning:menuItem … /> <lightning:menuItem … /> <lightning:menuItem … /> </lightning:buttonMenu> </lightning:buttonGroup>
  15. 15. Container and Layout Components  Tabset & Tab  Card  Layout & layoutItem <lightning:card footer="Card Footer” iconName="utility:location" title=“My Card Header"> <aura:set attribute="actions"> <lightning:button label="New"/> </aura:set> Card Body (custom component) </lightning:card>
  16. 16. Component Structure and Variants <lightning:button variant="brand" ../> <lightning:button variant=“destructive" label="Delete" onclick="{!c.handler}" class="myClass"/>
  17. 17. Salesforce Lightning Design System  CSS framework • Open sourced, faster development  Consistent User Experience • Across different apps and devices  Seamless upgrades every release • Easy migration path across releases
  18. 18. Evolving In Step With SLDS
  19. 19. 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
  20. 20. Demo
  21. 21. Christophe Coenraets @ccoenraets Lightning Data Service
  22. 22. Components Drive Modern UI Experiences
  23. 23. Before Lightning Data Service Property Status Property Map Mortgage Calculator Property Controller - getProperty getProperty(abc) getProperty(abc) getProperty(abc) Client Server
  24. 24. Challenges 1. Multiple calls to the server for the same record 2. Code-centric – Javascript at the client-side – Apex at the server-side (including CRUD and FLS enforcement) 3. UI inconsistencies – Each component has its own copy of the data – Changes made in one component are not reflected in other components
  25. 25. Introducing Lightning Data Service • Declarative CRUD operations • No Apex • No SOQL • Limited Javascript (Edit mode only) • Handles sharing rules and field level security • Shared record cache
  26. 26. Lightning Data Service Property Status Property Map Mortgage Calculator Client Server Shared Record Cache <force:record recordId="abc"/> <force:record recordId="abc"/> <force:record recordId="abc"/>
  27. 27. Example <aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes" access="global"> <aura:attribute name="recordId" type="Id" /> <aura:attribute name="property" type="Property__c" /> <force:recordPreview recordId="{!v.recordId}" targetRecord="{!}" fields="['Id', 'Status__c']" /> {!} </aura:component>
  28. 28. Example 2: EDIT mode <aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes" access="global"> <aura:attribute name="recordId" type="Id" /> <aura:attribute name="property" type="Property__c" /> <force:recordPreview aura:id="propertyService" recordId="{!v.recordId}" targetRecord="{!}" fields="['Id', 'Status__c']" mode="EDIT"/> <ui:inputText label="Status:" value="{!}"/> <lightning:button onclick="{!c.onSaveClicked}">Save</lightning:button> </aura:component>
  29. 29. Saving the Record onSaveClicked : function(component) { component.find("propertyService").saveRecord(); }
  30. 30. Synching Records in Edit Mode <aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes" access="global"> <aura:attribute name="recordId" type="Id" /> <aura:attribute name="property" type="Property__c" /> <force:recordPreview aura:id="propertyService" recordId="{!v.recordId}" targetRecord="{!}" fields="['Id', 'Status__c']" mode="EDIT" recordUpdated="{!c.onRecordUpdated}"/> <ui:inputText label="Status:" value="{!}"/> <lightning:button onclick="{!c.onSaveClicked}">Save</lightning:button> </aura:component>
  31. 31. Reloading the Record onRecordUpdated : function(component, event, helper) { var changeType = event.getParams().changeType; if (changeType === "CHANGED") { component.find("propertyService").reloadRecord(); } }
  32. 32. Summary Without Lightning Data Service With Lightning Data Service Code-centric (Apex, SOQL, FLS, Javascript) Declarative (no code) Components make multiple calls to the server for the same record Components get record from local record cache which manages server access transparently and efficiently Each component has its own copy of the record Components share a single copy of the record
  33. 33.
  34. 34. Survey Your feedback is crucial to the success of our webinar programs. Thank you! A copy of the webinar and the survey will be emailed to all who registered.
  35. 35. Q & A Also try our discussion boards Try Trailhead: Join the conversation: @salesforcedevs
  36. 36. Thank You