Slides for the "Advanced designs for reusable lightning components" Dreamforce 16 presentation

1. Advanced Designs for
Reusable Lightning
Components
Take your front-end development skills to the next level
tom.waud@westbrook.co.uk
@thomas_waud
Tom Waud
​Chief Technical Architect
https://github.com/AutomaTom/scheduler

2. Agenda
Introducing 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

3. 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

4. Cron Expressions
“The origin of the name cron is from the Greek word for time, χρόνος”
Format
Seconds Minutes Hours Day_of_month Month Day_of_week optional_year
Examples

5. Demo

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

7. 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

8. Composition Using Facets
TabList Component A facet is any attribute of type
Aura.Component[]

9. Composition Using Facets
Tab Component

10. Composition Using Facets
EditScheduledJob Component

11. Event Bubbling & Dynamic
Creation of Event Handlers

12. 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.”

13. Event Bubbling and dynamic creation of Event Handlers
Click

14. Event Bubbling and dynamic creation of Event Handlers
c:TabList c:Tab
Click
c:Tab

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

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

17. 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

18. Dynamic creation of Lightning Components

19. Dynamic creation of Lightning Components
EditScheduledJob Component

20. Dynamic creation of Lightning Components
EditScheduledJob Component

21. Dynamic creation of Lightning Components
EditScheduledJob Component

22. Dynamic creation of Lightning Components
EditScheduledJob Component

23. Dynamic creation of Lightning Components
aura:dependency

24. 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 Events
Child
Parent
Fixed in Winter 17
Workaround in Summer 16

25. 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”

26. 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”

27. Object Oriented Design with Lightning Components
● Global
Available in all namespaces.
● Public
Available within the same
namespace. This is the default
access value.
● Private
Available within the component,
app, interface, or event and can’t
be referenced externally.
Encapsulation

28. Object Oriented Design with Lightning Components
Inheritance

29. Object Oriented Design with Lightning Components
Inheritance

30. Object Oriented Design with Lightning Components
Inheritance

31. Object Oriented Design with Lightning Components
Inheritance

32. Object Oriented Design with Lightning Components
Inheritance

33. 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.

34. Object Oriented Design with Lightning Components
● Attributes
● Events
● Helper Methods
● Controller Methods
(Not recommended)
● DOM
Inheritance

35. 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)

36. 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.

37. What We Learned
Composition 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

38. Resources
Github:
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

39. Thank Y u