From No Code to Lightning Component Developer

Kerry TownsendAssoc. Manager, Accenture@KerryTownsend @bob_buzzard

Keir BowdenCTO, Brightgen

No Code to Lightning Components

The peaks and troughs

@KerryTownsend

Kerry Townsend & Keir Bowden

@Bob_Buzzard

Kerry Townsend

Solution Architect, Assoc. Manager, Accenture

Keir Bowden

CTO, BrightGen

Who will get the most from this session?

Career Personal Community

★ Love to Learn★ Empathy with

Colleagues★ Join the Conversation★ Credibility

★ More developers needed

★ Find out if it is possible★ Understand the effort,

duration★ Understand the journey

steps★ Determine if repeatable

★ Important as Solution Architect

★ Coding is a valued skill★ Can’t buy practical

experience★ Lightning Components

are the future

Our MotivationMost importantly why...

My Journey: Start State

10yrs using Platform

Good declarative understanding An understanding of APEX & Visualforce

I thought, I have…

Do Learning

Give PresentationI thought it would be straightforward

I was feeling confident

My Journey: Actual State

Crashed & Burnt

Jumped inboth Feet

Committed to Talk

Learn APEX/ VF or LC?

Heard about LC

Learnt about LEX

Attended Meetups

Why Was it So Challenging?

Unfamiliar TerminologyA strange place when you don’t speak the language

Framework

Asynchronous

Name Value Pair

Model-View-Controller

Tightly Bound

AbstractionPolymorphism

HoistingEncapsulation

Block Scoping

Prior Knowledge AssumedLike Googling a medical condition

“Lightning Component Framework is similar to other frameworks like React and Angular JS”

“In much the same way as Bootstrap…”

“Create objects like other OOP languages”

“Add the attribute to the tag like visualforce…”

No JavaScript Experience

“It is a jackpot when you get to

know javascript can be

debugged.”

― Mussadiq Abdul Rahim

“You’re building your own maze,

in a way, and you might just get

lost in it.”

― Marijn Haverbeke,

Eloquent JavaScript

http://www.goodreads.com/quotes/tag/javascript

“Java is to JavaScript what Car is to

Carpet.”

― Chris Heilmann

“JavaScript’s global scope is like a

public toilet. You can’t avoid going in

there, but try to limit your contact

with surfaces when you do.”

― Dmitry Baranovskiy

“The browser is the most hostile software development environment

ever imagined”

Douglas Crockford

My Journey: Revised State

Didn’t Give Up

Asked Community

Got Reassurance

JoinedCode School

Took a JavaScript Road Trip

Re-Visited Trailhead

Trailhead Unit Breakdown

Estimated Time My Time

1.Before You Start 10mins 10mins

4.Attributes and Expressions 25mins 1hr

6.Input Data Using Forms 35mins 3hrs

7.Connect to Salesforce with Server-Side Controllers 35mins 4hrs

Planning your time

Nothing worth doing...

..comes too easilyhttp://jimvaglica.com/index.php/2015/12/20/what-does-it-take-to-be-an-american-ninja-warrior/

Lightning ComponentsWhat is a Lightning Component?

A Lightning component is a bundle

Component Controller

HelperStyle

Component Bundle

Apex Controller

Components can contain other components

AppHeader

Contact List

AccountContactEdit Component

Contact Edit

http://bobbuzzard.blogspot.co.uk/2015/09/lightning-design-system-edit-parent-and.html

My First Lightning ComponentIncluding actual code...

Picking a first Component

Started Big → Appointment Suggestion

Function

Key Lesson - Start small for early wins

The IdeaSimplified → Email Subscription Related List

Simplified Again → Contact History Related

List

Contact History Related List Component

Specifies SS Controller

Calls Init function

Displays fields

Contains styling (SLDS)

Component Controller Apex Controller

Init function

Passes Record IDQueries Contact History

Server Side ControllerRequests the records to display

Use Developer Workbench for Queriesworkbench.developerforce.com/query.php

ContactHistory.cmp - ComponentDefines how and what displays on the page

Defines a component’s actions including server calls

- No Helper in this example

ContactHistoryController.js - Client-side Controller

Contact in the Lightning Experience UI - No Styling

Get Logic working before adding

Styling

Contact in the Lightning Experience UI - StylingContact History in Related List

1. Find styling on

SLDS

2. Copy & Paste into

Component

3. Move code logic

into correct places

Further Improvements

Develop into Subscriber

Related List

Add CountChange Field Name

Allow Multiple Field Types

Add View All

Important Terminology

Key TerminologySLDS - Salesforce Lightning Design System

www.lightningdesignsystem.com/

JavaScript variable scopemsdn.microsoft.com/en-us/library/bzt2dkta(v=vs.94).aspx

Asynchronous processingrowanmanning.com/posts/javascript-for-beginners-async/

Attribute Bindingdeveloper.salesforce.com/blogs/developer-relations/2015/07/lightning-components-2.html

Reflecting On My ExperienceLessons learned

Learn Basic JavaScriptPick a course that has practical exercises that can be checked

Familiarise yourself with HTML, SQL, CSSNot required to the same level as JS but if you have the time its worth investing

Complete Lightning Components Basics up to Input Data Using Forms UnitThe Input Challenge teaches about the server side Controller

Create a Related List ComponentDisplays data from the server, build your confidence. Improve 1 step at a time

Complete the Lightning Components Basics These may take time, continue making incremental changes to your own components

1

2

3

4

5

Suggested StepsIf I had my time again...

Mindset In the Code Component Basic Trailhead

★ Remember to Save★ Be careful with Case

and Plurals★ Comment your code

with your own notes★ Change one thing at a

time★ No more than 15 mins

★ Remember Code will be refactored

★ Create the Expenses example

★ Understand which code goes in which file

★ Use Forums★ Last step is Resources

★ Expect a Challenge★ Schedule Time★ Avoid Deadlines★ Find a Buddy (physical/

virtual)

Key Advice

Main Take Aways

It is possible!

Once you get the Bug you won’t stop

It is challenging & needs time but is worth it

Practise, practise, practise

Is this even possible?

1

2

3

No Experience Necessary

Journey Starts Here4

Paul Battison John Stevenson Dave Carroll

Other Thank Yous

Thank you

trailhead.salesforce.com/en/lex_dev_lc_basics/

github.com/KerryTownsend/my-first-component

paulbattisson.com/blog/2016/lightning-component-zero-to-her

o-what-is-a-lightning-component/

Resources

Kerry TownsendAssoc. Manager, Accenture

Keir BowdenCTO, Brightgen

@KerryTownsend

@bob_buzzard

Thank Y u

Init FunctionThree common code sections

Define Action

Call Back

Defines the required Server Side action

Queue Action

Handles the response from the server &

should handle errors

Sends the request to the server