Category Archives: JavaScript

fluentReports gets an actual web site.

Hey,  I finally got a few spare minutes and spent those few minutes building a quick and simple web site for fluentReports.   However, I couldn't just do something totally "static" -- I had to do at least one page that was awesome.

The fluentReports web site now has a fully working demo page (with 3 of the sample reports pre-programmed in) that runs fully in your browser.    You can make any changes you want in the editor and it will attempt to run your changes and generate a new report if possible.

I had suspected the fluentReports would run fine in a browser; but I can now totally confirm that it is possible, with no modifications needed.   You just need to use browserify,

Check out the main site and let me know what you think...  http://fluentReports.com

Announcing NativeScript-WebSockets!

WooHoo, I have finally released it; http://github.com/NathanaelA/NativeScript-Websockets. I only have been discussing it for almost a month.   I had it working on Android almost a month ago; and then on iOS shortly afterwords.    However, doing documentation; making a easy to use consistent interface, building install routines.   And then fixing BUGS.  Ouch, tracing bugs in NativeScript, iOS and Android and in the two third party libraries I used, was not exactly fun.    But I am very happy with the state of the library now.  The library not only support Text messages; but fully supports binary messages also!

You should be able to do a tns plugin add nativescript-websockets to install it on both iOS and Android.   iOS as usual has a few items you have to do afterwords to the xcode project.  And hopefully by the time you read this post; Telerik will have released v1.2.2 of the iOS runtimes.  They have already tagged the v1.2.2 a couple days ago; so I assume they are running tests.   But until you have the v1.2.2 iOS runtimes you will need to use the workaround I put in as the first issue on the nativescript-websockets repo.

The NativeScript-WebSockets supports TWO interfaces; I'm particularly proud of this feature -- you can do var ws = new WebSocket(url, protocol); just like you would do on a browser and all the functions and events are present so this as far as I can tell fully emulates the web socket on your browser.     The second interface is much more advanced and allows re-connecting on a dead socket and timeout support.    See the documentation for more details on both interfaces.

I would like to thank Nathan Rajlich for his Java_WebSocket library which is what I used as the base of the Android version: https://github.com/TooTallNate/Java-WebSocket

And thank Robert Payne (of Zwopple) for his PocketSocket library which is what I used as the base on the iOS version: https://github.com/zwopple/PocketSocket

 

NativeScript v1.2.0 Built in LiveSync vs the NativeScript-LiveSync Plugin

Pros of Telerik's LiveSync:

  • Works from the NativeScript Command Line
  • No extra code added to your application!
  • Possibly works on Real IOS Devices (Untested on real device, but does not currently appear to work on a IOS Simulator)

