Build High Performance Web Application Using React

In the avalanche of front-end JavaScript frameworks, by now you might have probably heard about Facebook’s React. Now the most prevalent question that’s lingering in the minds of most developers is - what should I use, Angular or React? It’s a question both novices and veterans will eventually have to tackle if they’re to keep up with the ever-evolving world of front-end web development. Typically, people take React as any other web development MVC framework, but, actually it is not.

The difficulty starting out with React isn’t React itself. It’s important to remember React is “just the V in MVC” or “just the view layer”. Comparing React to Angular or React to Ember is unfair because React isn’t trying to be a full fledged framework. It’s just trying to be the view layer, which it’s really good at.

Emergence of React JS

React is used by the largest companies in the world as well as some of the smaller startups. It was built by the engineers who work on Facebook.com, one of the world's largest websites, but it can scale to projects of any size.

The Simple Definition of React

React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.

What makes React so popular

Simple

Let your UI change automatically with significant changes in the underlying data. React.JS is simple and easy to work with.

Unidirectional Data Flow

If you think about the difference between a static website and a complex web application like Facebook, the only real difference is that Facebook has a bunch of state inside it. Be it your list of Friends, Notifications, Posts, etc.; Facebook has states to manage, which a local static website doesn’t.  

In a traditional JavaScript application, you need to look at what data changed and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS, which provides a declarative interface via directives and data binding requires a linking function to manually update DOM nodes.

What is more exciting about React is that its main purpose is to manage the state inside your application. Your UI is just a function of your State.  As the state updates, the UI going to update as well.

Reusable Components

React provides a component based structure. You start with tiny components like button, checkbox, dropdown etc. and then you create wrapper components composed of those smaller components. After that, you write higher level wrapper components. And it goes on like that until you have this one root component - which is your app.

Each component decides how it should be rendered. Each component has its own internal logic. This approach has some real amazing results. You can reuse the components anywhere you need. As a result,

1. Your app has consistent look and feel,
2. Code re-use makes it easier to maintain and grow your codebase, and
3. It is easier to develop your app.

Most of React is just JavaScript

Lastly, a lot of times, React is just JavaScript. What I love about React is that more you get using JavaScript, the better you’re going to be at React. React API is actually pretty small because it relies heavily on the API that you already know - JavaScript.

The Bonus called React Native and React VR

Not only will React make you a better developer, but it will also open up to other development platforms like Native and VR.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

Mostly, it is assumed that React Native apps are Hybrid apps which, irrespective of the platform, opens a webview and renders an HTML. In fact the “Write once, run everywhere” mantra doesn’t fully apply to React Native as it expects developers to use the components which best follow the native behaviors of the platform.

React Native renders native views, which means, all the browser compatibility issues go away. As all views are Native, the performance will be much better, and you get the Native feel with super smooth animations, just how you want it to be.

React VR

In April 2017, at its F8 developer conference, Facebook announced the launch of React VR, a new JavaScript framework that lets developers build virtual reality experiences.

React VR lets you build VR apps using JavaScript. It uses the same design as React, letting you compose a rich VR world and UI from declarative components.

Anyone with experience in building React apps should be able to build React VR apps pretty easily (and those developers will also be able to leverage many of the existing tools in the React ecosystem).

Conclusion

One benefit to the ongoing avalanche of front-end JavaScript frameworks is that occasionally, a new idea crops up that makes us think.  Since React is just a View library, it shines when you have lots of dynamic content changing within the view. Should you have any query or you have something exciting to share about React, your ‘Reactions’ a ‘Reactors’ are most welcome. Just drop me a comment below. Happy Reacting!

What is Physical Web?

As we know, iBeacon will always need an app. iBeacon simply broadcasts a set of identifiers : UUID, Major and Minor.

Now to do something interactive when this broadcast being detected, like a message, coupon etc., we need an app.

Now with IoT knocking at the door, The number of smart objects is going to explode, both in our homes and in public spaces. Much like the web, there is going to be a long tail of interactivity for smart objects. But the overhead of installing an app for each one just doesn't scale. We need a system that lets you walk up and use a device with just a tap

Hence comes, Physical Web. It is an early-stage experimental project, started by Google.The Physical Web is an effort to extend the core superpower of the web - the URL - to everyday physical objects. The Physical Web isn't about replacing native apps: it's about enabling interaction when native apps just aren't practical.

