AngularJS Starter Kit
Copyright © 2013 Hakin9 Media Sp. z o.o. SK

Table of Contents
Angular: The DOM API You Have Been Waiting For
Brad Davis

08 11 16 26 34 43

Angular.js, a javascript library and framework created in Google, is a fresh view into building great web applications. You can read a lot of articles on how it separates the concerns of the application, improves testability, and keeps to web app best practices, but I want to highlight a feature that is not shown off as regularly, extending the document object model API.

Introduction to AngularJS
Dylan Stamat

You will learn about some of the core concepts that make AngularJS shine, including binding data to you views, built-in filtering, and some of the interesting architectural decisions behind this MVC framework. We will build a very simple application with local data that show some of these concepts.

Diving into Angular
Josh Kuhn

In this tutorial we’re going to create a barebones Twitter-like application called Pipr. Pipr allows you to create “pips” which are short 100 character or less “pips” that show up on the page in reverse chronological order. You can add tags to your pips, and you can post them with any name you like. In addition, you can delete your pips.

AngularJS 101: A Beginner’s Tutorial
Karmen Blake

This tutorial on AngularJS will guide you through the fundamentals of the framework. You will explore the exciting benefits of using a client-side JavaScript framework to create dynamic and modern web applications.

JEDI SENATUS: an italian open source project aims towards the systematic software reuse in organizations
Ciro D’Urso, Alberto Persello, David Visicchio JEDI is a J2EE application that provides a centralized service aiming at significantly simplifying the generation of data driven documents in an enterprise environment.

JUnit Test Should Include Assert
Damian Czernous

A static code analysis is an important part of the software development life cycle, but like every tool, it must be adjusted adequately to the reality of the project.

4

AngularJS Starter Kit

Wrap collections
Damian Czernous

53 58 60

The essence of Object Oriented Programming (OOP) can be captured by three words: polymorphism, inheritance and encapsulation (PIE). In the end, these terms represent specific object design concepts It takes time to gain proficiency in using PIE during software development process e.g. wrapping data collections can be seen as an example of encapsulation. It’s really awesome how wrapped collections look and how they release engineers from thinking about the collection internals.

The Ninja Programmer (And the Exasperating Job Posts)
Matthew T Rupert

Sometimes the word Ninja is replaced by other crafty (or not-so-crafty) buzzwords: Rock Star, Guru, Genius, Superstar. It doesn’t take much insight to recognize the aim of such verbiage: Flattery.

Native Apps
Martijn Smit

In this report the following question will be answered: Which development form (native, web or hybride) has the biggest development potential for the future. To answer this question it’s important to know when it all started and which properties the different development forms have, what are the main advantages and disadvantages, and what will the future bring. There are three main platforms iOS, Android and HTML5.

5

AngularJS Starter Kit

Dear Readers!
Our ‘AngularJS Starter Kit’ is released! If you look how to start your journey through AngularJS world, this should be your first step. We prepared a few articles to help you learn basics of Angular and we hope you like it. In this issue you will find a few tutorials from which you will know what Angular is about. Our authors – Brad Davis, Dylan Stamat, Josh Kuhn and Karmen Blake will show to the beginning and more complex things you can find in our previous release about AngularJS. You can look at all of the texts and prepare yourself to become a better programmist and developer. But AngularJS is not the only topic of our issue. This time you can find articles related to other topics as well. I can point it out for you but I think it would be more interesting if you can explore it yourself. Have fun! Our incoming issue will change some things a bit. We prepare four lines dedicated to Platforms such as Android or Windows, Web Development, Databases and QA & testing. Find out more informations on our website. Enjoy your reading! Emil Strzeszewski & the SDJ Team

6

Editor in Chief: Emil Strzeszewski emil.strzeszewski@software.com.pl Editorial Advisory Board: Lee Sylvester, Peter Nunn, Mathew Grabau Special thanks to our Beta testers and Proofreaders who helped us with this issue. Our magazine would not exist without your assistance and expertise. Publisher: Paweł Marciniak Managing Director: Ewa Dudzic Production Director: Andrzej Kuca andrzej.kuca@sdjournal.org Art. Director: Ireneusz Pogroszewski ireneusz.pogroszewski@sdjournal.org DTP: Ireneusz Pogroszewski Marketing Director: Ewa Dudzic Publisher: Software Media SK 02-676 Warsaw, Poland Postepu 17D email: en@sdjournal.org website: http://sdjournal.org/ Whilst every effort has been made to ensure the highest quality of the magazine, the editors make no warranty, expressed or implied, concerning the results of the content’s usage. All trademarks presented in the magazine were used for informative purposes only. All rights to trademarks presented in the magazine are reserved by the companies which own them. DISCLAIMER!

[ GEEKED AT BIRTH ]

The techniques described in our magazine may be used in private, local networks only. The editors hold no responsibility for the misuse of the techniques presented or any data loss.

You can talk the talk. Can you walk the walk?

[ IT’S IN YOUR DNA ]
LEARN: Advancing Computer Science Arti cial Life Programming Digital Media Digital Video Enterprise Software Development Game Art and Animation Game Design Game Programming Human-Computer Interaction Network Engineering Network Security Open Source Technologies Robotics and Embedded Systems Serious Game and Simulation Strategic Technology Development Technology Forensics Technology Product Design Technology Studies Virtual Modeling and Design Web and Social Media Technologies

www.uat.edu > 877.UAT.GEEK
Please see www.uat.edu/fastfacts for the latest information about degree program performance, placement and costs.

AngularJS Starter Kit

Angular: The DOM API You Have Been Waiting For by Brad Davis Angular.js, a javascript library and framework created in Google, is a fresh view into building great web applications. You can read a lot of articles on how it separates the concerns of the application, improves testability, and keeps to web app best practices, but I want to highlight a feature that is not shown off as regularly, extending the document object model API.
What you will learn
• • • • • Angular template basics Template secret sauce Tomain specific syntaxs Basics of HTML Javascript basics

What you should know

Lets jump right into it and build a twitter timeline user interface. I would like to show my recent tweets and allow the user to click on any tweet and highlight it. Listing 1. Angular Template {{tweet.text}} {{hashtag.text}} @{{user.screen_name}}

Here we have an example angular template, to show how flexible your template can be. There are a couple things going on here so I will break it down.
{{hashtag.text}}

The directive ‘ng-repeat’ is used a couple places in this example because it is very powerful. It both repeats the element for each in an array and adds that object to the scope of the element. It does not change the scope, which is an important distinction from other template engines like handlebars.js where ‘../’ is needed to access values outside of the object scope. Angular does use the mustache syntax of {{}} to insert values.

The directive ‘ng-show’ tells angular to show or hide depending on the statement you pass in. There are a variety of statements you can use here, so it adds a good amount of flexibility. Its important to note here, we are not giving this directive javascript, but a string that is parsed by angular. == is not the same as == in javascript and acts more like ===.

8

AngularJS Starter Kit

‘ng-click’ shows off something else that is different about angular, there is direct binding to the controller scope. Let me show off what the controller looks like. Listing 2. Angular Controller function($scope) { $scope.tweets = Twitter.getTimeline(‘1950787875’); $scope.selectTweet = function(tweet) { if(tweet.highlight === ‘highlight’) { tweet.highlight = ‘’; } else { tweet.highlight = ‘highlight’; } }; };

As you can see, when angular calls the controller function it is going to pass the scope into the controller function. Scope is the object that connects the view and the controller. Lets pretend in this example that we have a global object Twitter that has a method getTimeline that returns an array of tweets when called with a user id. When we set ‘tweets’, angular will use that to render the template into the DOM. ‘ng-click’ will link the click event on that element to the function selecTweet in the scope, allowing you to also pass arguments. It’s important to note here also, what you pass to ‘ng-click’ is not run directly in javascript, but parsed by angular. Don’t let that trip you up. This shows off the basics but we haven’t gotten into the power of angular templates. Angular is designed to build a domain specific language. This allows you to effectively extend the DOM just for your app. Let me show you what that template will look like. Listing 3. Angular Template with Custom Directives {{tweet.text}}

If you know your html you will notice quickly that and are not HTML elements. These are angular elements that are created for this application. takes a list of entities passed in by ‘ngmodel’, and renders them. does a similar thing with a user object. This cleans up our main template here, and makes the template extendable and reusable. Both entities and user now have their own templates. {{tag.text}}

Here is the entities template. As you can see, the template is cleaner here, but also we can now user entities in other locations in our angular app. Once we put the tag all over our app making changes is simple. The secret sauce of angular I am showing off here is directives. Directives are a collection of functionality that can be added to any element in the DOM and show up in a couple different ways. I just showed you ‘ng-*’ and . These two act differently, one adding on functionality to an element and another creating a new element, but they are based around the same idea.

9

AngularJS Starter Kit Right out of the box we get a quick list of tweets presented in a way we are used to, elements. If we need more power, we can build our own elements through domain specific directives. We have the ability to quickly add event listeners on these elements, and bind model values to element text. I’m not arguing that you cannot do this with other frameworks but with angular.js you have a set of tools that take the DOM and extends it to make dynamic applications simple to write and understand. Add in support from Google and a growing, smart community of developers and you have a great framework that every javascript developer needs to try.

About the Author

Brad Davis is a javascript developer from Cleveland, Ohio. When not developing web applications for Dealer Tire he is working on fourager.com, jmblaya.com, or pearmarket.co. You can find is open source projects at github.com/thecolorblue.

10

AngularJS Starter Kit

Introduction to AngularJS by Dylan Stamat Pushing work to the client is making a comeback, but for the first time, it’s making an appearance with well architected frameworks. AngularJS is one of these frameworks (also the authors favorite), and in the following article, we’ll be running through a simple yet real world example.
What you will learn
You will learn about some of the core concepts that make AngularJS shine, including binding data to you views, builtin filtering, and some of the interesting architectural decisions behind this MVC framework. We will build a very simple application with local data that show some of these concepts.

Figure 1. A view

What you should know

The reader should have a basic grasp of javascript and web development in general.

Readying your local environment
All you really need to get started is an html page and the angular javascript file. Also, Google hosts the angular.min.js file on their CDN if you didn’t want to host it yourself. Our example is going to mimic a typical use case for AngularJS, in which it acts as the interactive client that talks to your backend API. If your API is capable of serving up JSON, using AngularJS should be relatively painless. Instead of walking through each change step-by-step, full code examples will follow, with inline comments about the interesting points. Here is our one html file: Listing 1. index.html Introduction to AngularJS

11

AngularJS Starter Kit {{title}} Only show: all active inactive {{user.name}} Active Inactive The name of this group:

This should all look pretty straight-forward, but a few things should jump out at you. First, the AngularJS specific tags, for example: {{user.name}}. As you can tell from the code above, we’re iterating over all the users in our JSON using an Angular specific “ng-repeat” attribute, and then displaying the users name. We’re also using “ng-show” to specify what color the users activity status should be given its value. Easy enough! The parts of this code worth explaining in more depth are the MVC components, and, scope.

Models, Views, and A LOT of Controllers
If you’re familiar with traditional MVC frameworks, and some of the more recent MVC web frameworks, you might be a little thrown off when it comes to Angular’s definition of a Controller. Instead of thinking of request routing, it might help to picture distinct parts of a single page being controlled by different controllers. You may end up with a lot of controllers if your pages are complex, but in the long run, your code ends up being succinct and easy to maintain. In Angular, views are straight-forward, and reference raw HTML templates. You can reference templates locally, remotely, and also explicitly route your applications requests to specific templates. Our example doesn’t contain any explicit routing, but this is something that you could specify in your applications main module. Speaking of our main module, this does need to be created, and in our case, 12

AngularJS Starter Kit it’s very simple. This is declared way up in the HTML tag in our index.html file like so: . Here is our main module in its entirety: Listing 2. intro.js
// This is your root application file. You can use this as an initialization file. // For example, your applicatinos routes (i.e.: /users) could be specified here. angular.module(‘AngularIntro’,[]); ng- Models in Angular can be anything you want them to be. In the case of building an application that talks to an external API, your models will most likely be Angular “services” that use the $resource module. This module helps handle all the RESTful legwork that you might want to take care of. An example of this is included in the comments above the declaration of the users array in our UsersController. Our UsersController is pretty straight-forward, and here it is in its entirety: Listing 3. users_controller.js function UsersController($scope) { $scope.title = “Staten Island User Group” $scope.activeStatus = ‘’; // Here are our users defined as JSON. In reality, we’d probably pull this list from our backend. // Angular has a great RESTful module called $resource that you should look at. // // For example, a call to an external service might look like this instead: // User.query({}, function(response) { // $scope.users = response; // }); // // For the above to work, you’d also need a service that would handle the actual request: // angular.module(‘userService’, [‘ngResource’]). // factory(‘User’, [‘$resource’, function($resource) { // return $resource(‘/users/:id’, {id: ‘@id’}); // }]); // // Let’s manually define our users here. $scope.users = [ { name: ‘Dennis Cole’, active: true }, { name: ‘Bobby Digital’, active: false }, { name: ‘Gary Grise’, active: true }, { name: ‘Corey Wood’, active: true } ] $scope.toggleActiveStatus = function(user) {

13

AngularJS Starter Kit if(user.active === true) { user.active = false; } else { user.active = true; }

}

}

// This echos your controllers arguments up top. // It is needed if you plan on minifying your javascript. UsersController.$inject = [‘$scope’]

In our example, the Controller simply defines a JSON array, and also declares a function. In the real world, the Controller would most likely handle all of the HTTP requests to your backend, declare functions to format your data, and various other utilities. In Listing 1., our div references the UsersController via ngcontroller=”UsersController”.This means anything nested within this div tag will be under the scope of the Controller.

Scope and binding is pretty complex, but for the most part, you can think of it as a place to put data. Our UsersController defined a $scope, declared $scope.title as a string, declared $scope.users as an array of JSON data, and also defined a function called toggleActiveStatus. In the HTML, nested under our UsersController, we can simply reference our title via the $scope like so: {{title}}. Easy! Angular makes accessing the data in $scope simple, and we don’t even need to reference $scope directly.
$scope

Even more interesting, we declared an input in the HTML, and specified an “ng-model” attribute on it. This tells Angular to bind what’s specified in ng-model to scope. Here we bound it to “title” which is already declared in $scope in the UsersController. Now, if you load the index.html page and type a new value in the input field, you should see the pages header change too! Since the data is bound via $scope, you don’t have to do anything else... any change to this scope value happens in real time.

