Tutorial: QuickStart

In following tutorial, you will learn how to make full functional helloworld application quickly using JSactions Appstarter boilerplate code.

Using JSactions App Starter Boilerplate

Appstarter have sample code for :

  • Creating Custom Component Button using JSactions Component.

  • Creating HellowWorld View Screen (page) with ViewNavigator and Viewmnager.

  • Configuring Router path and Event router to browse ViewNavigator and HelloWorld View.

  • Creating Model for View data and state management.

  • Passing View parameter during navigation event

  • Binding custom Component click event using model and BindingUtils

  • Binding Component Custom Property using Model and BindingUtils.

Typical UI Application structure vs JSactions Appstarter Application structure

  • Typical UI application requirement statement : Hello World Application on start should navigate to "HelloWorld" page.

  • Typical UI application layout as per above requirment illustrated in below image :

    picture

  • Equivalent JSactions Application Structure as per above requirment illustrated in below image :

    picture

Install and Running Helloworld Example

Use JSactions App Starter to quickly start building JSactions application. It includes prebuild application structure and tooling of Rollup , Babel. For application development example codes such as Helloworld View, Simple Navigator and Custom Button Component.

  • Prerequisite
    Nodejs 8 and Above. Code Editor : Visual Studio Code

  • Getting code
    Download or clone App starter code from github url : https://github.com/jsactions/jsactions-app-starter If downloaded then Extract Zip Folder

  • Installation

    c:\jsactions-app-starter\npm install

  • Compiling

     c:\jsactions-app-starter\npm run build

  • Running Application
    After compilation successfully following log will appear on command line.

      ./src/index.js → dist/jsactionsappstarter.js
  http://localhost:10002 -> C:\jsactionsappstarter

  • Application Preview
    Now in browser type "http://localhost:10002" to open Application (see preview below)

    picture