Physical Web involves creating an open ecosystem where Physical Web devices can broadcast URLs in the area around them. It is a web that extends to physical devices.

Suppose you are standing at a bus stop and wondering the schedule of buses operating from that bus stop. At present, the option is to do a search from mobile and you will have plenty of urls,apps that may or may not tell the current/exact schedule of that bus stop. With Physical Web in place, you will get the schedule from the physical beacon placed at that bus stop itself. The beacon will be broadcasting a url containing information about the schedule. What that means is , Google initiates a scheme where we will use the IoT through a browsing and ranking mechanism on mobile devices, much like searching the web today. How exciting is that!

Physical web developer community suggests a wide range of use-cases.

Once any smart device can have a web address, the entire overhead of an app seems a bit backward. The Physical Web approach unlocks tiny use cases that would never be practical:

• A cat collar would let you call to find the owner

• A bus tells you it's next stop

• Parking meters can pay in the cloud using the phone's internet connection

• Any store, no matter how small, can offer an online experience when you walk in

• A ZipCar broadcasts a signup page, allowing you to immediately drive away

• Industrial equipment can offer diagnostics

Internet of Things and Data Dilemma

The coming billions of Internet of Things devices will simply generate too
much data to be analysed in traditional ways. Instead of the usual one-to-one predefined IP legacy topology, only a publish/subscribe model allows the big data servers to be selective and adaptive in the choice of data to operate upon, and is thus smarter over time.

Even more importantly, the big data analyzers will not even know what data streams
would be useful until they discover the data. Information neighborhoods created through
data stream affinities will present opportunities for selecting and combining small data
flows from many different kinds of end devices, not all of which are even part of a specific application. 

This allows IoT applications to become smarter and smarter over time, as evermore end devices are installed. Whatever initial purpose these end devices
serve, they may also unexpectedly and unpredictably benefit other applications that
discover their data outputs and find them useful.
When initially installed, specific appliances, sensors, and actuators may serve a
particular application. But over time, new end devices may be deployed by the same or
other organizations. Data streams from these new devices may also be recognized by
“affinities” of place, time, or correlation to be incorporated into the original application’s information “neighbourhood.”

Changes in BLE support in Android Lollipop

A tutorial by Dave Smith on BLE changes introduced in Android Lollipop.

Steps to Success on the Internet of Things

The Internet of Things is a subject of much attention nowadays. It is a technology trend which produces trillions of data through connecting multiple devices and sensors with the cloud and business intelligence tools. The Internet of Things (IoT) is thus causing a large number and distinct types of products to emit colossal amount of data at a phenomenal rate.

The following list will help demystify exactly what you need to leverage IoT to transform your business.

1.  Build a connected system Before you decide on your IoT strategy, you must first think through the entire process. Determine how modifying a product, creating something new, or switching up an internal business process will change the user or customer experience.
    
2. Create a connected object This step involves choosing the right hardware for the job. You will need to find a development board that meets the form factor and computation requirements your job demands.
3. Build the IoT infrastructure Choose a cloud infrastructure that will connect your intelligent objects to the Internet. Consider how you will store data, whether you will have an API, as well as your security standards.
4. Create applications In the world of IoT, users typically care most about the connected device applications, built on cloud app platforms such as Force.com and Heroku, that allow them to view information. In addition, these apps can give your business insights into your customers and recurring revenue opportunities.
5. Tie into business systems In the IoT, you have the option of connecting applications that manage business systems, such as accounting and HR, to real-time data from products used by customers.
6. Drive business transformation Analytics and automation allow you to break down all the data your connected devices produce into categories that are relevant to your business. These can include reporting, filtering, exploring, acting, and predicting.
7. Maintain, service, and support Take the time to think through what you will need to ensure that your IoT solutions not only run for the foreseeable future, but can also be repaired with little effort. Consider items such as accessibility over time and how often upgrades will be needed.
   Reference: http://blogs.salesforce.com/company/2014/07/success-on-the-internet-of-things.html

Different States of Bluetooth Low Energy

There are four active States of BLE.

At any given point of time, only one state can be active which is highlighted in figure above.

What is Internet of Things ?

The Internet of Things (IoT) is the interconnection of uniquely identifiable embedded computing devices within the existing Internet infrastructure.

Ok, Now explain that!