Cons of Telerik's LiveSync:

  • Not really Live. It syncs the files; but then has to restart the application from scratch, no matter what file is changed.
  • Delays while it detects any changes and then deploys the changes.
  • Delays while it is re-launching Application.
  • Loss of all application state since it reloads the app on every change.
  • If you navigated three screens deep, and make a CSS file change; you will need to re-navigate to that screen again to see it.
  • Incredibly slow LiveSync startup time. (What in the world is it doing for about a minute?)
  • Can crash the LiveSync watcher code easily (don't change any files in the tns_modules!).
  • Does not apparently detect any new files...
  • Reset of the Application even if you change a file that isn't even being used.
  • Easy to crash your application as the JavaScript and XML are not checked before being sent to the application.

Con's of Master Technology's LiveSync:

  • Until Telerik accepts the patch; you have to use the included patched runtime. (Please vote up the issue!)
  • Added coded to your project.
  • Only works on the Android platform, no IOS support.

Pro's of Master Technology's LiveSync:

  • Live, You see the app change almost exactly when your editor saves the files.
  • New files are detected and synced instantly.
  • Application state is almost always fully maintained.
  • The screen you are working on only reloads ONLY if it is the code you just changed.
  • Built in ability to detect errors in XML and JS before pushing to device to eliminate crashing the app on the device.
  • Ability to only reload application on files that are singletons or other files that you would rather have the app reloaded for.
  • Ability to restart application by touching or creating a "restart.livesync" file.

 

The new LiveSync code has been updated to be a seemless installation on your Box.    It now includes the modified runtimes for v1.20 of the Android runtimes.     All you have to do to install it is: tns plugin add nativescript-livesync

 

 

NativeScript v1.20 Released

We all need to start upgrading,  Telerik has released v1.2.0 -- this is a important upgrade as it fixes several nasty bugs on IOS & Android!    It also adds a lot of cool new features.

1. To upgrade the command line: npm install nativescript -g

(On a mac or linux you might need a "sudo" in front)

2. To Upgrade the platforms: tns platform upgrade ios  or tns platform upgrade android

3. To upgrade the common modules; well that is still a pain.  I would advice you to follow the same instructions I had you follow in the v1.0.0 to v1.1.0 upgrade, however if you have manually added anything to your "tns_modules" (which I would not recommend you do, you will want to copy or re-install it in your new tns_modules)

cd ..
tns create testupgrade
rd /S /Q <strong>YOURAPP</strong>\app\tns_modules
move testupgrade\app\tns_modules <strong>yourapp</strong>\app
rd /S /Q testupgrade

 

First things first, NativeScript command line plugin code works a lot better.    You can now do:

tns plugin add android <somepluginname> and it works!

For those interested; my LiveSync plugin has already been updated for v1.2 with a slew of new features and a very simple install using the new tns plugin add android nativescript-livesync command.

Lots of new Features and here are some of the changes:

New Features

 

Fixed

fluentReport v1.0.0 - Released

It has been a couple years since the first version of fluentReports was released.   Over that time the engine has grown and some very complex bugs appeared that were difficult to fix.

I was very proud of the work at that point; but I have finally had the time to fix the complicated remaining issue in fluentReports and I am very proud to call this version 1.0.0.

Sizing issues with headers/footers and/or too long of text being printed are all squashed!   In addition it has a ton of new features like "link", always printing group headers on new pages; "fill" on prints and tons of other little goodies throughout the code base.     In addition the engine now is fully Asynchronous so you can use Async code in your header, footer or detail callbacks and not worry about the report being corrupt.    In addition it is smart enough that it can continue to be used like it was in Synchronous  mode.    No changes to your code.  I have attempted to maintain backwards compatibility as much as possible and only a couple minor breaking changes have occurred (which some of them can even be disabled, if you don't like the new default).   Please see the changelog file for the information on any breaking changes.

I have also created a commands.md file that you can view a outline of ALL the commands and what they do, and their parameters; this should fill in the documentation gap that I never had in place before.

 

 

NativeScript v1.1.0 - Released

NativeScript v1.1.0 was just released a couple days ago.    Here is what is new and how to get all the cool new features.

Some of the changes are:

  • Exposing Application events as Real Event [example]
  • Parent is now exposed in itemLoading event
  • Repeater Component Added [more]
  • TabView.selectedIndexChanged Event added
  • Hint property for TextView
  • NavigatingTo/From, NavigatedTo/From events added to Page component
  • Search now has Hint Color
  • Dozens of Bug Fixes
  • View and GestureObserver classes has breaking changes [more]

If you are currently running version 0.9.0 or v1.0.0 then here are the steps to upgrade you to the wonderful version 1.1.0

 

Upgrading the NativeScript Tools:

First thing to do is upgrade your TNS (or NativeScript) command so go to a command prompt (if on windows it will probably need to be an Administrator command prompt) or  bash/terminal prompt.

Type "tns --version" or "nativescript --version", if you already have version 1.1.0 then you can skip this step as you already have the latest nativescript tools.

Windows (from an Administrator prompt):

npm install -g nativescript

Linux/Macintosh:
sudo npm install -g nativescript

This will update you to the latest version of the command nativescript command line.  And you should type "tns --version" after to verify it has been upgraded to v1.1.0

Upgrading the Platforms:

Next thing you will need to upgrade is your "platforms", so navigate to the root level folder where your project is; and then if you are working on a Android project type:

tns platform update android

and/or (if you are working on a ios version on a Macintosh)
tns platform update ios

 

Upgrading the Common Library:

Unfortunately The next piece is a lot more tricky as it requires a lot more steps.   Hopefully this will be fixed in v1.2.0.    But right now it is a small bit of a pain.   The easiest method is to create a new project and then copy the tns_modules out of the new project into your existing project and then delete the dummy project.      So at a command line do the following (assuming your still in your main app project folder from the steps above).    Please remember to replace <yourapp> with whatever folder name your app is in.

Windows:

cd ..
tns create testupgrade
rd /S /Q <strong>&lt;yourapp&gt;</strong>\app\tns_modules
move testupgrade\app\tns_modules &lt;<strong>yourapp</strong>&gt;\app
rd /S /Q testupgrade

Linux/Macintosh:
cd ..
tns create testupgrade
rm -rf &lt;<strong>yourapp</strong>&gt;/app/tns_modules
mv testupgrade/app/tns_modules &lt;<strong>yourapp</strong>&gt;/app
rm -rf testupgrade

 

LiveSync Update:

Last piece, If you are using my awesomely cool LiveSync code; you have one more step you need to do; unfortunately Telerik has not yet accepting my patch into the android platform.   So  I have pulled the same 1.1.0 platform source code as they released then added my patch and again compiled it for your usage (if you wish to compile it yourself; the readme file in the LiveSync project explains how.)       The pre-compiled runtimes can be pulled from http://www.master-technology.com/tns-android-1.1.0.tgz

After downloading and moving this file into your main project app directory (i.e. where the watcher.js file lives); The steps are as follows (Oh you will need to make sure to copy your androidmanifest.xml file from the platform/android folder if you have made **any** changes to it that you want to keep as this will install a new copy):

Windows:

tns platform remove android
tns platform add android --frameworkPath=.\tns-android-1.1.0.tgz
cd app
npm install nativescript-livesync@latest --save
copy /y node_modules\nativescript-livesync\support\watcher.js ..

Macintosh/Linux:
tns platform remove android
tns platform add android --frameworkPath=./tns-android-1.1.0.tgz
cd app
npm install nativescript-livesync@latest --save
cp node_modules/nativescript-livesync/support/watcher.js ..

And you will be done.  LiveSync will continue to work and you will be fully on the 1.1.0 Release!

NativeScript - Real time development on Android


Photo (CCA): https://www.flickr.com/photos/sleepyjeanie/5738474150

Now if you haven't guessed recently I've really taken to NativeScript.   It is awesome tool set for development applications for your mobile phone.

However, one of its failings compared to some of the other tools is the speed of iteration.     On my machine; when I want to test a change;  I switch to a command prompt (or hit a hotkey) which then compiles the app and deploys it.     This whole process is between 20-30 seconds each time on my beefy machine.  If I made any code mistakes; then I watch it crash on the emulator, have to fix it and then wait another 20-30 seconds while it re-compiles & deploys it again.    Another, slow issue testing area is if the screen I'm changing is a little ways into the application then I have to re-navigate back to the screen and test my changes each time I redeploy the app.    So all in all, it is a slow iteration cycle.

Well, I decided to do something about it; and so if you watch my youtube video, Real Time NativeScript Development , you will see how simply including the "nativescript-updater" the screen/code updates on the emulator INSTANTLY.    And this works for any screen I'm on, no matter how far I have navigated into the program.

In addition the watcher utility will also run any changed JS or XML through a linter before transferring it to the Emulator.  This allows me to keep the majority of my stupidity from even getting to the device in the first case which will end up in a crashed callstack.

You can still intermix the normal NativeScript deploys for any reason we want.   This project has been released at http://www.github.com/nathanaela/nativescript-livesync/ and is completely trivial to include into your project.

I'm waiting on a pull request that I added in the Android-runtime (https://github.com/NativeScript/android-runtime/pull/92) -- until it is accepted; the neat magic only partially work.

NativeScript - Installation on Linux

For those just starting out on NativeScript here is what you need to get a fully running system on Linux Ubuntu 14.04 (64 bit).

The first step is to do a update and add i386 architecture to your box and then download all the compilers:

sudo dpkg --add-architecture i386
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install -y libncurses5:i386 libstdc++6:i386 zlib1g:i386 lib32z1 lib32ncurses5 lib32bz2-1.0 libstdc++6:i386

# Pull in all the Development stuff
sudo apt-get install -y mc linux-headers-generic build-essential g++ ant git openjdk-7-jdk p7zip p7zip-full

Next we need to download and build Node (This takes a while depending on the machine):
sudo wget -q --output-document=/usr/src/node-latest.tar.gz http://nodejs.org/dist/node-latest.tar.gz
pushd /usr/src
sudo tar zxvf node-latest.tar.gz &gt; /dev/null
sudo chown -R $USER:$USER node-v*
cd node-v*
./configure
make
sudo make install
popd

Next we need to download and install the android SDK:
  sudo wget -q --output-document=/usr/src/android-sdk.tgz  http://dl.google.com/android/android-sdk_r24.2-linux.tgz
  pushd /usr/local
  echo Extracting Android SDK...
  sudo tar zxvf /usr/src/android-sdk.tgz &gt; /dev/null
  sudo chown -R $USER:$USER /usr/local/android-sdk-linux
  popd

Next we are going to setup all the Paths so that some of the stuff we run later works properly:
  ANDROID_NDK_FILENAME=android-ndk-r10e
  export JAVA_HOME=/usr/lib/jvm/java-7-openjdk-amd64
  export ANT_HOME=/usr/local/ant
  export ANDROID_HOME=/usr/local/android-sdk-linux
  export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:/usr/local/$ANDROID_NDK_FILENAME
  echo 'export ANDROID_HOME=/usr/local/android-sdk-linux' &gt;&gt; ~/.bashrc
  echo 'export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:/usr/local/$ANDROID_NDK_FILENAME' &gt;&gt; ~/.bashrc
  echo "export JAVA_HOME=/usr/lib/jvm/java-7-openjdk-amd64" &gt;&gt; ~/.bashrc
  echo "export ANT_HOME=/usr/local/ant" &gt;&gt; ~/.bashrc

  if [[ -f ~/.profile ]]; then
    echo 'ANDROID_HOME=/usr/local/android-sdk-linux' &gt;&gt; ~/.profile
    echo 'PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:/usr/local/$ANDROID_NDK_FILENAME' &gt;&gt; ~/.profile
    echo "export JAVA_HOME=/usr/lib/jvm/java-7-openjdk-amd64" &gt;&gt; ~/.profile
    echo "export ANT_HOME=/usr/local/ant" &gt;&gt; ~/.profile
  fi

  if [[ -f ~/.bash_profile ]]; then
    echo 'export ANDROID_HOME=/usr/local/android-sdk-linux' &gt;&gt; ~/.bash_profile
    echo 'export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:/usr/local/$ANDROID_NDK_FILENAME' &gt;&gt; ~/.bash_profile
    echo "export JAVA_HOME=/usr/lib/jvm/java-7-openjdk-amd64" &gt;&gt; ~/.bash_profile
    echo "export ANT_HOME=/usr/local/ant" &gt;&gt; ~/.bash_profile
  fi

Now we need to install all the Android SDK's, and yes we are install 17, 21, and 22.   17&21 are required for different things.  22 is for the latest sdk.
android update sdk --no-ui --filter platform-tool,android-17,android-21,android-22,build-tools-22.0.1

(OPTIONAL) Now we need install the Android NDK -- This is only needed if you are planning to build actual android runtime and metadata tool.
  ANDROID_NDK_FILENAME=android-ndk-r10e
  sudo wget -q --output-document=/usr/src/$ANDROID_NDK_FILENAME.7z http://dl.google.com/android/ndk/$ANDROID_NDK_FILENAME-linux-x86_64.bin
  sudo chmod a+r /usr/src/$ANDROID_NDK_FILENAME.7z
  sudo mkdir /usr/local/$ANDROID_NDK_FILENAME
  sudo chmod 777 /usr/local/$ANDROID_NDK_FILENAME
  7z x /usr/src/$ANDROID_NDK_FILENAME.7z -o/usr/loca

Now we need to install Grunt, and the nativescript
  sudo npm install grunt -g --unsafe-perm
  sudo npm install grunt-cli -g --unsafe-perm
  sudo npm install nativescript -g --unsafe-perm

And finally we will clone and install each of the primary NativeScript Repo's
  mkdir ~/repos
  pushd ~/repos
  git clone https://github.com/NativeScript/NativeScript
  git clone https://github.com/NativeScript/android-runtime
  git clone https://github.com/NativeScript/nativescript-cli
  git clone https://github.com/NativeScript/android-metadata-generator

  cd NativeScript
  npm install
  cd ..

  cd android-runtime
  npm install
  cd ..

  cd nativescript-cli
  npm install
  cd ..

  cd android-metadata-generator
  npm install
  cd ..

  popd

You now have everything you need to build all the components of NativeScript.   In each of the repos; you can do a grunt to build that specific repo.

NativeScript -> The new Awesome way to build Android, & IOS applications

I've been developing applications for a wide variety of platforms (you name it, I've probably touched it) .   Over my long career in computer development and devops, this includes a lot of mobile apps.    I've done hybrid apps in Phonegap/Cordova.   I've done pure native apps on the Android; and I've done apps on a Nokia Maemo/Meego, I've even done apps on old Windows Mobile 6.   So I've had some experience with a lot of mobile platforms.

So, I now have this brand new application that I have decided to write; and of course the majority of my early beta adopters will be on IOS; but the majority of my customers I believe will be on Android.  Which means, I need cross platform from the beginning.      I then spent several weeks evaluating several newer & and re-evaluating several older cross platform systems to try and decide which one to use to tackle this project in.        After most my research was done, I had narrowed it down to pretty much React Native.    Unfortunately, React Native does not have any Android bindings yet.    So, I continue looking around and while looking at Telerik's offerings, I saw a link about this all new cross platform project called NativeScript.   Figured, might as well and so I installed what was the first public release v0.9 and ...  fell in love with it.

I LOVE that it is totally cross platform for both Dev and Deployment, it runs on Mac, Linux and Windows out of the box.   And It already supports deployment to both IOS and Android, with Windows Phone bindings coming some time in the future.  Being so new it is missing a lot of things that other platforms might already have; but overall it is surprisingly feature complete.

I LOVE that it has a common library and a common screen building language that works on all the platforms; BUT it has the ability to customize them several different ways for the platform your are targeting in the event you need to make customizations per-platform. Example:

<span class="blob-code-inner"><span class="pl-s">&lt;Page&gt;&lt;TextField ios:editable='False' android:editable='True' /&gt;&lt;/Page&gt;</span></span>

As you can see, I can put in a ios: or android: prefix and have customizations for values per platform.   I can also have a file.android.xml and/or file.ios.js to make specific versions of a screen or js file per platform (there are also other valid variations for screen size/dpi).

I LOVE that I am not having to create a THUNK layer anytime I want to talk to any Android or IOS api.   NativeScript allows me to call Java code (on Android) and X Code (on IOS) functions from inside JavaScript.  Example for Android: (Java Documentaton)

var path = '/tmp/test.data';
var javaFile = new java.io.File(path);
if (!javaFile.exists()) {
  console.log("File Exists");
} else {
  console.log("File Does Not exist");
}

Do you see what I did their -- I called a native android java constructor: new java.io.File(<passed in a Javascript variable>);

I don't need to create a custom function on the android side for each time I need to do something in Android native land.  Then compile that with either the SDK or NDK and then use some sort of thunking/message layer to call it.    I can now CALL any native Java code right from my JavaScript and use the Variables and Functions as is.    (Same applies to the IOS layer)

Now the really awesome news is the entire NativeScript stack is open source.   You can download any of the pieces from github and build, create, add issues, create pull requests on any of the pieces you need to build a NativeScript IOS or Android application.

1. Cross Platform Library - This is the common library so I can do things like  var fs = require('file-system'); if (fs.exists('blah'))...  -- this code has the common and has the device specific modules so it works for every platform.
2. Android-Runtime - This is the code that has the JavaScript v8 engine on the Android Platform
3. IOS-Runtime - This is the code that runs the JavaScript Core engine on the IOS platform.
4. Android-metadata-generator - this is what creates the JavaScript bindings to the native Android Java.
5. IOS-Metadata-Generator - this is what creates the JavaScript bindings to the native IOS platform Objective-C.
6. NativeScript Command Line Interface - This is what you use to build, deploy, test your application.

Now if all you are interested in building apps; you really don't have to worry about the above repos; you just need to follow the basic install instructions for your platform at nativescript.org.

If you use VMWare or VirtualBox  or Vagrant see my next post which I will link here shortly.

 

Announcing a v8-Natives v0.0.1

What are v8-natives, you might ask?    

Well, they are the mostly undocumented javascript commands that control the v8 engine in Google Chrome, Opera and Joyent Node.js.      Some of the commands are %CollectGarbage(), %GetV8Version(), %GetOptimizationStatus() which ties with my other favorite of %OptimizeFunctionOnNextCall()

 

What can I do with them?

You can tell the engine to Optimize a routine, un-optimize a routine, never optimize a routine, ask it about internal data structures of an variable/object, and one of the most important items is ask if a routine is optimizable.

 

Why is this important?

Well, the v8 engine has several compilers built in; the lowest compiler is just a full featured javascript interpreter -- it is fast; but compared to one of the actual compilers it is so slow that molasses moves faster.     Do you want to figure out which of your code can be promoted to the faster compilers?   Do you want to see what code is a bottleneck even though at a glance it actually looks good?

 

So, which of these routines optimizable?

function sum1(a,b) {
try {
var c=a+b;
} catch (err) {
return -1;
}
return (c);
}

function sum2(a,b) {
return sum.call(this, arguments);
}

function sum3(a,b) {  return  sum(arguments);
}

 

Look no further:

Available on isle 15, at the deep discount of totally free; we now have all the tools you need to answer the above questions.    A fully working support library that wraps over 20 of the internal v8 native commands in a simple to use library that will not crash your script no matter if you have the v8 native support turned on or off.  Can be left in your app and deployed; and finally   supports both Node and Browsers.

Simple things like "v8.helpers.testOptimization(sum1);"  would tell you right away if the sum1 can be optimized....   Or v8.collectGarbage() will do a full GC before you run some timings on a performance critical code...   Lots of things to help your inner-performance surface.

You can get it at your local npm repository:  npm install v8-natives or check out the github page @ https://github.com/Nathanaela/v8-Natives