Building Mobile Apps with NS Basic/App Studio

Updated jeffcogswell 3 Tallied Votes 2K Views Share
NS Basic
URL Screenshot of http://www.n…
$99.95 single developer, $449.95 enterprise
Easy to use. Nice looking controls. App can run on many different devices, and bypasses marketplace.
Could use some more features such as AJAX and more data handling.
You can use this IDE's drag and drop interface to create Basic-powered applications that run in nearly any mobile device's web browser. It's easy to use, and you can choose between Basic and JavaScript.

UPDATE: see author's comments after article

When you develop for mobile devices these days, you pretty much have two paths you can take: You can use the OS manufacturer's SDK and develop native apps, or you can create an application that runs in the device's web browser.

Developing for the web browser is often an easier path for many reasons. First, you can bypass any restrictions put into place by the app's marketplace. You can just post a link to the site hosting the app. Then the app, which is written in HTML and JavaScript, will just run in the browser. If the device is an iPhone, for example, you just give the URL to your clients, and Apple never has to approve the app before it will run.

It's also easier because you can develop on nearly any desktop computer. If I want to develop an iPhone app, I don't need the SDK that runs on a Mac; instead, I can create the application right on my Windows desktop.

And finally, once I do develop the app, if I stick to web standards, it should (in theory) run on any modern mobile browser. (And many mobile browsers are incredibly advanced. For example, the iPhone browser supports a huge amount of HTML5, and did before most desktop browsers did. For at least a time, it was one of the most advanced browsers around.)

For me as a web developer, this is a much more enticing approach to developing an application. I do a huge amount of custom work for clients, and almost all of my work over the past decade has been browser-based. In the last two years, I've written almost no desktop applications. And it's always cool to grab an iPhone or Android, open up the browser, and try out the app, and see it working just fine.

But even though the apps work just fine, it's often clear they weren't exactly built for mobile. Too often I find myself looking at a tiny version of my full browser application, and it just isn't quite right. For devices like the iPad, that might work, but for the smaller devices, I still need a custom app. And since I've pretty much made the decision to do the mobile app in the mobile browser for the reasons I just described, I then embark on writing HTML and JavaScript for the mobile browser.

