PowerPoint Presentation

Developer Day 2016

Developer Day 2016

Todd AnglinBurke HollandChief Evangelist@ ProgressDirector of Developer Relations@ Progress

Logistics

Specials thanks to our sponsors!Agenda onlineLunch @ 12:30 PMClosing keynote @ 4:15Social Hour TONIGHTIn the LobbyMobileTea: Beats & Code6 to 9 PMFREE food & drinksIn the Ballroom

Past, Present & FutureIt's tense.KEYNOTE:

20132014201520162017Early prototypesCore engineeringPublic launchAdoption ramp-upMass adoption

Project Timeline

Past

Delivering on the overdue promise of hybrid.

Swift/Obj-CJava.NET

Hybrid "Promise"100% Web100% NativeHybridReachCode/Skill ReuseRichnessPremium experienceDevice APIsBest of both?

Quote source: http://julyrapid.com/hybrid-vs-native-mobile-app-decide-5-minutes/13

80% coded 20%remaining80% of dev timeHybrid Reality

Quote source: http://julyrapid.com/hybrid-vs-native-mobile-app-decide-5-minutes/

The first 80% of the code accounts for the first 80% of the dev time.

The remaining 20% of the code accounts for the other 80% of the dev time.

15

80% coded 20%remaining80% of dev time80% of dev time

Hybrid Reality

Quote source: http://julyrapid.com/hybrid-vs-native-mobile-app-decide-5-minutes/

The first 80% of the code accounts for the first 80% of the dev time.

The remaining 20% of the code accounts for the other 80% of the dev time.

16

Hybrid "Peak"

Hybrid "Promise"100% Web100% NativeHybridReachCode/Skill ReuseRichnessPremium experienceDevice APIsBest of both?

Compromises.

Looking for something better

Binary ChoiceNativeHybrid Best experience One platform at a time Fast to market Compromise on UX

Binary ChoiceNativeHybrid Fast to market Best experience

JavaScript-driven Native

Share codeReuse existing skills/teamsReuse existing librariesNative UI (no WebView!)Full access to device APIsImmediate access to new OS features

Fast to market Best experience

Guiding PrinciplesComfortable for the web developerTruly native UI and performanceMaximize code portability across platforms< />

The {N} difference

Demo available in the app storesRich, animated, no compromise native UI1

Measurable native UI performance(no jank)2

Maximum code and skill reusability3Video credit: Nathan Walker, {N} community member

NativeScript delivers on the promise of hybrid.

+366%Jan thru Aug

Active monthly CLI users doubled Aug to Dec 15Doubled again Jan to April 16Doubled again April to JulyOn track to double again by October

504% increase in active monthly users since January

Growing Adoption

Plugin Ecosystem

Reusable libraries

IDEs

Verified Plugins

Plugin Ecosystem

Top Ten Plugins (by npm downloads) 10) nativescript-paypal (3,852) Marcel Kloubert 9) nativescript-grid-view (4,006)Peter Staev 8) nativescript-floatingactionbutton (4,916)Brad Martin 7) nativescript-sqlite (5,108)Nathanael Anderson 6) nativescript-google-maps-sdk (5,266)Dan Prietti 5) nativescript-spotify (5,295)Nathan Walker and Brad Martin

4) nativescript-slides (5,436)Josh Sommer

3) nativescript-plugin-firebase (6,523)Eddy Verbruggen

2) nativescript-apiclient (8,066)Marcel Kloubert

1) nativescript-toolbox (10,772)Marcel Kloubert

Roadmap MilestonesJanFebMarAprMayJunJulAugSeptOctNovDec

1.61.72.02.12.22.32.4

PreviewTelerikPlatform

Perf

Perf

CSS AnimationsUI for {N}DataForm

Present

After that totally nastolgic look at where weve been, I want to take a few minutes to look at where we are now. All we really have is today, and as human beings, we tend to always live in either the past or the future. For the next few moments, were going to look at NativeScript right here. Right now. Like Jesus Jones. If you got that reference, you may be old.41

I want to talk about where we currently are with Angular.

