A large application example with AngularJS ( >=v.1.3)

Ugly preface

Skip the bullshit below if you’re in a hurry…
There are loads of tutorials now for any version of AngularJS starting from version 1.0.x walking you step-by-step through the process of creating a Single Page Application. Even I got the idea… The guys behind Angular have the habit of the “breaking changes”, introducing some major changes in the syntax and mechanism of the things, so I joined the club with a small tutorial for AngularJS 1.3 as it took me about a day to compile a working application.

What I didn’t see anywhere was a simple, performance-driven tutorial for a back-end developer like me where a system was built from ground up, with no strings attached. I needed someone to show me:

  • Loading the core stuff with Require.JS – a simple start-up script that loads only the required stuff.
  • Lazy-loading of AngularJS components with Require.JS – A large-scale application would have hundreds of controllers and services and there is no browser so far that can handle all of that. So following the minimalist approach I want to load only the things that I need.
  • Dynamic loading of views and controllers – A big system would have literally thousands of actions, spread around about hundreds of views, each handled by a separate controller. Again – there is no browser that wouldn’t behave as an asshole if you try to load all of that upon page entry. Just forget it!

This was all I needed!
All around the internet, any tutorial/example that I met was actually as if it was the old corporate world – they give you an enterprise app example, but they’re going to omit exactly the key features “that you won’t understand” that would really save you months of reading, because if you know that you’ll steal their bread. Everything is like this is a top-secret stuff that someone lost in a bet and is forced to release some info, so he kept it blurry and short.

 The task

The task is to make a SPA with AngualarJS and RequireJS that would load all of its necessary components dynamically, including templates, controllers, services and etc. The bootstrap should be loaded in a matter of seconds, so that the user would have a response quickly, while the rest of the stuff is loaded. And yet only a small portion should be loaded initially, leaving the rest to the lazy-loader. That’s all.

My wife needed a small application for her smartphone to track her books, as she passes through some bookstore, so this was the perfect moment.

Disclaimer

I’m not the smartest guy on the planet, so a lot of the things here I stole from this or that tutorial or example. I will try to mention all of the useful articles I met in the appropriate place. A big thanks to all the authors. If you see something I missed, please add a comment below.

  • All of this is for Angular 1.3. (I’m annoyed to write this, but no one knows what would change in 1.4)
  • I assume you have an idea of how at least a basic Angular SPA works.

The code

Start your environment. I use Vagrant with Puphpet, some UI developer prefer Express and NodeJS. Even a simple WAMP/LAMP would work.

All the code can be found on my git repo. I’ll keep it updated, as this is a real-life application that I will use. Any fixes/suggestions are welcome.

The main html file is actually rather stupid. It contains only the basic markup. Place here any CSS you will use, initial layout markup or generally anything.

A nice idea is for example to place here a loading animation, that you will remove/delete after the SPA is fully loaded. Very nice for mobile sites or even mobile apps built with Apache Cordova.

So, once you have your startup page done, just include your require.js file in the HEAD tag. Not another line of JavaScript include should be put here, unles your initial screen would require it. What I didn’t know is that you can instruct RequireJS for the initial script to be executed with a simple data-main attribute. It will automatically load it upon initialization (put the file name without the extension).

The code below illustrates what I meant. Notice the “meta viewport” parameter, that disables zoom-in and out so that all looks nice on a mobile page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script data-main="js/main" src="js/require.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<title></title>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation" id="topNav">
...
<li><a href="#/" class="navbar-link"><i class="fa fa-home"></i> List</a></li>
<li><a href="#/add" class="navbar-link"><i class="fa fa-plus"></i> Add book</a></li>
...
</nav>
<div data-ng-view=""></div>
</body>
</html>

Do not put the ng-app directive anywhere. We will manually initialize Anguar when all needed files are available.

