Lightning chess

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

Lieven Juwet
• Developer @ ABSI
• @LievenJuwet

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

#SalesforceDevs
#SalesforceTour
#Lightning

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

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

Lightning Component Framework
● Lightning Application
● Lightning Component
● Lightning Event

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

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

Lightning Component
Chessboard Component markup

<aura:component controller='ChessGameController' extends="c:Abstract_Game" >

<aura:attribute type="Array" name="locations"></aura:attribute>

<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}" />

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

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>

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="location" items="{!row}">
</aura:iteration>
</aura:iteration>

Lightning Chess: Event driven approach

<aura:component controller='ChessGameController' extends="c:Abstract_Game" >
...

<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}" />

...
</aura:component>

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

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

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

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

• 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();
}

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

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}"/>

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

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

Component style
• Component CSS is encapsulated

Component renderer
Perform your DOM manipulations in the render/re-render functions
Renderer

Calling Apex
Renderer Apex Controller

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>

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

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

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

Lightning chess

Recommended

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Lightning chess (20)

Recently uploaded (20)

Lightning chess