First, why Angular? Why do we need it? What does it bring to NativeScript that anyone even needs.

42

This is from Jeff. I love this tweet, and i think it says a lot about the importance of Angular support in NativeScript. Far more than I ever could. I like this idea Todd. This is such a validating sentiment when you consider where we are right now.

43

Well, you have to know that NativeScript on its own does not offer a full application framework. We do have what we think is a pretty slick binding solution that we gleaned from years of experience with .NET platforms. Weve also got a full navigation pattern for moving between screens along with the quite ubiquitous commonJS modules.

But a lot of people need more than that. Not just because they want the functionality that Angular offers, because Angualr is way more than an application framework. Its also much bigger than just NativeScript apps.

Angular 2 is about thinking way beyond the web and way beyond mobile.

More on that coming in a moment44

The Angular 2 team sent me this email in February of 2015. Ive showed this email before specifically at our keynote at ng-conf.

At this time, NativeScript had not yet been released beta

Coincidentally, React Native had been announced in January

We already knew that we needed to provide an application framework and we didnt want to build another one.

We also build the very popular Kendo UI framework, and we were hearing a growing number of requests for Angular 2. Far and above anything else people request, Angular 2 integration was number one.

But you dont have to take my word for that.45

Angular is incredibly popular. It still trounces even the nearest competitors in terms of adoption.

According to Google Trends, Angular will likely be just as popular as jQuery by 2017

On StackOverflow, it is on page one of the most popular tags. For reference, React is on page six, right before visual Studio 2012

A lot of people will say, yeah but thats all Angular 1!

Yes, but consider this46

Unfortunately, Angular 2 has been in beta since May 2nd. Since then they have broken their own API 6 times, including a router re-write. Its been hard on everyone, especially us.

But it is now stable! Party time. Excellent.

47

const AppComponent = { template: ` Root Component `};

angular .module('app', []) .component('app', AppComponent);import {Component} from '@angular/core';

@Component({ selector: 'app', template: ` Root Component `})export class AppComponent {}

Angular 1.5

Angular 2

Angular 1.x has converged on 2. The API is now virtually identical.

The leap from 1.x to 2 is very short.

A lot of people are stuck on Angular 1. So what? A lot of people are stuck on a lot of older techologies. At least the Angualr team is making it more logical to move to

People will switch for performance48

Angular 2 Final

Unfortunately, Angular 2 has been in beta since May 2nd.

Since then they have broken their own API 6 times, including a complete router re-write.

Its been hard on everyone, especially us.

But it is now stable! Party time.

People will move to Angular 2 because they are already using Angular 1

The will move because moving from 1 to 2 is more of a hop tha a jump

They will move for performance

They will move, because of TypeScript.

49

Lets talk about TypeScript for a moment50

TypeScript is an integral part of what we do with NativeScript.NativeScripts itself is built with TypeScript where we use JavaScript cross-platform modules

Late bound languages are awesome for speed of development, but not awesome for tooling. Native app API surfaces are gargantuan.TypeScript allows us to provide both.

This example is from Nathan Walkers plugin seed

Microsoft has done a fantastic job with TypeScript

51

You already know that NativeScript is built on TypeScriptAnd you probably know that Angular 2 is built on TypeScriptDid you also know that Ember is built on TypeScript?What about Dojo? Remember Dojo?Anyone know this last one? This last one is Aurelia.

TypeScript is taking the developer community by storm. It is as integral to our success with NativeScript as JavaScript itself.

TypeScript is so important because while Javascript is awesome, we cant just ditch decades worth of hard learned programming experience for a language that was ushered out the door in 10 days.

TypeScript makes JavaScript accessible to the millions of static language developers out there who find it really hard to just chuck everything they know and just go nuts with JavaScript.

Lastly, the fact that Microsoft makes TypeScript means that the TypeScript integratoin in their editors is killer. And I mean editors like, Visual Studio Code.

Lets talk about VS Code.52

2 Million InstallsNow supports over 100 languagesOver 1000 extensions

While were talking about TypeScript, we have to mention Visual Studio Code53

The NativeScript VS Code Extension. Over 13K installs. OMG!54