Next goes main.js. If you haven’t dealt with Requre before, the idea is very simple – you list all the scripts to be loaded and setup a function to be executed after all is done. Now if we just pour in the list of angular.min, angular-route.min and app scripts right in, you’ll get an ugly error. This is due to some dependencies, for example angular-route.min, relies on angular.min and app relies on both of the above to be loaded (I will ommit the “.js” extension when talking for a file name). We will use the shim property to define these initial relations and we will define further relations inline.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
document.getElementById('topNav').style.display = 'none';
require.config({
baseUrl: './js/app',
urlArgs: 'v=1.0',
paths: {
angular: "angular.min",
angularrouter: "angular-route.min"
},
shim: {
angular: {
exports: "angular"
},
angularrouter: {
deps: ['angular'],
exports: "angularrouter"
}
}
});

require(
[
'angularrouter',
'controllers/booklistController',
'app',
'services/routeResolver'
],
function () {
angular.bootstrap(document, ['booksApp']);
document.getElementById('topNav').style.display = 'block';
});

AS you see above, we have a config section, there we first list the basic modules. Each has an ‘exports’ value, that we will use in other modules ‘deps’ array. The ‘deps’ array, as you can guess, defines what needs to be loaded before this module can function. As simple as that.

Later on in the code we have the require function that we load our controller, the angularrouter module and the main app module. I’ll explain the last routeResolver a bit later. The Angular magic hapens in the function() parameter with the first line where we initialize it by passing the main app module. (remember when I told you to skip the ng-app directive?)

Dependencies

Now comes the confusing part. We will have two dependency lines. On one hand we have the RequireJS definition, that defines file dependencies. This basically explains to RequireJS what should be loaded before the code from this file can be executed. The following line defines that:

