I have been working on Angular Framework for quite some time. Actually, it was a gateway for me to the world of FrontEnd Development. But, Recently I got a chance to work on the Salesforce Lightning Framework which surprisingly I wasn’t aware of. Salesforce Lightning Framework is a UI framework used to develop mobile and web applications that are native to the Salesforce environment. In this blog, I will try to briefly explain the differences and similarities between the two frameworks. The intention is not to list down the differences between them. But to enlighten someone who has knowledge in any modern UI framework such as Angular, React and is moving to Salesforce Lightning Framework.
Single Page Applications
Both of these frameworks are used to create Single page applications. We create one main page and other components are embedded in it dynamically so that every time a new page is not loaded from the backend. This type of Application also supports reusability between components as you can write a common component and it can be used at different places.
Segregation of data, Logic, and Markup
In Angular, we have three separate files for Markup, CSS and Logic. In Lightning also we have three separate file (markup) and CSS and a controller file that contains logic written in javascript.
Reusing logic in other components
We create a service to share data and logic with multiple components. Every service created can be imported and used in other components. Similarly, if we want to reuse logic. We create a component that has only the logic. We embed and import it into other components that use logic by using the existing logic in the service.
Sharing Data between components
Parent to Child:
In angular, we transfer data from Parent to child using Data binding between components. Similarly, data is also transferred in Lightning via data binding.
In Lightning component we initialize any variable using <aura:attribute> tag. Now Data from the parent is transferred to child component using binding while embedding component. As can be seen in the code.
<c:childComponent> component has attribute childAttribite which gets data from parentAttribute.
Child to Parent:
We use Event emitter in child to pass data to parent in angular. In lightning, we use application or component events to transfer data from child to parent. The event is registered and the child publishes the event. This event is propagated to the parent and it is handled by the parent via an action in the lightning controller.
Component events are “clones” of standard DOM events (mouse clicks, keypress, and so on). Just like their DOM counterparts, they propagate up in the component hierarchy via a bubbling mechanism and can be stopped en route to the application root component.
Suppose if we take example as mentioned in the diagram above, The component C event fires an event that is propagated up the parent hierarchy. Component B catches the event being parent of component C and now has option to handle or pass the event up the hierarchy. Component B does not handles the event hence the event is triggered up above component A. Now component A handles the event in its lightning controller.
Conditional statement
When we want to conditionally show some view in Angular component we use ngIf directive. Likewise, we use <aura:if> tag if we want to show something conditionally in Lightning.
Absence of hot module reloading
While major frameworks nowadays offer the feature of reloading all the modules at runtime without restarting the server. This feature seems to be missing in the Salesforce Lightning Framework.
Integration of Lightning Framework with Angular
If you do not have any idea about Lightning framework and still you want to develop an application in the Salesforce environment you can even use angular within the Lightning Framework. This will save that extra effort of you learning the intricacies of another framework. To check the detailed explanation of how to properly integrate angular step by step please check this.
❤️ Like, Share or Leave A Comment!
If you enjoyed this post, don’t forget to give it a 👏🏼, share it with a friend you think might benefit from it and leave a comment! Stay tuned for more exciting blogs on Flutter, Elixir, React, Angular, Ruby, etc.
Thanks
