This document summarizes a presentation about building a Lightning Chess application using Lightning Components. It includes: 1) A demo of the Lightning Chess application built using several Lightning Components like the Chessboard Component and Chessboard Location Component that communicate through events. 2) An overview of the Lightning Component framework and how components are made up of markup, controllers, helpers, styles and renderers. 3) Details on how the Chess application components like the Chessboard Component were built to manage the chessboard state through attributes and handle events to update locations. 4) How the components communicate through events, both component and application events, and how Apex controllers can be used to call Apex

1. Code your own Lightning
Components
Including Lightning Chess
Amsterdam World Tour - April 14th 2016

2. Lieven Juwet
• Developer @ ABSI
• @LievenJuwet

3. Samuel De Rycke
• Technical Solution Architect @ ABSI
• Salesforce MVP
• Co-Leader BE User Group
• @SamuelDeRycke

4. #SalesforceDevs
#SalesforceTour
#Lightning

5. Agenda
• Chess demo
• Lightning component framework
• Lightning components
• Communication between components
• Calling Apex

6. Demo: Lightning Chess

7. Lightning Component Framework
• Javascript/HTML5/CSS3 client
• Databinding & UI Rendering
• Stateful client & Stateless server
• Improved performance
• Component Encapsulation
• Event-driven approach

8. Lightning Component Framework
● Lightning Application
● Lightning Component
● Lightning Event

9. Lightning Component
• A Component bundle can contain multiple elements
• Component: UI Markup
• Controller
• Helper
• Style
• Renderer
Component Bundle
With each component comes its own responsibility!
Component Controller HelperStyle
Renderer
Apex
Controller

10. Chess Components
• Main_Game_Component
• Manage any type of game.
• Chessboard_Component
• Manage the state of the chessboard by handling location and streaming events + chess logic
• Chessboard_Location_Component
• Handle action events and render the correct state of his location.
• Player_List_Component
• Manage and display the online players and issue challenges.
• Challenge_List_Component
• Manage incoming challenges
• Streaming_API_Component
• Subscribe to PushTopics and convert streaming events into lightning events

11. Lightning Component
Chessboard Component markup
<!-- Chessboard Component -->
<aura:component controller='ChessGameController' extends="c:Abstract_Game" >
<!-- Set Attributes -->
<aura:attribute type="Array" name="locations"></aura:attribute>
<!-- Set Event Listeners -->
<aura:handler event="c:StreamingEvent" action="{!c.handleStreamingEvent}"/>
<aura:handler event="c:Promotion_Complete" action="{!c.handlePromotion}"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<!-- Set Event thrown -->
<aura:registerEvent name="LocationAction" type="c:LocationAction"/>
<aura:iteration var="row" items="{!v.locations}">
<aura:iteration var="location" items="{!row}">
<c:ChessBoardLocation location="{!location}" click="{!c.handleLocationClick}" />
</aura:iteration>
</aura:iteration>
</aura:component>

12. Lightning Component
• Declare the attribute components
• Attribute values are stored on the value provider (v)
• Access and set the values in Javascript
• Set by parent components
• Define access: Global, Public, Private
• Use them to bind your data to HTML/Components
Component Attributes
<aura:attribute name=”locations” type=”Array”></aura:attribute>
<aura:iteration var="row" items="{!v.locations}">

13. Lightning Component
• Locations updated by issuing component.set(‘v.locations’,newLocations)
• Re-render both iterations
• 64 new components created each time
• Move render responsibility from a central point for many components (heavy) to components
individually.
Component rendering/re-rendering
<aura:iteration var="row" items="{!v.locations}">
<aura:iteration var="location" items="{!row}">
<c:ChessBoardLocation location="{!location}" click="{!c.handleLocationClick}" />
</aura:iteration>
</aura:iteration>