1
define(['angular', 'services/routeResolver'], function (angular, routeResolver) {

On the other hand we have the Angular dependancies that you know from the other tutorials, let’s say, the factories, custom modules and etc.

1
var app = angular.module('booksApp', ['ngRoute', 'routeResolverServices'])

In our main module we define the app variable, that will be used further in the code, as we will deviate from the standard way of setting controllers and services, that you know from the other tutorials. A chunk of code showing this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var app = angular.module('booksApp', ['ngRoute', 'routeResolverServices'])
.config(['$routeProvider', 'routeResolverProvider', '$controllerProvider',
'$compileProvider', '$filterProvider', "$provide", "$httpProvider",
function ($routeProvider, routeResolverProvider, $controllerProvider, $compileProvider,
$filterProvider, $provide, $httpProvider) {
app.register =
{
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};

//Define routes - controllers will be loaded dynamically
var route = routeResolverProvider.route;

$routeProvider
.when('/list', route.resolve('Booklist'))
.otherwise({
redirectTo: '/list'
});
}
]);

app.run(['$rootScope', '$location',// 'authService',
function ($rootScope, $location) {
//Client-side security may go here
}]);

return app;

Our main app relies on a service, that contains a routeResolverProvider. This is the part of the code where another magic happens. I shamelessly stole it from this blog post. For an in-depth explanation go and read it, as I will only quickly describe the idea.

Dynamic loading of controllers and views

Now this is a part that is covered in several posts. The general idea is that Angular is not planned for dynamic loading of resources. In fact the only dynamic part in AngularJS is the views, that are loaded upon route definition. So what we want to do here is to let ourselves load the controllers on-demand as well. That is when the route is defined. As I mentioned above, we see a brilliant example of that in the CustommersApp example from Dan Wahlin, where he explains the creation of a routeResolverProvider. The general idea is that Angular already has a way to dynamically load views, so with a bit of coding he managed to use it for loading controllers as well.

This provider has a single method, called resolve, and as you can see it can get only one parameter. Here is the brilliant part. Within the very routeResolverProvider we set the base path for the controller files, and from that point on the magic code automatically constructs a file name for the controller and for the view, based on the string you provided. This is the magic of “Convention over Configuration”.

So instead the standard params we pass in the route configuration, we only define the path and let the resolver do its job .when('/list', route.resolve('Booklist')). You can steal the code of that routeResolver from Dan’s Git repo containing a full-fledged example. (The file is inside “CustomerManager/app/customersApp/services”, to save you a bit of time).

At a later stage I will show you what I got from another place – dynamic adding of entire paths, so the initial route config would only contain what we need at the startup page.

The controller is different as well:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
'use strict';
define(['app', 'angular', 'services/booklistFactory', 'services/routeResolver'], function (app, angular) {
var booklistController = function ($scope, $route, booksFactory, routeResolverProvider) {
// load data from server or take the cached version
if (booksFactory.getBooks().length == 0) {
booksFactory.refreshBooks().then(function (response) {
$scope.booksList = response.data;
});
} else {
$scope.booksList = booksFactory.getBooks();
}

addRoute('/add', routeResolverProvider.resolve('Addbook'));

$scope.refreshList = function () {
booksFactory.refreshBooks().then(function (response) {
console.log(response.data);
$scope.booksList = response.data;
$scope.filter.title = '';
});
}

...

addRoute('/add', routeResolverProvider.resolve('Addbook'));

booklistController.$inject = ['$scope', '$route', 'booklistFactory', 'routeResolver'];
<span style="line-height: 1.5;">app.controller('BooklistController', booklistController);
</span>});

We have the define construction to notify RequireJS that we need several scripts to be loaded, before we can do anything. As you’ve noticed here, I added the booklistFactory, that I will use to manipulate the books data. That’s OK as Require will first fetch it before angular will be able to proceed.

A thing that you can see is that unlike other tutorials, we no longer create separate module for the controllers, but rather reuse the global app module. we define a function with its DI(Dependency Injection) needs, then we use the $inject array, to actually inject those, and once we call the app.controller line, we ask the main app to create this controller with these properties.

Just bare in mind to list in the Require definition all the needed external files, that you need for your code. This way Require will fetch them at your disposal.

Dynamic definition of routes within controllers

As you noticed there is a line of addRoute() call that, logically intends to add another route to the main routes config, but here we do it on-the-fly. This is another last piece of my all-dynamic goal. We needed to be able to add routes on demant (a given controller may link to other views and etc. that we don’t want loaded in the beginning).

I looked a lot for a way to make routes dynamic as well. I finally found a hack in a StackOverflow thread, that showed clearly, that we can find all the routes in a simple $route property. So with a little code we can add more routes on-demand, even if it is a dynamic one, as ours are.
Here is the code for the addRoute function. It might be better to put it may be in the app object so that it’s available all around the code. (The original is on this JSFiddle)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function addRoute(path, route) {
$route.routes[path] = angular.extend({
reloadOnSearch: true
},
route,
path && pathRegExp(path, route));

// create redirection for trailing slashes
if (path) {
var redirectPath = (path[path.length - 1] == '/') ? path.substr(0, path.length - 1) : path + '/';

$route.routes[redirectPath] = angular.extend({
redirectTo: path
},
pathRegExp(redirectPath, route));
}

return this;
};

function pathRegExp(path, opts) {
var insensitive = opts.caseInsensitiveMatch,
ret = {
originalPath: path,
regexp: path
},
keys = ret.keys = [];

path = path.replace(/([().])/g, '\\$1')
.replace(/(\/)?:(\w+)([\?\*])?/g, function (_, slash, key, option) {
var optional = option === '?' ? option : null;
var star = option === '*' ? option : null;
keys.push({
name: key,
optional: !! optional
});
slash = slash || '';
return '' + (optional ? '' : slash) + '(?:' + (optional ? slash : '') + (star && '(.+?)' || '([^/]+)') + (optional || '') + ')' + (optional || '');
})
.replace(/([\/$\*])/g, '\\$1');

ret.regexp = new RegExp('^' + path + '$', insensitive ? 'i' : '');
return ret;
}

In the fiddle code you can see that they call this addRoute with regular parameters, too.

For completeness of the whole application I will give you the definition of the factory I use above to access the data. You know, just in case…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
'use strict';
define(['app'], function (app) {

var booklistFactory = function ($http) {
var factory = {};

factory.data = {books: []};

factory.getBooks = function () {
return factory.data.books;
};
factory.refreshBooks = function () {
return $http.get("/bookspy/load.php").success(function (data) {
factory.data.books = data;
});
};
factory.addBook = function (data) {
factory.data.books.push(data);
console.log(factory.data.books);
};
return factory;
};
booklistFactory.$inject = ['$http'];
app.factory('booklistFactory', booklistFactory);
});

 

Final words

Everything I showed you above is figured out by someone else. I just spent a day to assemble it all into a working app that I put on my Git here. I needed it for my work and I did it for my wife’s application so this was a perfect occasion to give some hints to the others out there, trying to go the same path.
I didn’t want to reinvent the wheel, so the whole credits go to the guys I link to, as they did the big coding.

Any comments?

1  

Work motivation, a follow up

This is my second pile of thoughts and experiments on myself on “Self-motivation at work”. The first part you can see here. These here are primarily thoughts, so excuse me if they’re partially unstructured.

I’m posting this article about an year after my initial thoughts on the subject and I have some major experience to describe. I have some great success on making myself actually want to work. Partially due to external factors, partially because of partial improvement on myself.

Change in the environment: a new Job

Since the last post on the self motivation topic went out, there are a lot of things that changed. I moved to a new job, where I was immediately dragged into developing quickly a ‘Proof of Concept’ integration with a 3rd party API to base a web platform on. It gave me a very good start as it’s always cool to research stuff. Afterwards I was moved again to a new project to actually build a platform based on that API. It was in a hurry (of course), and despite the fact we have to rewrite a part of the system twice and that everything got postponed with 3 months, we released that project. I got sucked into the project by myself literally for the first time in years. I have somehow managed to make my project interesting to me. I was working in an area where I knew what I did, so I felt relatively self-confident. Although I’ve never dealt with mobile development I had the chance to test myself into ‘something new’ with a relatively low chance of failure and that worked for me. I managed to show to myself that ‘Aaah, that’s nothing’.

Recognition as a boost

I was happy! I was actually so happy doing that project, that I’ve actually taken ownership over the project, without it being my duty and with another 2 guys we closed the project. I’m a relatively good talker and I tend to see what people mean so I managed to save some nerves to my team-mates, by taking some of the Project Managers’ communication pressure from them. Everyone was so proud of what we did, and me? You can guess…The appreciation of my colleagues and all the managers filled me with what is actually the final goal – self-confidence. This is actually some of the most important things. When you know that you can dig into anything and bring it to live, you start looking for challenges. As a proof – I’m now a Team Lead on other prjoects. In the same company

Stay after work.

No seriously! Do it! You’ll like it.
I’m one of that sort of guys that can spend half the day at work doing nothing and I can get the ‘muse’ of coding just about an hour before I have to leave. What should I do? The simplest choice is actually to try to do what you can for the time remaining and then you hit the road. But if you’ve ‘gained some momentum’ for the last couple of months and you knowing yourself being hard to get together, isn’t it a better choice to just stay another hour or two to use the boost you have a the moment? Finally, you never know when will be the next time you’ll be eager to code, so just use it. Stay after work and do some good work for free. Yes for free! Because one of the good things that you can do for yourself and your motivation to work is actually to be able to sit down at the end of the week and say frankly to yourself – OK, I’ve done a good job here!

Let yourself be lazy.

You need to rest. Your brain knows how to do it so just observe yourself and adopt :) If you know that you’ve given everything from yourself, utilizing your good moments, you can actually let your brain relax the rest of the time. Exactly the moment when you just stroll around the office like a ghost! They are so important, because then your brain is preparing for some hard work. A good relax is actually the one that can get you bored to death. It gets you to the point where you can die if you don’t start doing anything.

One thing that I’ve noticed and experimented with is the sleep. Whatever people say, if you don’t sleep enough, you can’t do almost nothing of the above. I recognize a good sleep, by the fact, that I star waking up with or just before the clock. Then you have your battery charged to 100%, and you can have a really productive day.

Please, share your thoughts and have a really nice day.

0  

Publishing Android App in Google Play. Things to know ahead!

Publishing an Android app in the Google Play, is a trivial task.

There are, though, several small things that you should bare in mind before you start doing that. These small things, if neglected, might fail your, otherwise smooth experience with Google Play.

Kind of free

Firstly, to publish an app you need Google Developer account. And that costs money. Exactly 25 EUR. Plus a small bank transfer fee. Creating your Google Developer account might be attached to a new Google username, in case you need it for your company, or you could link it to your existing one. It’s up to you. In both cases the display name for that account is customizable, so don’t worry. The very registration takes a minute and the payment is instantly finished.

Point of no return

Before you publish your app you have to know one thing. Once you have published any of your apps, no matter if Alpha/Beta or a Production, you can’t delete this app any more. You can “Unpublish” it from the Play store, thus making it invisible for anyone, but you can’t remove the app package and delete it from the store.

Merchant or Developer

Second thing before you go into android development regards payment. Anyone from any country can register as a Developer, but if you want to sell apps for real money, you need a Google Merchant accound, which is only allowed for several countries, like USA, UK and etc. Bare that in mind when creating the account as regular Dev. accounts are only allowed to publish Free apps and are not able to take any kind of payment through Google’s system. Using your own payment methods for in-app billing is still possible, though. But the free-app limitation stays.

Alpha/Beta/Production

One of the recent Google improvements in the Play system is the availability of Alpha and Beta versions, prior to Production. This is awesome, as you can add an alpha version of the app, available to only a limited circle of people. Any app can be “promoted” to Beta or Production at any time. You can even add an app directly as Beta. It’s all up to you.

Regarding the very application. A general rule in the app life cycle is that you can’t upload a new APK that’s with the same version as the current one. No matter if you’re putting a newer Alpha version or a Production one. It is not  allowed, so think smart what version you first put as an app version, especially if you plan to go through several Alpha/Beta stages.

Along with the general requirements of the app description, name and etc. there is one thing that you’ve most probably not thought of. A 512×512 version of the app icon. Resizing the logo from the app does not look nice. Believe me!

Attention!!!

Chose your app namespace correctly and wisely as once you upload an APK you’re no longer able to change the namespace in a case of code refactor!!! Bare that in mind as Google use the unique namespace as an identifier when doing alpha/beta testing.

Once you think you’ve done all required steps, (which are indicated as a basic check-list)  be sure to make final checks on the content. Once you push “Publish” you can’t delete the app and start all over. All you will be able to do is to unpublish it from the Google Play. But it will stay on your Developer Console list as a mark of the shame!

A thing, that actually annoyed me is that the Developer Console is not available as a link in the Google Play. I personally would prefer a link to it on the Play, but… anyways.

You are not your own alpha tester!

As I mentioned before, your Developer account is not connected to any Play account of yours. So when adding people for alpha/beta testing (via G+ communities for example) make sure you’ve added yourself there :)

Once published to the G Play the app is updated around the servers within 24 hours, although they say only “several hours” so be patient. If you do Alpha release, do not expect to see the app in the store, as it is visible only through a private link, that you should share with your Alpha testers.

These small facts to take in mind once you go down the google road will save you some nerves!

If you have any other useful tips for the Google Play, do comment below :)

