How to unleash employee creativity

At my current company, Springer Nature, we have a great benefit of having the freedom to dedicate 10 percent of our work time working for a side project, learn something new, or on anything that can help us learn something new. Our employer gave us this freedom so we can grow personally and professionally, but one observation I have had during these months that we are practicing this was that it also helps to unleash employee creativity.

How we do it?

This initiative firstly started as a Hack Day for developers. Then we renamed it to “10 percent time” so it can be more inclusive to other profiles that are part of our department, such as UI & UX designers, PMs, and POs. We spend every second Friday of the month by doing something other than work related stuff, something that would in one way or another help us learn something new. Sometimes we do an online course, test that new version of a library we use every day, evaluate a new framework or even learn a new programming language. Beginning of the day we do a joint stand up where we share our plans for that day with other participants. Sometimes someone likes somebody’s idea and we join forces for that day to create something awesome. By the end of the day, we gather together and share what we have created and what did we learn. Some do a demo, some showcase their code and some just summarize their learnings. During this sharing session often people get the inspiration for their next hack day, or sometimes we realize that a presented idea could be of a benefit for the company to grow as a project and we pitch it to our colleagues and management.

What did we do during these days?

During the previous Hack Day, one of my colleagues did create a simple  NodeJS CRUD API as she wanted to learn NodeJS. On the other side, as I usually do backend stuff, from time to time I am quite interested to learn things about frontend. For a long time, I wanted to learn Vue.js, so I volunteered to create the frontend for that API. During those few hours of coding, we managed to do a simple Vue.js application and implement a frontend for CRUD operations of that API. The code can be found at https://github.com/acelina/books-fe GitHub repo. Of course, I didn’t become proficient in Vue.js in one day, but next time I need a frontend for my app, at least I know where to start and I value this.

In another case, me and a colleague of mine started a Hack Day project to improve the process of managing code challenges for our developer candidates. We worked on this project for  three Hack Days. The result was an application that included features like managing the automatic creation of a GitHub repo for a candidate, including there her code challenge and give her the privileges to commit to that repo. It also included the feature to manage the workflow of submission, so when the candidate creates a PR of her finished code challenge, the application will remove her from project collaborators and notifies us in a Slack channel that a submission is ready to be reviewed. It was a three fun Hack Days for two of us and it resulted in a production-ready application which eliminated manual labor. There are several other successful results which came out of this 10 percent time.

What we achieved?

I understand that the projects we do during these days are never ready for production, but we achieved to create a culture of sharing the knowledge with others and by it to foster employee creativity. This 10 percent time creates space for us to experiments with things we don’t have the time to experiment during our regular work days because of deadlines or priorities. It also helps us to grow professionally and personally. Sometimes it results in a useful thing for the company as well, and most importantly it helps us to unleash our creativity while having fun. As a developer, I value this a lot in a company, and I would recommend every company to start practicing it. You never know where brilliant ideas come from!

What do you do when your code has cancer?

One truth about business software applications is that they evolve together with business requirements. From different reasons, sometimes from lack of experience of developers and sometimes from not having enough time to devise good solutions, the code often tends to create some sort of cancer inside, which progressively grows to unmanageable pieces of software until it breaks the whole system.

What do we do if we find such phenomenon in your code?

In my experience I have seen that dealing with such code is almost inevitable in brown field projects. Ignoring them makes things only worse. You have to face it and treat it as it is a disease which needs to be cured. Whenever I face such a situation, I follow these steps:

1. Isolate

Changing the code without breaking the whole system, or refactoring as is called in software development terminology, is not an easy task. Every change must be validated and tested well to ensure that changes do not break or alter the current functionality. In order to stop the bad code growing, we need to isolate it first. Isolation could be done by aiming abstraction through loose coupling the part which needs to be isolated. The abstraction is done by creating interfaces for every class that needs to be isolated and make dependent classes call to interfaces instead of real classes. This may require introduction of inversion of control (IoC) / Dependency Injection (DI) container. Each isolated part must be supported by quality unit tests which ensure that the abstraction maintains the code logic which was in place. Unit tests will also help us in the second phase.

2. Repair

