My review on “Java By Comparison” book

Recently I received a print copy of book titled “Java By Comparison” authored by @simonharrer along with two more co-authors. As the book states “become a Java Craftsman in 70 example”, this book is mainly focused on improving your Java coding skills with set of  examples as best practices.

The book is published on March 2018 and available in amazon to buy,

                

Below are some key features of this book,

  1. Provides best coding practices/ Code quality
  2. Explanation through Examples
  3. What are do’s and don’ts
  4. Usage of Java8 features
  5. Step by step explanation
  6. Easy to read and grasp the content

This book really helpful to novice and intermediate level programming developers in the industry. Even though the book is not a reference for Java experts, it helps in improving some of the commonly ignored practices and covering the edge cases. Finally I recommend this book to programmers(especially beginners to mid-level programmers) who wants to improve on code quality in a quick span of time.

Last but not least, writing code is not a big challenge but writing good-quality code needs lot of efforts, time and passion. Happy reading 🙂

 

How to detect and avoid cyclic dependencies in javascript

In many programming languages, you might heard about circular dependencies (a.k.a as cyclic dependencies).  But if you are new to this terminology then let me briefly explain what that is, how to detect and how to avoid that in your code.

As per wikipedia “let me briefly explain what that is and why would you prefer to avoid that in your code.”  The below diagram depicts how these circular dependencies related as an example,

Many developers assume that circular dependencies are anti-design pattern and bad design, but they are often required in a complex software application. So if your application contains circular dependency then it doesn’t always imply a bug. In case, when there is a chance of bug or problem then it is developer responsibility to detect and avoid them.

There are two possible options to detect cyclic dependencies in your javascript project

Circular Dependency Plugin: 

This plugin is used to detect circular dependencies when bundling with webpack bundler. The compatible version of this plugin should be used based on webpack version. The latest version5.0 of this plugin  supports webpack 4.x where as  4.0 version supports Webpack 3.x version. Find more details about the npm module here

The plugin is quite mature  and I have been used in one of a Vue project to detect the dependencies. It detected indirect dependencies caused by Vue Router package.

The usage of this plugin is very simple. You just need to import the plugin and configure it similar        to any other plugin.

The customization for cyclic dependencies can be achieved using three callbacks: onStart, onDetect and onEnd. For example, the default messages can be customized by indicating the beginning, cyclic modules path and completion of detecting dependencies as below,

Currently it only provides metrics through messages either in warnings or errors.

Madge:

Apart from showing the circular dependencies information, it can act as a developer tool for generating a visual graph of your module dependencies. It would be easy to find the dependencies relation in the complex application. Find more details about the npm module here

You can install this package using below npm command,

if you want to generate visual graphs either in SVG or DOT format then you need to install Graphviz software,

Now it is ready to use madge in your application by creating it as npm script. The commands for finding circular dependencies and creating the visual graph for dependencies would be as follows,

The example visual graph of module dependencies would be as below. The red color boxes indicates circular dependencies.

After detecting the circular dependencies, the next step is going to be how to break the cyclic dependencies. You need to move the code snippets to some other sharable file to break dependencies among modules. This might be a time taking process based on type of complexity in the application.

Note: I reported one issue related to dynamic imports support and the fix is available in the latest version.

Conclusion: Even though there are no standard tools or packages available to detect the circular dependencies, both circular dependency plugin and madge package provides flexible API to find out these cyclic dependencies in the large to medium scale applications. I believe that each application should have a check to find out and avoid these dependencies as much in the future.

How to upgrade Angular5 projects to Angular6?