3  

Self motivation issues at work

Lets have an honest star!
I am lazy!

Belive me. Sometimes I’m so lazy, that I get even bored of staying in bed. I have my moments where I’m eager to code and I’m so much enthusiastic, but sometimes I just want to die.

What does it all have to do with work? Well, everything!
You spend more hours at your working place than you do awake at home, so you should do something meaningful while there. Of course you’ve got those days that you just want it to go away. But as in general you want to be doing SOMETHING. Sometimes there’s that boring stuff to do, sometimes there’s something interesting to do but either you aren’t in the mood, or there’s something else buzzing your mind that distracts you from your main goals.

So how to deal with it?
I’VE GOT NO IDEA!

Self-motivation is one of the hardest quests ever. It is hard because YOU have to make YOURSELF do somethig “BORING” instead of the thing YOU’D LIKE! It’s literally the task to pull yourself out of the water by your hair!

It’s always those games on the net, it’s always that more interesting task in the queue, that you’d rather do, instead of that boring stuff. If there’s something you don’t fancy and there is nothing else to do, you MAKE something UP! That’s the problem of your mind.

One of the things that could motivate you is your environment. If you go with the “nerds” in your office, rather with the cool guys that are in the office just to cover the working hours, you have a better chance of finding yourself into a motivating environment. If most of the people around you talk about work, and how they delt with “that boring task” and how they had time for some research, then pretty soon you’ll find yourself trying to do the stupid stuff faster so that you can compete with the others. That’s natural! And vice versa: if you spend most of your breaks with the shiny guys that talk about cars, and houses, and going out, and surfing… you find yourself going to work for the sallary, waiting the day go by. No general interest in the work done. No enthusiasm for any extra effort.

