If you’ve been following the latest trends in ServiceNow development tools, have been reading the Helsinki release notes or have been watching ServiceNow K16 videos, you will have no doubt heard or seen the terms “Angular”, “AngularJS”, “Bootstrap”, “Twitter Bootstrap” and “ECMA5” thrown about the place with little background information on what this all means and why it’s apparently important.
If you don’t have a web development background, all of these terms will most likely be unfamiliar to you, so let’s dive a bit deeper.

MVC
To introduce AngularJS, first we must discuss MVC.
MVC (Model View Controller) is a design framework which isolates the application logic from the user interface. The Controller receives all requests for the application and is responsible for working with the Model to prepare any data needed by the View. The View then provides the final presentation of the response.

AngularJS
ServiceNow Helsinki Developer Concepts 1

Angular, or AngularJS as it is officially known, is an open-source MVC implementation created by Google, using HTML and JavaScript. AngularJS provides the platform for HTML elements on a web page, such as a text box, to be bound to a model. Updates made to the model automatically reflect on the web page without requiring a page refresh. The reverse is also true - when data is updated on the page, the model is updated. For further reading, there’s an excellent guide available on the AngularJS website.

Bootstrap
Bootstrap is a design framework originally created at Twitter which enables web developers to build beautiful and responsive web applications faster and easier.
Built on a “one framework, every device” premise, Bootstrap efficiently scales as appropriate to the client device, so web applications look equally as good on phones, tablets and desktops.
Bootstrap is open source and includes base CSS (style sheets) and common HTML elements plus jQuery plugins to support responsive layouts. The example below highlights that the content has been styled and a layout has been applied, but not a single line of CSS has been written.

ServiceNow Helsinki Developer Concepts 2

The layout is automatically adjusted so that the same content is nicely presented on a different device, such as a phone. Again, no code has been purposefully written to achieve this.

ServiceNow Helsinki Developer Concepts 3

AngularJS and Bootstrap come together in ServiceNow
AngularJS and Bootstrap will happily work together to allow developers to build web applications which are both functional and nice to look at. Think of AngularJS as the engine which generates the content and manages data interactions, whilst Bootstrap is all about the “look and feel”. AngularJS and Bootstrap are now baked into the ServiceNow platform from the Helsinki release!

ECMA5
ECMA or ECMAScript is a scripting-language specification standardised by Ecma International in the ECMA-262 specification and ISO/IEC 16262. A long time ago, Ecma International considered JavaScript as an industry standard which subsequently became ECMAScript. In short, JavaScript is the programming language and ECMAScript is the specification name (think version). ECMAScript 5, published in December 2009, provides a more modern JavaScript experience when compared with ECMAScript 3 and the JavaScript engine in ServiceNow was upgraded to support ECMAScript 5 from the Helsinki release.

It’s nothing to be overly concerned about – you can still author scripts just the same as you always have, as the JavaScript engine now has two modes to support existing scripts and new scripts developed to the ECMAScript 5 standard. But it is good to know that it is there just the same, as ECMAScript 5 accelerates developer productivity.

An example that was shown at the Knowledge16 conference demonstrates that 5 lines of code can be squashed down to 3 lines of code and achieve the same thing:

ECMAScript 3 Code example

var tweets = request.body.data.tweets;

for (var i = 0; i < tweets.length; i++) {

var tweet = tweets[i];

SurveyRecorder.recordVote(tweet);

}

Code example above using ECMAScript 5 standards

request.body.data.tweets.forEach( function(tweet) {

SurveyRecorder.recordVote(tweet);

});

Where to start?
For further insight into these technologies and concepts, JDS suggests the following resources:

It’s all about the widgets!
In the next article, we’ll look at the coolest new addition to ServiceNow - widgets in Service Portals

Tech tips from JDS

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.