 Okay, good afternoon everybody. My name is Chanik Hia. You can call me Hia. I'm from Jakarta, Indonesia. And today I'm going to talk about how fast and easy to build a mobile app using a native script. Anybody here has no native script? Anyone? Okay. NativeScript is an open source framework building a truly native framework using JavaScript. It's different. Maybe you guys know about the PONGAP, Cordova. That thing is using WebView. But NativeScript is still using JavaScript but they are setting the native module of each iOS and Android. So the native UI and performance will be almost the same. But yeah, it's better than WebView. Why we use native script other than WebView? It's using native UI and you can use maximum code and skill ratio with reusability because native script adapt in modular coding. And easy doing to native plugin and native things because all code is writing with JavaScript and the PONGAP is committed much bigger. And also it's supported by a major company called Telerik by Progress if you guys know. And if you want to try how the UI, how the user experience about native script, you can search in the iOS or Google Play with the key word example of native script. Like I'm talking about maximum code and skill reusability, all of these Angular, GS, CSS can use in native script or NPM except for the package that related to the DOM because the native script is not using DOM at all. So here is the choice if you guys accessing the website of native script native script.org you can choose what you guys prefer want to type coding with all JavaScript or TypeScript or combine with TypeScript and Angular, Angular 2. Here are the example of a native script module. You can see on top that JavaScript that use in native script access platform, Android and iOS. That's pretty much simpler than the native code objectif your Android. And of course because the native script doesn't use DOM, they prefer to use what a native Android and iOS use like XML. Not pure XML but still the syntax is almost the same. So when you guys write code like switch they will show based on the platform. So this is plugin that native script so far have been created. Okay, I'm enough for talking because I'm not good at talking so I'm here to demo about how to build a native script. If you guys already install native script in your machine, you can get clone I'm using TypeScript and Angular for this demo. Oops. So maybe I will introduce how how the native script works. Actually this is the command. I will try to create first before I go through my history. Maybe just hello since this is the live coding so I hope it will run well. So basically the DNS create hello world already have template that native script provide template hello world so you can just try directly without any changing any code. So first thing I will show you this one these are the folder that created by that command so I open to this subline so you can see there are bunch of already installed in here I'll start from FGS because this one is using pureGS so it will be with my paper story that using TypeScript so I'm going to show you how to run it and for the iOS of course you should have the certificate for building this app but for the Android no need for that this is the hello world sample of the native script okay then I will try to code along with you guys about simple registration app actually I already save it in my github so I will not code from the scratch I will run on device Android and iOS for first building if you guys after this one to try you can clone from this paper story actually I provide 3 branches to give you a demo first demo okay this is a simple app don't expect any good design because I'm not designer guy so here things that I will show I will show you guys so since the native script using modular approach I will separate 3 things so it's like I'm web developer and it is like code web application there is a router and then there is a module and then main.ts is a start coin of this application and in this branch I will provide 3 template for this application let's see this template for after login we see for the sign up it's almost the same but user behavior is quite different because Android and iOS is different and this login page as you can see they are using all XML syntax but in here why I using the html certificate because I'm combine this project using Angular 2 so in order to readability of this syntax using the html and then they control or component how to to handle the the function of each template I mean it's a action button is on here so this is for the sign up this is for signing and if this this router is related to this you guys see this router there is a login almost like web login register and homepage okay from here any question and I will move on to the next branch oh I will show you before that I will show you how easy to write how easy to build native script build mobile actually using native script because I already run on each device is life things to each of device let's see I changing to template of login I will do this if I save it but android and iOS will be fast so it's good experience for UX designer because no need to long for wait long for the render each time you make change and next check in first to branch I will show you how to connect this app this static app using Firebase for the database so I will run it again nothing change for the UI but it will connect to Firebase that I already created just you use the authentication mechanism from Firebase using email and password for this demo can I also use facebook I will show you the config of facebook and if you want to use it this is Firebase for this demo I disabled you can you can turn it on by this parameter google so it automatically can support that authentication okay let's see how this one you can see that this one just mean that the Firebase is connect and this one the user ID that created in Firebase this interface same thing what does it work in the background is it a native library or is it the JavaScript library actually it's controlled by but in the end they accessing the native module that provide each of the platform so it's like maybe you know Samarin using C web developer it's hard to using C so this is the alternative for web developer to building the mobile apps and then no for native script actually but you can since this is using Angular 2 you can set the logic that you built in the native script i mean for web app i will continue i will show you a little bit what the code i place it in here this one the package the plugin that responsible to Firebase this one that trigger the Firebase connection okay i will continue okay which one yeah, this one you mean this overview you just like building i don't need it okay thank you okay i will continue to 4th tree for the next implementation 2st tree here we are in 4th tree branch we run to 4th tree branch okay we are in 4th tree branch we run to iOS again we will show you how they connect with the database after the authentication i will be provide for the registration okay we can try to sign up this one is already populate because i uncomment the declaration here register component TS type script each of the sorry and also in you might know that there is one binding and two way binding in this case i using two way binding so i can demonstrate how easy by using this syntax so it automatically connect to this controller so what happen if i change this it will automatically change to this site and if i sign up i don't put it any loader but actually already running in background there you go automatically populate the database in database and of course you can also login and it will show the data that this user already register before so i think that's a sub demo maybe you guys an equation about it so like working on this in relation to the previous part that we've heard about this open event it's going to be a step up on that right? different so ya with not script you can write especially for web developer you can write all feature in gs but the result is same as as good as native apps both android and ios do you have access to all the native APIs of the platform? no currently not all but ya it's still going because native script is i think 2 years ago started and this year is version 1 so it's quite new and the competitor is from facebook react native maybe you guys know react native is using the same method as native script but what i personally don't like about react native that they are all in line in gs even for the style that's really i don't know native script the css is still same css as web with limitation actually not all the css and web can apply in the native script you should show some of the css what can you use what can you not use or there comes the properties that are extended maybe i will i will try to change the couple of minutes ya just like this one in the text field it's like regular css it can be applied in line and also in the css i mean the css but you can change it like something like this can you see it or not just now you had a css file it looks like some new modules in native script it's using the native script can you show me okay css native script this one call like the good thing is you know styling ya just using the name the application can differentiate between android and iss ya it can cover pretty much same but limited not all but like you can use animation plug in npm like animate css you can use it also in here so like maybe just like this demo i will show you to end this session sample this is the UI of this samples pretty good this sample actually using like animate css i can so you can move around the background like this one so pretty easy to use animation on the native app using it like animation or is it like a type script library this is using the npm because it's a pure JavaScript ya pure JavaScript do you actually have to put like assets from the web can you run everything natively including downloadable graphics and stuff from the web i don't think so because native is not running in DOM i think that not running in DOM can apply to native script okay when i use components like tabs they have a different behavior on iOS and Android i think it's the top and on iOS it can be bottom it can be floating so how would it work here when i have one app for both platforms to have to take care of that myself you know, depending on the platform build my own UI for the UI perspective i think there's no need for that because you can see here let's see this one maybe label and text field just using this this syntax and then the native script smart enough to provide but the style of course the style you can different by using the dot ios and dot android but in general it just say tab tab view or whatever i put my stuff in it and then when it compiles into two different apps it will be show different so any question how responsive is the output app when it's on the phone does it have lag issues frankly speaking i'm not i will build production yet but just playing around with it but from the community that i research it's pretty much same with the native app because yeah, it's different with web view because when you build and you publish it it purely even if you open it in Xcode they will show the native component not the GS okay, i see just like check native i think yes oh, for license this one for the android i'm using genemotion because the native it's not quite good for demo live scenes too slow so you can download it for professional usage free but for the iOS you need to buy a subscription license to develop it and using Mac of course yeah, that's okay i think that's all thank you