Filters
Angular also has a bunch of handy utility-esque functions for manipulating data called filters. In our example, we used an expression filter on our ng-repeat, like so: ng-repeat=”user in users | filter:{active:activeStatus}. This tells Angular to filter the users array by whatever the value is for activeStatus. In our example, we initialize $scope.activeStatus to an empty string, which overrides the filter leaving the ng-repeat to repeat over all users. Now under the header of the index page, if you click the “active” link, we’ll explicitly set the activeStatus scope to a value of true, like so: ng-click=”activeStatus = true”. Now, since Angular has bound this filter to the activeStatus, clicking the “active” link will automatically filter the users list by this attribute, and you should only see active users being shown. Angular has other powerful filters built in that allow you to easily format dates, currency, specify limits, etc. Another great thing about filters in Angular, if you find you need a way to manipulate data regularly and in the same way, you can go ahead and create your own filters.

Directives
You could get lost for days in the documentation that surrounds directives. A good rule of thumb about Angular is that if you plan on doing any DOM manipulation, don’t do it in your views, do it in a directive. We added a simple directive in our input box called “default-placeholder”. Here is the code for that directive:

14

AngularJS Starter Kit Listing 4. misc_directives.js angular.module(‘miscDirectives’, []) .directive(‘defaultPlaceholder’, function() { return { restrict:’A’, link:function(scope, element, attrs) { element[0].placeholder = “Enter some text”; } } });

This is a simple as a directive gets. We access the element the directive is placed on, and set its placeholder to some text. If you remove all the text from the input on the index page, you’ll see the new placeholder text pop up. With access to the element in the directive, you could obviously do complex manipulations with the element and it’s attributes. Beyond simple DOM manipulation, directives allow for a lot of $scope manipulation and complex binding options as well.

Summary
Each of these examples is very basic, but hopefully illustrate some of the power behind the Angular framework. The framework itself is also very flexible, so as your application gets more complex, there are many ways to help DRY up code and keep things concise and manageable.

About the Author

