no code to lighting component developer dreamforce 2016
TRANSCRIPT
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