Northwind Traders had a lot of success with their app for managing employee data, so they wanted to move on to build a little social app that their employees could use to chat, and that’s what you’re seeing here.
Northwind went with NativeScript because it lets them use a truly native UI. You can see that this app uses native iOS form elements, a native activity indicator, and native transitions, all of which feel great.
NativeScript also gives Northwind the ability to reuse skills they already know, so if you look through the code that makes which makes up this app, which I have open here, and which is available on GitHub, you’ll see standards-based JavaScript, a really easy to read markup language for defining UI elements, and CSS to use for styling.
Now one of the things we’ve been working on is improving the NativeScript development experience. So let’s say I want to make some changes to this app, maybe I want to head back to the login and play with the look of this button. All I have to do is make some changes... I'll bump up the font size a bit... and use the tns run command, which I’ve wired up to a keyboard shortcut here in Sublime Text, to push out my changes.
#login {
font-size: 50;
}
That looks a little big so let's bump that down and go with a green background.
#login {
font-size: 30;
background-color: green;
}
The key here is NativeScript makes this sort of experimentation fast and easy, which is cool, because remember that this is a completely native app. This isn't an HTML button, it's a UIButton, which normally you'd have to head into XCode to configure.
Another improvement we’ve made is for logging, and you may have already noticed the logging statements down here. As of NativeScript 1.0 we automatically log console statements to the terminal.
So for instance I'm logging button clicks, so when I click on this register button my log updates accordingly.
We've also improved the logging when things go wrong. So let's say I try to call a method I always wished existed: the tj() method.
tj();
I'll push that out, and remember, this app is going to crash, so I want you to pay attention to the log down here. Notice that I get a nice easy-to-read stack trace, that clearly points out the error, and the line number it occurred on. This makes it easy for me to fix up the error and continue developing my app.
This debugging is nice but we can actually take things a step further. The {N} CLI has had a debug command for a little while now, but we’ve really polished up the functionality for 1.0.
You may know that NativeScript makes all native APIs available to JavaScript, but if not, you could, for instance, verify that by starting to type in the web inspector. Notice the nice intellisense I get here.
All the native platform APIs are available, but the NativeScript modules that abstract away this platform-specific code are too. For instance, I created this little flashlight NativeScript module, so I'm going to call it. This app is running on my iPhone, so I'll hold it up here—and get ready, I'll call on(), and off().
I want you to take a step back and think about how cool that is. I'm controlling my iOS device, on the fly, using JavaScript.
Now the flashlight example is a bit silly but you can also use it seriously test out your app. For instance Northwind has been working on an alternate theme for their social app. Some of their employees have some say, darker preferences. So to compare these two themes Northwind wrote a little method (turnToTheDarkSide) that converts their app from the light theme to a darker one.
[SHOW DEVICE SCREEN] So let's show this on the screen here and then BOOM [THEN CALL METHOD]
So, to summarize, between fast load times, console logging, and an integrated web inspector I think you’ll find that {N} 1.0 provides a fantastic development experience.
#3
All of this is cool, but as you undoubtedly noticed, I'm driving this demo from a Mac. And one of the important goals we've had for NativeScript from the beginning was to provide an amazing development experience regardless of what platform you develop on.
[ SHOW LAPTOP SCREEN ]
With that in mind the Telerik Platform has been completely updated to support NativeScript apps, including our backend services, our analytics, and Telerik AppBuilder, which lets you build NativeScript apps using our in-browser editor on any OS. And, if you’re on Windows, you can build alternatively build NativeScript apps using the AppBuilder Visual Studio Extension.
#4
What you see here is the exact same Northwind Social app, loaded in Visual Studio instead of Sublime Text. The AppBuilder Visual Studio extension provides a lot of functionality for {N} apps—everything from small niceties like icon and config file management, to really powerful tooling, like the ability to build iOS apps on Windows machines.
But my favorite feature is the integration with the {N} companion app, which you can download from the iOS app store and Google Play. We've made some pretty cool updates to the companion app, so I want to show you how it works. First of all to get my app from here, Visual Studio, to my devices, all I have to do is scan a QR code.
[ SHOW DEVICE SCREEN ]
THINK ABOUT HOW COOL THIS IS.
You're deploying native Android and iOS apps without having to worry about things like Android SDKs or Xcode. And remember these are truly native apps here. We saw the iOS app earlier, but notice for instance that the Android app, built from the same codebase, has this nice material design look to it.
[ SHOW LAPTOP SCREEN ]
But it gets even cooler. Let's say I want to change this app. I can use the the same AppBuilder LiveSync functionality Rob showed earlier. I'll start by making a small change, let's change that button's background color again. I have to sync these changes by clicking this option here.
[ SHOW DEVICE SCREEN ]
Then on my iOS device, I do a three-finger tap and hold, and on Android, I click this Sync button. Remember that we changed the button to yellow... and there we go.
IT'S THAT EASY TO CHANGE NATIVE APPS WITH NATIVESCRIPT FROM VISUAL STUDIO.
Next, let's say something goes wrong again. I'll try to call my same tj() method again. I'll make that change, sync the files, switch back to my devices.
[ SHOW DEVICE SCREEN ]
Remember that I created an error so these apps are going to crash, but pay attention to how they do. On iOS the app goes down, but check out this nice push notification I get that clearly shows the error. If I click on it I get the full stack trace I expect. On Android I get the stack trace right away.
[ SHOW LAPTOP SCREEN ]
So as you can see from these tooling improvements, NativeScript is really committed to providing not only a fantastic development experience, but a fantastic experience regardless of whether you use NativeScript through its CLI, or through the Telerik Platform.
And speaking of Screen Builder I have one final announcement to make. I talked earlier about how the Platform has been completely upgraded to support NativeScript, and that support extends to another tool we announced today: Screen Builder.
As of today, NativeScript for Screen Builder is available to all Telerik Platform subscribers, just create a new NativeScript app, and select the “Start with Screen Builder” option. We'd love it if you gave it a shot and let us know what you think. And with that, I'll turn things back over to Todd.