Idiomatic JavaScript with Flow

This blog describes Flow, a static type checker for JavaScript. It provides getting started details and basic concepts of type checking using Flow.

Blogger: V. Keerti Kotaru . Author of Angular Material book 

What is Flow?

Flow is a static type checker for JavaScript. It is an open source project by Facebook (GitHub link). It enables specifying types for variables and objects in JavaScript.

Flow type checking could be run on a console. Easier option is to use plug-ins or extensions with IDEs. I use Visual Studio Code for JavaScript development. I find Flow Language Support extension by Flowtype publisher pretty useful. Follow the link to view and install it.

How does it work?

Specifying types for JavaScript variables and objects could be useful as they point out common code errors that could result in bugs. However, browsers do not understand flow syntax and type annotations. Flow types need to be stripped off before running on the browser. And hence Flow is a static type checker, rather than a language.

Setup Flow

Assuming an NPM package is setup for the sample code repo, install Flow using as a dev dependency on the project.

npm install --save-dev flow-bin 

We may use Babel plug-in to strip off types. But for simplicity, in this getting started blog, I'm using flow-remove-types NPM package.

Install flow-remove-types package globally on your machine.

npm install -g flow-remove-types

The code sample described in the blog is launched to Index.html. Sample also has a JavaScript file with type syntax, named index.js. As described above, once we add Flow types to the code, browser can't understand Flow syntax. Hence we will generate JavaScript file without Flow types for browsers to run. In the sample I named it bundle.js. It is generated using the flow-remove-types script. Add reference to bundle.js in Index.html

Run the following command to strip types.

flow-remove-types index.js --out-file bundle.js

Refer to complete code at this link

JavaScript Idioms

Flow claims to work well with JavaScript style of coding and idioms. I attempted the following basic samples.

In the index.js to start type checking add the following comment  on top of the file.
// @flow

Consider following function

// @flow

((number1, number2) => number1 * number2)(10,20)

The function takes two parameters number1 and number2. In the above statement we are calling the function with values 10 and 20. Here flow is inferring a type number to the parameters as we are calling the function with numeric values. Consider following code erroneously providing string on the first parameter. 

// notice first parameter is a string.
((number1, number2) => number1 * number2)('Im String',20)

Flow points out the error on variable number1, string (The operand of an arithmetic operation must be a number.).

In the above example, we haven't started using types yet. Just by adding the // @flow comment on top of the file, type checking can begin and certain problems are alerted. However, the error is shown on the statement multiplying numbers for an incorrect parameter value. Flow implied string variable because the function was called with a string. It showed the error as it finds multiplication applied on string. 

Add types

Adding types makes the developer intent clear. We can declare a variable with syntax variableName: type syntax. Consider following sample

let isItCool:boolean; 
isItCool = true;

We declared a boolean and assigned true. Assigning a non boolean will show the type error.

isItCool = "test string";
string (This type is incompatible with boolean)

Now, let's rewrite the above multiplication function with types in paramters

((number1: number, number2: number) => number1 * number2)('Im String',20)

Now the error is specific, string (This type is incompatible with number)

Let us now consider specifying return type. Here I modified multiplication to addition, a string parameter will result in concatenating two values. Consider following code,

((number1, number2) => number1 + number2)('10',20)

// It will result in 1020

This depicts why explicit typing is important to avoid bugs. Consider specifying return type on the function. Following is the modified function. Notice the highlighted part for return type.

((number1, number2):number => number1 + number2)('10',20)

Specifying return type results in error depicting resultant string is incompatible with numeric type.

