How difficult to learn Angular.js for a Salesforce Developer

Introduction

Most of the applications written on Salesforce are written with pure Visualforce Markup. Salesforce Developers looking for writing cooler, faster, fancier applications with Javascript Remoting choose usually jQuery for building their applications. While the application may indeed be much faster, the next developer jumping on the project will likely struggle to understand the application if it contains more than a few hundreds of jQuery lines. Actually, jQuery is an awesome toolbox, but it's often misused and it has never been intended to build complex applications. And it's one of the reason why frameworks like Angular, Ember, Backbone... exist. While learning jQuery is quite straightforward, understanding complex frameworks require a bit more time and fews developers are ready to spend a few weeks to learn something totally new, without being sure of the "ROI".

In the hope to persuade some Salesforce developers to make the step forward, I'm writing this post and will try to highlight how easy it is to grasp the basics of Angular for a Salesforce developer. Requirement is at least having a solid understanding of JavaScript.

Similarities of the language

Enough talking, we will now explore how close some basic functions may be:

Showing/hiding an element:
<apex:outputPanel rendered="{!yourBoolean}">
    some stuff to display
</apex:outputPanel>

Equivalent with Angular:

<div ng-if="yourBoolean">
    some stuff to display
</div>

ng-if removes the element from the DOM, like the rendered attribute. We may also use in Angular as alternative ng-show (or ng-hide) which simply appends a display: none to the tag.

Iterating over a list:
<apex:repeat value="{!countries}" var="country">
    <apex:outputText value="{!country.name}"/> 
        has population of
    <apex:outputText value="{!country.population}"/>
    <br/>
</apex:repeat>

Equivalent with Angular:

<li ng-repeat="country in countries">
        {{country.name}} 
        has population of 
        {{country.population}}
        <br/>
</li>

ng-repeat offers much more options than this simple example, but this highlight at least the very basics.

Simple binding:
<apex:inputText value="{!inputValue}"/>

Equivalent with Angular:

<input type="text" ng-model="inputValue"/>

While Salesforce has a different tag, for each kind of input (text, number, checkbox, ...), with Angular you just need to change the type attribute and the binding is done automatically, always through ng-model.

HTML Select
<apex:selectList value="{!country}" multiselect="false">
    <apex:selectOptions value="{!items}"/>
</apex:selectList>

Equivalent with Angular:

<select ng-model="country" ng-options="c for c in items" />

Again, there are tons of options with Angular around the ngOptions. You may iterate simply over an array, but you could also iterate over a JS Object.

Validating a form

While it may be complex to validate a form, one of the most common used tool for it is by using required elements:

<apex:inputText value="{!inputValue}" required="{!yourBoolean}"/>

Equivalent with Angular:

<input type="text" ng-model="inputValue" ng-required="yourBoolean" />

Going Forward

These were very simple examples that any Salesforce Developer should understand straightforward. Angular has however a very rich API, far above what offers the Visualforce Markup. It's for example possible to filter the list of options from a select based on some criteria:

<select ng-model="country" ng-options="c.Name for c in items | filter: {Name: 'n'}" />

items is an array of JS Object. Each JS Object has a property called Name. This select will display only items, which have the letter n in their property Name. For example, if:

var items = [
        {Name: 'France'},
        {Name: 'Brazil'},
        {Name: 'Germany'}
    ]; 

then the options displayed in the select will be only France and Germany.

The magic of Angular is that if you change anything in items in your Angular Controller (you remove/add/update/... the array), the options will be updated automatically and instantly. On the other hand, doing the same with Visualforce/Apex Controller is not only much more complicate, the communication time between client and server and refresh costs in any case a few seconds.

And if this example seems already very advanced, just keep in mind that this was... a very basic filtering! For example you might define your own custom filtering function, which check every element of the array, and returns a boolean to add/remove options from the select based eventually on some dynamic conditions calculated on the fly...

Another Angular awesomeness: in Visualforce, all the Visualforce components are already defined and fixed: you can't create new HTML attributes, nor you can't create any HTML elements. With Angular, you can do both. In Angular, it's called directives. To draw a parallel with the Visualforce Markup, a directive is a kind of apex component, but the Angular flexibility goes far beyond. This is however, one of the most complex concept to grasp around Angular, and this complexity has really not its place in this blog post. Furthermore, the directive syntax is very different from the Visualforce equivalent.

No, you can't do with everything

Of course, Visualforce offers some conveniency, that Angular can't match on some areas. This is the case for the Visualforce tags, not starting with <apex: (all the Visualforce tags starting with <apex: can be easily replaced by an Angular equivalent). Components like the Live Agent, Knowledge, Mailing, Chatter ... are all very complex Visualforce components which have of course not a straightforward equivalent in Angular. However, there is no problem of simply adding a special Visualforce Tag in your Angular Application, this just doesn't look as clean as a purist developer might hope... But these are normally exceptions since most Visualforce Markup applications only use usually basic <apex:XXXX> components.

Ok for Angular, what about the other Javascript Frameworks?

Angular is quite unique. This is indeed the only (serious) JS framework augmenting HTML. Ember.js, which is a very powerful JS framework too, works really differently from Angular and while Ember may be for a non Salesforce Developer eventually easier to understand than Angular, I would strongly recommend to start with Angular for any Salesforce Developer. There is absolutely no parallel to draw between Ember and Visualforce Markup. One last thing, Angular has definitely a stronger community than Ember, so you might bet on the right one by learning it ;o)

A final word

If you had never seen Angular before, you are not an expert now, I'm sorry ;o)
This blog post is also not intended to teach you Angular in 5 minutes, but I hope that some Salesforce Developer, liking JavaScript, will be now curious enough to learn more about it.

comments powered by Disqus