This phase is quite simple. When you arrive here you have isolated the bad code and protect the functionality with unit tests. Now you can safely start to refactor and change the bad code. As you change, you should continuously run the unit tests to check if changes have any unexpected effects. If the unit test coverage is OK and they are written well, then you can safely proceed as unit tests will spot if you have broken something unintentionally. I would highly recommend Test Driven Development in this phase.

3. Integrate

Integrating the isolated code is the last phase, and most probably the easiest. Now the bad code should be gone and the functionality is unchanged. Often you shall find this phase unnecessary as the integration has been done during the phase 2. However, sometimes you will find some kind of double abstractions resulting from a lot of refactorings and you will see the opportunity of cutting these unnecessary code.

Conclusions

Perhaps this strategy looks very simple, but in my experience, it has been a very effective one. We are not always lucky to land in green field projects and define good code from the beginning. Besides, it is not always easy to maintain the code in good shape when the team has many developers and there is not a good development process in place.  Sometimes you deliberately allow the code to go in bad direction as a compromise to speed or resources.

Web services vs. SOA and pretty URL vs. REST

It has been quite a time since Service Oriented Architecture (SOA) and Representational State Transfer (REST) architectures are around, yet there are some misconceptions about them I hear very often, which I would like to discuss here.

1. Having web services does not mean you have an SOA architecture

This is perhaps one of the biggest misconceptions about SOA architecture I hear very very often. I see many developers thinking that if they have a web service or two in their architecture, they say their architecture is an SOA architecture. I think this comes because of two reasons: 1) “Web service” and “service oriented” resemblance in naming makes people think they are the same thing; 2) As web services are the most common way of implementing an SOA architecture, this pushes people think that when they have created one web service, their architecture is an SOA architecture.

An SOA architecture is characterized of composition of independent services which encapsulate business functionality and expose it as a service, which can be  a web service, a windows service,  or any other form of exposure. Ubiquity of web and advancement of web development technologies which made the creation of web services easier have put web services as a mean of choice for implementation of an SOA architecture, however, the definition of a service within an SOA architecture does not put web services in any special position regarding implementation of SOA architectures. Here is the definition of a service from Open Group:

A service:

Is a logical representation of a repeatable business activity that has a specified outcome (e.g., check customer credit, provide weather data, consolidate drilling reports)
Is self-contained
May be composed of other services
Is a “black box” to consumers of the service

 Web services and SOA make a great pair which power a lot of important and popular service out there, but it should be crystal clear to Software Architects, Developers, and anyone contributing to software developments that having web services does not mean you have an SOA architecture.

2. Having pretty URLs does not mean you have a REST architectural style

REST architectural style is another popular topic lately, and as such, is subject to a lot of misconceptions as well. REST has brought simplicity to implementation of web services and is embraced very popularly from the web development community. It plays well with the HTTP protocol, which we are familiar with ever since the beginning of www era.

One characteristic of REST architectural style is that resources are at the center of the architecture, and they are beautifully represented in URLs. REST has brought us pretty URLs, and therefore people have created a connection between the URLs and REST architecture. Leonard Richardson has developed a maturity model which tells the level of your API or RESTful services to what degree are RESTful. Martin Fowler has a great post about richardson maturity model. The levels are described as in this picture:

richardson's rest levels of maturity for REST

The very first level of the pyramid, level 1 is the implementation of URI or introduction of resources and at this level of implementation resides using the “pretty” URLs to connect URIs to resources. The level 2 refers to using HTTP verbs and the most advanced level, level 3 refers to using hypermedia or following HATEOAS.

In Richardson’s model is clearly seen that pretty URLs are the very basic level of implementing RESTful web services towards a REST architecture and clearly explain that having pretty URLs to access your services does not mean you have a REST architectural style in place.

In my opinion, implementing an SOA architecture and RESTful web services requires to have a clear understanding of these concepts, the constraints which come with them, and what is required to have such an architecture in place. Clear understanding will lead to effective architectures which allow us to reach the promises and benefits of these architectural styles.

Architecture of web applications