We could not be happier with not just NativeScript, but our Angular integration and our choices to use TypeScript and build our tooling in Visual Studio code.

Now lets look at our more recent 2.3 release. 55

{N} 2.3

If you didnt already now, 2.3 dropped last week and its got some HUGE improvements in it. Starting with one that has been one of the most highly requested additions since day one.56

New Default Theme

Today we are announcing a new default theme for NativeScript apps.57

This theme is gorgeous, and all of this stying can be done with simple documented CSS properties. We modeled our theme very closely after Twitter bootstrap in terms of how our classes and utlity methods are put together and we love it.

In the example above you can see our default light theme. Android is on the right and iOS on the left. Notice that while both look very similar, Each platform retains the details that make it unique.

On Android we see the subtle shadows and material design influences.

On the right in iOS we see that true flat UI with items such as the easily recognizable iOS switch in its natural state

You can use this TODAY So how does this work? Lets look58

Native by design. Beautiful by default.docs.nativescript.org/ui/theme

Kendo UI for NativeScript{Preview}

Kendo UI is a world class UI framework for the web. Not just dropdowns and comboboxes. Serious apps.65

Preview coming at Angular Connect

BackgroundWorkers{Preview}

Lets talk about threads

68

Benefits Of A Single ThreadHigh performance access to 100% of native APIsMost app scenarios dont require multi-threaded architecture

The current model is single threaded This is some huge advantages for NativeScript Developers69

Aw, NativeScript Snap!

This is what happens on the web when your page becomes unresponsive and eventually crashesYou can get the same thing in NativeScript if you do some long running operation, like querying 1 million rows of data and then performing your own machine learning on them on the device. The UI will lock become unresponsive.70

// create new workervar myWorker = new Worker("worker.js");

// send messages to workermyWorker.postMessage("message will be sent to worker");

// receive messages from workermyWorker.onmessage = function (e) { result.textContent = e.data;}

Blocking UI

This is what happens on the web when your page becomes unresponsive and eventually crashesYou can get the same thing in NativeScript if you do some long running operation, like querying 1 million rows of data and then performing your own machine learning on them on the device. The UI will lock become unresponsive.72

Non-Blocking UI With Background Worker

Available now as a previewShipping later this year

Future2017 and Beyond

SuperchargedToolingReach MoreScreens

Great"Getting Started"

Great"Getting Started"Easy setup/installLower learning curveAmazing docs

Great"Getting Started"Easy setup/installLower learning curveAmazing docsOverhauledDocsComing very soon

Great"Getting Started"Easy setup/installLower learning curveAmazing docsInstallersWindowsMac

Great"Getting Started"Easy setup/installLower learning curveAmazing docsFlexbox Layouts

Coming in 2.4CSS

Great"Getting Started"Easy setup/installLower learning curveAmazing docsPolyfills

Canvas APINodeJS APIs

Great"Getting Started"Easy setup/installLower learning curveAmazing docsSecurityObfuscationEncryptionMDM Integrations

Reach More ScreensiOS/Android are just the startGoal: Support all platforms where you build apps

Reach More ScreensiOS/Android are just the startGoal: Support all platforms where you build appsWindows

Reach More ScreensiOS/Android are just the startGoal: Support all platforms where you build appsElectron

Supercharged ToolingReliable and RobustFamiliarEasy to use

Supercharged ToolingReliable and RobustFamiliarEasy to useAngular CLI & Webpack

Supercharged ToolingReliable and RobustFamiliarEasy to useAugury

Supercharged ToolingReliable and RobustFamiliarEasy to useChrome Developer Tools

ProfilerUI InspectorHTTP InspectorDebugger

Cloud Builds from CLI

Supercharged ToolingReliable and RobustFamiliarEasy to use

Make {N} yours:nativescript.org/ideas

Developer Day 2016

Specials thanks to our sponsors!

Agenda onlineLunch @ 12:30 PMClosing keynote @ 4:15Social Hour TONIGHTIn the LobbyMobileTea: Beats & Code6 to 9 PMFREE food & drinksIn the Ballroom