advanced designs for reusable lightning components

Advanced Designs for Reusable Lightning

ComponentsTake your front-end development skills to the next level

tom.waud@westbrook.co.uk@thomas_waud

Tom WaudChief Technical Architect

https://github.com/AutomaTom/scheduler

AgendaIntroducing the Scheduler Component

Composition using Facets

Event Bubbling and dynamic creation of Event Handlers

Dynamic creation of Lightning Components

Object Oriented Design with Lightning Components

1

2

3

4

5

Introducing the Scheduler Component

● Add a new job

● Schedule a job

● Abort a scheduled job

● Delete a job

● Edit an existing job

● Provide a UI to assist in the creation of the cron expression

Requirements

Cron Expressions “The origin of the name cron is from the Greek word for time, χρόνος”

FormatSeconds Minutes Hours Day_of_month Month Day_of_week optional_year

Examples

Demo

Composition using Facets“The act of combining parts or elements to form a whole”

Composition Using Facets

● Contains one or more Tabs

● Maintain styling to indicate Tab focus

● Fire TabFocus and TabBlur events

● Allow the parent component to specify the contents of the Tab panel

Requirements for a Tab List component

Composition Using Facets TabList Component A facet is any attribute of type

Aura.Component[]

Composition Using Facets Tab Component

Composition Using Facets EditScheduledJob Component

Event Bubbling & Dynamic Creation of Event Handlers

Event Bubbling and dynamic creation of Event Handlers

Application Events“Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.”

Component Events“A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the bubbled event.”

Event Bubbling and dynamic creation of Event Handlers

Click

Event Bubbling and dynamic creation of Event Handlers c:TabList c:Tab

Click

c:Tab

Event Bubbling and dynamic creation of Event Handlers Propagating Component Events to All Container Components - Winter 17

Dynamic creation of Lightning Components“Refers to the creation of components at the moment they are needed rather than in advance”

Dynamic creation of Lightning Components

● Contains one or more Tabs

● Maintain styling to indicate Tab focus

● Fire TabFocus and TabBlur events

● Allow the parent component to specify the contents of the Tab panel

Requirements for a Tab List component

Dynamic creation of Lightning Components

Dynamic creation of Lightning ComponentsEditScheduledJob Component

Dynamic creation of Lightning ComponentsEditScheduledJob Component

Dynamic creation of Lightning ComponentsEditScheduledJob Component

Dynamic creation of Lightning ComponentsEditScheduledJob Component

Dynamic creation of Lightning Componentsaura:dependency

Dynamic creation of Lightning Components

“When a component event is fired, the component that fired the event can handle it.”

“The event then bubbles up and can be handled by a component in the containment hierarchy.”

Component EventsChild

Parent

Fixed in Winter 17

Workaround in Summer 16

Object Oriented Design with Lightning Components“The framework provides the basic constructs of inheritance and encapsulation from object-oriented programming and applies them to presentation layer development”

Object Oriented Design with Lightning Components

Encapsulation“The process of hiding a component’s attributes and methods from consumers.”

Inheritance“A mechanism for code reuse whereby a component author can create a sub component that inherits the attributes and methods of a super component”

Object Oriented Design with Lightning Components

● GlobalAvailable in all namespaces.

● PublicAvailable within the same namespace. This is the default access value.

● PrivateAvailable within the component, app, interface, or event and can’t be referenced externally.

Encapsulation

Object Oriented Design with Lightning ComponentsInheritance

Object Oriented Design with Lightning ComponentsInheritance

Object Oriented Design with Lightning ComponentsInheritance

Object Oriented Design with Lightning ComponentsInheritance

Object Oriented Design with Lightning ComponentsInheritance

Object Oriented Design with Lightning Components

● Attributes

● Events

● Helper Methods

● Controller Methods (Not recommended)

● DOM

Inheritance

Helper methods on a super component are not currently accessible from the sub component without a workaround (Summer 16)You can’t access a private attribute from a sub-component that extends the component containing the private attribute.

Object Oriented Design with Lightning Components

● Attributes

● Events

● Helper Methods

● Controller Methods (Not recommended)

● DOM

Inheritance

Object Oriented Design with Lightning Components

● Attributes

● Events

● Helper Methods

● Controller Methods (Not recommended)

● DOM

Inheritance

Helper methods on a super component are not currently accessible from the sub component without a workaround (Summer 16)

Object Oriented Design with Lightning Components

● Attributes

● Events

● Helper Methods

● Controller Methods (Not recommended)

● DOM

Inheritance

You can’t access the super-component DOM from a sub-component that extends it.

What We LearnedComposition using Facets

Event Bubbling and dynamic creation of Event Handlers

Dynamic creation of Lightning Components

Object Oriented Design with Lightning Components

How Winter 17 is making Lightning Component Development even easier

1

2

3

4

5

ResourcesGithub: https://github.com/AutomaTom/scheduler

Winter 17 Release Notes: https://releasenotes.docs.salesforce.com/en-us/winter17/release-notes/salesforce_release_notes.htm

Trailhead:https://trailhead.salesforce.com/

Lightning Component Developer Guide:https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/

1

2

3

4

Thank Y u