Of course balance is everything. Read articles and comment with other people, but do not spend too much time on it. Make it happen naturally.

One of the best ways to make your environment comfortable for work is actually to make it look less like work. That’s the big thing here. Noone likes work. But if you make your office shiny. If you get the habbit of having a beer with the colegues at lunch. You may be even organize a tech friday or so, you’ll have so much other things to do, aside of your real work, that you start enjoying all your stay at the office and the boring stuff gets just a small insignifficant part of the day. As you spend time with the things you like best, you’ll find recognition for the things you do and things will go better.

In general, make yourself feel like you’re not working and you’ll get all done :)

This article might have some edits so stay tuned and COMMENT! :)

0  

Flexible development environment with VirtualBox

virtualbox-logo

While I do mostly WEB development I sometimes need an Android environment to play around with. Moreover development is a hobby for me, so I have environments on my workplace, on my home desktop and even on my laptop, which is kind of tricky to support. Imagine what could cause you a single renstallation of the OS. Not to mention that your HDD gets shredded into several folders and sub-folders. It is not a rarity for you to need a second OS. As I am a Linux guy I feel more comfortable with Ubuntu, but as the other people using my home computer are not that familiar with Linux systems I needed both Linux and Windows at the same time.

So I figured out that moving a development environment on a virtual machine might be a solution. Thus I have both a normal intact simple OS for movies, browsing and games, and another one full of developers toys.