I consider software development more art than exact science, and as such, in software development almost always there is not a single way of solving a problem. Although there are defined best practices, it is a matter of problem being solved and the knowledge of the team that influences most the definition of the architecture of web applications and software applications in general.

Recent years has brought to popularity using REST in the architecture of web application solutions. I am a huge fan of REST, I like it a lot mostly because of its consistent way of expressing CRUD operations and brings simplicity to the API implementation. The use of REST has been pushed further with advancement of MV* JavaScript frameworks as they tend to have a natural way of consuming resources from REST APIs.

Lately, I am seeing that most newly built web applications tend to use REST in some way, if not exposing APIs, they do consume one or more of them. In my opinion, REST tends to create a viral effect on developers, as much as you use it, you want more of it. Now after we experience REST, I think there is a question which pops up:

Do we have to expose everything as REST API?

The universal answer “it depends” applies here very well! If you want to use a client side framework such as AngularJS that does not need server-side code and is well suitable to consume REST services, it might be a very good idea to expose the whole business logic as REST API and consume it through AngularJS services. This comes with additional benefit that if you want to have a mobile app of your web application, you do not have to write any additional code on server-side to support your mobile app, just consume the very same REST services and you are good to go. A diagram representation of such layered architecture of web applications could look like this:

Web application architecture with REST API and client side MV*

This is one of the most often used architecture styles I am seeing these days in web applications. However, what if you are not keen to using MV* JavaScript frameworks and want to use a server-side backend and generate your HTML representation using let’s say ASP.NET MVC. Do you still need to expose business logic as REST API?

Exposing business logic as REST API or any other form of service layer, if you do not have multiple types of consumers (web, devices, etc.), in my opinion is waste of resources (time and effort). Exposing and consuming services do introduce a level of complexity (you need to put extra effort on error handling, security, versioning, asynchronous access, etc.)  to the architecture and application code. This complexity is non considerable if you have multiple consumers of your application as it avoids writing multiple times the same functionality, however, if there is only one consumer and it is the web GUI, then in my experience I have seen that it only makes things worse. In such a situation, going with an old style server-side backend is a lot more easier. If you say I have a mobile client as well which consumes part of the functionality, in that case I think it is better to create a small REST API service group exposing only that part of the functionality, is a better choice. This will also allow you to develop your web app and mobile app in different paces (if you have lack of developer resources, you shall come to this requirement). The modified version of our new architecture will look like this:

Web application architecture with server-side backend and rest api

Sometimes we are keen to jump to new technologies and architecture styles just because its presentation looks attractive and we like to get our hands in it and give it a try. Often this pushes us to situations which makes maintenance of our code base difficult in later stages of our application lifespan. It is very important that evaluation of the application architecture to be done as early as possible and be judged from the simplicity and maintainability perspective.

 

Offline availability with AppCache

Offline availability of your web application will give a little extra comfort to your users. If using Local storage an appropriate choice to enable web applications to work offline with dynamic data (see my post on Local storage), Application cache (hereafter AppCache) is a good choice for making the static content of the web application available offline.

About AppCache

AppCache enables developers to specify a set of files which need to be cached by the browser. While cached, the requested resources will be served from the disk and this will make your web application available even when users are offline.

Caching static content has several benefits which you may like to leverage, including:

  • Better site performance, as static content will be served from the disk and not requested from the server
  • Better server performance, as less resources will be served and bandwidth will be preserved
  • Users will have the possibility to access your contents while offline, leading to better user experience and satisfaction
  • Mobile users can use the web app even when they are out of internet coverage
  • Mobile user can bookmark/pin the web application to their phone and use it later as a mobile app (offline)

The cache size limit may vary between browsers, but a cache size of 5MB can be expected from modern browsers, and with users permission, the size can be increased if needed.

How do we tell the browser to cache our site, and most importantly, which files to cache. We can do this using a special file called Manifest file. We tie manifest file to the html root element using manifest attribute. e.g.

<html manifest="webapp.appcache">

It is recommended that the extension of the file is .appcache.

Manifest file structure

Manifest file is a simple text file which should be served with “text/cache-manifest” content type. The very first line of the file should be:

CACHE-MANIFEST

and after that files to be cached are listed one per line.

