Category: Mobile Web Apps

React is FAST in what sense?

Today I was debating with my colleague on how React is fast and in what sense? It was interesting discussion and we thought of exploring on this context, hence blogging it for my reference!

I assume, you’ve knowledge on React JS framework before reading this article!

React is FAST in the sense of DOM updates!!!

How React is fast in updating the DOM (Document Object Model) ?

  1. React creates Virtual DOM (React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a “virtual DOM”) for every component.
  2. Tracks for the changes happening in the react component and updates the Virtual DOM.
  3. Reconciliation happens with the actual DOM for the changes in the Virtual DOM.

It’s all the React magic of transforming the model changes to views!

I’ve come across few blogs posts where they explained the inner details of the React JS and Virtual DOM. Here are few of them –

Real Benefits of React JS Virtual DOM

React: The Virtual DOM

VideoTech Talk : How React.js works

Happy Programming!

Hybrid Apps – Android System WebView Updates

From Android Lollipop 5.0, Google started pushing an app called “Android System Web View”, which they periodically update the device web view. Since Apache Cordova / Adobe PhoneGap is well adopted for building cross platform Mobile apps, this will have significant impact on the apps we’ve already built!

If you’re a Hybrid app developer and supporting Android 5.0 Lollipop & above versions, it’s worth to keep an eye on these updates and test your apps often.

It’s highly recommended to subscribe Chrome Canary beta channel – Android System WebView beta to get the updates early and act accordingly.

You can join Google+ WebView beta community to get latest updates. Android System WebView is supported on Android Lollipop 5.0 & above versions.

How to uninstall the Web View update

  • Tap on the Settings icon.

  • Scroll down and tap on Apps or Application Manager.

  • Look for Android System WebView under Downloaded page.

  • Tap to open the info page.

  • Now click on UNINSTALL UPDATES button. This will reset the web view.

NOTE: It’s a temporary solution till you work out a fix for it. If any of your existing app is breaking in the production, you can quickly ask them to uninstall the Android System WebView update.

Hope it helps!

Quick look of Keyboard events on Mobile browsers

As part of the project, we were working on the forcing the user to enter correct information while keying in. We tried leveraging the keyCode, charCode & which properties on event object.

We did a quick trial by creating a demo Hybrid App and tested the same on the Android and iOS devices. The results were surprising!

Google Chrome to be the future rich browser which is FAILING and Apple’s Mobile Safari is WINNING. Google Chrome browser is failing to return the correct key codes from Android OS KitKat 4.4 and above.

So, it’s better to have the validation check while submitting the form instead of keying in!

I have created a demo page to test the same – KeyEvents

Below are the quick analysis on different Android and iOS devices –

Device & OS Status
Samsung Galaxy NOTE 8000 (4.1.2)      √
Samsung Galaxy S3 (4.3)      √
Samsung Galaxy S4 (4.4.2)      ×
Nexus 7 (4.4.4)      ×
Nexus 7 (5.1)      ×
Nexus 9 (5.1)      ×
Nexus 4 (5.1)      ×
Nexus 5 (5.1)      ×
Nexus 6 (5.0)      ×
Apple iPhone 6 Plus (8.0.2)      √
Apple iPhone 6 (8.1)      √
Apple iPhone 5S (8.0.2)      √
Apple iPhone 5 (7.1.2)      √
Apple iPhone 4S (8.0.2)      √
Apple iPad mini (8.0.2)      √
Apple iPad (6.1.3)      √
Apple iPad Air (7.1.1)      √

Happy Mobile programming!

Webkit Scroll–best alternative to iScroll plugin!

I have seen questions been asked in the forums,  for the best alternative for iScroll. Though it’s a great plugin and works pretty smooth in Apple and Android devices, there are few limitations.

So, we have got better solution that using iScroll for smooth scrolling of list items, which works great in iOS and Android.

All you have to do it add –webkit-overflow-scrolling:touch to the container of the list items and the webkit takes care of the rest!

Code Snippet
  1. <div style="overflow:auto;-webkit-overflow-scrolling:touch;" >
  2.         <ul>
  3.             <li></li>
  4.             <li></li>
  5.             <li></li>
  6.         </ul>
  7.     </div>

 

Happy web programming!

Ripple Emulator for testing Mobile web apps

I have already blogged about different emulators available to test mobile web apps, and links for those –

Apple iPhone/iPad Setup

Android Emulator Setup

Windows Phone Emulator Setup

How it would be, if we have one tool to test our web app in all kinds of devices with different resolutions. Great, right! Ripple extension for

Google Chrome browser makes this possible. Installation is pretty easy and it’s the same process, how you install an Chrome extension.

Download – Ripple Emulator extension for Google Chrome [Make sure you access this link from Chrome browser, so that it will install automatically!]

Once, you are done with the installation, Ripple icon will be visible on the right top corner of the Chrome browser.

Ripple icon

Now, we are ready to test our web apps. Now type the URL in the browser, and click on Ripple icon. It will display Ripple Mission Control dialog.

Click on Enable button in that dialog.

Riple Mission Control

It will display bunch of options to test with different mobile application frameworks. Choose the right one for you. Since we are

testing mobile web application, will choose Mobile Web(default).

options

Now we are in Mobile mode!

mobile mode

We can test our web application. By default our web app will be displayed in a generic device. We change this and test in the appropriate

device. To do that, click on the Devices option in the left corner, and choose the appropriate device!

devices

You can also test the Orientation – Portrait / Landscape.

Few options available to simulate – Accelerometer, Geo location. These options will be handy when you are developing Hybrid

apps using Phone Gap / BlackBerry Web Works!

CAUTION: It’s always recommended to test your on physical device. Some times results may vary!

Thanks!