In general what I like for this way of work is:

  • You can make a backup of the dev machine
  • Single-machine for every environment that you need
  • Easily set-up on a new hardware.
  • Dual-OS

 

To the point…

For this task I chose VirtualBox . It is a lightweight, freely available and very easy to maintain virtual machine, supporting different host and guest OS. For a host OS I choose Win7, as everyone is familiar with it. This gave me the capability to easily close all my development apps in a matter of seconds and for example to go for a game or a movie. When I need to continue my work, it is a matter of seconds for the VirtualBox to resume its work, from the very point I left it, with all my windows and tools in the state I left them. Very nifty feature when you really need to stop for a while.

So, I installed VirtualBox and created a new machine. I gave it the recommended amount of video memory, about 1.5GB of RAM and about 80GB of HDD. I don’t think for PHP you might need any more space, because having 2-3GB for the OS and another 1GB for your Dev tools, leaves you with plenty amount of space, taking in account that all you’ve got is text files and images. But as you all know this is a matter of personal preference. A nice way of configuring the machine is to leave the created Hard Drive dynamic, so at the beginning the file, representing the drive would be just a couple of GB, instead of the full HDD capacity.

For the guest OS I choose Lubuntu. A pretty lightweight version of Ubuntu, with the LXDE integrated as Desktop Environment. If you prefer you can switch to one of those “window managers” that offer you verry basic X environment and that leave all to you. While lightweight, Lubuntu still has all the ubuntu configuration tools.

A vital thing is installing the VirtualBox tools. Generally you mount it as a usb drive via the machine’s menu and access it via command line. These tools install a virtual driver for the display and other stuff, that make the virtual machine go full screen and utilize the real hardware better. Without these drivers you go 1024×768 or so and with poor  performance and integration options. My first attempt of installing it resulted in “Unsupported X window version” error or something like that. Apeared that I need the kernel module building tools (DKMS) so that the shell script, used to install drivers could build the modules. You will also need kernel sources and Gnu C compiler. For the later two there are console messages so no worries.