There are several approaches I can take, as there are many new libraries out there to help simplify the process of mobile browser development. jQuery now has a mobile version (although it doesn't bear much resemblance to the regular jQuery). Sencha has a mobile version as well, which does have a lot of similarities to its desktop browser sibling, ExtJS. But what else is there?

Along Comes NS Basic

There's a company in Toronto that you've probably heard of: NS Basic. They've been around nearly 20 years, and have been creating development tools centered around the Basic programming language, primarily for handheld devices. Their latest offering is an IDE called NS Basic/App Studio that lets you write Basic programs that run in the mobile browser.

Now if you're an experience web developer, what I just said will likely make you say, "Huh?" That's right, you write Basic programs and you're creating apps that run in the browser—even though the language the browser uses is JavaScript. The short answer is your Basic code is converted to JavaScript. (In the interest of completeness, I feel compelled to bring up VBScript, which is Microsoft's scripting language that runs in Internet Explorer. We're not talking about that here. The Basic code you write in NS Basic is indeed converted to actual JavaScript, thank goodness. If it converted it to Microsoft's VBScript, I'd give this product zero stars.)

Trying Out NS Basic/App Studio

Now I'm going to be up front about something: I really am not interested in writing a program in Basic. I use JavaScript day in and day out for my web development, and I'm perfectly comfortable in it, so it's going to be very hard for a product like NS Basic to woo me away. So in reviewing it, I'm taking a different approach: I'm being open-minded and trying to look at it from the perspective of somebody who doesn't know JavaScript, and would prefer to write in the Basic language.

And from that perspective, I'm pretty impressed. Using NS Basic/App Studio reminded me of the original Visual Basic IDE. Simply put, you can get a form that you can drop controls onto. You can attach event handler code to the controls. Then you can try it out in the browser on your desktop.

Here's an example screen shot:

You can see the form in the middle part. On the left is a small toolbox that has controls you can drop on your form. This sample form has a few such controls on it. Then on the right is the project explorer, along with a properties window.

To add code to a control such as a button that's on your form, you click on the control so it's selected, then go over to the Properties window. Scroll down and find the event you want to add code for, such as onclick. Then click the dropdown next to the name; the dropdown will be automatically filled in with a name for the event. Click the name, and the code window will open with the function there for you, like this:

Now you can type in your Basic code. For example, if you want a message box to appear in response to the button, you can use NS Basic's MSGBOX function. In the online help (which describes all the functions available), the names are all in uppercase, which feels a little weird to me. But Basic is not case sensitive, so you can type them in any case you want. In fact, the popup help in the IDE shows the casing different, as in the following screen shot:

Also, you can see how the popup help shows you the parameters for the MsgBox function. Here's the code I put in:

Function Button1_onmousedown()
MsgBox ("Hello World")
End Function

After saving the code, you can try it out in your desktop browser. Remember, at heart this is a browser app, after all, so it'll certainly run in your desktop browser. When you do, it'll look a little odd stretched out the full width of the browser. So I resized it a bit, and to my surprise, it really did look a lot like a typical mobile application, maybe similar to an iPhone app:

(Note that I had to refresh it after resizing the browser. Apparently some of the GUI elements are sized when the page loads based on the current browser size, and don't resize. But you're usually not resizing a mobile browser like you can with a desktop browser, so this shouldn't be a problem.)

When I click the button, I see the standard JavaScript alert box showing my message: Different Controls

It's clear when I use this that the controls are designed to have the look and feel of typical mobile controls. And they do look nice, and work well. In the sample app I've been showing you, there's a bar across the top for navigating through the pages in the app, and it looks like the bar you'll see in a typical iPhone app. And the controls, when possible, make use of the native controls. The combo box, for example, opens up the selection box you expect. On an Android device, it's a list of radio buttons; on the iPhone the same control in the same app will instead have the iPhone's standard rolling selector thingy. That's a nice touch, as you can target different devices without having to make a single change to your code.

Deploying Your App

Included with the IDE is a nice deployment feature, which makes it easy to upload your app to a web server. By default, the deployment is on a free test server the NS Basic company lets you use. But that's just for testing; the app gets deleted automatically after ten days. But it's handy because you can type the URL into your handheld device, and try the app out right away. I have to say, it was pretty cool to create the app, click Deploy, and then pick up my phone, put the URL in and see it right there on the phone.

When you're ready to deploy the app for real, you can open up a Deploy Options dialog box and enter in your own server information, including username and password, so that the app can be uploaded to your own server through the same Deploy menu item.

Under the Hood

Being a web developer who has done a ton of JavaScript work, I couldn't help but be intrigued by what goes on under the hood. For starters, it's interesting to see how your Basic code gets translated to JavaScript. The button handler above gets translated to JavaScript like this:

Button2.onclick = function() {
alert("Hello World");
return savethefunction_rvar; }

Wait. That doesn't look right. What is Button2? When I look through the HTML, I see that Button2 is the ID of the button:

Technically, that's not standard. While you're allowed to access an element directly as a JavaScript object through its ID, you're not really supposed to anymore, as that practice has been deprecated by all the major browsers. But it does still work in all the browsers, so I suppose it's not a huge problem. (For what it's worth, you're supposed to use document.getElementById('Button2').)

Also, you're technically not supposed to assign events directly as in element.onclick. Again, for portability, you're supposed to bind the events with the appropriate function call. Unfortunately, binding events differs between browsers (thanks to Microsoft), and that's one reason people usually prefer to use libraries such as jQuery, which take care of the cross-browser headaches. But again, the browsers today do still support this kind of syntax, so again, maybe it's okay. (Also for what it's worth, binding events in jQuery is easy, using jQuery('#Button2').click().)

Now that said, I am impressed that there's some nice-looking JavaScript that gets included that takes care of a lot of the work behind the scenes. There are three script lines in my sample that look like this:

The first of these provides JavaScript implementations of a whole bunch of different Basic functions (such as Mid, RTrim, various date functions, stuff like that).

The second is part of an open-source JavaScript library that provides scrolling within the browser. (Long story there about why it's needed; you can check it out at the iScroll site if you're curious.)

The third library contains JavaScript code for implementing the more complex controls. Nicely done.

What About JavaScript Directly

Before I finish this review, I want to bring up something that I was concerned about when I first started using the IDE: What if I want to write my own JavaScript code? Can I?

The answer is Yes. I was glad to see that they've included a way for you to write your own raw JavaScript code right inside your Basic code. This kind of reminds me of the way most C++ compilers let you embed Assembler code inside your .cpp files. To do so, you just type the word JavaScript, then on the lines the follow put your JavaScript code, finally wrapping it up with an End JavaScript line.

Of course, if you do this, you're doing so at your own risk, as you have to be careful you don't cause the existing JavaScript code to break. But it's nice that feature is there so you can do some advanced work.

Summing it Up

So far this is a decent product. The library seems to have a lot of features, including some things I didn't expect to see (such as integration with the SQLite databases available to some devices).

There are a few things I'd probably change, though, if I worked at NS Basic. For example, I wasn't thrilled that the MsgBox function uses the standard alert() function. I'd prefer to see NS Basic take that one to the next step and implement their own dialog box in JavaScript akin to jQuery's dialogs, or any of the other JavaScript library dialogs available.

It could also stand for some communications abilities, such as the ability to connect via Ajax to a website and pull back JSON data, for example. (However, you can do that if you want to use the JavaScript declaration and write your own JavaScript. But it would be cool if it were built into the NS Basic language.) My concern, though, is that because of limitations such as this, you'll soon hit a wall and not be able to proceed, unless you want to spend most of your time coding directly in JavaScript.

But for what it is, NS Basic/App Studio is good. It's very easy to get up and running quickly with an app. Although as a JavaScript developer, I personally don't feel compelled to switch to NS Basic, I can definitely see Basic programmers eating it up. And I imagine they'll come up with some nice apps. So if you're not into JavaScript but want to develop for mobile, I suggest at least giving it a try. There's a free demo version, so you have nothing to lose.

jeffcogswell 175 Light Poster Featured Poster

Update! Hey everyone, this is Jeff, the author of this article. The very friendly NS Basic people contacted me right after I wrote this article, and provided some clarification regarding the use of Basic. Turns out there's an option to choose all JavaScript, and I missed it. Click on the project in the name in the Project Explorer, and then in the Properties window there's an option called Language. Click JavaScript and now it's all in JavaScript. Very cool! Now that gives me a bit more incentive to try out NS Basic for my client development.

Also, here are a couple tutorials they pointed me towards that provide some communications examples like I mentioned in the article:

Dish2u 0 Newbie Poster

I've worked with both Titanium and PhoneGap, but there doesn't seem to be much code out there where I can run tests on my own variations. Does NS Basic have a decent enough following where I could try some mixing of various functions from other projects?


Douglas Green 0 Newbie Poster

Where can I find apps created with App Studio that are more complex than the examples supplied?

BryanChris 0 Newbie Poster

I am using javaworld and OpenPlug for developin APP, but the tool you share seem littile complex, might be it's due to the reason that I use to of using thap App for Mobile Development. Can I get its complete tutorial that Help me to learn that easily. It look user friendly but took some time to get full grip on it.

Timothy_1 0 Newbie Poster

NSBasic App Studio is utterly awful!

It has driven my team and I nearly insane with the countless bugs it contains. If you want to end up in an asylum, use NSBasic to develop your mobile device apps!

MikeC65 0 Newbie Poster

Tim is a troll. Apparently he searches the web for reviews and mentions of App Studio and puts the exact same post up each time. He's been doing this pretty much since the product hit the market. I don't know what his problem is, but since nobody else seems to be of his opinion (App Studio has its flaws, particularly the lousy documentation, but no, it doesn't contain "countless bugs") I wouldn't pay any attention to him.

Borisbelfer 0 Newbie Poster

Tim is right. I had many problems with previous version and repeatedly wrote to developer. He provided some work arounds but no fixes, to the point that I gave up and recommended Tech Basic to all my clients instead. Now the developer does not wish to give me refund or upgrade to new version "without many bugs" for free!

Batninja 0 Newbie Poster

If you know VB then NSBasic is really great! In 60 minutes I've got further than 6 months with other IDE's.

For 50 quid it's a bargain and very easy to use. I'm not clear what the problem is with the docs either. There's tons of sample code files and reference docs, even the manual for a complete 4 day programming course is included!

It's a joy to create a web app and have it running in moments on the mac iphone sim or live on my own phone. Brilliant!!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.