The architecture of the original Internet was created long before communicating with
billions of very simple devices such as sensors and appliances was ever envisioned.
The coming explosion of these much simpler devices creates tremendous challenges
for the current networking paradigm in terms of the number of devices, unprecedented
demands for low-cost connectivity, and impossibility of managing far-flung and diverse
equipment. Although these challenges are becoming evident now, they will pose a
greater, more severe problem as this revolution accelerates. 

More and more devices are being embedded with sensors and have the ability to communicate. This enables a network of devices that can identify themselves, collect data and also communicate with each other. The 'Internet of Things' is the next radical transformation in the communication era where gadgets talk to each other without any need of human intervention.

Think of a microwave sending an alert to mobile phone or a wearable band once the food is cooked. 

In Healthcare, devices like thermometers, heart rate monitors can take reading and automatically send data to a smart phone or even to a server. The smart phone or server can do some analysis on respective historical data and alerts the user if any parameters are beyond prescribed limits.

A wide variety of end devices will be connected to the Internet of Things

More to come...





 

Sample Code in Android to read any iBeacon PDU

I have created a sample code to read iBeacon PDU in Android.

I will not go into details of how iBeacon PDU look like. You can find a lot of blogs, StackOverFlow posts regarding the same.


This code is inspired from Bluetooth Application Accelerator available at the Bluetooth SIG website

Please do a code review and share your comments/feedback.

You can get complete source code at my GitHub repository here.

First create a simple Beacon class that will hold all elements of iBeacon.

package com.boskysoft.beaconscanner.modal;
/**
* @author bosky
*
* This is a sample modal class for iBeacon
*
*/
public class Beacon {
private final String proximityUUID;
private final String name;
private final String macAddress;
private final int major;
private final int minor;
private final int measuredPower;
private final int rssi;

public Beacon(String proximityUUID, String name, String macAddress,
int major, int minor, int measuredPower, int rssi) {
this.proximityUUID = proximityUUID;
this.name = name;
this.macAddress = macAddress;
this.major = major;
this.minor = minor;
this.measuredPower = measuredPower;
this.rssi = rssi;
}

public String getProximityUUID() {
return proximityUUID;
}

public String getName() {
return name;
}

public String getMacAddress() {
return macAddress;
}

public int getMajor() {
return major;
}

public int getMinor() {
return minor;
}

public int getMeasuredPower() {
return measuredPower;
}

public int getRssi() {
return rssi;
}

}

} 

Next, in MainActivity.java declare, 

private BleWrapper mBleWrapper = null;

Initialize mBleWrapper

mBleWrapper = new BleWrapper(this, new BleWrapperUiCallbacks.Null() {
@Override
public void uiDeviceFound(final BluetoothDevice device, final int rssi, final byte[] record) {
handleFoundDevice(device, rssi, record);
}
}); 

In handleFoundDevice, capture scanRecord byte array and parse:
 

protected void handleFoundDevice(BluetoothDevice device, int rssi,
byte[] scanRecord) {
String scanRecordAsHex = HashCode.fromBytes(scanRecord)
.toString();
for (int i = 0; i < scanRecord.length; i++) {
int payloadLength = unsignedByteToInt(scanRecord[i]);
if ((payloadLength == 0) || (i + 1 >= scanRecord.length)) {
break;
}
if (unsignedByteToInt(scanRecord[(i + 1)]) != 255) {
i += payloadLength;
} else {
if (payloadLength == 26) {
if ((unsignedByteToInt(scanRecord[(i + 2)]) == 76)
&& (unsignedByteToInt(scanRecord[(i + 3)]) == 0)
&& (unsignedByteToInt(scanRecord[(i + 4)]) == 2)
&& (unsignedByteToInt(scanRecord[(i + 5)]) == 21)) {
String proximityUUID = String.format(
"%s-%s-%s-%s-%s",
new Object[] {
scanRecordAsHex.substring(18,
26),
scanRecordAsHex.substring(26,
30),
scanRecordAsHex.substring(30,
34),
scanRecordAsHex.substring(34,
38),
scanRecordAsHex.substring(38,
50) });
int major = unsignedByteToInt(scanRecord[(i + 22)])
* 256
+ unsignedByteToInt(scanRecord[(i + 23)]);
int minor = unsignedByteToInt(scanRecord[(i + 24)])
* 256
+ unsignedByteToInt(scanRecord[(i + 25)]);
int measuredPower = scanRecord[(i + 26)];
String msg = "uiDeviceFound: "
+ device.getName() + ", rssi:" + rssi
+ ", Mac Address:"
+ device.getAddress()
+ " PROXIMITYUUID:" + proximityUUID
+ " MAJOR:" + major + " MINOR:" + minor
+ " MEASURED POWER:" + measuredPower;
Log.d(LOGTAG, msg);
// use myBeacon as per your need
Beacon myBeacon = new Beacon(proximityUUID,
device.getName(), device.getAddress(), major,
minor, measuredPower, rssi);
}
}
}
}
}

 

