If you ask a web or mobile app developer why they use AngularJS their first reply would be because it’s awesome. And then they would list down various reasons ranging from convenience, speed, and performance, to scalability and affordability. However sometime back if you would have asked a Salesforce developer the same question, they would have replied “Sorry? angular what??”. This has rapidly changed in the past 2 years since the boom of mobile. To make Salesforce mobile compatible, and to connect more and more people with Salesforce data, organizations are depending more and more on Visualforce and Salesforce1, leading to the rise of Single Page Visualforce based applications.
And which framework is better than AngularJS?
This can be detailed in two posts. This week I would be focusing on why AngularJS is awesome for creating Visualforce page. This post will be more for the benefit of those Salesforce developers who have not tried AngularJS or any other MVC-based JavaScript framework.
In the next post, I will talk about the Hows and would be a little bit more technical so stay tuned.
Why use AngularJS for Salesforce?
AngularJS is widely used for developing mobile/web and web solutions. The Visualforce and AngularJS combo’s popularity is increasing because of the fact that AngularJS can drastically decrease the development time and improve the page UI at the same time.
But that’s not all! Here are some more reasons why you can use AngularJS:
Real-time Data Binding
AngularJS has inbuilt two-way data binding features that frees you from worrying about DOM when you play with data. To understand its use we have to understand what two-way data bind is. The standard applications bind data in only one way, i.e. they merge the view template and the model components (data components) to create a fixed unchangeable view. Any change in data is not automatically reflected in the view because of which we have to refresh the web page every time in older web apps to view changes.
In AngularJS, data binding is different. The view and model are connected because of which a view automatically changes whenever a model is changed. The technical term is that in AngularJS, views are a projection of model but in actuality, it’s an incredibly clever piece of coding that replaces static DOMs with dynamic DOMs in a compilation phase and adds a watcher thread that lookout for user actions and updates DOM. Because of this, any change in a model is instantly reflected and vice-versa.
Two-way data binding is important in Salesforce Apps especially those that involve real-time data or require features that require real-time manipulation of user input data. For example, a quote calculator that need user input.
More on this – https://docs.angularjs.org/tutorial/step_04
Deep Linking
In modern web pages and apps, URL is not limited to pages only, the specific modules of the pages can also be accessed through URL itself. This feature is named Deep Linking and AngularJS has inbuilt features that allow you to use this technique.
Deep linking allows you to refer to specific module or section of a webpage and pass on the URL to others that point directly to the section. For example if you want to cite a single section of an article instead of the whole article in Wikipedia you can use the URL https://en.wikipedia.org/wiki/Salesforce.com#Visualforce instead of https://en.wikipedia.org/wiki/Salesforce.com.
This feature can be extended to a Visualforce app as well. For example instead of sending the URL of the whole help library to a customer like “example․ap1․force․com/help-library”, you can send the URL like “example․ap1․force․com/help-library#Section4” that takes them to specific section as required.
AngularJS is Injectable
This is the feature that greatly speeds up the development time. AngularJS has great module development features that allow you to easily inject dependencies in components. In layman terms, dependency injection is passing on one object (service object) to another object (client object). This passing on is dependent upon the state of the client object and is done by a micro-program called injector that is also responsible for constructing the service objects as well.
For example, in a tax calculating app, instead of hard-coding tax slab rates you can create a dependency that is responsible for tax rates and passing these dependencies to calculator components. In addition, you can also create ‘service’ dependencies that for example multiplies two numbers, or divide two numbers, and inject these ‘service dependencies’ in a component to create a complex calculator.
This design pattern gives great flexibility and control in creating the final business process tree of an app. You can customize and reuse modules and components throughout the app without much coding. This also gives you great flexibility in testing the App.
Usually, Salesforce Visualforce apps are built around complex workflows. This feature if AngularJS quite significantly reduces the application development time especially when the business process involves a lot of calculation or dependent data.
Fluid User Experience
In addition to the core technical reasons mentioned above, AngularJS is also great in creating the app more aesthetically appealing. Visualforce pages are created to bypass the UI of Salesforce (well…before the lightning experience was launched anyway) and if the resulting pages are not visually appealing, then the purpose is defeated. The prebuilt libraries, components, and modules of the framework fast-forward development time and at the same time give the app a visual upgrade.
Not Just AngularJS
You may state that AngularJS is not the only framework with two-way binding and there are other ways to achieve dependency injection and deep linking. And I will have to agree with you there. In the end, when all is said and done you can obviously custom code all the functionalities of AngularJS, but the main reason for a framework is to speed up the development process and AngularJS does that superbly.
In my next post, I would be talking about how exactly you would be using AngularJS in Visualforce page, focusing on controllers for both sides.
Pratyush Kumar