The author has been developing with AngularJS for nearly two years, and has had a long writing applications for the web. Most recently, it has been writing AngularJS for a large people management platform called VerticalChange (https://verticalchange.com).

15

AngularJS Starter Kit

Diving into Angular by Josh Kuhn
What you will learn
• • • • What AngularJS is for, and what makes it a good choice for building web apps How to get up and running quickly with Angular using Yeoman and bower How to use the basic angular concepts of directives, controllers, services and filters to create a web app that can talk to a real RESTful api backend. Along the way we'll touch on some of the more advanced angular concepts that you'll want to be aware of so you can look them up later when you need them.

What makes AngularJS great?
AngularJS is part of a new breed of Javascript MVC frameworks that bring order to the chaotic world of heavily interactive web applications. Writing large web apps in jQuery alone simply becomes a twisted mess of callbacks and dom manipulation. These new MVC frameworks are a recognition that separation of concerns is a good idea if you want to build something maintainable. Angular distinguishes itself from other Javascript MVC frameworks like Backbone.js and Ember.js by taking a completely different perspective on how to do the view. Simply put, Angular doesn’t parse a template string and then insert it into the DOM with innerHTML, instead it let you use custom html tags, attributes, and classes to extend the behavior of HTML. The result is that you can create a completely declarative (logic free) view and have your controllers perform the logic without touching the DOM. This splitting up of responsibilities makes them much more testable and maintainable.

Getting Started
In this tutorial we’re going to create a barebones Twitter-like application called Pipr. Pipr allows you to create “pips” which are short 100 character or less “pips” that show up on the page in reverse chronological order. You can add tags to your pips, and you can post them with any name you like. In addition, you can delete your pips. The rest of this tutorial assumes you have nodejs installed on your computer. Instructions for installing it can be found at nodejs.org, or you can install it from your operating system’s package manager. Next, we want to install yeoman. Yeoman is a great tool for streamlining your javascript development workflow, and they have an excellent AngularJS plugin. First, install yeoman with npm:
$ npm install -g yo

Then, you’ll want to create your project directory and initialize your angular project. We’ll call the directory pipr. You can name it whatever you want, but yeoman uses the directory name to name the App itself, so you may have to tweak some of the examples if you call your directory something else.
$ mkdir pipr $ cd pipr $ yo angular

This will ask us a few questions.
[?] Would you like to include Twitter Bootstrap? (Y/n)

We do want twitter bootstrap, so say yes to this.

16

AngularJS Starter Kit
[?] Would you like to use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? (Y/n)

While SCSS is a great CSS authoring tool, it isn’t what we’re focusing on in this tutorial, just say No for now. On the next question, you’ll use spacebar to de-select cookies and sanitize, then hit enter when you’re done.
[?] Which modules would you like to include? angular-resource.js angular-cookies.js angular-sanitize.js

This will install a lot and then create the scaffolding for your project. Here are the files we care about at the moment: app/scripts ├── app.js └── controllers └── main.js app/views └── main.html app/styles └── main.css index.html

To check that everything is working, do:
$ grunt server

That will start a small nodejs server that will serve up your app on localhost:9000 and will auto-refresh when you change any files. This great! Yeoman has done a ton of gruntwork for us, and we can get straight to the good stuff now. Let’s open up app/views/main.html, then delete everything inside it. Now we can begin seeing where angularjs shines: declarative views. Pipr {{pip.name}} {{pip.pip}}

There’s a lot going on here, but I bet, even without knowing Angular, you can kind of see what it is trying to do. For every pip in some kind of list of pips, we render the pip name in bold and the pip text in italics. Angular uses the common “{{}}” syntax for templates, with the exception that your template must be valid html! This is because it gets rendered by your browser before angular gets its hands on it. So use “{{}}” syntax only inside text, not across tags etc. What is this tag though? That isn’t a part of html, how can that be legal? And what does the pip tag mean? That’s where Angular comes in. Let’s go into app/scripts/controllers/main.js and start looking around.
‘use strict’; angular.module(‘piprApp’) .controller(‘MainCtrl’, function ($scope) { $scope.awesomeThings = [ ‘HTML5 Boilerplate’,

17

AngularJS Starter Kit
‘AngularJS’, ‘Karma’

]; });

Yeoman has done a lot for us we can see. As we noted before, it’s automatically named our application ‘piprApp’ based on the directory name. This file defines what’s called a controller in Angular. Controllers are where the bulk of your logic should be. Controllers never muck with the DOM, they simply talk to the model, and the view talks to the controller. In Angular, we keep our models in the $scope object, which angular passes to us here. Scopes are hierarchical in Angular, and each controller creates a new one. Angular also watches for changes to attributes of the scope. Anything we need from Angular, we just ask for in the arguments to the controller, and Angular gets them to us using dependency injection. It’s almost like magic. This is pretty nice and frees us from having to worry about how to get what we need, and whether it’s visible etc. Just ask Angular, and it hands it to you. Below, we’ll ask for the $scope object, and Angular will inject it. Go ahead and alter the main.js file so it looks like this:
‘use strict’; angular.module(‘piprApp’) .controller(‘MainCtrl’, function ($scope) { // $scope is magically injected by angular, just because we named the argument $scope $scope.pips = [ {id: 1, name: ‘Jim’, pip: ‘Celebrity gossip is crucial to life success...’}, {id: 2, name: ‘Barry’, pip: ‘Just ate breakfast. Going to watch TV’} ] });

For now, we’ve added some fake pips to use as an example. We don’t yet know where the tag is coming from, but now we’ve defined the pips collection we iterate over. Controllers define the behavior we want, and set up the models. You’ll also note that our model is just a plain of javascript object. We don’t need to wrap our model or subclass anything, we can use whatever we want. This is especially cool when we start talking to the server because we can use exactly what the server gives us as our model, and send it right back to them without having to do a bunch of transformations (that is, assuming the server sends JSON).

Directives
If you went to go check your browser to see what happened, you’ll notice that we’re getting our pips showing up, but it looks a bit funky/broken. We’ll fix that next by defining what our tag does. We do this by creating what Angular calls a “directive”. Directives are great because they allow us to extend the functionality of html by making certain attributes and tags do special functionality. Directives give us the power to bend html to our will, while leaving our controllers free from DOM manipulation and our view (the html) free from inline javascript needed for functionality. Yeoman allows us to create directive boilerplate quickly, and will wire it up in our app for us. To create our pip directive, you just need to do:
$ yo angular:directive pip

This will create a new directory app/scripts/directives and a new file in there called pip.js. Open that up and check it out (I’ll omit the ‘use strict’ from here on out for brevity, but you should always have it at the top of every file): angular.module(‘piprApp’) .directive(‘pip’, function () { return {

18

AngularJS Starter Kit template: ‘’, restrict: ‘E’, link: function postLink(scope, element, attrs) { element.text(‘this is the pip directive’); }

}; });

This isn’t too far from what we want. Let’s modify it a little bit and then I’ll explain what all these parts mean! angular.module(‘piprApp’) .directive(‘pip’, function () { return { restrict: “E”, transclude: true, scope: { pip: “=currentPip” }, template: ‘’, replace: true }; }); class on the div.

All this directive does is set the html id to the pip id from the server, and automatically sets the .pip-box

First off, our directive returns what’s called a Directive Definition Object, each attribute we use here is important, as they all have defaults, which we’ve overridden for a reason. ~restrict:”E”~ means that this directive is looking for html elements named the same thing as the directive is named. Here the directive is named “pip”, so it’s looking for html tags called . We could have restricted it to “A” for attribute, or “C” for class also (or any combination like “AE”). transclude is the next attribute, and despite its scary sounding name, it’s a pretty simple concept. Normally, the directive wipes out the contents of the tag it is activated on, and replaces it with the template. Transclusion allows us to put those contents wherever we want in our template instead of throwing them away. For example if we have in our html:

Test

A directive without transclusion renders this to:

Whereas with transclusion on, we would get:
Test

Next, we have the scope attribute. By default, directives have the scope of wherever they happen to be dropped in the html. This can be an issue since the directive really can’t count on the scope having what it needs (although it could put it there if it needed to). By setting the scope attribute to an object, we’re telling Angular to create what’s called an isolate scope. All it means is that each instance of this directive plopped into your html will get its own scope which doesn’t inherit from the outer scope it happens to be in. In order to set up our pip tag, we need to give it a pip object, and we get that object from the syntax:
{ pip: ‘=currentPip’}

That allows us to pass in the pip like this:

19

AngularJS Starter Kit

The ‘=’ syntax means we get a two-way binding to a property of the outer scope. Normally, the isolate scope locks out all the variables from the outer scope, so we do this so that the user of the pip directive can tell it which object to use as the pip. Just remember: the directive is totally blind to where it is in the DOM. It’s a reusable component that doesn’t know what controller it will end up in, and it doesn’t know what properties are defined in whatever scope you’ve plopped it into. The best way to tell a directive what is going on is to pass it things it needs as attributes. The template attribute is fairly straightforward, it’s what to put into the directive. You can see the ngtransclude attribute in use, that’s how angular knows where to put the original contents. You can also can refer to the pip object we’ve been passed in from the outside world. see we

Finally, the replace attribute tells angular not to put our template inside of the tag it found in the html, but rather to replace it entirely.

Services
Go back to the browser and check it out. That looks good, but if we want to be useful, we’ll need to hook it up to a some kind of real backend. The server backend is something we may need access to in lots of different parts of the application, so the best way to expose it is to create what Angular calls a service. To create a service, go back to the command line and do:
$ yo angular:service Pipbackend

That will create a directory called app/scripts/services/ along with a file called Pipbackend inside it. That’s where we’ll define our service. Open up that file and make it look like the following: angular.module(‘piprApp’) .service(‘Pipbackend’, function Pipbackend($resource) { this.pips = $resource(‘http://pippypips.herokuapp.com/api/pips/:id’); });

Briefly, what we’ve done here is use the $resource service provided by angular-resource to make an object that communicates to our preferred backend. Now, if any part of our app wants to talk to the backend, they just have to ask for Pipbackend. If the url of the backend changes, we only have to change it in one place. If we want to do testing without hitting the backend, we can replace the service with a dummy backend, and none of the other code needs to change. There is one extra step we need to do to make this service work for us, which is to add ngResource as a dependency for our module. We didn’t create the app/scripts/app.js file, yeoman did, but we need to alter it now to add a dependency (this is the top level file, and where routes are declared, but don’t worry about that for now). Make app.js look like this: angular.module(‘piprApp’, [‘ngResource’]) // only this line changes .config(function ($routeProvider) { $routeProvider .when(‘/’, { templateUrl: ‘views/main.html’, controller: ‘MainCtrl’ }) .otherwise({ redirectTo: ‘/’ }); });

20

AngularJS Starter Kit This file is why our main.html file is so clean. The index.html file has got all of the boilerplate stuff in it, and it has a small container that our piprApp populates. Now that we’ve got our backend connection, we need to change our MainCtrl controller to use that backend instead of the fake pips we had before. Go back into app/scripts/controllers/main.js and edit it like so: angular.module(‘piprApp’) .controller(‘MainCtrl’, function ($scope, Pipbackend) { $scope.pips = Pipbackend.pips.query({limit: 10, offset: 0}); });

This is the magic of dependency injection. We just ask for the Pipbackend, and Angular gives it to us, no questions asked. The query() method comes from the $resource module that our Pipbackend uses. It queries for all of the pips on the server, with the paging criteria we give it.

Getting Input from the User with ngModel
Since we can now list pips from the server, the next thing we need to do is be able to create new pips of our own. Let’s add the html for that back in apps/views/main.html right above where we list all of the pips:
... Pipr {{100 – newPip.pip.length}} Post Pip ...

There is some new stuff here. ng-model is a convenient directive provided by Angular that lets us hook a form element right up to the current scope. Angular defines special directives for all html form controls, so we don’t have to manually add keypress listeners, or access the text attribute directly, or any of that. Also, if the “newPip” variable isn’t already in our current scope, ngModel creates it for us. ngModel is an example of a directive that triggers off an attribute (restrict: A), rather than being a tag like our tag was. The other new thing you’ll notice is ng-click on the post button. This calls a function on the current scope. We haven’t written makePip yet, but we’ll do that next. Note: You may have noticed that we play fast and loose with attribute names like ‘ng-model’ becoming a directive called ‘ngModel’. That’s because Angular normalizes all of these names from the html when we use them in the Javascript. So for example, ‘ng-model’, ‘ngModel’, ‘ng:model’, ‘x-ng-model’ and ‘datang-model’ are all equivalent. That allows us to use the conventions of html and say ‘current-pip’, but in the Javascript we can use Javascript conventions and refer to ‘currentPip’. You can try out the new form field in your browser. The countdown will work when you type in the pip field, but the post button won’t do anything since we haven’t hooked it up. Let’s go back to the MainCtrl again in app/scripts/controllers/main.js again and add the functionality we need. angular.module(‘piprApp’) .controller(‘MainCtrl’, function ($scope, Pipbackend) { $scope.refreshPips = function(){ Pipbackend.pips.query( {limit: 10, offset: 0}, function(pipList){$scope.pips = pipList} );

21

AngularJS Starter Kit
}; $scope.makePip = function(){ Pipbackend.pips.save($scope.newPip, function onSuccess(newPip){ $scope.newPip = {name: $scope.newPip.name}; $scope.refreshPips(); }); }; $scope.refreshPips();

});

This does a couple of new things. First, we made a function on the scope that refreshes the list of pips from the server. The scope is the right place to define functions like this. This function sets the $scope.pips value once the request is successful. We could have done something like this:
$scope.pips = Pipbackend.pips.query(...);

This will work, because the query function from ngResource returns an empty object that it will populate automatically once the server responds. The problem is that this causes the pip list to flash since we empty it out while the server response is happening. Setting the new value in the callback keeps everything smooth. Also worth noting is that we clear out the $scope.newPip variable when saving, but keep the name the same so the user doesn’t have to retype it.

Validation
Now we can create pips and post them to the server, but there are some rules about the pips we’d like to enforce so that the server doesn’t yell at us. The first rule is that a pip must be at most 100 characters long. Also, both the name and pip fields must have something in them. So let’s add that constraint to the form using Angular’s validation directives. We’ll go into the app/views/main.html and modify those two inputs like this:
... ...

In addition, we should enable or disable the post button based on whether the form is valid currently. Do that so:
... Post Pip ...

If you try it out in the browser, you’ll see that the button is disabled until we fill in both fields, and if we type more than 100 characters into the pip field, the button becomes disabled again. Neat and simple! There are more rules that the server uses to decide if an instance is valid, and we could codify them all using angular validation, but inevitably there will be some problems reported by the server that your client won’t be able to prevent. Things like two users editing at the same time etc. Let’s add an error box to report server errors. First edit main.html again to add the actual box right after our form:
... {{error}} ...

This will hide the alert when there is no error. Then add a failure callback to makePip in main.js: 22

AngularJS Starter Kit
$scope.makePip = function(){ Pipbackend.pips.save( $scope.newPip, function onSuccess(newPip){ $scope.newPip = {name: $scope.newPip.name}; $scope.refreshPips(); $scope.error = null; },function onFailure(response){ $scope.error = response.data.error; }); };

To test this out, try posting with a name longer than 100 characters.

Finishing Touches
There are a few last things we’d like to add to our app. • The ability to add tags to pips, and show them • The ability to delete pips • Show the creation date of the pips Here’s the final version of main.html: Pipr {{100 – newPip.pip.length}} Post Pip {{error}} × {{pip.name}} {{pip.pip}} {{tag}} @ {{pip.created | date:’medium’}}

You can see a couple of new things here. First is the filter we use when displaying the date. Filters are applied using the ‘|’ character, and Angular comes with some useful filters built in like uppercase, date, and currency. Here we use the date filter with an argument of ‘medium’ to show a human readable version of the pip creation date. 23

AngularJS Starter Kit We also added a delete button to every pip. You can see that when it’s clicked, the deletePip function will be called with the current pip’s id. We’ll write that function in a bit. The next interesting thing to notice is that we added an input for the tags from the user. The server, only accepts tags as a list of strings, so we need to split the raw input from the user before putting it into the model, and this is what the splitToList directive does. That isn’t a built-in directive however, so we need to write it. Let’s do that now:
$ yo angular:directive splitToList

Then open up app/scripts/directives/splitToList.js and add the following: angular.module(‘piprApp’) .directive(‘splitToList’, function () { return { restrict: ‘A’, require: ‘ngModel’, link: function (scope, element, attrs, ngModelCtrl) { ngModelCtrl.$parsers.push(function(text){ return text.split(‘ ‘); }); } }; });

This is a completely different kind of directive than we made before. It’s an attribute directive, and it has a requirement that an ngModel directive already be applied on the element we’re working on. Adding this require property also makes it so the ngModel controller is passed to our linking function. What’s a linking function? Simply put, it gets called after our directive is applied and lets us set things up for the directive. Here, all we want to do modify the ngModel’s list of parsers. The parsers are all applied in order to the input from the text box before it is added to the model. We add a function that splits on spaces to the end of the pipeline so that our model only ever receives a list of strings. Finally, let’s add our deletePip function so that we can delete pips that we don’t like. Here’s the final version of our main.js: angular.module(‘piprApp’) .controller(‘MainCtrl’, function ($scope, Pipbackend) { $scope.refreshPips = function(){ Pipbackend.pips.query( {limit: 10, offset: 0}, function onSuccess(pipList){ $scope.pips = pipList; $scope.clearError(); }, $scope.setError ); }; $scope.makePip = function(){ Pipbackend.pips.save( $scope.newPip, function onSuccess(newPip){ $scope.newPip = {name: $scope.newPip.name}; $scope.refreshPips(); }, $scope.setError ); };

24

AngularJS Starter Kit
$scope.deletePip = function(pipId) { Pipbackend.pips.delete( {id: pipId}, $scope.refreshPips, $scope.setError); }; $scope.setError = function(resp){ $scope.error = resp.data.error}; $scope.clearError = function(){ $scope.error = null }; $scope.refreshPips();

});

In addition to adding the deletePip function, we also tidied up the error handling a bit so that you always know what went wrong. Here’s the final source code tree for what we created: app/scripts ├── app.js ├── controllers │ └── main.js ├── directives │ ├── pip.js │ └── splitToList.js └── services └── Pipbackend.js app/views └── main.html index.html

Where to Go Next
There’s a lot more we could do to this app to get even more functionality. Here are some suggestions: • Add the ability to page results using the limit and offset parameters to query • Add a text box that filters pips based on their tags or content • Automatically add tags to a pip by parsing the pip body for hash tags • Add a refresh button to refresh the pips from the server In addition, here are some Angular resources that you’ll want to look into if you’re looking to build a real application: • Angular-UI: http://angular-ui.github.io is a great way to start adding ui functionality to your app • Restangular: https://github.com/mgonto/restangular is a powerful alternative to ngResource. It allows greater flexibility when interacting with RESTful apis. Finally, the source code for this tutorial, as well as the server code can be found at https://github.com/ deontologician/pipr. If you want to deploy your own pipr application on Heroku, you can use the code there to do it.

About the Author

Josh Kuhn is a programmist will introduce you to AngularJS using Yeoman.

25

AngularJS Starter Kit

AngularJS 101: A Beginner’s Tutorial by Karmen Blake This tutorial on AngularJS will guide you through the fundamentals of the framework. You will explore the exciting benefits of using a client-side JavaScript framework to create dynamic and modern web applications.
What you will learn
• • • • • • • • • • • Model-View-ViewModel (MVVM) Setup an AngularJS application Two-way data binding Controllers Scope and Functions Built-in Filters Directives Animations HTML CSS JavaScript

What you should know

Prerequisite Tools
• Favorite text editor (Textmate, Sublime Text, Vim, Emacs, etc.) • Modern Browser (Chrome, Firefox or Safari)

Index
• Getting started: Anatomy of an AngularJS application • Building the Team Roster App

Getting started
• Open your text editor and save the file as roster.html • Add skeletal web app markup and relevant libraries. • Include AngularJS library file • Bootstrap file (allows for styling of the page) • In order for this to be an AngularJS app start by adding the ng-app attribute onto the opening html tag, our first look at a built-in directive. • Directives allow us to extend the grammar of the web through reusable elements, attributes and classes. There are built-in directives, like ng-app, and a few others we will use. • On the opening body tag use another built-in directive: ng-controller. • Next, inside of the ng-controller div add an AngularJS template-style syntax for displaying data: {{ greeting }} (Listing 1). 26

AngularJS Starter Kit Listing 1. AngularJS application template Sports Team Roster {{ greeting }}

• You will bind a value to the variable in the controller. The controller will serve as our glue between the view and data. • Create another file called roster.js. This will hold our AngularJS JavaScript controller code (Listing 2). Listing 2. AngularJS code with basic controller var app = angular.module(‘rosterApp’, []); app.controller(‘rosterCtrl’, [‘$scope’, function ($scope) { $scope.greeting = “Hello AngularJS”; }]);

• Refresh your browser view of roster.html and you will see updates (Figure 1).

Figure 1. Browser view of the bound greeting variable

Building the Team Roster App
• To represent our “data” you will hardcode an array of player objects. Assign it to the $scope variable inside the controller definition block (Listing 3). This typically would be initialized from a call to a back-end web service. Listing 3. Add players array to represent the data var app = angular.module(“rosterApp”, []); app.controller(“rosterCtrl”, [“$scope”, function ($scope) { $scope.players = [ {“firstname”:”John”, “lastname”:”Doe”, “age”:”15”, “position”:”center”, “email”:”john@doe. com”}, {“firstname”:”Jack”, “lastname”:”Black”, “age”:”16”, “position”:”point guard”, “email”:”jack@ black.com”}, {“firstname”:”Randall”, “lastname”:”Good”, “age”:”15”, “position”:”forward”, “email”:”r@good. com”} ]; }]);

• In the roster.html file, you will display the players in a table view (Listing 4). 27

AngularJS Starter Kit • AngularJS provides a directive to to iterate over collections: ng-repeat. You put it in the element that you wanted repeated for each player, which in our case is the like this:

• While iterating over the collection, you have access to each player one at a time. You can access object properties and display them in curly braces and denote use of a data bound variable. Here is how you would display the first name of a player: {{player.firstname}} • You also have access to filters. Filters give you a convenient way to format text for common scenarios. There are filters to format currency, dates, upper and lower case, and more. You will use the uppercase filter to display the player position. It will look like this {{player.position | uppercase}} • Linky, another filter, autoformats URLs and emails into links. To use it, however, you must: • add the angular-sanitize.min.js library into your view template • add the ngSanitize module in the application as a dependent module. Your AngularJS application declaration should look like this: var app = angular.module(‘rosterApp’, [‘ngSanitize’]); • The syntax for linky is like so:

• The ng-bind-html directive is used to take the result of the linky filter expression and output it the innerHTML of the element. Importantly, it will sanitize the content for you. • There are times when rendering templates cause page elements to flicker. AngularJS has a solution to that and it is a directive called ng-cloak. You will put that as an attribute on the opening table tag.

Listing 4. Display players using filters Sports Team Roster Team Roster Basketball First Name Last Name Age Position Email {{player.firstname}} {{player.lastname}} {{player.age}} {{player.position | uppercase}}

28

AngularJS Starter Kit

Figure 2. Display players using binding data and filtering • What if the roster is empty? We can hide and show elements determined by the state of the players. You can use the length of the players, specifically. This will be handy if when the roster starts empty or if all players are removed from the roster. • Use the ng-show directive on the table element to show it if there is a length value (greater than zero) worth displaying the players.

• If the roster is empty then you will show a message saying so (Listing 5). Listing 5. Message to user letting them know there are no players to display No players on the roster. Please add players. :)

• As a convenience it would be handy to have sortable columns. So you will setup the first name to be sortable. • add an orderBy filter to the ng-repeat expression

• predicate is used by the comparator to determine the order of elements • reverse is a boolean that if set to true will reverse the order of the array • define the predicate and reverse when you click on the column header
First Name

• Predicate will use natural order sorting of firstname because it is a string • Toggle order of the array by negating reverse value when clicked. • Adding players to the roster • The form to gather values for the new player is very straightforward. We need to create an object to hold new values, bind the object properties to the corresponding input fields, then use ng-submit directive to call a scope function addPlayer().

29

AngularJS Starter Kit • Initialize a newPlayer object in the controller scope.
$scope.newPlayer = {};

• New player form (Listing 6) • The ng-model directive is used to populate the newPlayer object with corresponding values. Each field represents a property in the player javascript object. For example, the input for firstname has a directive ng-model=”newPlayer.firstname”. Listing 6. New player form with bindings First name Last name Age Email Point guard Shooting guard Wing Forward Center Add

• When the form is submitted the addPlayer scope function is called (Listing 7). It is responsible for: • push the newPlayer object onto the array • clear the newPlayer object Listing 7. Scope function, addPlayer(), is responsible for adding a player
$scope.addPlayer = function() { $scope.players.push($scope.newPlayer); $scope.newPlayer = {}; };

30

AngularJS Starter Kit • Here is where AngularJS binding power occurs. Once you fill out the new player form and submit it you will notice the table listing adds another row with your new player!! Anything bound to the $scope is “observed” and acted upon. • Remove a player from the roster • Each player gets an associated remove button. Each button gets a handler attached to it. Using the ngclick directive we pass in the player to be deleted into the scope function removePlayer(player). Remove

• The removePlayer function handles finding the player in the players array and removing it (Listing 8). Listing 8. Scope function, removePlayer(player), used to remove a player
$scope.removePlayer = function(player) { if(confirm(“Are you sure?”)) { scope.players.splice($scope.players.indexOf(player), 1); } };

• Since the players array is observed by AngularJS, once a player is removed it handles the template and removes the table row for you. Awesome! Here is a graphic to display a general idea how data binding works. The $scope, view model, handles our binding updates model and views for you (Figure 3).

Figure 3. View model handles two-way binding between view and model.

Figure 4. Team roster view with adding and removing players • Animating the addition and removal of players, also known as “eye candy”! • AngularJS 1.2 provides animation hooks that can be triggered during the life cycle of various directive. 31

AngularJS Starter Kit Animations can be controlled by CSS or by custom JavaScript. You are going to use a cool animation library, Animate.css, to help out. • Include library files

• Add the ngAnimate module in the application as a dependent module var app = angular.module(‘rosterApp’, [‘ngSanitize’, ‘ngAnimate’]);

• Different directives support different animation hooks. In our case, ng-repeat supports the enter hook when a new player is added and also the leave hook for when a player is removed. AngularJS will add classes to those elements being acted upon, ng-enter class for newly added elements and ng-leave for elements to be removed. • Create a roster.css file and add the following CSS to it (Listing 10). • Notice the styles being defined for ng-enter and ng-leave. This is where we benefit from using some of the sweet animations from the Animate.css library. Listing 9. CSS to handle animations for player additions and removals
.player.ng-enter { -webkit-animation: fadeInLeft 1s; -moz-animation: fadeInLeft 1s; -ms-animation: fadeInLeft 1s; animation: fadeInLeft 1s; } .player.ng-leave { -webkit-animation: bounceOut 1s; -moz-animation: bounceOut 1s; -ms-animation: bounceOut 1s; animation: bounceOut 1s; }

Summary
The team roster app is well on its way to becoming useful. Feel free to modify and tweak the code to get more familiar with it. To further enhance it you could accommodate the editing of a player and saving its state (local storage or back to a database) so that you do not lose your work. I hope I’ve motivated you to pursue learning more about AngularJS. Future AngularJS topics to look into would be: • Form Validation • Services • Integrating with a backend webservice (served by Rails, Node.js, etc) • Routes and multiple templates • Testing A working version of this application is found on Github at https://github.com/kblake/team-roster-app. I encourage you to clone it. If you have improvements or additions please fork and modify.

32

AngularJS Starter Kit

On the Web
• • • • • •

http://egghead.io http://www.cheatography.com/proloser/cheat-sheets/angularjs/ https://plus.google.com/+AngularJS/posts/aZNVhj355G2 http://www.divshot.com/blog/tips-and-tricks/angular-1-2-and-animate-css/ http://daneden.me/animate/ http://docs.angularjs.org/guide/animations

Glossary

MVVM (Model-View-ViewModel): architecture parttern targeted at UI development platforms which support eventdriven programming. MVC (Model-View-Controller): software architecture pattern where the model consists of application data and business logic. The controller as a traffic control cop and handles inbound and outbound interactions to and from the models and views. The view displays the data in a meaninful way. Directive: Built-in or custom HTML extension that allow you to add powerful behaviors to your web applications. Filter: transforms a string or array into a more desirable form. Binding: AngularJS supports two-way data binding where any changes in the model are propagated to the view and any changes in the view are reflected in the model. Scope: is the glue between application controller and the view. Controllers and directives have reference to the scope.

About the Author

Karmen Blake has over 15 years of experience in developing full-stack mobile and web applications. Karmen provides leadership and experienced insight into high technology projects. Specializing in Java, Ruby on Rails, and several other languages, he has been a part of software engineering teams for Apple Inc., Wildfire Interactive (acquired by Google), and GeneTree (acquired by Ancestry.com). Karmen has also been a tenured faculty member at Spokane Community College teaching web and software development. Education: MED, Technology; BAE, Computer Science, Eastern Washington University. Currently a Sr. Solution Architect at Magner Sanborn, a full service advertising and brand design agency (http://www.magnersanborn.com).

33

AngularJS Starter Kit

JEDI SENATUS: an italian open source project aims towards the systematic software reuse in organizations by Ciro D’Urso, Alberto Persello, David Visicchio Software is constantly increasing in its importance in the enterprise. Organizations have to tackle the difficulties and costs associated with the development of software. A promising option, though not a ‘panacea’ [4], is to foster the reuse of existing software or the building system out of carefully designed, pre-tested components specifically developed with reuse as a goal [1, 2, 3]. Software reuse is the use of existing software or software knowledge to construct new software [9]. Accordingly ‘reusability’ is a property of a software asset that indicates its probability of reuse. To develop a software showing a proper reusability the programmers have to spend an extra effort mainly due to additional generalization, documentation and testing activities.
My colleagues and I in the Italian Senate [5] have embraced the best practice of software reuse in all its IT projects, so that, following an approach called Component Based Software Engineering (CBSE) [7, 8], the informative system is based on an half dozen of reusable components and on assets that take several forms: methods and classes in libraries, OSS (open Source Software) components, modules in specific domain (e.g. user’s authorization and profiling). In this context an important effort has been put in standardize the way all the software applications operating in the Senate information system, either custom made software or COTS (Commercial Off The Shelf Software), produce and provide documents in different formats. The result was an open source software called JEDI SENATUS [6].

Highlights of JEDI SENATUS
JEDI is a J2EE application that provides a centralized service aiming at significantly simplifying the generation of data driven documents in an enterprise environment (See Figure 1).

Figure 1. Overall view of the JEDI service 34

AngularJS Starter Kit The documents (hereafter called JEDI documents) can have different format types: pdf, excel, rtf, plain text data streams and xml streams. JEDI documents are instances of the so called managed documents (see below), configured by a developer into the JEDI configuration database (JEDI_DB). The provision of a JEDI document is based on a synchronous processing performed by the JEDI core engine triggered by an end-user request (through HTTP request or RMI invocation, see Figure 2).

Figure 2. Processing a document request The content of a JEDI document must be an XML stream regardless of the source. Such data is afterwards processed through one or more XSL transformations in order to provide the user with the document in the required format. The definition of XML stream source and XSL transformation are main parts of the managed documents. This approach guarantees an high decoupling level between the JEDI service itself and the documents to be generated, since each managed document can be added (or modified) at runtime without restarting the JEDI service. Some types of documents (pdf, rtf and excel) are generated by using open source libraries such as Apache FOP and POI [11, 12]. These architectural pattern is very general and represents a standard way of interaction requiring a minimum effort to be adopted by whatever software application.

Managed documents
A managed document is a package composed of configuration data and a set of rules containing the logic to generate a JEDI document. Each managed document regards a specific type of document and it is identified by a unique identifier (a numeric ID). All the configuration data, defined by the document developer, are stored into the JEDI configuration database (JEDI_DB). The attributes of a managed document are listed in the following. • Description: it is an internal description for documentation purposes; • Reference application: it is the description of the application to which belongs the document. Being JEDI a centralized provisioning service, it can manage documents of every application running in the enterprise environment; • Output format: it specifies the format type of JEDI document that will be generated; • Transformer: it is an XSL document that will be used to transform business data XML into the requested JEDI document. Alternatively can be specified a reference to a generic reusable XSL (see below); • XML data source: it is a group of attributes that specifies the source of the XML business data (see below); 35

AngularJS Starter Kit • Parameters: they are parameters to be provided to the XML data source in order to retrieve desired business data; for each parameter should be specified description and type (Integer, String, Date, Double, Boolean or Long); The managed documents can be defined or modified directly on the database or through JEDI admin interface. This is a software module based on JSF and EJB created to easily configure new managed documents (it is also available a testing function in order to easily generate a JEDI document). The main attributes of a managed document are discussed in the following sections.

Output formats
An output format specifies the type of the JEDI document that will be generated. Currently JEDI handles the following output formats: • PDF (using XSL/FO transformations) • RTF (using XSL/FO transformations) • Excel (using XSL to produce a transient XML document that will be processed with POI library to produce an Excel document) • Text (using XSL to produce a transient XML document that will be processed to produce apositional text document) • XML • HTML The XSL transformer must be specified accordingly to the chosen output format. As a further consideration JEDI allows the overriding of the default output format (e.g. PDF in RTF and vice versa). Each format type is defined into the JEDI configuration database (JEDI_DB) and is identified by a unique ID. It has the following attributes: • Mime type: is used to show the JEDI document into a browser • Transformer class name: Java fully qualified class (implementing XMLTransformer interface) used by the JEDI core engine to produce the JEDI document From the foregoing we note the possibility of adding at runtime other output formats.

Reusable transformers
A reusable transformer is an XSL document stored into JEDI_DB as independent transformer available to be used in various documents. A managed document indeed can reference to a reusable transformer without specifying an own XSL document. This can be useful for simple data presentation independently from the XML data structure, for example to provide a generic record set data via plain excel file. JEDI application comes with some reusable transformers already defined but can be added other ones.

XML data sources
An XML data source specifies where and how the XML business data have to be read. An XML data source may have different attributes depending on its type (configured into JEDI_DB). A data source type can be one of the following: • Stored procedure: it is a stored procedure that provides XML business data. In this case the XML data source of each managed document must define the procedure name to be invoked; 36

AngularJS Starter Kit • JEDI XML Document: it is a reference to another managed document having XML as output format. This feature allows to easily create a chain of managed documents; in that case all the documents belonging to the same chain must have the same set of input parameters; • URL: it is an URL pointing to a Web resource that return XML stream (i.e. a web service or a servlet). In this case the XML data source must define the string representing the URL; • SQL query: it is a string representing a query to be executed on the enterprise database; the resulting record set is converted into an XML stream. In that case the XML data source of each managed document must define the SQL query where parameters are substituted by the character “?”. Each XML data source type defines a Java fully qualified class (implementing XMLSourceReader interface) used by the JEDI core engine to read the XML business data. JEDI application comes with two different implementations (for Stored procedure data sourcetype) based on Oracle database: one to be used for stored procedure returning XMLTYPE data and another one for a stored procedure returning a result set. Anyway it is also possible to define other XMLSourceReader implementations.

JEDI documents generation
The document generation is processed by JEDI core engine. It is a module based on a servlet and an EJB and it is able to produce JEDI documents triggered by end-user requests. The core engine is based on MVC pattern (Model view controller): the presentation layer is represented by the XSL transformations chain, the model layer is carried out by the XML source, whereas the controller layer is implemented by the servlet (or the EJB) exposed to the final user. The central component of the engine is DocProducerEJB, an EJB that manages the following tasks: • Reading the managed document’s ID from end-user request and loading of the configuration from JEDI_DB • Instantiating the proper XMLSourceReader object depending on the specified XML data source in the managed document • Mapping the input parameters of the end-user request into the XML data source invocation and reading the XML business data • Instantiating the proper XMLTransformer object depending on the format type and on the transformer specified in the manage document. • Applying the transformer task based on a XSL transformation and an optional Java processing (depending on XMLTransformer implementations) • Returning the JEDI document A JEDI document can be obtained by two different ways to be used depending on the final user needs: • An HTTP request • A RMI call to EJB During the entire process the documents exist just in memory and are returned to the caller as a stream (showed in the browser in case of HTTP request or passed as a byte array in case of a RMI invocation).

HTTP request
The JEDI core engine provides a servlet (DocProducerServlet) that generates the JEDI document by using DocProducerEJB and shows the document as a byte array with the proper HTTP headers (mime-type, length...). The HTTP request must specify in the URL querystring the managed document ID and the list of 37

AngularJS Starter Kit input parameter values formatted as strings. Here is an example of an URL requesting the JEDI document identified by 26: http://:/jedi/document/documentList.faces?id=26&valString=251&valString=Rossi The parameter named id contains the identifier of the managed document. It is followed by a valString for each input parameter of the managed document (if a parameter has null value you should indicate valString=&). The possible parameter types and their string representations are: • Integer: the relative string without thousands separator; • String; • Date: the string as dd/MM/yyyy; • Double: the relative string should be formatted using the current Locale settings; • Boolean: the string “true” or “false”; • Long: the relative string without thousands separator; The default output format of the managed document can be overrided, specifying in the URL a format parameter whose value is the identifier of the desired type.

RMI invocation
The final user can invoke the methods of DocProducerEJB. They allow to pass the values of the input parameters and to get the JEDI document as a byte array. Moreover to get rid of server performance issues, it’s possible to execute part of the engine work on the client side by using some additional methods of DocProducerEJB and the proper XMLTransformer class.

Use of JEDI
JEDI application is designed for Java 7 and JBOSS Application server 7.1.1. but it can be installed on other J2EE AS. The database used is Oracle 11g. Anyway, changing some configuration file, you can use a database of another vendor. The JEDI admin interface is developed using JSF 2.1.7 and JBoss Rich Faces 4.3.0 (http:// www.jboss.org/richfaces). Excel documents are generated using Apache POI 3.5 (http://poi.apache.org). PDF and RTF documents are generated using Apache FOP 1.0 (http://xmlgraphics.apache.org/fop). JEDI has entirely been developed by the ICT Department of the Italian Senate and is released under the GPL3 open source license. Therefore, it is freely usable, modifiable, embeddable and distributable as long as the Italian Senate is mentioned as author. JEDI is on Source Forge. To use JEDI, a user has to: • compile JEDI or download the binaries • create a JEDI configuration database • configure JBoss application server • deploy jedi.ear file • run JEDI admin interface

38

AngularJS Starter Kit

Compile JEDI or download the binaries
To compile the project there is an Ant file named build.xml located in the project tree. So you can use directly Ant tool or import the project into your favorite RAD and compile it. If you want to use JEDI without compiling it, you can download the binary version.

Create a JEDI configuration database
JEDI needs at least a configuration database where to store all the managed documents. The database used is Oracle 11g. Anyway, changing some configuration file, you can use a database of another vendor. At first you have to create a schema named JEDI. Afterward execute the following scripts (located in setup/database folder) in order to create the configuration database: • JEDI-DDL.sql: creates the tables • JEDI-Seq.sql: creates the sequences • JEDI-Data.sql: writes some predefined configuration data

Configure JBoss application server
JEDI application is designed for Java 7 and JBOSS Application server 7.1.1. but it can be installed on other J2EE AS, changing some configuration files. In the next, the steps configuration for JBoss 7.1.1. and Oracle 11g are described.

Datasource
In order to connect to the configuration database, JEDI uses Hibernate framework as implementation of JPA. In the persistence.xml file, it is referenced a datasource, whose JNDI name is java:jboss/jdbc/JEDI-DS. So you have to define, in your application server, a datasource with that JNDI name. If you are using the JBoss standalone server, you must add the datasource definition into the datasources element of standalone.xml file, located in configuration folder. For the other cases read JBoss server documentation. Here is an example of an Oracle datasource definition (you have to write to right information for the connection-url, user-name and password elements): Listing 1. Sample jdbc:oracle:thin:@dbmsserver:1521:mydb oracle 1 10 username password

Note that the previous datasource uses a driver, named oracle, that is defined in this way:

39

AngularJS Starter Kit Listing 2. Sample oracle.jdbc.driver.OracleDriver oracle.jdbc.xa.client.OracleXADataSource

And uses a module, named com.oracle.ojdbc6. You can add this module to JBoss, extracting com.oracle. ojdbc6.zip file (located in setup/applicationserver folder) in jboss_home/modules folder.

Logging
JEDI uses Log4j as logging system (the channel is named senato.jedi) to write some activity information on a log file. So you have to define, in your application server, the logging settings. If you are using the JBoss standalone server, you can writes the following code into the subsystem logging element of standalone.xml file, located in configuration folder. For the other cases read JBoss server documentation. Listing 3. Sample ... ...

Security
JEDI admin interface requires authentication and authorization definition (JAAS) in order to prevent illegal accesses to it. An user is allowed if he has JEDI_Admin role in a realm named other (this information is written in web.xml file). If you have already an own realm available you can use it (and grant JEDI-Admin role to the authorized users). In the next we are using a simple realm created with JBoss tools (for further information read JBoss server documentation). In this case you have to create application-users.properties and application-roles.properties files and the you add the following piece of code into the subsystem security element of standalone.xml file, located in configuration folder.

40

AngularJS Starter Kit Listing 4. Sample

Deploy jedi.ear file
The jedi.ear file has to be copied into the deployments folder of your JBoss application server.

Run JEDI admin interface
Open the browser at the following address: http://localhost:8080/jedi/document/documentList.faces. Then insert username and password and create the first managed document.

Conclusion
The ICT department of Italian Senate has stated a strong motivation for reuse at strategy level. In particular my colleagues and I put a great effort in identifying what is worth to be made reusable in every software project, and, despite a key reuse role in the organization has not been introduced, we developed a deep awareness and motivation considering the human factors very important for the success of every software reuse initiative [10]. The small size of software staff (less than thirty) maybe has been an enabling factor in introducing the reuse process coupled with training, awareness and motivation initiative. In the present work we have analyzed an application that has been the result of a process of reuse aims to simplify and standardize the lines of code that is necessary to develop within a generic application for the generation of documents. This process has produced not only a software module reused in every project into our organization, but also an open source project which we deem so general that it can be shared with the community.
[1] Reifer, D.J., Practical Software Reuse. New York, John Wiley & Sons, 1997. [2] Shirley V. Browne and James W. Moore. 1997. Reuse library interoperability and the World Wide Web. In Proceedings of the 19th international conference on Software engineering (ICSE ‘97). ACM, New York, NY, USA, 684-691. DOI=10.1145/253228.253836 http://doi.acm.org/10.1145/253228.253836 [3] James W. Moore. 2006. Converging Software and Systems Engineering Standards. Computer 39, 9 (September 2006), 106-108. DOI=10.1109/MC.2006.302 http://dx.doi.org/10.1109/MC.2006.302 [4] W.J. Tracz, Software Reuse Myths. ACM Software Engineering Notes, volume 13, Number 1, January, 1988, Pages 17-21. [5] www.senato.it [6] http://sourceforge.net/projects/jedisenatus/ [7] George T. Heineman, William T. Councill (2001). Component-Based Software Engineering: Putting the Pieces Together. Addison-Wesley Professional, Reading 2001 ISBN 0-201-70485-4 [8] Clemens Szyperski (2002). Component Software: Beyond Object-Oriented Programming. 2nd ed. Addison-Wesley Professional, Boston ISBN 0-201-74572-0

References

41

AngularJS Starter Kit
[9] Frakes, W.B.; Kyo Kang, “Software reuse research: status and future,” Software Engineering, IEEE Transactions on, vol.31, no.7, pp.529,536, July 2005, doi: 10.1109/TSE.2005.85 [10] Morisio, Maurizio; Ezran, M.; Tully, C., “Success and failure factors in software reuse,” Software Engineering, IEEE Transactions on, vol.28, no.4, pp.340,357, Apr 2002 doi: 10.1109/TSE.2002.995420 [11] http://xmlgraphics.apache.org/fop/ [12] http://poi.apache.org/

42

AngularJS Starter Kit

JUnit Test Should Include Assert by Damian Czernous A static code analysis is an important part of the software development life cycle, but like every tool, it must be adjusted adequately to the reality of the project. A PMD JUnit should include the Assert rule which makes a test suite more understandable and has a positive impact on final design of the production source code.
What you will learn...
• • • • • • How the rule improves design of the production source code Why communication between objects is an important responsibility How to assert a code with JUnit How to verify a code with mocking framework e.g. Mockito Have an experience with TDD Have an experience in working with a legacy code

What you should know...

A few months ago during annual review of SonarQube (http://www.sonarqube.org) I took a part in the discussion on PMD rules. A talk about JUnit Should Include Assert (http://pmd.sourceforge.net/pmd-5.0.5/ rules/java/junit.html#JUnitTestsShouldIncludeAssert) engulfed most of the time. I have heard different opinions derived from different points of view. Interesting observation was that the rule didn’t rise doubts for non void methods, so I will start with that. It’s natural to test non void methods for example with the help of org.junit.Assert.* tools, but the void methods have no result value that could be tested. Generally speaking, a talk about methods may be narrowed to the scenarios where: • method does calculation and delegates work • method delegates work • method does calculation These three cases and a simple calculator application will create a frame for further considerations.

Method does calculation and delegates work
Normally, for every adding operation a calculator shows subtotal until equals button is hit. Let’s consider user command class (PlusCommand) for adding numbers that uses long sum(int... numbers) method from Calculator class. Listing 1. Sample public class PlusCommand { private final Calculator calculator; private final UserOut userOut; private long subtotal; public static PlusCommand create( Calculator calculator, UserOut userOut ) { return new PlusCommand( calculator, userOut ); } private PlusCommand( Calculator calculator, UserOut userOut )

43

AngularJS Starter Kit
{ }

this.calculator = calculator; this.userOut = userOut;

public void execute( int... numbers ) { subtotal += calculator.sum( numbers ); } userOut.sendMessage( String.valueOf( subtotal ) );

}

The class is an example of maximum cohesion (each method uses all class members), which is rare and can demonstrate the proper structure and purpose. An execute(...) method does two things: delegates adding operation and calculates subtotal. The subtotal can be tested either by verifying calls to the user out or asserting additional getter method. Listing 2. Sample
@RunWith( MockitoJUnitRunner.class ) public class PlusCommandTest { private PlusCommand plusCommand; @Mock private UserOut userOut; @Mock private Calculator calculator; @Before public void setUp() { plusCommand = PlusCommand.create( calculator, userOut ); } @Test public void shouldCalculateSubtotalOfTotals() { when( calculator.sum( 0 ) ).thenReturn( 0L ); when( calculator.sum( 1, 2 ) ).thenReturn( 3L ); when( calculator.sum( 4 ) ).thenReturn( 4L ); plusCommand.execute( 0 ); plusCommand.execute( 1, 2 ); plusCommand.execute( 4 ); InOrder inOrder = inOrder( userOut ); inOrder.verify( userOut ).sendMessage( eq( “0” ) ); inOrder.verify( userOut ).sendMessage( eq( “3” ) ); inOrder.verify( userOut ).sendMessage( eq( “7” ) ); inOrder.verifyNoMoreInteractions();

}

}

Verification by definition is a process of establishing the truth whereas assertion is a confident and forceful statement of fact. The return value is a candidate for a fact e.g. long sum(...). A method without the return 44

AngularJS Starter Kit value can be tested by verifying its behaviour. Based on that, it’s logical to expect non void methods to be responsible for calculating returning value and voids to take care of proper flow of information. The example execute(...) method mixes both worlds, which in this case is not a good idea. In order to understand why let’s write some obvious statements first. • The PlusCommand class reflects the fact that Add button on the calculator is being hit. • The Calculator class represents machine that does math on request. • The subtotal holds a middle and occasionally final result of the calculator’s business. In light of the above, the current application design fits better the scenario where human being must remember each adding operation in order to get the final result. This is due to Calculator class that doesn’t encapsulate functionality related to computing subtotal properly. The primary responsibility of the PlusCommand class is to trigger sum operation and display result on the user screen. A communication between delegations is essential for this job, because it implements the expected application flow. The calculation of the subtotal, on the other hand, is simply ambiguous in this place. Earlier mentioned alternative solution of asserting subtotal by using getter method sounds a bit better. At least tests would assert that value. Unfortunately in both cases it’s necessary to mock objects that are not directly involved into the process of mathematical calculation (e.g. UserOut). That is because the execute(...) method still has to be called. Frankly speaking, it would be unexpected from the user (or any other developer) perspective to look for it in order to add a bunch of numbers. From the technical point of view this may satisfy the rule, but technical capabilities are the tools in human hands and should be used wisely. Listing 3. Sample public class PlusCommandTest { ... @Test public void shouldCalculateSubtotalOfTotals() { when( calculator.sum( 0 ) ).thenReturn( 0L ); when( calculator.sum( 1, 2 ) ).thenReturn( 3L ); when( calculator.sum( 4 ) ).thenReturn( 4L ); plusCommand.execute( 0 ); assertEquals( 0, plusCommand.getSubtotal() ); plusCommand.execute( 1, 2 ); assertEquals( 3, plusCommand.getSubtotal() ); plusCommand.execute( 4 ); assertEquals( 7, plusCommand.getSubtotal() );

}

}

Context of the Single Responsibility Principle (SRP)
When a single method does computation and in parallel delegates part of work, it may violate Single Responsibility Principle. In the example, PlusCommand class calculates subtotal and performs user request. One application may want to ask for a subtotal only. The other, related to the user interface, may ask to handle user requests and display results on the screen. Mentioned principle is one of the more important in Object Oriented Programming (OOP). In 1979 Tom DeMarko in his Structured analysis and system specification on page 310 called this cohesion. In 1995 45

AngularJS Starter Kit Robert C. Martin in his replay to the post The Ten Commandments of OO Programming (https://groups. google.com/forum/?hl=en#!topic/comp.object/WICPDcXAMG8) posted on Comp Object forum revolved around the idea. In March of 2002 he wrote an article The Single Responsibility Principle (http://www. objectmentor.com/resources/articles/srp.pdf) published on Object Mentor that was largely discussed and referenced in many publications. Later on Michael C. Feathers introduced SOLID; an acronym for first five class design principles described in Robert’s The Principles of OOD (http://www.butunclebob.com/ArticleS. UncleBob.PrinciplesOfOod) article.
Definitions

There should never be more then one reason for a class to change “The Single Responsibility Principle” (http://www.objectmentor.com/resources/articles/srp.pdf), Robert C. Martin, 2002 A class should have only one reason to change “Agile Software Development: Principles, Patterns, Practices”, Chapter 8 (https://docs.google.com/file/ d/0ByOwmqah_nuGNHEtcU5OekdDMkk/edit), Robert C. Martin, 2003 Every class should have a single responsibility: It should have a single purpose in the system, and there should be only one reason to change it. “Working Effectively with Legacy Code”, Chapter 20, Michael C. Feathers, 2004 Rober C. Martin concluded his article that “the SRP is one of the simplest of the principle, and one of the hardest to get right”. Another example may show a method that computes and delegates but doesn’t violate SRP e.g. calculation of ratio (equation: a/b = c/d, where a and d are called the extremes, and b and c are called means). The ratio may help to find e.g. salary increase, because based on its properties, the forth element of well known three (base salary, increase in percents, base salary in percents) is required to find interesting value. With such occasion, the Calculator class can be used for finding intermediate results. Listing 4. Sample
@RunWith( MockitoJUnitRunner.class ) public class RatioTest { private Ratio ratio; @Mock private Calculator calculator; @Before public void setUp() { ratio = Ratio.create( calculator ); } @Test public void shouldFindForthWhenThreeExpressionsAreKnown() { double base = 10000; double increaseInPercents = 0.2; double baseInPercents = 1; when( calculator.multiply( increaseInPercents, base ) ).thenReturn( 2000.00 ); when( calculator.divide( 2000.00, baseInPercents ) ).thenReturn( 2000.00 );

46

AngularJS Starter Kit double increase = ratio.findA( increaseInPercents, base, baseInPercents ); } assertEquals( 2000.00, increase, 0 );

}

Proposed test asserts ratio calculation and mocks Calculator class. Mocking ensures isolation of the find(...) business from the other externals (multiply(...) and divide(...) methods). Isolation in testing is essential. Any third-party object shouldn’t influence processing of the method that is under test harness, because tests are also meant to determine place of failure. Listing 5. Sample
@RunWith( MockitoJUnitRunner.class ) public class RatioVerificationTest { private Ratio ratio; @Mock private Calculator calculator; @Before public void setUp() { ratio = Ratio.create( calculator ); } @Test public void shouldCallMultiplyOfMeansAndDivideOfAntecedentAndConsequentToGetRatio() { double mean1 = 1.0; double mean2 = 2.0; double antecedent = mean1 * mean2; double consequent = 1; when( calculator.multiply( mean1, mean2 ) ).thenReturn( antecedent ); ratio.findA( mean1, mean2, consequent ); InOrder inOrder = inOrder( calculator ); inOrder.verify( calculator ).multiply( mean1, mean2 ); inOrder.verify( calculator ).divide( antecedent, consequent ); inOrder.verifyNoMoreInteractions();

}

}

Above verification test (sometimes called integration or communication) in order to satisfy equation of ratio validates a chain of calls to third party Calculator class. With combination of both tests, where one asserts final result and the second proves a correct order of mathematical operations, it’s possible to determine which part is responsible for possible errors. Combining them together is a common mistake, which makes tests less self explanatory. Such practice may lead also to false positive conclusion that verification can be used in asserting a code. Listing 6. Sample public class Ratio { private final Calculator calculator; public static Ratio create( Calculator calculator )

47

AngularJS Starter Kit
{ }

return new Ratio( calculator );

private Ratio( Calculator calculator ) { this.calculator = calculator; } /** * @return a for a/b = c/d; a = bc/d */ public double findA( double b, double c, double d ) { return calculator.divide( calculator.multiply( b, c ), d ); }

}

Method delegates work
Let’s refactor the example class first. Listing 7. Sample public class PlusCommand { private final Calculator calculator; private final UserOut userOut; ... public void execute( int... numbers ) { calculator.sum( numbers ); userOut.sendMessage( String.valueOf( calculator.getTotal() ) ); }

}

When working with a legacy code, any changes to the code should be followed by testing. If this is the case, verification of the subtotal can be placed in characterization tests (term introduced by Michael C. Feathers), so refactoring will be possible. While moving calculation into the Calculator class such tests should be replaced with functional units. With new design the sum(...) method becomes void, and the subtotal is just passed over on the user screen. Now, execute(...) method only delegates work. Listing 8. Sample
@RunWith( MockitoJUnitRunner.class ) public class PlusCommandTest { ... @Test public void shouldCallAdditionToGetTotal() { int firstToSum = 0; int secondToSum = 1;

48

AngularJS Starter Kit

plusCommand.execute( firstToSum ); plusCommand.execute( secondToSum ); InOrder inOrder = inOrder( calculator ); inOrder.verify( calculator ).sum( firstToSum ); inOrder.verify( calculator ).getTotal(); inOrder.verify( calculator ).sum( secondToSum ); inOrder.verify( calculator ).getTotal(); inOrder.verifyNoMoreInteractions();

}

@Test public void shouldPassResultOfAdditionToUI() { long firstToPass = 0; long secondToPass = 1; when( calculator.getTotal() ).thenReturn( firstToPass ).thenReturn( secondToPass ); int notImportant = -1; plusCommand.execute( notImportant ); plusCommand.execute( notImportant ); InOrder inOrder = inOrder( userOut ); inOrder.verify( userOut ).sendMessage( String.valueOf( firstToPass ) ); inOrder.verify( userOut ).sendMessage( String.valueOf( secondToPass ) ); inOrder.verifyNoMoreInteractions();

}

}

Because tests still just verify the code, eponymous PMD rule can be seen of little use. In fact, it’s not true. Asserting and verifying are very different activities. Tests that assert a code, check behaviour of the processing mechanism whereas those, that verify, spy for potential communication problems. Of course both types of tests are meant to satisfy business logic, but with different focus. Based on that, assertion and verification tests can be grouped in separate classes. And since discussed PMD rule concerns only assertion tests, classes that contain verification tests should be excluded with class level annotation @SuppressWarnings(“PMD.JUnitTestShouldIncludeAssert”). Listing 9. Sample
@SuppressWarnings(“PMD.JUnitTestShouldIncludeAssert”) @RunWith( MockitoJUnitRunner.class ) public class PlusCommandTest { ... }

There is another meaningful aspect, which is descriptive class and method naming. It allows to read tests like a story. So, it may be helpful to check how method name fits context of the class. Is it true that PlusCommand. shouldCalculateSubtotalOfTotals()? No, of course not. But PlusCommand.shouldCallAdditionToGetTotal() and PlusCommand.shouldPassResultOfAdditionToUI() fits much better. To find proper names for verification tests thinking about communication is critical. After all, communication is an important responsibility in every system.

Method does calculation
After refactoring of the PlusCommand class the sum(...) method isn’t non void any more, but still does calculation that can be validated through getter getTotal() method. 49

AngularJS Starter Kit Listing 10. Sample public class CalculatorTest { private final Calculator calculator = Calculator.create(); @Test public void zeroAndOneGivesOne() { calculator.sum( 1 ); } assertEquals( 1, calculator.getTotal() );

@Test public void oneAndTwoGivesThree() { calculator.sum( 1, 2 ); } assertEquals( 3, calculator.getTotal() );

@Test public void threeAndMinusOneGivesTwo() { calculator.sum( 3 ); calculator.sum( -1 ); } assertEquals( 2, calculator.getTotal() );

} public class Calculator { private long total; ... public void sum( int... numbers ) { for( int number : numbers ) total += number; } public long getTotal() { return total; }

}

Summary
The PMD rule keeps an engineer’s eye on separating assertion and verification tests from each other. This is because they have different goals to achieve. Assertion tests validate facts such as results of computing. Verification tests check communication between application components such as calculation unit and user UI.

Replacing assert with verify
A good testing practice says don’t replace assert with verify. From the example, calling sendMessage(...) 50

AngularJS Starter Kit method with accurate subtotal ensures that result of the addition operation has been successfully passed over (ensures expected communication). It’s tempting to use this phenomenon as a gateway for asserting any computing. It’s tempting even more when working with a legacy code, because this workarounds refactoring. It’s pretty clear that more natural is to assert calculations; especially with Test Driven Development. It’s also less likely to get complex production code, when tests drive design, because it would be quite strange to put subtotal into the PlusCommand class while working with TDD. An order “don’t replace assert with verify” traps essence in a background, which is helpful remainder to think about design.

Naming
Another good practice says test one thing at a time. A communication is a one thing and calculation is another. The meaning of the thing should be clearly explained by the test method name and should fit the context of the test class. So in result everyone may understand and learn from tests how application works. Of course, it isn’t the only practice to follow, but I like it for one more reason. It demonstrates respect to other engineers that will read the code after me. It’s a kind of behaviour that proves professionalism in engineering life. The JUnit Should Include Assert PMD rule makes more sense, when other good software development practices are followed. In other words keeps them alive.

About the Author

Damian Czernous is a programmist who wants to share his knowledge with others. This is an example of his work. Feel free to comment it!

51

AngularJS Starter Kit

Wrap collections by Damian Czernous The essence of Object Oriented Programming (OOP) can be captured by three words: polymorphism, inheritance and encapsulation (PIE). In the end, these terms represent specific object design concepts It takes time to gain proficiency in using PIE during software development process e.g. wrapping data collections can be seen as an example of encapsulation. It’s really awesome how wrapped collections look and how they release engineers from thinking about the collection internals.
What you will learn...
• • • • Why collection details should be isolated from the rest of the application How to wrap collections Understand Java collections How to implement Object Adapter (Object Wrapper) design pattern

What you should know...

Collections may store many kinds of data e.g. identifiers or people. When they are used, two important things have to be kept in mind: mutability and meaning (especially with a collection of primitives). Additionally, sorting, comparing, converting or other manipulation might be required. The mutability of the collection relates to the safety of the application, meaning to the understanding of the source code, manipulation to the specific functionality. The important question is where to handle all these aspects. One possible scenario is to use collections directly and deal with all of them in a place they’re needed. Listing 1. Sample public class PeopleService { private final PeopleDao peopleDao; private Set emailDomains; public static PeopleService createWithDefaultDao() { return new PeopleService( PeopleDao.createDefault() ); } private PeopleService( PeopleDao peopleDao ) { this.peopleDao = peopleDao; } public void findAndSortDescendingEmailDomains() { emailDomains = new TreeSet( Collections.reverseOrder() ); } findEmailsAndExtractDomains();

public void findAndSortAscendingEmailDomains() { emailDomains = new TreeSet(); findEmailsAndExtractDomains();

53

AngularJS Starter Kit
} public Collection getDomains() { return Collections.unmodifiableSet( emailDomains ); } private void findEmailsAndExtractDomains() { for( String email : peopleDao.findEmails() ) { emailDomains.add( email.substring( email.indexOf( “@” ) + 1 ) ); } } } ...

The PeopleService class delivers useful information such as sorted email domains to other business components that require them for further processing. Thanks to the class’ descriptiveAPI, it’s pretty clear how to use it. The user may use PeopleService for finding and sorting, in descending or ascending order, email domains – for example to construct a report that will show the email providers used by people registered within a system. Let’s list all the tasks done by this class in order to deliver expected functionality. • Aggregates PeopleDao for obtaining people-related data from the database • Stores a unique domain collection to limit number of request done to the database • Extracts the domains from people’s email address • Removes duplicates from the domain list • Sorts the domains in ascending or descending order • Presents results in an immutable form to the outside world • Decides on a best collection usage from the performance point of view e.g. by choosing Set collection The first two tasks are indeed, related to the business functionality. The third, fourth and fifth are helpful tools, whereas the last two relates to the safety and efficiency of using Java collections. Such design may have following effects: • changing the functionality may affect the way of using the collection, resulting in extra effort. • it is necessary to consider collection handling, for example immutability, while being focused on business rules. This must also be kept in mind for future changes. • changing collection handling (e.g. To improve performance) requires attention to business rules • exposing a Java Collection as the result of getDomains() forces users to manipulate the collection to apply additional filtering. • code duplication when two or more classes operate on domains, causing extra maintenance effort. All these effects have further negative consequences. The ore troublesome is likely the reduced readability of the PeopleService class that costs time and extra brain power to use it. Such design can be seen also as an example of programming devoid of self reflection, since thinking on how other engineers will be able to understand and use the source code is probably most important activity to be done.

54

AngularJS Starter Kit

Wrap Collections
The greatest benefit of encapsulation is ability to change the implementation without breaking or touching other code. This is done by hiding implementation details behind a public API. In case of the PeopleService class it would be quite helpful to separate the business logic from the collection manipulation. That makes the first and second tasks, of the seven listed above, still a resident of current class. The remaining five move to a separate class that encapsulates the details of using the collection. After such refactoring, the PeopleService class only focuses on its job. Listing 2. Sample public class PeopleService { private final PeopleDao peopleDao; private UniqueDomains uniqueDomains = UniqueDomains.createEmpty(); public static PeopleService createWithDefaultDao() { return new PeopleService( PeopleDao.createDefault() ); } private PeopleService( PeopleDao peopleDao ) { this.peopleDao = peopleDao; } public void findEmailDomains() { uniqueDomains = UniqueDomains.convert( peopleDao.findEmails() ); } public UniqueDomains getDomains() { return uniqueDomains; } } ...

Listing 3. Sample public final class UniqueDomains { private final Set ascDomains; private final Set descDomains; public static UniqueDomains convert( Emails emails ) { UniqueDomains uniqueDomains = UniqueDomains.createEmpty(); for( String email : emails.list() ) { uniqueDomains.add( email.substring( email.indexOf( “@” ) + 1 ) ); } return uniqueDomains; } public static UniqueDomains createEmpty()

55

AngularJS Starter Kit
{

}

TreeSet ascDomains = new TreeSet(); TreeSet descDomains = new TreeSet( Collections.reverseOrder() ); return new UniqueDomains( ascDomains, descDomains );

private UniqueDomains( Set ascDomains, Set descDomains ) { this.ascDomains = ascDomains; this.descDomains = descDomains; } public void add( String domain ) { if( !ascDomains.contains( domain ) && !descDomains.contains( domain ) ) { ascDomains.add( domain ); descDomains.add( domain ); } else { throw new InconsistentStateException(); } } public Collection ascendingList() { return Collections.unmodifiableSet( ascDomains ); } public Collection descendingList() { return Collections.unmodifiableSet( descDomains ); } @Override public boolean equals( Object o ) { ... } @Override public int hashCode() { ... } @Override public String toString() { return “UniqueDomains{“ + “ascDomains=” + ascDomains + “, descDomains=” + descDomains + ‘}’; }

}

The UniqueDomains class wraps Java Collections, and isolates technology related details from the need of using list of unique domain entries. The PeopleService class still uses the PeopleDAO object to retrieve data from database and stores found domains for future use. However, PeopleService is no longer aware of what kind of collection UniqueDomains are stored in and how e.g. to sort it. On the other hand, the wrapped collection 56

AngularJS Starter Kit doesn’t care much about business logic, but focuses on proper collection handling. As a result, it’s also possible to use it in different scenarios. The UniqueDomains class is fully immutable, so it’s safe to pass it by reference over the system. This is possible due to: • making class final • hiding constructor and using static factory methods (this is not necessary, but again hides details about collection from the outside world) • controlling getter methods (e.g. ascendingList()) and eliminating setter methods It’s self explanatory in every the system for several reasons: • the class name explains both the type of stored data (domains) and its nature (unique) • static factory methods better explain effects of the construction e.g. createEmpty() • public API provides a clue about all possible manipulations • static tools such as convert(Emails emails) complements information about possible usage

These kinds of objects belong to the application domain, since they represent a group of existing individual domains. For example the class Houses may wrap List. Sometimes plural nouns in the class names can be seen a bit strange. In most cases singular nouns are used. This is also common for other definitions such as the naming of database tables. However, this doesn’t violate naming conventions since they restrict naming only to the nouns without any further clarification (see Java Code Convention chapter 9 http://www.oracle.com/technetwork/java/javase/documentation/ codeconventions-135099.html#367).

Summary
Wrapping collections are a good practice to follow. With little effort better separation of the business logic and technology logic can be achieved. This is similar to the DAO design pattern that hides details of the CRUD operations. Wrapped collections encapsulate all aspects of their life in a single place, and they can be changed without affecting users.. Also, the wrapped collection improves readability by clarifying the business context with use of a specialized public API and descriptive class/method names. From the system business point of view, wrapped collections are black boxes. The most important thing is that they work, not how.

About the Author

Damian Czernous is a programmist who wants to share his knowledge with others. This is an example of his work. Feel free to comment it!

57

AngularJS Starter Kit

The Ninja Programmer (And the Exasperating Job Posts) by Matthew T Rupert Many of us have seen them: The job posts claiming to be seeking a “Ninja Programmer.”

I presume that these are companies that are: • Looking for a well-versed candidate with diverse skills and the ability to tackle any project. • A candidate that will find more value in the way he/she is perceived than salary. (Reading between the lines: “We can’t pay you much, but we will appreciate you a lot!”) This may not always be the case, but there there often seems to be a hint of this in “Ninja” job descriptions. The second point is based on other verbiage I have seen alongside such job posts. Things such as “Do you find more value in what you get to do each day than anything else?” Sure, I find value in the more exciting aspects of a role. The opportunity to learn new things, set direction, and get things done. Of course! I also find value in money. Let’s be honest here. Sometimes the word Ninja is replaced by other crafty (or not-so-crafty) buzzwords: Rock Star, Guru, Genius, Superstar. It doesn’t take much insight to recognize the aim of such verbiage: Flattery. Maybe it’s ironic, this attempt at flattery. Or maybe the recruiting person who came up with the verbiage understands something that is clear: We’re not Ninjas, Superheroes, Rock Stars, or any other amazing superlatives. We’re people, and as such, prone to flattery. Some of us may be better than others, but we all must work very hard to create any kind of outstanding, better than average output. I’m sure that any company using such lingo in a job description is sincere in the desire to find a candidate who is very good–one who will be able to complete sizable, complex tasks. Able to leap tall requirements in a single bound! Why wouldn’t they want this? I also think that a single superb programmer can often achieve the work of three, perhaps four or even five, average programmers. I’ve seen it all, and however good I strive to be, I’ve been astounded by folks who are better (in some case much better). I’m fascinated by some of the legendary programmers out there: People like Linus Torvalds and James Gosling. But even the most famous programmers rely on a tremendous and ever-growing amount of community insight and preexisting work. (By the way, there is a video from a Google I/O Conference, The Myth of the Genius Programmer that addresses this subject very well. See The Myth of the Genius Programmer at http://www.google.com/events/io/2009/sessions/MythGeniusProgrammer.html). 58

AngularJS Starter Kit So yes, I suppose I have worked with a few “Ninja Programmers” over the years. The term is highly relative, unless these programmers were actual Ninjas. I’ve had positions where I may have been considered the Ninja. I’ve had other positions where any Ninja-like self satisfaction was as elusive as the stealth and cunning of a Ninja portrayed in a 1980s movie. How did this lingo come about? Those of us in the business of writing software often have a few other desires. I know I do. Anyone who grew up in the 80s dreams of being a Rock Star, Ninja, or at least Frank Dux. The buzzword job titles are a way of making a job that might be very difficult, taxing, and demanding of time and talent sound appealing. I may have to work 100 hours a week, but at least I’ll finally be a Ninja! It’s no different than job descriptions that contain the infamous words, “We work hard and play hard!” What does play hard even mean? It sounds like something that might involve torn ligaments. The point of this post isn’t to seem cynical (although it might). The point is this: Software Developers, Architects, Engineers, whatever you call them, aren’t some strange group of people that have to be wooed or tricked into accepting a position. We’re grown adults. There are certainly great Software Engineers out there. But they aren’t stealthy, and they don’t hide in trees or karate chop bad guys. I’ve worked with some brilliant software folks over the years. I’ve worked with some very poor ones as well. Those times in my career where I’ve found myself the lone “Ninja” of the team have been among the most floundering times of my career. It is difficult to teach oneself new things in a vacuum. I’ve found that it is best to be on a team with lots of other “smart folks”–people from whom you can learn, and people who will add checks and balances. That so-called Ninja–The lone genius that a company relies on for all software needs–is going to cause a few problems. A few that I can think of right away: • A lone programmer–the company “genius”–will soon face burnout. No matter how much the individual loves writing software, one can only be stretched so far. This highly talented individual has all sorts of opportunities coming his or her way. It won’t be long before such a talented person is offered a job making more money and working fewer hours. What happens when the single guru leaves the company? • The lone programmer may not play nice as the company grows. It can be difficult to let others touch your baby. When you’ve written thousands of lines of code and a new team member comes along and starts mucking with it, there can be problems. I’ve been the new guy, pestering the old guy, and messing around with legacy code, much of it poorly documented. I’ve also been the guy on the other side, a bit perturbed when someone dare say that my code might be better if… Be gone, you and your new design pattern! • Along with number 2, any programmer with enough of an ego to allow himself or herself to be labelled the company’s Ninja, is likely to have an ego that does not lend itself well to “playing nice with others.” I have to confess once again to having been on both sides of this. It feels great to be in a position where you are thought of as being “the smart guy.” Although burdensome, it feels good to be trusted with the complexities of software that nobody else understands. It also leads to a certain feeling over ownership of code, and heavy reliance on a single individual. • When trusting that lone smart guy/gal with all of the code, a determination has been made: There will be no collaboration–no merging of ideas–no team to challenge each other, from within, to do better. It’s the sharing of backgrounds and experience that leads to the best software design, and I believe this is true no matter how talented one programmer happens to be. I’m sure there is more that could be added to this list. These are just a few quick thoughts on the matter. While being a Rock Star might not be all that bad, I don’t want to be a Ninja. Sometimes Ninjas get blowdarts stuck in their necks. Sometimes they get beat up by Bruce Lee.

59

AngularJS Starter Kit

Native Apps by Martijn Smit, WeMa IT In 2007 and 2010 the modern smartphone and modern tablet were born. There are three different development forms, native, web or hybride. In this report the following question will be answered: Which development form (native, web or hybride) has the biggest development potential for the future. To answer this question it’s important to know when it all started and which properties the different development forms have, what are the main advantages and disadvantages, and what will the future bring. There are three main platforms iOS, Android and HTML5 Native has the property that it is written in the same language as the operating system of the device, this is in Java for Android and Objective-C for iOS. Web has the properties that it is internetbased and developed in HTML5. Hybrid uses both native properties and web properties. Hybride apps are developed using frameworks like sencha touch and phonegap.

The advantage of native is a good implementation of the hardware features and good support which results in a good quality app.The advantages of web and hybride are that the code only has to be written once. Deployment for web is on a webbrowser, which reduces the cost. For hybride the main advantages is that apps are written in the native environment with HTML5. Disadvantages of native apps are the cost in development because it’s harder to build. The main disadvantage of the web form is that it can only be used if there is a internet connection present and there is no distibution channel the publish apps. Hybride apps have the disadvantage to be rejected on submitting a app to the appstores.

60

AngularJS Starter Kit In the recent past Facebook has stopped using their hybride apps because of performance issues and now uses only the native apps. Facebook has reconsidered it strategy and focusses on native now. For the future looking at the big companies and their strategies its good to follow in there footsteps based on quality. In the future native will have the biggest potential as development form. Thats why it’s wise decision as a developer or development company to choose for native.

Introduction
Mobile devices such as smartphones and tablets are changing the world. The ways of communicating with each other will drastically change. Where once people spoke weekly now is everyone constantly connected. Everyone communicates with each other through software that are on smartphones and tablets. This software is also known applications and briefly under the name known as apps. Due to the large growth and increase in the use of mobile devices such as smartphones and tablets, there is a strong demand for developers of apps. Now there are in developing apps three forms in which these apps are developed. This development forms are known as native, web, and hybrid. In the developmentprocess, it is very important that there is a choice made for a development form for which will be developd. For qualitity good app It is important that a good choice is made for the development form, because to this is often the business strategy related to the companies that want to develop apps. This business strategy is prepared for the future. This also leads to the following main question which development form (Native, Web or Hybrid) has the most potential for the future? By looking at the history and the moment when modern smartphones and tablets have emerged, a sense of time created. There will also look at what actually involve specific properties of each shape development (native, web or hybrid ). There will be clear what the strengths and weaknesses of three different development types. But also by looking at recent developments and what the future will bring, there will be a future picture of the development forms. This report will be treating the history of apps by looking at where it all started there. Started hereinafter, the properties of each development method may be dealt with separately. On the basis of the properties, it is clear what are the advantages and disadvantages. It is looking to the future in this chapter what the future holds, this is clearly on the basis of the balance is set at the pros and cons and what the future holds. This will follow with a conclusion which clearly form which development has the greatest potential for the future.

Results
When did it all start?

On January 9, 2007 Steve Jobs introduces the iPhone at Apple’s MacWorld. This is the birth time of the “ smartphone revolution. A smartphone is an English term that literally means smart phone. The smartphone is a mobile device that you can email, chat, for example, filming, taking pictures, plan routes etc. This smartphone was a small mini desktop computer. (Berry, 2013). The iPhone includes the iOS operating system, the operating system contained in the first instance only native apps that could be like the YouTube app and calendar app. Because these apps were already installed on all iPhones. Many developers also wanted to develop something but this was not so far been possible. It came quickly to change. In 2008, Apple came up with a so-called Appstore here is also directly a development tool made to create apps and has responded to the demand of the developers. Partly due to the abbreviation of application and appstore came the term and the name ‘apps’ to its shape. The good interface of the iPhone and integration of the payment of iTunes was also a good cost-effective business model for developers realized (Mobilemac, 2012) In September 2008 Eric Schmidt (CEO and since April 2004 chairman of the Supervisory Board of Google went Inc.). collaboration with network provider T – Mobile. Jointly developed Google and T -Mobile phones that had to compete with the iPhone. This was named "G1" (Google 1) and was the first smartphone with Google's operating system called Android. The appstore Google first was called the Android Market and worked with the same model as earn the Apple appstore. Later, the Google Android Market Google Play Store.Na renamed the smartphone revolution has introduced the iPad tablet in 2010. This makes the tablet revolution started. Following this, there are also 61

AngularJS Starter Kit Android tablets developed by companies such as Samsung, HTC, LG, and Asus (Tech Pluto, 2008). A tablet seems generally much a smartphone as turning on any apps. In the year 2012, the web development language HTML5 unveiled as the successor to HTML 4.0.1. (HTML stands for hyper text markup language). HTML5 is mainly used as a web development language. With HTML5, it is also possible to build Apps hence the name Web Apps (Mewara, 2013).

Properties of the development forms
In “Properties of the developing forms’ is treated as the properties of the various development forms. There will be started watching the development platforms and platforms on which these development are run, are the properties discussed below.
Platforms

There are three platforms that are listed. • iOS • Android • HTML5 iOS, this platform is known for its iPhones, iPods and iPads in short, the mobile Apple products. On this platform is the Appstore the main distribution channel for apps. The Android platform is known of smartphones and tablets from Samsung, HTC, LG, Asus and other manufacturers. Android is currently the major counterpart of iOS. Because Android is an open system, this means that each manufacturer must, use. This is a great diversity originated in manufacturers who use the platform as the operating system on which they developed their own smartphones and tablets. The HTML5 platform is a web technology that is supported by both iOS and Android platforms and thus runs on all tablets and smartphones (Dingen, 2012).
Properties of Native

Within the mobile market is often referred to the term “Native” but which is actually native to? If we look in the online dictionary, the definition of native, in the form of computers. “Designed for use with a specific type of computer” (Dictionary.com, 2013) Translated this means “designed for use with a specific type computer “When we talk about applications on mobile devices is ‘Native’ what it means according to (Kyrnin, 2013). A native app is an application for a mobile device. Mobile devices are in this case known as Smartphones and Tablets. These apps are installed directly on the device this means in short, that there is a piece of software is installed on the device. Itself These apps are obtained (downloaded) through special distribution channels. These stores such as the Apple Appstore and Google Play Store, are places where all the apps and downloading. In the case of these apps Native apps are written in the programming language in which these apps are created for the mobile devices. Currently that for iOS in the language Objective C and Android in the Java programming language (Jacobson, 2012).
Properties of Web

The properties of a web app that a web app is an app that is purely driven by the Internet and specific functions for mobile devices. This means that Web apps run through the web browser of the mobile device. These apps do not need to be downloaded or installed on the mobile device. This is the distribution channel of web apps so the internet. Web apps are written in standard Web languages. The foundation of these programming languages are HTML, JavaScript, XML, JSON and CSS3. This merged called HTML5 which these apps running (Krooshof, 2012).

62

AngularJS Starter Kit
Properties of Hybride

The properties of a hybrid app that this development form an app uses the native and HTML5 elements and this therefore used combines. These apps are also written in standard web languages allows this also looks like a web app. The difference between a web app and Hybrid app is that the Hybrid app has a native shell and herein is disguised as if it were a native app. This makes it difficult to see the user or a Hybrid or Native app now is. This Hybrid apps are also distributed through specialty stores like Apple app store and Google Play store. This Hybrid apps use special developed frameworks. These are aid packages which there can be programmed into a web language in a native environment these frameworks are known by the names PhoneGap and Senscha Touch (Kornaat, 2012).

Advantages and disadvantages of Native, Web and Hybrid Apps
The advantages and disadvantages are viewed by development form. First, we look at the advantages and disadvantages of Native apps below to the Web and Hybrid advantages and disadvantages.
Advantages of native

The big advantage to native apps is that these apps are built in the same language in which the operating system is written. This results in a performance gain in speed because all elements always react as fast as the apps also run on this operating system is not what is the case on a separate surface on the web. The app stores like Apple ‘s App Store and Google Play give users an easy way to find. Native apps soon Because an app store is the quality of the apps closely monitored. For the development by Apple itself issued a development program that enables developers to join this program is called xCode for iOS started. Google itself also gives a special software development kit for developers so from this to this is a special plugin for Android in the Eclipse development program started. Through this development packages own issued accelerates the development process because there is a good support from the community has emerged from the companies themselves. The app stores function as an ideal distribution center and sales channel for apps. The security of a native app is compared to a web app much better since these apps will be checked before they go. Appwinkel the This is done through application guidelines and points on which these controls are (Apple, 2013). To develop native will be a separate development process for each app must be followed. This is because each mobile development platform has its own native programming language. This is the programming language Java for Android and the programming language Objective- C for iOS. There are standardized software development tools, these are called SDKs (software development kits ). These development tools include standard interface elements for building native apps for the chosen platform. The development tools and own app distribution channels of the two currently largest players in the mobile market, Apple and Google created this unique ecosystem that can work on new innovative products and are exhibited in the app store. Native offers more possibilities, as is the ability of a native app that is made from the native features of the mobile device. Use with a native app we look This allows the hardware to be addressed such as the camera, accelerometer and other hardware of the mobile device immediately. Push messages are also a great advantage of native. Push messages are sending messages to the users of the App. These options are only native apps and Hybrid. The biggest advantage of this is that the user may be, and can be sent directly messages directly approximates (Peerdeman P, 2013).
Disadvantages of native

If we look at the disadvantages of native apps are those that it is more expensive to develop because it needs to be developed for multiple platforms. They are currently the iOS and Android platforms. Maintenance and updates will be implemented and version control is more difficult. By the app developer Furthermore, the App store apps made disapprove of what quality the process of acceptance before the app comes in appwinkel slow and can sometimes completely prohibit the app if it does not meet the requirements (de Vries, 2011).

63

AngularJS Starter Kit
Advantages of web

Web apps can be written in a language and works on any platform unless it has a web browser. Mobile Web apps are written in web languages and programming languages known as HTML5, CSS3, and JavaScript web frameworks like PHP. In short, the standard languages used in web development. This a web app works directly on multiple mobile devices. This is done using the wora (Write Once Run Anywhere) methodology. This makes creating a web app very easy and very cheap. Furthermore, users do not specifically to an app store but can be downloaded from a web site and install it. Furthermore, the app always launched and are not tied to a strict selection procedure of the app stores on quality (Picco, 2011).
Disadvantages of web

The security of a web app is not optimal because these apps run in the browser and can be for example a website attacks. DDOS attack by this removed from the air This is due to Web apps a secure connection is used according to (Kelly Jackson Higgins, 2013). The capabilities of Web apps that these systems have a limited access to the features of the mobile device and example only use orientation, geolocations and media. If we look at the disadvantages of Web apps often emerges to be via a web connection. Always connected As a result, there will be a connection should always be possible to operate the present application this can be seen as a disadvantage. Furthermore, there is no centralized app store where to find web apps will there is no right distribution channel is present. The quality of Web apps can not measure the quality of a native app. Partly because there is no check on the apps are made like a native app or Hybrid (Mudge, 2012).
Advantages of Hybride

Hybrid apps are written in web languages like Web apps but are in a frame, this may be of special features of Javascript or the framework itself. Also used In a hybrid app, the two combined, the web app and native app. There is a web app built in a Native context. What does the app, it can also be published in the various app stores as if it were a native app. Furthermore, there may be programmed into the web language making it easier to develop. From the outside it seems Native but from the inside it's an app. Hybrid apps are cheap in development like Web apps because they often use an existing web application or website.
Disadvantages of Hybride

The security of Hybrid apps is better organized than Web apps as they are also approved as Native apps before they go to the app store. The capabilities of a hybrid apps that it has the same capabilities as a Web apps and possibly a few additional options such as use of the camera can be realized. By the framework If we look at the disadvantages of hybrid apps this is often because this is not a true native app but uses a framework with web languages to program this app. By developing with the development form a native app, there is a chance that this app is rejected on quality. Because the app is not used by Native language of the platform itself (Jacobson, 2012).

What does the future hold?
In this part of the report will be clear what the future will bring and developments in the field of Web, hybrid and native apps. Furthermore, we also looked at the developments in the market and figures.
Developments in the market

Developing apps is not taken seriously in the beginning as a separate market. But this really should be seen as a separate category of the market. By the recent developments of mobile devices Web agencies often do not yet have the expertise of developing native apps. As a result, many web apps developed in recent years as the information of websites was often reused for this Web apps. The advantage for many web agencies is that they do not have to do for retraining or hiring dedicated programmers for the iOS and Android platforms. Additional investment Hybrid apps are currently often the best option for the existing web agencies since they can provide without compromising on development costs by Hybrid apps can be as Web apps. Developed with the same web technologies Native experience The trend is that currently many web companies opt but in fact they still provide a web app disguised as a native app (Midden, 2012). 64

AngularJS Starter Kit
The assessment and future of Web, Hybrid and Native Apps

It is always a tradeoff between Web, Hybrid or Native.

Figure 1. Comparison of native, hybrid, web properties Source: http://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Development. As shown in Figure “Comparison of Native, Hybrid, Web properties “ see above, there must be a constant trade-off which is the most ideal scenario. There is an ongoing debate between choosing Web, Hybrid and Native. This discussion is still the order of the day all we see in this recent developments which shift toward Native apps. As an example the Facebook app and taken the words of Mark Zuckerberg. Facebook knows everyone as the social media platform and the owner and founder Mark Zuckerberg is seen as one of the greatest players of the new technology market. Perhaps the new Steve Jobs of this generation according to (Mitchell, 2011). This may be his words anyway with what strength fitted. The Facebook app was in the beginning a web app as was also the mobile market is still not taken seriously by Facebook in the beginning and said focused primarily on the desktop browser experience of Facebook. But Facebook had mistaken it is important and how fast the mobile market for Facebook was going to be. The rapid recent developments This is the Facebook app when converted to a Hybrid app and was for a time on Facebook a focus on HTML5. Until the moment it rained massive complaints about the speed of the Facebook app on iOS and Android. This was the statement by Mark Zuckerberg who made it to the TechCrunch ‘s Disrupt Conference in San Francisco on September 11 in an interview (Olandoff, 2012). Zuckerberg: “ Betting completely on HTML5 is one of the, if not THE biggest strategic mistake we’ve made.” (Zuckerberg, 2012) In this interview Mark Zuckerberg told they have believed in HTML5 and late have recognized that Native yet it was better for the Facebook app (McCarty 2012) too long. Facebook has thereby app built entirely from scratch again and as Native iOS app released and thus has full HTML5 waved according to (Hamburger 2012). The iOS app has thus become much faster and the problems regarding the slowness of the app disappeared. Moments later Android also had to believe and this is completely rebuilt. This is according to (Josh Constine, 2012) the Facebook HTML5 App nightmare all over. Now this will not be in any app, since Facebook an app that lot is used but this seems to be a trend put recent examples are apps that also have switched to Native as Accounting software company Xero ‘s their HTML5 app discarded and a native app build (Russell, 2013). Because of these recent developments, it seems that this trend is also put in the app landscape. Because there is no control over how Web apps there has been a rapid proliferation emergence of Web apps. There are therefore a result of this no exact figures are known. Native apps which these figures are known, for example in the first quarter of this year 2013, there are 13.4 billion apps downloaded and Apple’s App 65

AngularJS Starter Kit Store is 74 percent of the total turnover of the market leader. Google Play is the largest in terms of number of downloaded apps. 51 percent of the net for Apple continues according to (Telecom Paper, 2013). Native apps and hybrid apps make the service from within this app stores.

Conclusion
The modern smartphone and tablet are introduced in the years 2007 / 2012 and to the development forms are also introduced at this time. There are three platforms iOS, Android and HTML5. The properties of native that these apps are written in the language of the operating system. The languages in which Native apps written Objective- C for iOS and Java platform for the Android platform. The properties of Web that should be by Internet to function properly. These apps powered Web apps run this Webapps are written in HTML5. In the browser of a smartphone and a tablet. The properties of Hybrid are developed in HTML5. and Native elements. It can develop in frameworks like Sensa Touch and PhoneGap. Advantage of native is that this is written in which it is conceived and therefore is faster than Web and Hybrid, also because the elements used by the operating system itself in the language. There is good security and quality by strict rules and can be made of access hardware used. Disadvantages of Native that it is more expensive in development and maintenance is difficult because apps approved. Web advantage of is that there is an application need to be developed only once and this makes develop inexpensive. Disadvantages of Web that they are not properly protected against DDOS attacks and there is no central store. A Web application has access limited hardware and must always have an internet connection. Benefits of Hybrid that these are to be written. Need will not be written in two separate languages in web languages like HTML5 and Hybrid apps have the advantage that they can be. In the stores as the Appstore and Google play distributed. Disadvantages of hybrid apps that have the chance to be rejected at the admission to the app stores earlier. And there can be made. Functions not yet used of all hardware. The recent developments are that the current web agencies often not qualified staff in-house to develop. Native Apps Facebook had a Hybrid app first but abandoned this and calls this a strategic mistake. The complete focus on a hybrid app with HTML5 ensured that the performance for the end user was a lot lower as a native app. Therefore, the Hybrid app completely rewritten in Native Android and iOS. By combining the data can answer the main question: What shape development has the greatest potential for the future? The answer : Native. By looking at the quality properties of a native app and at how large companies its strategy plans based on Native. This gives a good indicator that the greater potential for the future.

Bibliography
• • • • •

Apple, (2013). App store review guidelines. Geraadpleegd op 14 mei via: https://developer.apple.com/appstore/resources/approval/guidelines.html Bes, S. (2013). Wat is een smartphone. Geraadpleegd op 11 mei via: http://www.seniorweb.nl/artikel/33542/wat-iseen-smartphone Constine, J. (2012). Facebook Android faster. Geraadpleegd op 11 mei via: http://techcrunch.com/2012/12/13/ facebook-android-faster/ Dingen, P. (2012). Apps en Platformen. Geraadpleegd op 15 mei via: http://www.mdingen.nl/tag/ios/ Hamburger, E. (2013). Facebook for iOS native app. Geraadpleegd op 12 mei via: http://www.theverge. com/2012/8/23/3262782/facebook-for-ios-native-app

66

AngularJS Starter Kit
• • • Jackson, K. (2013). The long road to secure applications. Geraadpleegd op 11 mei via: http://www.darkreading. com/security/application-security/240152497/the-long-road-to-secure-applications.html Jacobson, D. (2012). Native apps een unieke gebruikerservaring per platform. Geraadpleegd op 15 mei via: http:// www.frankwatching.com/archive/2012/07/26/native-apps-een-unieke-gebruikservaring-per-platform/ Hybride app crossover van app en mobiele website. Geraadpleegd op 15 mei via: http://www.frankwatching.com/ archive/2012/08/14/hybride-app-crossover-van-app-en-mobiele-website/ Do Jacobson Kaminitz, S. (2011). Native Web or Hybrid Mobile App Development, Geraadpleegd op 14 mei via: http://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Development Krooshof, T. (2012). HTML5 introductie Geraadpleegd op 15 mei via: http://www.vaneldijk.nl/artikelen/html5-introductie Kornaat, N. (2012). iOs, Android, RIM: zijn hybride apps de oplossing? Geraadpleegd op 13 mei via: http://www. frankwatching.com/archive/2012/04/16/iphone-android-rim-zijn-hybride-apps-de-oplossing/ Kyrnin, J. (2012). Native Definition. Geraadpleegd op 13 mei via: http://webdesign.about.com/od/web20/g/nativedefinition.htm McCarty, B. (2012). Zuckerberg: “Betting completely on HTML5 is one of the, if not THE biggest strategic mistake we’ve made”. Geraadpleegd op 12 mei via: http://thenextweb.com/facebook/2012/09/11/zuckerberg-the-performance-stock-obviously-disappointing/ Midden, N. (2012). De toekomst van mobiele (web)apps. Geraadpleegd op 14 mei via: http://www.frankwatching. com/archive/2012/10/23/de-toekomst-van-mobiele-webapps/ Mitchell, D. (2011). Mark Zuckerberg the Next Steve Jobs? Geraadpleegd op 13 mei via: http://tech.fortune.cnn. com/2011/09/23/mark-zuckerberg-steve-jobs/ Mewara, S. (2013). HTML5 Quick Start Web Application Geraadpleegd op 16 mei via: http://www.codeproject. com/Articles/546960/HTML5-Quick-Start-Web-Application Mobilemac, (2012). Vijf jaar iPhone: “This is the phone that have changed phones forever.” Geraadpleegd op 13 mei via http://www.mobilemac.nl/iphone/vijf-jaar-iphone-this-is-the-phone-that-have-changed-phones-forever/ Mudge, JT. (2012). Native App vs. Mobile Web App: A Quick Comparison. Geraadpleegd op 14 mei via: http:// sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/ Olanoff, D. (2012). Mark Zuckerberg our biggest mistake with mobile was betting to much on HTML5. Geraadpleegd op 12 mei via: http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-wasbetting-too-much-on-html5/ Peerdeman, P. (2013). Het gat tussen HTML5 en native mobile applicaties. Geraadpleegd op 15 mei via: http:// www.nl.capgemini.com/blog/online-solutions/2013/01/het-gat-tussen-html5-en-native-mobile-applicaties Picco, D. (2012). Write Once, Run Anywhere: the Future of Mobile Development. Geraadpleegd op 13 mei via: http://viewfromtheedge.progress.com/2012/12/the-future-of-mobile-development/ Russel, J. (2013). Accounting software startup Xero ditches HTML5 in favor of native iOS and Android Apps. Geraadpleegd op 14 mei via: http://thenextweb.com/dd/2013/03/18/accounting-software-startup-xero-ditches-html5in-favor-of-native-ios-and-android-apps/ TechTopia, S, (2008). What is Android. Geraadpleegd op 16 mei via: http://www.techpluto.com/what-is-android/ Telecompaper, (2013). 13,4 miljard Apps gedownload in kwartaal 1. Geraadpleegd op 15 mei via: http://www.telecompaper.com/nieuws/134-miljard-apps-gedownload-in-q1-2013--936146 de Vries, C. (2011). Het laten maken van een native of web app. Geraadpleegd op 16 mei via: http://www.d-tt.nl/ het-laten-maken-van-een-native-of-web-app.html Zuckerberg, M. (2012). Our biggest mistake with mobile was betting to much on HTML5 Geraadpleegd op 16 mei via: http://techcrunch.com/tag/zuckerberg-disrupt/

• • • • • • • • • • • • • • • • •

Figuren

Kaminitz, S. (2011). Afbeelding 1: Vergelijking van native, hybride, web eigenschappen Overgenomen van: http:// www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Development.

67

IT Security Courses and Trainings
IMF Academy is specialised in providing business information by means of distance learning courses and trainings. Below you find an overview of our IT security courses and trainings. Certified ISO27005 Risk Manager Learn the Best Practices in Information Security Risk Management with ISO 27005 and become Certified ISO 27005 Risk Manager with this 3-day training! CompTIA Cloud Essentials Professional This 2-day Cloud Computing in-company training will qualify you for the vendorneutral international CompTIA Cloud Essentials Professional (CEP) certificate. Cloud Security (CCSK) 2-day training that prepares you for the Certificate of Cloud Security Knowledge (CCSK), the industry’s first vendor-independent cloud security certification from the Cloud Security Alliance (CSA). e-Security Learn in 9 lessons how to create and implement a best-practice e-security policy! Information Security Management Improve every aspect of your information security! SABSA Foundation The 5-day SABSA Foundation training provides a thorough coverage of the knowlegde required for the SABSA Foundation level certificate. SABSA Advanced The SABSA Advanced trainings will qualify you for the SABSA Practitioner certificate in Risk Assurance & Governance, Service Excellence and/or Architectural Design. You will be awarded with the title SABSA Chartered Practitioner (SCP). TOGAF 9 and ArchiMate Foundation After completing this absolutely unique distance learning course and passing the necessary exams, you will receive the TOGAF 9 Foundation (Level 1) and ArchiMate Foundation certificate.

For more information or to request the brochure please visit our website: http://www.imfacademy.com/partner/hakin9
IMF Academy info@imfacademy.com Tel: +31 (0)40 246 02 20 Fax: +31 (0)40 246 00 17

U P D AT E NOW WITH

STIG

AUDITING

IN SOME CASES

REMOVED the HAS VIRTUALL Y

nipper studio
NEED FOR a

MANUAL AUDIT
CISCO SYSTEMS INC.
Titania’s award winning Nipper Studio configuration auditing tool is helping security consultants and enduser organizations worldwide improve their network security. Its reports are more detailed than those typically produced by scanners, enabling you to maintain a higher level of vulnerability analysis in the intervals between penetration tests. Now used in over 45 countries, Nipper Studio provides a thorough, fast & cost effective way to securely audit over 100 different types of network device. The NSA, FBI, DoD & U.S. Treasury already use it, so why not try it for free at www.titania.com

www.titania.com