// use myBeacon as per your need
Beacon myBeacon = new Beacon(proximityUUID,
device.getName(), device.getAddress(), major,
minor, measuredPower, rssi); 

Profile, Services and Characteristics

GATT transactions in BLE are based on high-level, nested objects called Profiles, Services and Characteristics, which can be seen in the illustration below:

Profiles

To use Bluetooth wireless technology, a device must be able to interpret certain Bluetooth profiles. Bluetooth profiles are definitions of possible applications and specify general behaviors that Bluetooth enabled devices use to communicate with other Bluetooth devices.

A Profile doesn't actually exist on the BLE peripheral itself, it's simple a pre-defined collection of Services that has been compiled by either the Bluetooth SIG or by the peripheral designers.

Services

Services are used to break data up into logic entities, and contain specific chunks of data called Characteristics. A service can have one or more characteristics, and each service distinguishes itself from other services by means of a unique numeric ID called a UUID, which can be either 16-bit (for officially adopted BLE Services) or 128-bit (for custom services).


Characteristics
 
The lowest level concept in GATT transactions is the Characteristic, which encapsulates a single data point (though it may contain an array of related data, such as X/Y/Z values from a 3-axis accelerometer, etc.). Similarly to Services, each Characteristic distinguishes itself via a pre-defined 16-bit or 128-bit UUID.

Characteristics are the main point that you will interact with your BLE peripheral, so it's important to understand the concept. They are also used to send data back to the BLE peripheral, since you are also able to write to characteristic. You could implement a simple UART-type interface with a custom 'UART Service' and two characteristics, one for the TX channel and one for the RX channel, where one characteristic might be configured as read only and the other would have write privileges.

What makes BLE consumes less power

There are three characteristics of Bluetooth low energy technology that underlie its ULP performance: maximized standby time, fast connection, and low peak transmit/receive power.

Switching the radio “on” for anything other than very brief periods dramatically reduces battery life, so any transmitting or receiving that has to be done needs to be done quickly. The first trick Bluetooth low energy technology uses to minimize time on air is to employ only three “advertising” channels to search for other devices or promote its own presence to devices that might be looking to make aconnection. In comparison, Classic Bluetooth technology uses 32 channels.

This means Bluetooth low energy technology has to switch “on” for just 0.6 to 1.2ms to scan for other devices, while Classic Bluetooth technology requires 22.5ms to scan its 32 channels. Consequently, Bluetooth low energy technology uses 10 to 20 times less power than Classic Bluetooth technology to locate other radios.

Once connected, Bluetooth low energy technology switches to one of its 37 data channels. During the short data transmission period the radio switches between channels in a pseudo-random pattern using the Adaptive Frequency Hopping (AFH) technology pioneered by Classic Bluetooth technology (although Classic Bluetooth technology uses 79 data channels).

Another reason why Bluetooth low energy technology spends minimal time on air is because it features a raw data bandwidth of 1Mbps – greater bandwidth allows more information to be sent in less time. An alternative technology that features a bandwidth of 250kbps, for example, has to be “on” for eight times as long (using more battery energy) to send the same amount of information.

Bluetooth low energy technology can “complete” a connection (i.e. scan for other devices, link, send data, authenticate, and “gracefully” terminate) in just 3ms. With Classic Bluetooth technology, a similar connection cycle is measured in hundreds of milliseconds. Remember, more time on air requires more energy from the battery.

Classic Bluetooth technology uses a long packet length. When these longer packets are transmitted the radio has to remain in a relatively high power state for a longer duration, heating the silicon. This changes the material’s physical characteristics and would alter the transmission frequency (breaking the link) unless the radio was constantly recalibrated. Recalibration costs power (and requires a closed-loop architecture, making the radio more complex and pushing up the device’s price).

In contrast, Bluetooth low energy technology uses very short packets - which keeps the silicon cool. Consequently, a Bluetooth low energy transceiver doesn’t require power consuming recalibration and a closed-loop architecture.