From Mobile developer to WEB Front developer (2nd part)

As I explained in the first part available here, I recently switched from Mobile development to WEB front end development.

Last month has been full of learnings, let me describe them.

Angular: quickstart for the win

As my first web mission will be an Angular application, I focused my attention on this framework.

The official quickstart from Angular website (https://angular.io/docs/ts/latest/quickstart.html) is a very good starting point.

I really enjoyed building step by step a concrete application. This application is a simple dashboard of top rated heroes. Selecting a hero, you can access detailed information, and even edit the hero’s name.

The tutorial is a 7-steps guide. At the beginning of each step, a link to the app in its final state is available. This is very motivating since you already have a clear view of what you’re building before getting through the technical points of each step.

Tour of heroes: the application built during Angular quickstart (live example)

The tutorial shows the various concepts of Angular: modules and components, routing, data binding, HTTP services.

Each step offers the right balance between theoretical explanations of Angular concepts and a practical walkthrough to apply these concepts inside the Tour of Heroes.

The quickstart is full of links to the official documentation, thus it gives the ability to go deeper into the topics of your choice.

Following these links, I could see that the official documentation is clear and gives a good insight of the key concepts.

At the end of the tutorial, I felt comfortable enough with Angular to start an app from scratch.

Despite all these good points, I still missed the lack of explanation of the Angular CLI tool. Unit testing was also not present at all and as a Software Craftsman, it is always a huge frustration not be able to write tests before writing the implementation (more information here).

SFEIR School Angular 200 free training

During my search of Angular learning resources, I had the surprise to see on my twitter feed that SFEIR was giving a two-days Angular training for free, right after the end of my last mobile mission and before starting my first Angular mission. Perfect timing! After asking for advices from colleagues on the *pertinence* of this training, I subscribed it.

The training took place at SFEIR’s place. Around 25 people were attending.

The two trainers were Fabien Zibi, Angular Tech Lead, and Cyril Balit, CTO Front and Google Developer Expert.

Angular 2 training, by SFEIR

As for the official quickstart, a simple app was built during the two days.

It was a face gallery and you can find the source code on this github repository: https://github.com/Sfeir/angular2-200.

A git branch is available for each exercise and exercise solution.

The training offered a very good balance between slides explaining Angular fundamentals and exercises allowing the audience to apply and master those fundamentals.

What I really enjoyed in this training is the usage and deep explanation of the Angular CLI. This convenient tool is very powerful and massively increases the development flow. It can be used to create a whole new project, generate a component or a service, and many other useful tasks.

The trainers, especially Cyril - Google Developer Expert - always answered questions with practical solutions.

As for the official quickstart, I miss the Unit Tests and especially TDD practice. Only a few slides were focused on Unit Tests, they were at the very last chapter of the training and no exercises were dedicated to them. I would have prefered to discover testing throughout the 2 days.

To conclude on this training, I definitely advise anyone to attend to. It is a very good starting point to discover and bootstrap on new topics. Thanks to this training, I felt very confident on my abilities when I started my very first WEB Front End mission.

How-to comparison between mobile and WEB

During this first times in the WEB development ecosystem, I had many good surprises. Some complicated and painful work in the mobile world are easy in the WEB one.

Let’s have a look on some redundant problems developers are usually facing and relative pieces of code.

HTTP call and JSON response parsing

On iOS framework, calling a REST service and converting the JSON response file in swift/Objective-C classes is a common subject of debate.

A quick search on iOS dependencies manager Cocoapods gives 445 results!

Cocoapods search with JSON tag gives 445 results

The common way is to use Alamofire and a JSON parsing library to achieve this, meaning you always use 3rd party libraries even for basic network operations.

On Angular framework, things are slightly different. You can see from this piece of code, extracted from official tutorial, how easier it is. getHeroes(): Observable<Hero[]> {    return this.http.get('api/heroes')                    .map(this.extractData)                    .catch(this.handleError);  }

Binding data between view and component/controller

Separating responsibility across the different files constituting an application is a common matter.

There are several pattern designs used on iOS framework. They may not agree on all concepts. But they all agree on one point: separating view from data.

This is where databinding comes to help the developer.

On the iOS side, the view is often an Interface Builder file showing on a visual editor the screen you are designing. Then you have to manually drag and drop to link UI elements to your source code, and develop all the logic needed to display/refresh/store data.

It can be a huge work on most complex screens, and it is always quite painful even on easier screens.

As stated in the documentation:

”Angular has a rich data-binding framework with a variety of data-binding operations and supporting declaration syntax.”

And that is just true: data-binding offered by Angular is simple and very powerful.

Using only the same name in your component and template, embraced with correct brackets and/or parenthesis (depending on the binding flow), you can have a fully featured UI displaying up-to-date data, storing them, responding to user actions, and so on.<input [(ngModel)]="currentHero.name">The input field is displaying currentHero.name and typing in the field updates the variable.

Forms and field validation

On iOS framework, building a form is a very painful task - maybe the most painful one.

If you add fields validation, with complex rules, e.g. showing validation during user input flow, this can turn into nightmare.

With Angular, I discover that it can be built in a few minutes. Adding custom validation is smooth and the way data are easily binded between view and component gives the ability to update models and UI very easily.

Angular offers two differents built-in ways to define a form, with validation on each field and even with the ability to group some fields for validation purpose (e.g. this can be useful if you have two phone number fields but only one is required).

Doing this would take days on iOS, and few hours in WEB

In the iOS world, as you have to build all on your own, the task is very time-consuming. You may want to use third-party frameworks, but it is not always that simple. When you want a custom UI, which is usually the case, you will have to make a hard choice: adapting the whole library, or building your own…

Conclusion

This second month of learning was mainly focused on Angular stack. I feel more and more comfortable with this new environment and am very happy to see that WEB development maturity is far away from the iOS one.

I still miss two main things:

• Test Driven Development (TDD). As I did not find much resources on it and thus did not experiment it. As my new mission is led by a software craftsman, I feel confident that I will soon discover and practice TDD combined to Angular development.
• Clean Architecture: Uncle Bob never appeared once in all my search for the moment. I do not know if software design is less important on WEB development or if I just did not discover it for the moment. I’m hoping to cover this topic soon.

I already have some ideas of application to build as my first concrete exercise to get deeper into my learning. Next month, I will tell you all about my progresses. Stay tuned!