Introduction to architecting applications with the Salesforce Lightning Component Framework in a fun way, using a multiplayer chess game and example application.

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