Monday, 21 September 2015

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




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)


43 comments:

  1. Good Post and informative. Thank you so much for sharing this good post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.
    React JS Training in Electronic City

    ReplyDelete
  2. Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is fantastic, let alone the content!

    3D animation Company
    Chatbot Development Company
    Android app development in Coimbatore

    ReplyDelete
  3. Thanks for sharing this blog.This article gives lot of information. reactjs training in Hyderabad

    ReplyDelete
  4. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging

    React Js Training in Electronic City

    ReplyDelete
  5. Your article is really good and was extremely helpful to the readers. Thanks for sharing post of this sort and in a better way.
    react js training in hyderabad

    ReplyDelete
  6. Thanks for sharing this information!
    I totally agree with you. Your information is very interesting and important. I really like this information.Our easy web plans company is famous in Advanced ReactJS Online Training in Hyderabad .
    If you want to see our training venue then click on links:
    www.futureqtech.com/reactjs-online-training.php

    ReplyDelete
  7. Thanks for posting such a Useful information .You have done a great job.
    React JS Online training

    ReplyDelete
  8. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    angular js online training

    ReplyDelete
  9. Yes i am totally agreed with this article and i just want say that this article is very nice and very informative article.I will make sure to be reading your blog more. You made a good point but I can't help but wonder. what about the other side?


    Best reactjs online Training

    ReplyDelete
  10. The article is so appealing. You should read this article before choosing the Big data engineering services you want to learn.

    ReplyDelete
  11. I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

    Best powerbi Training

    ReplyDelete

  12. Nice to see this BLOG..keep updating for infromation We offers students hands-on opportunity to implement their knowledge gained in the real time projects & gain valuable experience that will make them a more eligible candidate for jobs.Digital Lync offers one of the best Full Stack training in Hyderabad with a comprehensive course curriculum with Continuous Integration, Delivery, and Testing.
    software training and placement institutes in hyderabad
    best training and placement institutes in hyderabad
    web development courses
    full stack developer course

    ReplyDelete
  13. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    workday studio online training
    best workday studio online training
    top workday studio online training

    ReplyDelete
  14. The information which you have provided in this blog is really useful to everyone. Thanks for sharing.
    Mern stack online training

    Mern stack training in hyderabad

    ReplyDelete
  15. Thanks for sharing! Check out this great comparison of Angular and React from Cleveroad

    ReplyDelete
  16. Informative blog. Thank you for sharing with us.
    Full Stack Online Training

    ReplyDelete
  17. IEEE Cloud computing DOamin is a general term for anything that involves delivering hosted services over the Internet. cloud computing projects The cloud projects for cse is a metaphor for a global network of remote servers which operates as a single ecosystem, commonly associated with the Internet. IEEE FInal Year Networking Projects for CSE Domains Networking Projects cloud computing is the delivery of computing projects services—including servers, storage, databases, networking projects, software, analytics, and intelligence


    JavaScript Training in Chennai


    JavaScript Training in Chennai

    ReplyDelete

  18. Digital Lync offers one of the best Online Courses Hyderabad with a comprehensive course curriculum with Continuous Integration, Delivery, and Testing. Elevate your practical knowledge with quizzes, assignments, Competitions, and Hackathons to give a boost to your confidence with our hands-on Online Devops Training Hyderabad. An advantage of the online Cources development course in Hyderabad from Digital Lync is to get industry-ready with Career Guidance and Interview preparation.
    DevOps Training Institute
    Python Training Institute
    AWS Training Institute
    Online Full Stack Developer Course Hyderabad
    Online Python Course Hyderabadd
    Online AWS Training Course Hyderabad
    Online Devops Course Hyderabad

    ReplyDelete
  19. it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot. it is really explainable very well and i got more information from your blog.
    Salesforce Training in Chennai

    Salesforce Online Training in Chennai

    Salesforce Training in Bangalore

    Salesforce Training in Hyderabad

    Salesforce training in ameerpet

    Salesforce Training in Pune

    Salesforce Online Training

    Salesforce Training




    ReplyDelete
  20. Appsinvo was founded in 2015 and it is india-based company. Appsinvo is a Top Mobile App Development Company in India, USA and UK that develops unique, easy to use, high functionality and seamless operation that makes your web and mobile app more innovative. Since 2015, we have been delivering our services for the last 5 years in 120 countries and we have developed more than 300 mobile apps that makes more than 150 clients happy and satisfied with our services.
    Mobile App development company in Asia
    Top Mobile App Development Company
    Top Mobile App Development Company in Noida
    Mobile App Development Company in Delhi
    Top Mobile App Development Companies in Australia
    Top Mobile App Development Company in Qatar
    Top Mobile App Development Company in kuwait
    Top Mobile App Development Companies in Sydney
    Mobile App Development Company in Europe
    Mobile App Development Company in Dubai

    ReplyDelete
  21. Thank you for taking the time to provide us with your valuable information.
    Blockchain online training in Hyderabad!

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. Full stack Training in Chennai
    Thanks for giving great kind of information
    Full Stack Classes in Chennai

    ReplyDelete


  24. Nice to see this BLOG..keep updating More infromation Digital Lync offers one of the best Full Stack training in Hyderabad with a comprehensive course curriculum with Continuous Integration, Delivery, and Testing. Elevate your practical knowledge with quizzes, assignments, Competitions, and Hackathons to give a boost to your confidence with our hands-on Full Stack Training.
    DevOps Training Institute
    Python Training Institute
    AWS Training Institute
    Online Full Stack Developer Course Hyderabad
    Python Course Hyderabad
    Online AWS Training Course Hyderabad
    devops training in hyderabad
    angular training in hyderabad

    ReplyDelete
  25. Thank you for sharing wonderful information with us to get some idea about it.

    full stack training

    ReplyDelete

Introducing Lightning Base Components

Lightning Base Components are great addition to the platform and in fact revolutionary .One of the concerns around lightning component ...