Post on 17-Feb-2017
10 Commandments for writing spiffy Lightning Apps
Anup Jadhav Technical Architect & Force.com MVP anup.jadhav@gmail.com @anup
COMMANDMENT 1
LEARN JAVASCRIPT
LEARN JAVASCRIPT DO YOU GROK THESE CONCEPTS?
Immediately Invoked Function Expression ( IIFE pronounced iffy )
ClosuresPrototypal InheritanceVariable HoistingPromises
LEARN JAVASCRIPT START WITH BASICS
RESOURCESMozilla Developer Network (MDN) javascript tutorial
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
Eloquent Javascript, Second Edition (http://eloquentjavascript.net/)
You Don’t Know JS by Kyle Simpson (https://github.com/getify/You-Dont-Know-JS)
Read JavaScript code written by front-end developers
COMMANDMENT 2
FORGET MVC
FORGET MVC
Lightning framework follows a variation of MVCThink in terms of View-Controller-Controller-Model
(quite similar to MVVM pattern)Lightning Component / App Bundle
Client-side component (View)Client side JavaScript Controller (& helper)Server side Apex ControllerServer side Model (sObjects)
COMMANDMENT 3
SUPPORT ACCESSIBILITY
SUPPORT ACCESSIBILITY
Lightning Components created according to W3C spec
follows the Web Content Accessibility Guidelines (WCAG)
SUPPORT ACCESSIBILITY
Some tips to make your component accessible:Set the label attribute when its available
ui:buttonui:menuui:inputTextui:inputDate
TIPS
SUPPORT ACCESSIBILITY
Use the ariaDescribedby attribute to associate the help text or error message with a particular field
TIPS
SUPPORT ACCESSIBILITY
Some tips to make your component accessible (continued…) Convey audio notifications using ui:message
component
Consider attaching onclick event to elements that are actionable in HTML by default <a>, <button>, or <input>
COMMANDMENT 4
UNDERSTAND EVENT PROPOGATION
EVENT PROPOGATION
Component EventsFired from an instance of the
componentHandled by component itself
or by component in the “containment” hierarchy
Supports capture & bubble (default) phase
Application EventsFollow a traditional publish-
subscribe modelAll components that provide a
handler are notifiedSupports capture, bubble,
and default phase
EVENT PROPOGATION
BEST PRACTICE
Always (try) to use component event instead of an Application event
Don’t fire an event in a Renderer (anti-pattern) Separate low-level events from business logic
events Use a dispatcher component to listen and relay
events
COMMANDMENT 5
PREFER SLDS OVER OTHER CSS FRAMEWORKS
SALESFORCE LIGHTNING DESIGN SYSTEM
SLDS FRAMEWORK is composed of: semantic and accessible component markup cross-browser compatible CSS icons, fonts, and (Lightning UX) design principles
WHAT IS IT?
SALESFORCE LIGHTNING DESIGN SYSTEM
Matches Lightning Experience (LEx) UI Follows modern design standards and best practice Actively maintained by Salesforce UX team Styles your component to be more accessible Makes your component & app responsive
WHY WOULD YOU WANT TO USE IT?
COMMANDMENT 6
USE BASE LIGHTNING COMPONENTS
BASE LIGHTNING COMPONENTS
Introduced in Winter ‘17 release Incorporates SLDS markup and classes Handles the details of HTML & CSS
Button
Select
Tabs
Input
Rich Text Area
Text Area
Avatar
Badge
Spinner
Icon
BASE LIGHTNING COMPONENTS
Easy to adopt, patterned after HTML standards
Styled using SLDS (minimal CSS) Better performance Supports Accessibility (WCAG 2.0 & Section
508 standards) Streamlines Lightning Development
WHY WOULD YOU WANT TO USE IT?
COMMANDMENT 7
SECURE YOUR COMPONENTS
SECURE YOUR COMPONENTS
Components don’t automatically enforce CRUD / FLS Manually enforce CRUD & FLS in your apex controller
FLS / CRUD check
SECURE YOUR COMPONENTS
CHECK FLS/CRUD in Apex
SECURE YOUR COMPONENTS
Content Security Policy – to control the source of content that can be loaded on a page All JS libraries should be uploaded as static
resources All external fonts, images, frames & CSS must use
HTTPS CSP isn’t enforced by all browsers (caniuse.com)
Content Security Policy
SECURE YOUR COMPONENTS
Locker Service is your friend Tightens CSP to eliminate the possibility of XSS attacks Disallows the unsafe-inline and unsafe-eval keywords for
inline scripts Enforces EcmaScript 5 strict mode DOM access Containment Restriction to Global references Access to supported JavaScript API framework methods
only Activated for all orgs in the Summer ’17 release
LOCKER SERVICE
SECURE YOUR COMPONENTS
Use Salesforce Lightning CLI to validate your code for use within the Locker Service Architecture
Install CLI
LIGHTNING CLI
SECURE YOUR COMPONENTS LIGHTNING CLI
Run CLI:
COMMANDMENT 8
AVOID PERFORMANCE BOTTLENECKS
LIGHTNING COMPONENT PERFORMANCE
Don’t use <aura:if> to toggle markup visibility hurts performance by creating a large
number of components leads to cluttered markup that is harder to
maintain Use CSS instead
TIPS
LIGHTNING COMPONENT PERFORMANCE
Review the warning messages logged by the framework
TIPS
LIGHTNING COMPONENT PERFORMANCE
Use Unbound expression instead of Bound expression
Bound Expression – {!expression}
UnBound Expression – {#expression}
TIPS
LIGHTNING COMPONENT PERFORMANCE
Avoid looping in the markup (if possible) Loop in the JavaScript or Apex controller
Use AppCache to speed up response time disabled by default set useAppCache=“true” attribute in the aura:application
tag cache manifest is auto-generated at runtime switch it off during dev
TIPS
LIGHTNING COMPONENT PERFORMANCE
Install the Salesforce Lightning Inspector (chrome) extension
Review the Performance Tab in the Lightning Inspector (chrome extension)
TIPS
COMMANDMENT 9
ERROR HANDLING
ERROR HANDLING
Easy to write erroneous code in JavaScript Type errors and typos that fail silently System errors due to insufficient input validation
Best practice Use try-catch in your controller and helper Validate your input Show user friendly error messages Log actual errors in browser dev console
ERROR HANDLING
TRY - CATCH BEST PRACTICE
ERROR HANDLING
VALIDATE YOUR INPUT BEST PRACTICE
COMMANDMENT 10
UNIT TEST JAVASCRIPT CODE
TESTING JAVASCRIPT CODE
Platform enforces Apex code coverage No requirement to unit test JS code to deploy
Why unit test JavaScript ? 60% plus code will be in JS Improves code quality Catch bugs early during Dev Ensure correctness
TESTING JAVASCRIPT CODE
How do I test Lightning Components? Salesforce has plans to release a testing framework
(safe-harbour) Greased tool – by Steve Buikhuizen
basically a Selenium test written in Lightning flavored JavaScript.
the test scripts are built using chains of Promises. End to end testing for Lightning Components
Use JS test framework like Jasmine or Q-unit (talk by @Bob_Buzzard)
Thank You
Anup Jadhav Technical Architect / Force.com MVP
anup.jadhav@gmail.com @anup
Remember to tell us what you think in the event survey www.LondonsCalling.net/survey/