JavaScript frameworks with Enterprise Browser

I had an email come through recently pointing me to the results of a 2018 JavaScript developer survey, it’s always good to have a look through these kind of surveys but this coincided with a customer asking about support for “React or ReactNative” on our devices.  Since the React.js JavaScript library is conceptually different from the React Native mobile application development framework, I thought it made sense to write something about the use of JavaScript frameworks on Zebra devices.

JavaScript frameworks?

For the uninitiated, the number of development options for JavaScript developers can be daunting.  I have previously written a lot about mobile application development frameworks which use JavaScript (or typescript) such as Ionic, Cordova, PhoneGap, React Native or NativeScript – these application development frameworks allow you to use your JavaScript skills to produce applications which run on the device and some people subdivide these technologies further into frameworks which output applications that run within a webview and those which generate native controls for the platform.

JavaScript frameworks on the other hand have a far longer lineage (a good list of available JS frameworks is the Wikipedia article) and were originally designed to make JavaScript developers lives easier, at first by enhancing the language with features such as the ‘$’ query selector but nowadays frameworks tend to provide entire MVC implementations​.  To add to the confusion, some mobile application development frameworks will include support for a JavaScript framework within it, for example until recently Ionic used AngularJS exclusively for the core functionality of the framework.

I have previously written about how one of these JavaScript frameworks, Framework7 can be used with Enterprise Browser but Framework7 is not one of the more popular JavaScript frameworks.  According to the JavaScript developer survey I mentioned earlier the three most popular JavaScript frameworks today are: Angular, React.js and Vue.js.

These frameworks are designed to run within any web browser or web renderer so you can use Chrome on the desktop, Chrome on your Android device, FireFox, etc etc.

Zebra provides its own browser to allow you to create applications in JavaScript and is designed for the unique needs of the enterprise, Enterprise Browser (EB).  Enterprise Browser wraps a web rendering component which can render any web content, including JavaScript frameworks.

Running JavaScript frameworks within Enterprise Browser

I am not going to explain how to develop applications in each of these JavaScript frameworks but rather I would like to show that Enterprise Browser can run each of these frameworks well.  To do this I am going to use TodoMVC which is the same application written in every conceivable JavaScript framework and I would strongly recommend it as a way to compare the different frameworks and see the capabilities of each.

Install the prerequisites

You will need several prerequisites to run through these steps:

• NodeJS installed on your development machine
• Git installed on your development machine
• Python 2.7 installed on your development machine. This is just used to run a local web server so any alternative will suffice.
• Enterprise Browser downloaded and running on a Zebra device.  I am testing on Android

1. First clone the repository
   
   1. git clone https://github.com/tastejs/todomvc.git
2. Navigate to the examples directory
   
   1. cd todomvc/examples
3. From here, the steps will differ only slightly for each of the frameworks

Running Angular within Enterprise Browser

The TodoMVC implementation with Angular2 is available online and the Github code is also available.

1. Navigate to the Angular2 directory
   
   1. cd angular2
2. Install the prerequisites
   
   1. npm i
3. Run a server on localhost
   
   1. python -m SimpleHTTPServer 8001
4. Test everything is working ok by navigating to localhost on the specified port on your machine:
   
   1. (In Chrome or Firefox etc) localhost:8001
5. Test on a device, assuming your device is on the same network as your development machine you can use Chrome to navigate to <your machine ip>:8001
   
   1. Note: I have found the python server might sometimes be unreliable when switching to a device, if this happens then just stop and restart the server.
6. Run within Enterprise Browser after modifying the StartPage in config.xml to point to your development machine on the appropriate port:
   
   1. In my case:  <StartPage value="http://192.168.0.2:8001" name="Menu"/>
   2. Personally I find it easier to copy the Config.xml with adb, modify it on my machine and push it back to the device, then relaunching EB but there are a number of ways to achieve this
      
      1. adb pull /storage/sdcard0/Android/data/com.symbol.enterprisebrowser/Config.xml (your internal storage location may vary)
      2. Modify Config.xml
      3. adb push Config.xml /storage/sdcard0/Android/data/com.symbol.enterprisebrowser/Config.xml (your internal storage location may vary)

