Difference SLDS & Aura Components

As we all know Lightning has been added to Salesforce very recently and it is the future of Salesforce. So lot of people who are new to Lightning but have the curiosity to learn it sometimes find it difficult to understand. I realised that the best way to start would be by describing what are the differences between Salesforce Lightning Design System and Salesforce Lightning Components FrameworkSo in this blog I will try to explain what are the major differences between Salesforce Lightning Design System and Salesforce Lightning Components Framework and hopefully it will clear out most of the doubts that a new developer is having regarding The Lightning Framework.

Introduction to Salesforce Lightning Design System

It is a css framework which is used for creating dynamic web apps.   By Using SLDS  We can make our apps responsive and can also provide  Look and feel  similar to the Lightning Experience.

Steps to install the SLDS Unmanaged Packaged:For using SLDS in our Salesforce org. First We need to install the Latest Salesforce Lightning Design System unmanaged packaged as a static resource zip file.  

  • Log into your Developer Org.
  • Open the Salesforce Lightning Design System in a Separate window.
  • Go to the Download Section.
  • Click on the latest unmanaged package
  • Now click on Install it.

After Completing the above steps the package will get installed into your org.   

Benefits of using Salesforce Lightning Design System:

  • By using SLDS it’s easier to build apps which are responsive and also have the look and feel similar to 260662Lightning Experience.
  • It is compatible with multiple browsers like  Google Chrome, Latest Mozilla Firefox,   Latest  Safari Latest Internet Explorer 11 and above .
  • It provides a robust grid system because of which It is easier to build responsive layouts that works elegantly across different screen sizes.
  • The CSS is fully namespaced with the slds- prefix to avoid CSS conflicts.

Introduction To Lightning Components Framework 

It is built using Open Source Aura Framework. By Using Aura Framework We can build apps completely independent of the Data present in our Salesforce org.

Benefits Of Lightning Components Framework :

  • It provides an out-of-the-box set of components for building apps
  • When we use Lightning Components  Framework We do not need to worry about the optimization of our apps for different devices as  Components take care of that by themselves.
  • It uses the stateful client and stateless server architecture which uses  Javascript on client side for managing UI component metadata and Application data.
  • It uses event Driven architecture which  enhances the decoupling  Between components.
  • It supports the latest  browser technology such as HTML5,CSS3.

Use Of Developer Console:The Developer Console provide us the tools which are Used for developing Components and applications. By Using Developer Console We can perform the following functions

  • We need to use File option for either creating or opening the following Lightning Resources:
    • Application
    • ComponentInterface
    • Event
  •  We need to use sidebar to create or open client side resource.
  • Component
  • Controller
  • Helper
  • Style
  • Documentation
  • Render

Differences Between SLDS and Aura

free-Vector-File-EPS-87250 FRAMEWORK:

  • First of all Salesforce Lightning Design System is a CSS based framework.
  • Used for creating dynamic apps while on the other hand Lightning Components Framework  uses aura components for creating the dynamic apps.

rental-qualityCONTROLLERS:

  • In case of Lightning Components Framework We need to write two Controllers    one for client side and the other one for server side. while in case of Salesforce Lightning Design System we need to write only one controller which will be a server side controller.

Note:The client side Controller that we will write for Lightning Components Framework would be written using java script while the server side controller will be written using apex.      

 PPO3aSALESFORCE DATA:

  • By using Lightning Components Framework we can build an app which will be completely independent of salesforce data while in case of Salesforce Lightning Design System(SLDS) do need some salesforce data which can be accessed using Javascript Remote Objects.       

CLIENT CENTRIC:

  • Lightning Components Framework are client-side centric while Salesforce Lightning Design System are server-side centric.

PERFORMANCE:

  • Because Lightning Components are client side centric therefore they are better.
  • Equipped for creating dynamic web apps then Salesforce Lightning Design    System.

MOBILE FRIENDLY:

  • As mentioned above  Lightning Components are client side centric therefore they are more mobile friendly as compared to the Salesforce Lightning Design  System(SLDS).

EVENT DRIVEN PROGRAMMING:

  • In Lightning Component Framework Event Driven programming such as Javascript and java swing is used for writing helpers which responds to Interface events as they occur but in Salesforce Designing System there is no such concept of Event Driven Programming.

COMPLEXITY:

  • Because In the Lightning Component Framework we need to create two controllers and also it uses  event driven programming language such as  Javascript therefore it is much for complex as compared to the Salesforce Lightning Design System(SLDS)

Author: AJ

Share This Post On

5 Comments

  1. could you elaborate on the point “Equipped for creating dynamic web apps then Salesforce Lightning Design System.” Thanks in advance.Because aura components also provide this feature(client server communication, so it is also web app)

    Post a Reply
    • Because in aura components we create two controllers one for server side(usning apex) and one more for client side(using javascript) therefore it is more client centric.Hence It is better equipped for creating dynamic web apps then Salesforce Lightning design system.

      Post a Reply
  2. Explanation is very simple and easy to understand.

    Post a Reply

Submit a Comment

Your email address will not be published. Required fields are marked *