ReactJS and Salesforce Lightning SLDS 101

Having worked on writing visualforce page with React using Salesforce Lighting Design System I would like to share some experience  through this blog post.

Clearly  ReactJs can cherry pick difference in the DOM structure and updates the only part of DOM that is part of component, you read this post to know little in detail about ReactJs on getting started and understaning basics.

ReactJs with Remote Objects

Salesforce Remote Objects allows you query salesforce without glueing apex and purely writing UI intensive apps see here. I wrote code snippet that consume remote object and query salesforce, on top of it, he have imported Lighting Design System to fabricate the UI.

Salesforce Lighting Design System (CSS from Salesforce)

Salesforce have opened stylesheets now, for the world to incorporate Salesforce user experience with new Lighting UI. Out of the many components available, I will be using datatable component and header components to carve the layout of this page.

Single Page Application (SPA)

To showcase, component driven functionality with React, I wrote single page, keeping concepts simply to absorb, to give a kick start and direction for consuming this framework in the universe of Salesforce.Below is visualforce page that consume React component, click below to open in new page

Hello React

Code Walkthrough

If you carefully notice, we reference all external javascript through CDN and some hosted on github, learn how to use Github as CDN with Salesforce.

The components are divided from top to bottom in two prime category of components nested

1. Account View : Parent component nesting child component

2. Account List : Child component polling Salesforce to list data rows

To visualize neatly you can see this tree structure shown below

  --Accountview

      ---AccountList

--Account 1

--Account 2

--Account 3

As you can see three component are primary designed here, Account Component is component to draw header of the table (list) declared as below

Secondly, AccountView is nesting drawing the view of table and nesting list component that queries Salesforce in the back

AccountList binds data into Tabular view and generates table

Notice, the use of  promises with Visualforce Remote Objects using code from in this repo (check it out) and not a single line of html code is written on visualforce end besides skeleton of the page, all code is written in JSX compiled into Javascript, also note for converting React JSX to javascript in production release, you can do it through Node React Tool

Whole code snippet is embedded below is ready to be served out of the box (import all required resources from CDN)

Migrating to Lightning Experience with Trailhead

I have been fan of Trailhead since I used it for first time to learn on how to build lightning components .Trailhead makes learning fun and enjoyable .You get to learn at your own pace at your own time and at your convenience .

Many of you would have heard salesforce launching new User Experience which is seamless experience of your salesforce data on any device size ,right from your apple watch to your apple macbook pro or air .

Migration is always not easy .Its cultural change .It will come with time and people will require some support and Training to get trained .

Trailhead is our friend that will guide us in right path as we transition from our aloha look and feel to this new exciting lightning experience .Whether you are Developer ,Architect ,Customer or Partner related to Salesforce ,Trailhead has content for everyone .

Lets Summarize the content that will make you feel confident and comfortable while you go through each of these  new modules in the Trailhead

Admin Trail

For Admins Migration to lightning experience means they need to be familiar with below

1. How can they customize or change layouts ?
2. How can they configure objects and relationships?
3. How can they enable their users to this new experience ?
4. What should be the Roll out strategy while they migrate the users to new experience ?
5. Where can they configure actions and what are the differences with respect to old aloha UI ?

Lot to answer.If an admin goes through all the modules present in above Trailhead I am sure you will get to the meat of the content .

Developer Trail

With new Lightning ,Developers will need to worry about following 

1)What will break in their existing code and wont work with lightning ?

2)How can they make their Visualforce code work with lightning ?

3)What is Salesforce Lightning Design System ?

4)How can they detect via code how to differentiate between aloha environment and lightning environment ?

5)If you are an ISV ,what factors you have to consider when you build your visualforce pages ?

6)What changes app exchange packages will need to get the Lightning Certified Sash?

All the answers to this has been embedded inside the Developer Trail for Lightning experience .

Sales Rep Training

Sales Rep Trail will enable your organization to train your sales reps 

Asking Sales Rep to go through this Trail will help them use the system effectively .Your sales rep will learn below in detail

1. How to work with leads and opportunities with new user experience 
2. Various tools that will help them to track their performance and help them sell effectively
3. New reports and dashboards and chatter feeds .

This is the first content for end users from Trailhead team and step definitely in right direction

If you are a new admin there is one more and you can start right from there 

https://developer.salesforce.com/trailhead/trail/lex_admin_implementation

Trailhead URL

https://developer.salesforce.com/trailhead

Also don't forget to share your progress on twitter and share your badge selfie as I do often 

If you love projects ,there are few new projects as well  for you 

https://developer.salesforce.com/trailhead/projects