14. Lightning Chess: Event driven approach
<!-- Chessboard Component -->
<aura:component controller='ChessGameController' extends="c:Abstract_Game" >
...
<!-- Set Event Listeners -->
<aura:handler event="c:StreamingEvent" action="{!c.handleStreamingEvent}"/>
<aura:handler event="c:Promotion_Complete" action="{!c.handlePromotion}"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<!-- Set Event thrown -->
<aura:registerEvent name="LocationAction" type="c:LocationAction"/>
...
</aura:component>

15. Lightning Chess: Component Communication
Chessboard
Chessboard Location
x64
Location Clicked
Location Action
Chess Logic

16. Event driven approach: Benefits
• Each component has its own responsibility
• Loose coupling
• Chessboard does not know who receives the event and what it does.
• Location doesn’t know the subscriber and doesn’t know what happens
• Subscribe more components to these events
• Example: Overview of fallen pieces
• Reusability of components
• Example: History of chess games

17. Component Controller
Component Controller
• Contains Javascript functions
• Bind controller functions in the component markup
• Access component attributes in the controller

18. Component Controller
• Contains the Javascript functions
• Bind controller functions in the component markup
• Access component attributes in the controller
<div … onclick=”{!c.handleLocationClick}”>
…
</div>

19. Component Controller
• Obtain and update component attribute values
• Send out new events
• Make a server call
handleLocationClick : function(cmp,event,helper){
var location = cmp.get(‘v.location’);
var e = cmp.getEvent(‘click’);
e.setParams({‘location’ : location});
e.fire();
}

20. Communication with Events
2 types of events
• Component event
• Parent component can register a handler function directly
• Send upwards in the component hierarchy through event bubbling
• Application Event
• Functions as a broadcast.
• All components in the application can register a handler

21. Component Event <aura:event type="COMPONENT">
<aura:attribute name="location" type="Object" />
</aura:event>
<aura:registerEvent name="click" type="c:ChessboardLocationClicked"/>
var e = cmp.getEvent('click'); e.setParams({'location':location}); e.fire();
<aura:handler name="click" event="c:ChessboardLocationClicked" action="{!c.handleLocationClick}"/>
<c:ChessBoardLocation location="{!location}" click="{!c.handleLocationClick}" />

22. Application Event <aura:event type="APPLICATION">
<aura:attribute name="payload" type="Object"/>
<aura:attribute name="actionType" type="String"/>
</aura:event>
<aura:registerEvent name="LocationAction" type="c:LocationAction"/>
var e = $A.get('e.c:LocationAction');
e.setParams({'payload':{'locations':possibleLocations},'actionType':'setSelectable'});
e.fire();
<aura:handler event="c:LocationAction" action="{!c.handleActionEvent}"/>

23. Component Helper: sharing functionality
• Each component can have helper functions
• Contains functions that are used on multiple locations in the controller
• Avoid duplicate code!
Component Controller Helper

24. Component style
• Component CSS is encapsulated
Component Controller HelperStyle

25. Component style

26. Component renderer
Perform your DOM manipulations in the render/re-render functions
Component Controller HelperStyle
Renderer

27. Component renderer

28. Calling Apex
Component Controller HelperStyle
Renderer Apex Controller

29. Calling Apex
Use AuraEnabled methods retrieve/send data to the server
Link the APEX controller to the component
public class ChessboardController{
@AuraEnabled
public static Object getBoardPieces(Id game) {
return [select Active__c,Piece_Color__c, … from ChessPiece__c where
Chessboard__c = :game];
}
}
<aura:component controller=”ChessboardController”> … </aura:component>

30. Calling Apex
var action = cmp.get(‘c.getBoardPieces’);
action.setParams( {‘game’:chessboard.Id});
action.setCallback(this,function(response)
{
if(!cmp.isValid())
return
if(response.getState() == ‘SUCCESS’)
{
//Handle the response
}
}
$A.enqueueAction(action);
if

31. Overview
• Chess demo
• Lightning component framework
• Lightning components
• Communication between components
• Calling Apex

33. Go to Developer User Groups!
Belgium: http://bit.ly/1Xqlu5p
The Netherlands: http://bit.ly/1Sbdzuo

34. thank y uQuestions?

35. thank y u