Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Advanced Designs for
Reusable Lightning
Components
Take your front-end development skills to the next level
tom.waud@westb...
Agenda
Introducing the Scheduler Component
Composition using Facets
Event Bubbling and dynamic creation of Event Handlers
...
Introducing the Scheduler Component
● Add a new job
● Schedule a job
● Abort a scheduled job
● Delete a job
● Edit an exis...
Cron Expressions
“The origin of the name cron is from the Greek word for time, χρόνος”
Format
Seconds Minutes Hours Day_of...
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 ...
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-...
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 i...
Dynamic creation of Lightning Components
● Contains one or more
Tabs
● Maintain styling to
indicate Tab focus
● Fire TabFo...
Dynamic creation of Lightning Components
Dynamic creation of Lightning Components
EditScheduledJob Component
Dynamic creation of Lightning Components
EditScheduledJob Component
Dynamic creation of Lightning Components
EditScheduledJob Component
Dynamic creation of Lightning Components
EditScheduledJob Component
Dynamic creation of Lightning Components
aura:dependency
Dynamic creation of Lightning Components
“When a component event is
fired, the component that fired
the event can handle i...
Object Oriented Design with
Lightning Components
“The framework provides the basic constructs of inheritance and
encapsula...
Object Oriented Design with Lightning Components
Encapsulation
“The process of hiding a component’s attributes and methods...
Object Oriented Design with Lightning Components
● Global
Available in all namespaces.
● Public
Available within the same
...
Object Oriented Design with Lightning Components
Inheritance
Object Oriented Design with Lightning Components
Inheritance
Object Oriented Design with Lightning Components
Inheritance
Object Oriented Design with Lightning Components
Inheritance
Object Oriented Design with Lightning Components
Inheritance
Object Oriented Design with Lightning Components
● Attributes
● Events
● Helper Methods
● Controller Methods
(Not recommen...
Object Oriented Design with Lightning Components
● Attributes
● Events
● Helper Methods
● Controller Methods
(Not recommen...
Object Oriented Design with Lightning Components
● Attributes
● Events
● Helper Methods
● Controller Methods
(Not recommen...
Object Oriented Design with Lightning Components
● Attributes
● Events
● Helper Methods
● Controller Methods
(Not recommen...
What We Learned
Composition using Facets
Event Bubbling and dynamic creation of Event Handlers
Dynamic creation of Lightni...
Resources
Github:
https://github.com/AutomaTom/scheduler
Winter 17 Release Notes:
https://releasenotes.docs.salesforce.com...
Thank Y u
Prochain SlideShare
Chargement dans…5
×

Advanced designs for reusable lightning components

1 926 vues

Publié le

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

Publié dans : Technologie

Advanced designs for reusable lightning components

  1. 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. 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. 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. 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. 5. Demo
  6. 6. Composition using Facets “The act of combining parts or elements to form a whole”
  7. 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. 8. Composition Using Facets TabList Component A facet is any attribute of type Aura.Component[]
  9. 9. Composition Using Facets Tab Component
  10. 10. Composition Using Facets EditScheduledJob Component
  11. 11. Event Bubbling & Dynamic Creation of Event Handlers
  12. 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. 13. Event Bubbling and dynamic creation of Event Handlers Click
  14. 14. Event Bubbling and dynamic creation of Event Handlers c:TabList c:Tab Click c:Tab
  15. 15. Event Bubbling and dynamic creation of Event Handlers Propagating Component Events to All Container Components - Winter 17
  16. 16. Dynamic creation of Lightning Components “Refers to the creation of components at the moment they are needed rather than in advance”
  17. 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. 18. Dynamic creation of Lightning Components
  19. 19. Dynamic creation of Lightning Components EditScheduledJob Component
  20. 20. Dynamic creation of Lightning Components EditScheduledJob Component
  21. 21. Dynamic creation of Lightning Components EditScheduledJob Component
  22. 22. Dynamic creation of Lightning Components EditScheduledJob Component
  23. 23. Dynamic creation of Lightning Components aura:dependency
  24. 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. 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. 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. 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. 28. Object Oriented Design with Lightning Components Inheritance
  29. 29. Object Oriented Design with Lightning Components Inheritance
  30. 30. Object Oriented Design with Lightning Components Inheritance
  31. 31. Object Oriented Design with Lightning Components Inheritance
  32. 32. Object Oriented Design with Lightning Components Inheritance
  33. 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. 34. Object Oriented Design with Lightning Components ● Attributes ● Events ● Helper Methods ● Controller Methods (Not recommended) ● DOM Inheritance
  35. 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. 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. 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. 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. 39. Thank Y u

×