10 commandments for writing spiffy Lightning Apps

10 Commandments for writing spiffy Lightning Apps

Anup Jadhav Technical Architect & Force.com MVP [email protected] @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


Lightning Components created according to W3C spec

follows the Web Content Accessibility Guidelines (WCAG)


Some tips to make your component accessible:Set the label attribute when its available

ui:buttonui:menuui:inputTextui:inputDate

TIPS


Use the ariaDescribedby attribute to associate the help text or error message with a particular field

TIPS


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


Components don’t automatically enforce CRUD / FLS Manually enforce CRUD & FLS in your apex controller

FLS / CRUD check


CHECK FLS/CRUD in Apex


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


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


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


Review the warning messages logged by the framework

TIPS


Use Unbound expression instead of Bound expression

Bound Expression – {!expression}

UnBound Expression – {#expression}

TIPS


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


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

[email protected] @anup

Remember to tell us what you think in the event survey www.LondonsCalling.net/survey/

10 commandments for writing spiffy Lightning Apps

Software

Transcript of 10 commandments for writing spiffy Lightning Apps