Did you ever feel that it is going to be very difficult to upgrade Angular5 project to Angular6.x version. It might be “Yes” for many developers. Even I faced many errors while upgrading my PrimeNG-Extensions project (https://github.com/sudheerj/primeng-extensions) to Angular6.x version.

If you try to upgrade the Angular6 dependencies manually with in your package.json file and then renaming .angular-cli.json to angular.json, you will get the below error which is not easy anyway to find out the root issue,

This is because the schema will be different for .angular-cli.json and angular.json. Instead you need to follow the below four steps to achieve successful upgrade.

Note: You remove ./node_modules folder before the upgrade. It make sure the correct dependencies  and avoiding compatibility/conflict issues

1.Upgrade your Angular CLI version 

Run the below npm command to upgrade your angular CLI version. This command will update the angular cli version in devDependencies section of package.json file

2.  Upgrade your Angular CLI configuration using npm

Run the below npm command to convert the project configuration file from .angular-cli.json to angular.json file. It will also update unit testing and tslint config files such as karma.config.js, tsconfig.json and tslint.js etc.

3. Update your Angular dependencies

Run the below npm update command to upgrade all your Angular dependencies in package.json file

4. Upgrade third party dependencies

You also need to upgrade older TypeScript version which may not be compatible with latest Angular version. So manually update this dependency from “2.4.2” to latest version( currently it is “2.9.2”). Another important upgrade is RxJS version from “5.5.2” to latest( currently it is “6.3.2”). Other third party dependencies upgrade which depends on your project also should be done based on the usage.

 

JHipster meets PrimeNG or PrimeNG meets JHipster

JHipster is an open source application generator used to develop modern web applications and microservices using Angular and Spring framework. The tool generates Java stack on the server side(Spring Boot) and responsive front-end(Angular) on the client side. JHipster 4.0 supporting Angular2 and after that JHipster 4.2 supported Angular 4 versions. It can cover more scenarios if it supports any popular Angular component library. Currently PrimeNG is one of the most popular component library in Angular community with 85+ components categorized under 8-9 groups. Also, the components look and feel can be changed with the help of around 20 themes available.

JHipster-PrimeNG module enables PrimeNG support with an easy setup similar to any other JHipster module. Initially it supports interactive theme selection and component groups to generate customized application.

The Github project is available here

Continue reading

What’s new in PrimeNG 4.2 release

After two months, PrimeNG released 4.2 version with some new features and around 200 defect fixes. The notable features are rewrites for Terminal using service, Message service for Growl and messages, button bar(Today and Clear buttons) and date template for Calendar component, item template for MultiSelect, loading indicator for DataTable and autoComplete components and floating feature for input components and so on.

Some of the major features are as follows,

Continue reading

Angular’s official internationalization(i18n) support

In the previous blog post series, we have seen how to achieve the internationalization support using ngx-translate library. Please read this post if you didn’t read yet. In this blog post, you will see how to achieve it through Angular’s official i18n tools.  “Internationalization is the process of designing a software application so that it can potentially be adapted to various languages and regions without engineering changes”. Angular uses ngx-i18n tools to support internationalization. The process involves four steps.

  1. Identify the messages: Initially mark the static text messages in your component templates.
  2. Generate standard translation files: Extracts the marked messages into an industry standard translation source file(XLIFF and XMB formats).
  3. Translating the messages: Translating the extracted text messages into the target language by Translator tool.
  4. Complete the translation files: Angular compiler imports the compiled translation files and replace the original text with translation text files. Finally it creates translation files based target language.

The demo example is powered by PrimeNG components and the internationalization support for German and Spanish languages. You can close the Github URL to play with the features.

Continue reading

What’s new in JHipster 4.6 release

JHipster announced it’s new release 4.6 version on yesterday. This includes some of the major improvements such as Angular 4.0 support, upgrade Gradle 4 and RTL support.Let us see one by one. You can upgrade in both automatic and manual ways.

AutoUpgrade:

  1. Upgrade your version of JHipster:

  2. Run the upgrade sub-generator:


Manual upgrade:


1.Upgrade your JHipster version

2. Remove node_modules folder and run the below command to make sure it is not using older      version.

3. Upgrade the entities  in your project (Optional)

Continue reading

Nested JSON structure usage with PrimeNG DataTable

PrimeNG DataTable is the most popular and complex component with it’s vast features. In real-time applications, we will use HTTP module to retrieve the data from remote data sources. Most of the time we will imagine that the result JSON structure would be interpreted as flatten type.

For example, the list of browser model object’s JSON structure would be written as follows,

Then we will directly use the JSON key values as dataTable field attributes as below,

Continue reading

Angular 4.2 release: General and Animation features

Angular 4.2 was released three weeks back itself.  The community aware of this release and upgraded in their many projects as well. But from my observation, the release specific features are still not used in most of the projects. Even though this release is not a major one there are many useful features to the Angular community. This release is mainly concentrated on Animation package if you look at the official change log.

The main features of Angular 4.2 release are

Generic features:

  • The Angular form inputs support validators such as min and max attributes
  • The ApplicationRef bootstrap method allows bootstrapping the component directly
  • Enhance i18n tooling such as MissingTranslationStrategy and location notes in translation files.
  • The first step on AOT component’s testing approach
  • Introduce flag to always compile the generated code.

Animation Features:

  • Animation options and input params
  • The animation() function for reusable animations
  • Query for inner elements within animations
  • Staggering multiple elements
  • Enabled queried elements
  • Routable animations
  • Programmatic animations using AnimationBuilder

Let’s dive into them one by one. First we will start with generic features in a quick tour.

Continue reading

What’s new TypeScript 2.4

This is my first blog post on TypeScript open source programming language. I really impressed with the TypeScript benefits after working with Angular framework for quite some time. Of course, it is also very popular in other JS based frameworks such as ExpressJS, ReactJS, VueJS and so on. If you have prior knowledge on Object-Oriented Programming(OOPs) based languages(for example, java) then you feel that TypeScript is really simple with it’s known concepts and terminology. The static type-checking nature introduced compile -time error checks(no more surprise on runtime errors) and great tooling support with IntelliSense to this dynamic type JavaScript world.

“TypeScript is a superset of JavaScript that brings static types and powerful tooling to JavaScript”

TypeScript team announced 2.4 version with four major improvements

  1. Dynamic Import Calls
  2. Weak Types
  3. String Enums
  4. Safter Callback Parameters.

Continue reading