Webpack: A module bundler for JavaScript applications

Webpack is an open-source JavaScript module bundler for JavaScript applications. The bundler can be used from the command line(CLI) or configured using a config file named webpack.config.js. It takes modules with dependencies and generating static assets representing those modules.

Nowadays, Webpack is a leading bundler for Angular, React and Vue frameworks with various templates.  Due to it’s unique syntax who are new to Webpack thinking that it is difficult to configure and using it. But once you are familiar with it’s features then it is very easy to use in all kinds of applications. The current version of webpack is 3.8.1v.

It works with two major goals

  1. Everything treated as a module which includes JS files, CSS files, image files and HTML files. Also each artifict can be divided into smaller and reusable chunks.
  2. Load only the modules which you need on demand. Some of the bundlers combines all of the modules into single big bundle.js file which takes more time for initial load.In contrast, Webpack generates several smaller “bundle” files, which loads some parts of the app asynchronously to improve the page load time.

Continue reading

Lodash: A modern JavaScript Utility library

Lodash is an open source(MIT licensed) modern javascript utility library to ease the programming tasks in a functional programming paradigm. The main goal of this library is modularity, performance and simplicity. This library handles the hard parts of javascript across various types of data such as Arrays, objects, strings, functions, date and so on. This project is inspired by UnderScore utility library.

The module methods are mainly used for

  • Iterating Arrays, Objects and Strings
  • Manipulating and testing values
  • Creating composite functions
  • Creating own mixins for Lodash

The major features of this library are,

  •    Modularity and consistency
  •    Enhances and compatible with ES6/7
  •    Compatible build available for IE8 and older
  •    Available in AMD, ES and CommonJS module formats

Continue reading

Interactive command line interface using InquirerJS

InquirerJS is an easily embeddable and beautiful command line interface for NodeJS projects. I found this library while I was working with JHipster-PrimeNG module. JHipster provides various modules to generate the modern web applications with the help of Yeoman generator. Internally Yeoman generator uses this library for an interactive question and answer prompts through CLI. But we can use this library in a standalone environment as well. Even though there are full blown command-line utilities such as Commander, Vorpal and args available in the market, the usage and benefits of InquirerJS is quite impressive.

The major tasks of this library includes:

  • Asking questions
  • Parsing input
  • Validating answers
  • Providing error feedback
  • Managing hierarchical prompts

Continue reading

My review on Beginning Spring Boot 2.0 Book

In this post I’m going to provide my review comments on  ‘Beginning Spring Boot 2.0’ book written by Siva Prasad Reddy. I know the author of this book very well by working as a technical reviewer for one of his previous book titled “PrimeFaces Beginner’s guide”.  This book is divided into 19 smaller chapters to make the concepts clear. Each chapter explains how Spring Boot makes the life easier in terms of configuration and integration with other technologies when compared to plain Spring based applications. This book covers most of the popular Spring boot starter projects with step by step examples in a simple language. Apart from these spring boot modules, there are some dedicated chapters for security, testing, building RESTful apps, reactive programming,  JHipster generator and  deploying the Spring boot applications.

Continue reading

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