Lightning Chess at the Sri Sanka Salesforce Developer Group
1 like565 views
The document details a presentation by Samuel De Rycke on the Lightning Chess application built using the Salesforce Lightning Component Framework. It covers architecture, component encapsulation, event-driven approach, and practical coding examples, emphasizing principles like 'single responsibility' and 'loose communication through events.' The presentation also includes a demo of the application and provides resources for further exploration.
![Lightning Chess: Streaming API Listener
<aura:component>
<!-- public interface -->
<aura:attribute name=”listeners” type=”String[]” access=”public”/>
<aura:registerEvent name=”StreamingEvent” type=”c:StreamingEvent” />
<!-- private interface -->
<ltng:require scripts="<!--Required scripts -->" afterScriptsLoaded="{!c.setupStreaming}" />
<aura:attribute name="sessionId" type="String" access="private"/>
<aura:handler name="destroy" value="{!this}" action="{!c.closeConnections}"/>
</aura:component>
12](https://image.slidesharecdn.com/lightningchesssrilanka-161209083426/85/Lightning-Chess-at-the-Sri-Sanka-Salesforce-Developer-Group-12-320.jpg)
Lightning Chess at the Sri Sanka Salesforce Developer Group
- 1. Lightning Chess The fun way of learning the Lightning Component Framework Sri Lanka Salesforce Developer Group 2016-12-8 #SFLightningChess #SalesforceDevs 1
- 2. Who am I? 2 Samuel De Rycke Technical Architect Talent Management 4.5 years SF experience Salesforce MVP Belgium User Group Leader Belgium Developer Group Leader Salesforce.Stackexchange Moderator Dreamforce Speaker }ABSI @SamuelDeRycke Implementation Partner @absi_nv
- 3. Agenda ● Demo ● Lightning Component Framework ● Component Encapsulation ● Lightning Chess: Component Composition ● Event Driven Architecture ● Lightning Chess: Event Driven approach ● Let’s code it ● Q&A 3
- 4. Lightning Chess ● R&D project ● Effort: 40 hours + rework ● Chess application on the Salesforce Platform ● Realtime multiplayer game ● Built using Lightning Component framework Lightning what?! 4
- 5. Application Architecture Streaming API Custom Objects Apex Controllers Lightning Chess Player ClientsLightning Chess Player Clients ServerCall Subscribe Updates Salesforce Platform 5
- 6. Time for a demo Demo: Lightning Chess 6
- 7. Lightning Component Framework ● Lightning Application ● Lightning Components ● Lightning Events The Fundamentals 7
- 8. Component Bundle Lightning Component Component Bundle Component < markup /> Style CSS Renderer Javascript Controller Javascript Helper Javascript Design < markup /> Documentation < markup /> SVG File 8
- 9. Component Encapsulation ● Object Oriented Programming principles ● Internals are not exposed to the outside ● Public vs Private interface What happens in the component, stays in the component Component Public: ● Public Attributes ● Public Methods ● Events Private: ● HTML DOM ● CSS Style ● Private Attributes ● Controller Functions ● Helper Functions ● Apex Controller 9
- 10. Component Encapsulation ● Easy to reuse Use them in different applications or other components making use of a component’s public interface ● Open for extension Extend the functionality of a component without impacting other components. Less bugs. ● Independent A component does not rely on its consumers but on its public interface to function. This makes it easy to use a component in any system or application. ● Compact Separation of Concerns will lead to code that is small and easy to maintain, debug and test. Components can be: “Think Component Encapsulation“ 10
- 11. Lightning Chess: Component Architecture Divide and conquer Streaming API Listener General Game Component Chessboard Chessboard Location Streaming API Listener Player List Challenge List Streaming API Listener Streaming API Listener Subscribe to streaming API and forward streaming event messages Streaming API Listener 11
- 12. Lightning Chess: Streaming API Listener <aura:component> <!-- public interface --> <aura:attribute name=”listeners” type=”String[]” access=”public”/> <aura:registerEvent name=”StreamingEvent” type=”c:StreamingEvent” /> <!-- private interface --> <ltng:require scripts="<!--Required scripts -->" afterScriptsLoaded="{!c.setupStreaming}" /> <aura:attribute name="sessionId" type="String" access="private"/> <aura:handler name="destroy" value="{!this}" action="{!c.closeConnections}"/> </aura:component> 12
- 13. Lightning Chess: Component Architecture Mistakes were made Chessboard Chessboard Location Streaming API Listener Player List Challenge List Streaming API Listener Streaming API ListenerChessboard has too much responsibility. What if we want to extend and allow users to choose what game they want to play? “Single Responsibility“ 13
- 14. Lightning Chess: Component architecture Mistakes were made Streaming API Listener General Game Component Chessboard Chessboard Location Streaming API Listener Player List Challenge List Streaming API Listener Streaming API Listener Streaming API Listener 14 “Single Responsibility“
- 15. Event Driven Architecture Event types <aura:event type=”Component” description=”Chessboard_Location_Select”> <aura:attribute name=”location” type=”Object” /> </aura:event> 15 Component Event Application Event Send only to components in the parent hierarchy above Broadcast to the entire Lighting Application. Tighter coupling between sender and receivers Very loose coupling between sender and receivers
- 16. Event Driven Architecture ● Part of the public interface ● “Something happened, I don’t know what to do, so do whatever you like!” Loosely coupled communication <aura:component description=”Chessboard_Location”> <!-- Chessboard Location Component Definition --> !-- Public Interface--> <aura:registerEvent name=”select” type=”c:Chessboard_Location_Select” /> </aura:component> <aura:component description=”Chessboard”> <!-- Chessboard component Definition --> <!-- Chessboard has a Chessboard Location component and subscribes a handler to the select component event--> <c:Chessboard_Location select=”{!c.handleLocationSelect}” /> </aura:component> 16
- 17. Lightning Chess: Event Driven Approach Communication is key Chessboard Chessboard Location Streaming API Listener Chess Logic Server Call I am selected as a starting location I am selected as a target location Locations x,y please mark yourself as targetable I received a new move with following details Following piece moved from x to y Click Click “Loose communication through Events“ 17
- 18. Let’s Code ! Extend the Chessboard Location component by adding drag-and-drop support. 18
- 19. Summary Takeaways “Think Component Encapsulation“ “Single Responsibility“ “Loose communication through Events“ 19
- 20. Resources Code @ Github! http://bit.ly/LightningChess-Code Read more about Lightning Chess Architecture: http://bit.ly/LightningChess-Blog 20
- 21. Questions ? Reach me on twitter @SamuelDeRycke #SFLightningChess 21
- 22. thank y u 22