At this point you have a stable running Linux distribution. If from this point you’re going to create multiple different environments out of it, a good idea is to clone the HDD image so that you can easily start your second environment with the working OS as a start.

Some development environments are not that appropriate for deploying on a virtual machine, where you have intensive CPU utilization. A good thing would be if you have a quad-core CPU so that you can spare 3 out of the 4 cores for the virtual machine and leave 1 CPU core for the host OS. This will increase performance issues when you deal with JAVA for example.

For environments with smaller requirements, for example my PHP environment 1 out of 2 cores, 2GB RAM and 30MB video ram, with installed VB tools works flawlessly, without noticing if you are on a virtual machine or you’re running a guest OS.

My Android environment is still under fine-tuning but the same basic resources work for it good. As most of my PCs are with either P4 of  Intel i3 CPU with 2 cores, I find a little lack of CPU power, but you can live with it. Only my notebook gets a little hot, but you can live with that.

As always, I would appreciate you sharing how you organize your working environment. Do you use virtual machines? What tools do you use?

Thanks a lot for reading,

2  

PHP IDE: NetBeans vs. Eclise; // The battle for Middle Earth

A little preface…
I was doing PHP for about 9 years, until I switched to JAVA last year for a breath of fresh air. I was just curious how they do things… So generally I was writing crappy code for a pretty long time. I switched between tons of IDEs, cursed and sweared most of them using pretty ugly and stinky words. My last year was under the motto “How could they charge for IntelliJ IDEA license”, but that’s another story. During that period I started looking for a best IDE for PHP having only one requirement: I WANT IT FREE.

Disclaimer: those of you who mention Emacs, vi or any derivative, will be banned by IP. Seriously. Geeky times where you should be the only one that can run your editor are OVER. There are many editors that support PHP syntax highlighting but those won’t be considered either. Notepad++, being my best-choice notepad app, is not an IDE. 

From the paid editors I have only used Zend studio and it is pretty good one. If you would spare $300-500 it will pay off, but I personally would buy it only if I have some corporate money for that.

In general if you’re ready to go and experiment, a good start (and a main information source) is this page in Wikipedia.

An IDE should be able to:

  • color your code
  • analyze code and suggest you with proper auto-complete
  • debug your code
  • help you mange your versioning systems

Here I will have a look at NetBeans and Eclipse with PHP Development Tools, and will try to outline my likes and dislikes about them. I tested these IDEs for about a month trying them during my get-to-know hours with the Symfony and Zend Frameworks. Both are complex enough to need a powerful IDE for you to work well… so…

NetBeans

My first editor of choice was NetBeans. A lot of my fellow-coders used it and they’re pretty satisfied with it, so I gave it a try.

Installation was very easy and fast. You go to their site, download the latest version and run the installer (there is one for both Linux and Windows, so you just click through the installation). And that’s pretty much it. Once you’re done you have a fully-functional IDE, supporting PHP, HTML, CSS, Javascript and loads of others. NB has a pretty simple and logical interface, which I liked as I am a fan of the KISS philosophy and thus the squarish and gradient-less interface become my favourite.
NetBeans has also a built-in SVN support, which will make you start coding in just a couple of minutes. You can directly checkout project from SVN and start breaking it.

NB supports all king of neat PHP features as function params suggestions, class look-ups and all the goodies you need. There is even a setting that tells if you point to a class, whether the full path of the class should be used or you want just the name (reference to the namespaces in the latest PHP versions). What I did not like about the NetBeans was that there is currently no support of the USE directive in PHP. Once you try to extend a class with another one, you have to add the “use \Symfony\Security\Bundle\SecurityManager” code at the top by yourself, while Eclpse+PDT managed did not have this problem.

Coloring of the code is a good part of NB. You can customize any color as you like. There is even tons of color themes around the net, for example here, which you can import directly in the colors tab in the Settings window.

Debugging is very easy with Xdebug, which is pretty well integrated into the environment. What I liked is that once you enter a debug session, nothing in the IDE changes, only the watches show in a toolbox. You can jump, run into, step over and resume with ease. The problem is with the abscence of complex conditional breaks and stuff like that.

