AwareUI @ FOSSASIA

FOSSASIA has become one of the most popular tech / dev conferences of the region. I got an opportunity to talk @ FOSSASIA this year. The atmosphere was great and met some amazing people.

I talked about my on-going project “Aware User Interface”. A user interface that can learn, adapt and evolve according to user’s context. The contexts in focus are 1) Environment and 2) User (surrounding, proximity, physiology and psychology).

I will post separate blogs about my new initiative “Aware User Interface”. On the side note, it was a pleasant surprise when I saw Apple’s Keynotes on 21st March, where they introduced #nightshift and #truetone. I talked about the same thing a day earlier šŸ™‚

 

Advertisements

Angular 2.0: Chapter 1 ā€˜New Horizonā€™

Time for some ā€˜Hello Worldā€™. This is by far the most effective way of learning a new tool or technology. Letā€™s do this a bit differently. We will call our first app ā€˜New Horizonā€™. It is a hello world on steroids (or steroids of mild potency). The basic idea is taken fromĀ https://angular.io/docs/ts/latest/quickstart.html.

1: Install Node

We will useĀ Node Package Manager (NPM) to setup theĀ project. In order to use NPM, install Node. Note: This is not mandatory. I choose it because its simple and scalable. Feel free to use anything that you like. Alternate way is to go for non-installation path by using CDN hosted libraries (out of the scope of the current tutorial).

2: Setup Project and Modules

Create a folder for theĀ project (mkdir is a handy command to do that). From command prompt, go to the newly created folder and run the following commands

  • npm init (this command will ask all sort of questions, if you want the default settings, go for npm init -y).
  • npm i angular2@2.0.0-alpha.44 systemjs@0.19.2 ā€“save ā€“save-exact (this command will install the latest alpha of angular and systemJS library. This is the latest alpha at the time of writing this blog. Do check angular.io to ensure the latest one).
  • npm i typescript live-server ā€“save-dev

Q: Hmm, IĀ can understand the fact that we have to install Angular 2, but whatā€™s up with all the other stuff?

Good Catch. Lets break things down

SystemJS ā€“ It is the universal dynamic module loader. This will be a useful tool when creating multi-module application.

Typescript ā€“ It is a super set of ECMA-Script 6 with support of data types. As most of you know, Javascript is a weak type language. With Typescript, this is not a weakness anymore. Plus, Angular 2 is written in TypeScript. Having said that, this is not mandatory as ES5 version angularJS is also available (along with the one for Dart). So, long story short, we will be writing theĀ code in Typescript (with extension of ā€˜tsā€™). Since, Browser can only understand ES5 (and some ES6), the code is trans-piled to ES5 before going to the browser.

LiveServer ā€“ A quick way to create a web server to publish and see your work.

After running these commands, check ā€˜package.jsonā€™ file in the projectĀ folder. This file now contains the details of the installed packages. npm package file can be used to writeĀ rudimentary scripts to help manage theĀ application. Add the following script to the script tag in theĀ package.json file.

ā€œtscā€: ā€œtsc -p src -wā€,
ā€œstartā€: ā€œlive-server ā€“open=srcā€

We willĀ run these commands later. Note: If you want to go further, you can setup Grunt or Curl to manage your application. They have more functionality.

3: Finalize directory structure.

Following is the folder structure, I am using for the demo application. You can do the same.

Tutorial_1_1 (1)

 

4: Entry point to the application: Create Index.html

Index.html is the entry point of theĀ application.

Tutorial_1_2

This is a very simple setup for an application with angular2 and systemJS libraries included. SystemJS is used to import theĀ application modules.Note: System is a global object created by SystemJS.

As an alternate, you can to the following:

System.import(ā€˜scripts/app.jsā€™); // No need to add config.

OR

If you are not interested in SystemJS all together, then you have to relay onĀ DOMContentLoaded event to manually bootstrap your root component. Checkout this nice article:Ā http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html

5: Root Component: App.ts

The first step will be to import required modules. Unlike Angular 1, not every component or module is available in the context. We need to import the ones needed. For theĀ root app component, we need the basic stuff (Component, View & Bootstrap).

import {
  Component,
  View,
  bootstrap
} from "angular2/angular2";

Import statement defines the modules we want to use to write our code.

Second step is to create a root component. Consider root component like an ā€˜np-appā€™ directive. There are three main aspects of the new component of Angular.

Component Annotation: The annotation that provides basic information about the directive and how it will interact with the outside world (DOM).

View Annotation: The annotation that provides the basic template of the component along with the information of the directives that can be used in the template.

Definition class: provides meaning to the component. The properties of the class can be used in the template.

@Component({
    selector:'my-app'
})
@View({
    template: `Hello World on Steroids`
})
class AppComponent {}

Last part is to tie everything together. Bootstrap the new component to the root level of the application:

// Use this function to Bootstrap or Loading a new component at the root level of the application.
bootstrap(AppComponent);