Front-End setup and compilation

In our ambition to stay up to date and bring to our product high quality standards, Front-End Architecture was made using Angular framework together with Kendo UI Angular, you will see a clean, fast and native code easy to build and setup.

On this guide we will learn how to setup front-end environment, there are a couple prerequisites that we need to follow before start.

Kendo ui Angular

Kendo UI for Angular has high-performance Angular UI components without any jQuery dependencies that we implement and customize on our Front-End, this is installed as discrete, scoped npm packages on package.json.

"dependencies": {
    "@progress/kendo-angular-buttons":  "8.0.0",
    "@progress/kendo-angular-common":  "3.1.0",
    "@progress/kendo-angular-dateinputs":  "7.0.1",
    "@progress/kendo-angular-dialog":  "7.1.2",
    "@progress/kendo-angular-dropdowns":  "7.0.2",
    "@progress/kendo-angular-editor":  "4.2.0",
    "@progress/kendo-angular-excel-export":  "5.0.1",
    "@progress/kendo-angular-gauges":  "5.0.0",
    "@progress/kendo-angular-grid":  "7.1.0",
    "@progress/kendo-angular-inputs":  "9.0.3",
    "@progress/kendo-angular-intl":  "4.0.1",
    "@progress/kendo-angular-l10n":  "4.0.0",
    "@progress/kendo-angular-label":  "4.0.0",
    "@progress/kendo-angular-layout":  "7.1.0",
    "@progress/kendo-angular-menu":  "4.0.0",
    "@progress/kendo-angular-pdf-export":  "4.0.0",
    "@progress/kendo-angular-popup":  "5.0.0",
    "@progress/kendo-angular-progressbar":  "3.0.0",
    "@progress/kendo-angular-toolbar":  "6.0.2",
    "@progress/kendo-angular-tooltip":  "4.0.1",
    "@progress/kendo-angular-treeview":  "7.0.2",
},

For new Kendo components is highly recommended to check the proper package installation at Kendo Webpage and follow their instructions.

Angular Framework prerequisites

As we previously mention, Angular is the backbone of our front-end code and before proceeding we need:

• Node.js

• Node Package Manager (NPM)

Install angular CLI (Command Line Interface) using yarn or npm install.

npm install @angular/cli -g

And finally execute :

npm install

or

yarn install

Here is the complete quick start guide by Angular.

Yarn or Npm

Yarn is a package manager as same as NPM, Its purpose is to solve a handful of problems that are faced with NPM, the main reason to use Yarn is because installing packages is even faster however is not consistent than NPM. Yarn is only a CLI client that fetches modules from the NPM registry.

In order to use yarn you must install it globals.

npm install yarn -g

Here you can find more yarn useful commands.

Note: We recommend the NPM due the newest versions are faster as Yarn but with high consistency to avoid vulnerabilities.

WinformsComponents Compilation

Once everything is installed use npm command to build project

\\ Compilation and lint process, equivalent to ng build && ng build 

npm run build

Samples Compilation

Once everything is installed you can compile samples using commands like:

\\ Default Angular configuration (Debug mode)

ng build 

\\ Production mode compilation, equivalent to ng build -c production 

npm run build

\\ Debug mode compilation (Allow access to .ts files Developer Tools),
\\ equivalent to ng build -c debug

npm run debug

Differences with and without -c production

There are differences when the applications is builded with -c production parameter. The production build produces an efficient deployment application, the bundles size decrease producing an improve in performance loading the app, the components code is minified, the css is minified and packaged, better security reducing possibilities of client-site HTML and injection attacks, the app is fewer asynchronous requests and faster rendering.

• ng serve serves an Angular project via a development server and build modules,-o flag opens a default browser on the specified port.

  ng serve -o

Setup and compile process is complete, you will be able to execute testing commands like:

• npm test to running unit tests over the WinformsComponents repository path.

• npm run cy:open to running Component Integration Tests (CIT) over Samples application using Cypress with UI deployment.

• npm run cy:test to running (CIT) without UI and only displaying console information.