index.html
css/main.css
css/theme.css
js/lib.js

Folders and wildcard specifiers are also permitted.

The common practice is to follow this structure:

CACHE MANIFEST
#23.10.2014 v1.0.10
/file1.html
/file2.jpg

NETWORK:
posts.php

FALLBACK:
offline.html

On the first line we have put the mandatory declaration of “CACHE MANIFEST”. Then on the second line we put date and version as comment. After version, we start declaring files/folders which are to be cached. The “NETWORK” section shows which files should not be cached as they change frequently, and last, with “FALLBACK” we specify what should be used when a resource is unreachable.

The comment part with version number has a significant importance here. The browser will not ask for the cached files unless one of these two is true:

  • The cache is deleted
  • The manifest file has changed

We best note the change of the manifest file by putting a version number in it. Whenever we do a change in any of the cached files, we simply increment the version number to advise the browsers to re-cache the files.

Specifying the manifest file will make the browsers cache the content specified and make the static content of your web app available offline.

 

There is life beyond jQuery

I am a huge fan of jQuery library. For years, jQuery has been my ultimate tool for client side development, and I have used it in any web project I have undertaken. Few weeks ago, I took a project to develop a simple brochure style web site, which had to display a couple of static data, and I decided it to be a Single Page Application (SPA) for the sake of the simplicity and reuse of the page templates.

At the beginning, my idea was to do the dom manipulation with jQuery and templating using jsRender library, but during the planning phase, I thought I should take into consideration using a SPA framework or library. I did a little research on the web, consulted a friend of mine, and then shortened my list to DurandalJS and AngularJS. After giving a quick try to each of them, I decided to go with AngularJS.

Using HTML templates for pages and binding data to the templates was dead simple in AngularJS. The biggest implementation challenge on the project was the internationalization, as the site is multilingual in four different languages. With the help of Angular translate module I managed to translate the labels very easily, and by extracting the language using route params I made the app to decide on the language of controler. The app worked like a charm.

On overall, I managed to finish the whole project within three working days and the most interesting part for me was that I managed to do it without using jQuery at all. Ever since I have started to use jQuery, this is the first project that I have finished without using jQuery. I still think that jQuery is an amazing library and I will continue using it in the future, but there is one other thing, that certainly, I will start using more and more AngluarJS as well.

Train yourself on ASP.NET web development

I have always been supporter of the formal education as a primary way of one’s intellectual forming. However, there are times you need a quick push on a topic you have no experience, or formal education. If this is your case, then here is my advice.

You need to have a curriculum to support your knowledge development, instead of trying to grasp the topic from blog posts and internet pages. As humans tend to learn visually faster than by reading, starting with video training would be a better choice.

Pluralsight is a video training provider for developer topics with videos prepared by some of the most known authors and industry experts of software development community. From the range of the courses offered, here is a learning path I would suggest, from the range of training provided from Pluralsight.

Lets start progressively, from basics to more advanced topics, so here are the courses in this order:

  1. HTML Fundamentals
  2. HTML5 Fundamentals
  3. Using HTML5 and CSS3
  4. JavaScript Fundamentals
  5. Structuring JavaScript Code
  6. jQuery Fundamentals
  7. A Web developer’s guide to images
  8. ASP.NET MVC4 Fundamentals
  9. Building Applications with ASP.NET MVC 4
  10. Building ASP.NET MVC Apps with EF Code First, HTML5, and jQuery
  11. Web performance
  12. Scrum Fundamentals

This curricula is prepared in a way so you will progressively develop yourself to be a web developer. First, you will start with HTML, then continue with HTML5, the hot topic of our time, and proceed further with mixing HTML5 and CSS3 to create modern sites. After that, the curricula continues with JavaScript, the ultimate language of browsers, to continue with a guide to images,  and then further advance with server side programming using ASP.NET MVC framework. At the end, course finishes with Web performance topic to create optimal fast loading sites, and Scrum fundamentals, to develop a structured software development process. 

If you follow this path, my suggestion is that you allow yourself at least two months, if not more, to go through these courses.

I would like to hear your opinion, especially about the results if you have followed this learning path.