Lightning ChessThe fun way of learning the Lightning Component Framework

Sri Lanka Salesforce Developer Group 2016-12-8 #SFLightningChess #SalesforceDevs

1

Who am I?

2

Samuel De RyckeTechnical ArchitectTalent 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

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

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

Application Architecture

Streaming API

Custom Objects

Apex Controllers

Lightning Chess Player ClientsLightning Chess

Player Clients

Ser

ver C

all

Sub

scrib

e

Upd

ates

Salesforce Platform

5

Time for a demo

Demo: Lightning Chess

6

Lightning Component Framework

● Lightning Application

● Lightning Components

● Lightning Events

The Fundamentals

7

Component Bundle

Lightning ComponentComponent Bundle

Component< markup />

StyleCSS

RendererJavascript

ControllerJavascript

HelperJavascript

Design< markup />

Documentation< markup />

SVG File

8

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

Component Encapsulation

● Easy to reuseUse them in different applications or other components making use of a component’s public interface

● Open for extensionExtend the functionality of a component without impacting other components. Less bugs.

● IndependentA 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.

● CompactSeparation of Concerns will lead to code that is small and easy to maintain, debug and test.

Components can be:

“Think Component Encapsulation“10

Lightning Chess: Component ArchitectureDivide 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

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

Lightning Chess: Component ArchitectureMistakes 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

Lightning Chess: Component architectureMistakes were made

Streaming API Listener

General Game Component

Chessboard

Chessboard Location

Streaming API Listener

Player List

Challenge List

Streaming API Listener

Streaming API ListenerStreaming API Listener

14“Single Responsibility“

Event Driven ArchitectureEvent 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

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

Lightning Chess: Event Driven ApproachCommunication 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

Let’s Code !Extend the Chessboard Location component by adding drag-and-drop support.

18

SummaryTakeaways

“Think Component Encapsulation“

“Single Responsibility“

“Loose communication through Events“

19

Resources

Code @ Github!http://bit.ly/LightningChess-CodeRead more about Lightning Chess Architecture:http://bit.ly/LightningChess-Blog

20

Questions ?Reach me on twitter @SamuelDeRycke #SFLightningChess

21

thank y u

22