Total.js + Angular2 + TypeScript = Amazing Performance

Angular2  in comparison to Angular (AngularJS) is primarily performance improvements thanks to the redesign of the architecture. UI rendering and application Api are separated into two levels. Thanks to this architecture,  layers can be allocated to different CPU and executed parallely (

Angular2 make it easy to define and add features without a lot of manually written boilerplate. Fully integrated TypeScript language gives you the benefits of a statically typed language within JavaScript ecosystem.

Assumptions and Benefits our project:

  • High performance thanks to the redesign architecture Angular2 (UI rendering and application Api separated into two levels)
  • Design and build modular applications based on components
  • Compatibility for all browsers thanks to SystemJs and compilation process on fly
  • Transpile Typescript into latest Javascript (ES7, ES6, ES5 or lower version)
  • Use modern JavaScript tools like npm, Babel, Webpack and another not mentioned in this article

How consolidate Angular2 with Total.js and preserve their directory structures and minimizing integration work to a minimum. Below we present a simple skeleton on the basis of which you can create powerful applications.

Below presented skeleton/project You can find on my GitHub repository:

Structure of directories is following:

The most important:

In case of catalogs structure:

  1. /client – Angular2, TypeScript directory
  2. Remaining directories – Total.js

In case of configuration Total.js:

    1. You have to define Angular2 directory in config file.
    2. You have to block  total.js process  of compiling script – for this process will be responsible Angular2 and SystemJS
    3. If You want use /public to storage css, img or another files then You have change “directory-public” to correct directory e.g. /public/
    4. Please remember about placing @{layout(”)}  in index.html

The last operation it is installation process all necessary modules:

      1. Install the total.js in project directory or globally with option -g
        npm install -g total.js bower typescript 
      2. Install the dependencies in /client
        npm install
      3. Install bower dependencies in /client (boostrap and jquery lib)
        bower install
      4. compile .ts files in Angular. Open another command line and go to the /client folder and run
        npm run tsc -w
      5. Start the server from the root directory of project
        node server
      6. Visit http://localhost:8000
      7. That’s all – Now You can create Amazing and Professional SPA applications

February 3rd, 2017

  • Fine wаy of telling, and pleаsant paragraph to obtain information regarding my presentation focus, which i am
    going to deliver in academy..

  • Can I simply say what a aid to find someone who really knows what theyre talking about on the internet. You positively know the way to deliver a difficulty to gentle and make it important. Extra individuals must read this and perceive this aspect of the story. I cant believe youre no more popular since you undoubtedly have the gift..