The Angular variant of the TodoMVC application running within Enterprise Browser.  Whilst visually similar to other framework implementations of the todo application by design, note the ‘created by’ credit changes from variant to variant.

Running React.js within Enterprise Browser

The TodoMVC implementation with React.js is available online and the Github code is also available.

1. Navigate to the React directory
   
   1. cd react
2. Run a server on localhost
   
   1. Python -m SimpleHTTPServer 8002
3. Test everything is working ok by navigating to localhost on the specified port on your machine:
   
   1. (In Chrome or Firefox etc) localhost:8002
4. Test on a device, assuming your device is on the same network as your development machine you can use Chrome to navigate to <your machine ip>:8002
   
   1. Note: I have found the python server might sometimes be unreliable when switching to a device, if this happens then just stop and restart the server.
5. Run with Enterprise Browser after modifying the StartPage in config.xml to point to your development machine on the appropriate port.
   
   1. In my case:  <StartPage value="http://192.168.0.2:8002" name="Menu"/>
   2. Personally I find it easier to copy the Config.xml with adb, modify it on my machine and push it back to the device, then relaunching EB but there are a number of ways to achieve this
      
      1. adb pull /storage/sdcard0/Android/data/com.symbol.enterprisebrowser/Config.xml (your internal storage location may vary)
      2. Modify Config.xml
      3. adb push Config.xml /storage/sdcard0/Android/data/com.symbol.enterprisebrowser/Config.xml (your internal storage location may vary)

The React.js variant of the TodoMVC application running within Enterprise Browser.  Whilst visually similar to other framework implementations of the todo application by design, note the ‘created by’ credit changes from variant to variant.

Running Vue.js within Enterprise Browser

The TodoMVC implementation with Vue.js is available online and the Github code is also available.

1. Navigate to the vue directory
   
   1. cd vue
2. Run a server on localhost
   
   1. Python -m SimpleHTTPServer 8003
3. Test everything is working ok by navigating to localhost on the specified port on your machine:
   
   1. (In Chrome or Firefox etc) localhost:8003
4. Test on a device, assuming your device is on the same network as your development machine you can use Chrome to navigate to <your machine ip>:8003
   
   1. Note: I have found the python server might sometimes be unreliable when switching to a device, if this happens then just stop and restart the server.
5. Run with Enterprise Browser after modifying the StartPage in config.xml to point to your development machine on the appropriate port.
   
   1. In my case:  <StartPage value="http://192.168.0.2:8003" name="Menu"/>
   2. Personally I find it easier to copy the Config.xml with adb, modify it on my machine and push it back to the device, then relaunching EB but there are a number of ways to achieve this
      
      1. adb pull /storage/sdcard0/Android/data/com.symbol.enterprisebrowser/Config.xml (your internal storage location may vary)
      2. Modify Config.xml
      3. adb push Config.xml /storage/sdcard0/Android/data/com.symbol.enterprisebrowser/Config.xml (your internal storage location may vary)

The Vue.js variant of the TodoMVC application running within Enterprise Browser.  Whilst visually similar to other framework implementations of the todo application by design, note the ‘created by’ credit changes from variant to variant.

Conclusion

Hopefully this post has given an overview of the differences between mobile application development frameworks which use JavaScript and what are considered ‘JavaScript frameworks’. All JavaScript frameworks should ‘just work’ in Enterprise Browser – Since EB is built on top of Android’s web rendering component it is standards compliant and the JavaScript frameworks themselves would have been written to ensure they work well on the Android WebView.

If you want to use JavaScript frameworks to write applications for Zebra devices then you can do so with any modern browser (I have tested on Android with both EB and Chrome).  If you run these applications within Enterprise Browser then you can also take advantage of the powerful EB API set as well as all the other great features of Enterprise Browser.