string (This type is incompatible with the expected return type of number

However specifying input parameters' type will point out error with string input parameter for number type in the first place.

References and more reading material

Complete Sample - https://github.com/kvkirthy/VenCKI-Samples/tree/master/Flow-basic-sample
Read getting started guide here, https://flowtype.org/docs/getting-started.html
Visual Studio Code plug-in for Flow https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode

Ionic Framework: What's coming next?

Image Reference: http://www.southbaymobileusergroup.com

In this blog I'm attempting to write about some of Ionic's upcoming features and services. These are mostly in Alpha/Beta stages of development. I believe these features are going to make Hybrid Mobile App development sophisticated, easier and fun.
If you are new to Ionic Framework, checkout docs on it's Website or One of my old blog.

Following are some of Ionic Framework's upcoming features and services.

Ionic IO: 

Ionic IO provides bunch of services for Ionic developers and customers. Features include 

• Analytics on your app.
• Ionic Push for push notifications to mobile devices.
• Deploy, an interesting feature to update apps from the framework directly, skipping app store and Playstore approval processes.
• User management for your mobile app.

Ionic View - Mobile App

As you develop with Ionic Framework, you could use emulators to test your app. How about continuously testing your app on device? Well, it's a time taking process to deploy to devices. In case of Android, I experienced wait time is much longer.

Ionic.IO Services solve this problem. During development phase, the Ionic View mobile app and cloud service allow you to update app on your device just on tap of a button.

Download Ionic View mobile app and login with your id. Similarly on your machine signup/login to ionic.io.

On your machine, open command prompt (or terminal) and navigate to the folder with your ionic app.

(If you are creating the app only now use ionic start MyAppName blank. Once the project is created CD into the new folder created.)

Use following command,

ionic io init

It might prompt you to login with your ionic io credentials (if you are not logged in already)




Upload your project by using 
ionic upload

On your mobile phone download and open Ionic View mobile app. You will see list of all your apps. Sync the app you want to play with and open it. You can test your app's functionality, screens etc. 



ngCordova

Cordova and plug-ins allow hybrid mobile app developers (PhoneGap) to access many native mobile phone features. ngCordova is a layer on top for AngularJS framework to take advantage of these plug-ins' APIs.

ngCordova exposes most of the plugin's functionality as AngularJS Services. Hence app developers can use it out-of-box.

Here is the list of services available.

ngCordova library is available as a bower component. Install by bower install ngCordova. As it's downloaded reference the ng-cordova.js in your project.

Cordova plug-ins are available soon after Cordova/Phone Gap initialization is complete. Use $ionicPlatform's .ready function callback to check if device is ready.

$ionicPlatform.ready(function() { 
 console.log("Device ready! "); 
});



Note: Individual cordova plug-ins need to be installed by cordova plugin add plug-in-refrence



Ionic Lab

It provides graphical user interface for developing your app.

Functions include

Serve: for browser emulation of the app. It starts a simple web server that hosts your app's HTML and JavaScript. Open the app in a browser window with an emulator. Chrome has in built emulators in dev-tools. It live reloads as you make changes to the code.

Emulate: for device emulation of the app. These are the real emulators that mimic real phones' hardware

Run: Deploy the app to a device through USB cable and run the app.

Build: Ionic App could be built to deploy to Android or iOS. It builds the app for given platform.

Upload: Upload the app to Ionic.Io services, which can be viewed through Ionic View app on your phone.

Share: Once uploaded app could be tested by multiple members using their own Ionic.Io account. This function allows sharing your app to other members. They could sync it on Ionic View app on their phones.

Plugins: It lists all ngCordova plug-ins (Cordova plugins encapsulated as Angular Services). You can add/remove references to your project.

Ionic Deploy

The app on Ionic IO could not only be deployed to devices for testing, but could be deployed to Production. It could be a powerful feature that eliminates need to go through Playstore or App Store for updates.

I'm curious and will watch this space to see if certain types of updates need us to still go through Playstore or App Store or is it going to be anything and everything in the scope of PhoneGap or Ionic doesn't require us to do so.

Apps could check for updates using the following JavaScript API (new Ionic.Deploy()).check()

var promise = new Ionic.Deploy().update() // returns a promise

promise.then(function(){
   // success
}, function(error){
   // error
});

In conclusion, Ionic Framework is exciting, it's bringing sophistication to Phone Gap. I keep hearing people say Hybrid is not as effective as Native. Ionic framework has already has made a dent to that perception. With what's coming next in this framework, I believe Hybrid using Ionic is the way to go.