So my bottomline is

Pros:

  • Lightweight
  • Simple interface
  • Built-in support for SVN
  • Built-in color syntax highlighting for PHP, CSS, HTML, JS and etc
  • Decent function and class lookup
  • Simple debug interface

Cons:

  • Some class completions are lacking support for latest PHP stuff
  • Sometimes code-completion messes up and cant guess return value types

 

Eclipse+PDT

Eclipse is a platform for developing platforms. It has a basic interface which you can extend in unlimited ways.  Problem here is that you have to configure your environment all by yourself.

Installation here is a little tricky. You go to the PDT eclipse site and you’re offered a whole package of Eclipse with built-in PDT plugin (this redirects to the ZEND site). As an alternative you can add PDT to an existing Eclipse installation you have. The result is an archive file that you extract and start using.
All is good so far, if you don’t want to use SVN, because there is no built-in support for it (CVS ?!? only). So you have to add the current repository of the eclipse and manually add Subversive plugin and one or several connectors for it.

In Eclipse you can have both 1.6 and 1.7 SVN projects, which is pretty neat. You can checkout a repo and then convert it to any project type you want.

The coloring of the source is perfect. Several color themes are available around the net, through settings import. The IDE interface is a little rubish, at least from my tower. Too rounded and too much empty space between items.

And here comes the horror – perspectives. You use a perspective (a separate set of toolbars and screens) for each language you use JAVA or PHP or whatever else. There is even a different DEBUG perspective. This could be both good and bad, but for me it was not a big feature as I don’t like to spend my time in configuring.

Code completion is outstanding in Eclipse. While I was trying out Zend Framework this bloody thing even recognized that I write a path to a class inside a string (for one of the service managers) and started autocompleting it for me. Perfect recognition of comment directives and return types. Also a great impression came to me that when you extend a class, it adds the USE statements by itself and saves you loads of stupid scrolling, which was great.

Debugging in Eclipse is a little tricky. Although here you can use either XDebug or Zend Debugger (as Zend contribute big time to this PDT), you go to a separate perspective where you get a bunch of toolbars opened (one of them even allowing you conditional breaks and stuff) but you loose 60% of your screen. Then to go back to the source editing you have to switch back. This sincirely anoyed me.

In general Eclipse+PDT is a great and powerful choice if you’re ready to spend some time configuring and setting it up. The availability of many plugins allows you to do magic, but also allows you to mess your environment pretty well, so bare it in mind. Powerful IDE with loads of code analysis inside.

Bottomline…

Pros:

  • Powerful IDE
  • Modular plugins system allowing great extensibility
  • Great code look-up and debug options

Cons:

  • overly complicated functionality
  • not that good user interface utilisation.
  • fewer built-in functionalities
  • heavy on system resources, more clumsy than the other
  • Actually quite strange initial key-mapping (even Ctrl+Tab was to be manually configured)

 

Final words are never final, you know.  I continue to use both on my DEV environments and can’t speak in favour of one of them.
NB is fast and lightweight and quite powerful, lacking only some high-end/latest fashion features, while providing great usability. Eclipse, on the other hand, is really ugly but provides may be the best tools and code-look up, on the price of numerous configurations and plug-ins management, which can be disgusting. Both IDEs support versioning of files, supporting local histories too.

Chose your IDE as you try them in real life. Don’t belive me :) Both are good and as all articles finish “It is all a matter of personal preferrence”

Comments are greatly appreciated.

9  

A second Hello world!

Hi all!

This really is a hello world post. I started this to share my web passions and to comment on things I come upon while digging the web development crap around.

This is not really my 1st blog so far. Once upon the time there was another blog of mine here, but it went the wrong direction and finally my laziness killed. So now it is resurrected.

Here I will post comments on problems I come upon during my everyday work – development, app design, working environment and generally all kinds of stuff that makes you think at work and makes you miserable or happy.

You can follow me on twitter, if you don’t already do that…

This blog will be solely in English, as it would be the better way to get the opinions of more guys around.

So stay tuned.

1