Intro: Trying Svelte Native for the First Time
Today we're gonna be looking at Svelte Native. My first time looking at it. You might have seen it before but this is gonna be the first time I'm trying it. Also at the end I'm gonna give away some swag. That's what's coming up right now. Hey everybody welcome back. If you're new here my name is Alex. Welcome, subscribe to the channel if you're not already for some tech tutorials, NativeScript and today we're doing Svelte Native which is based on NativeScript and it's a pretty impressive project from what I've seen so far. By the way at the end we're going to be doing a swag giveaway so make sure you stay till the end. Let's dig in to Svelte Native and by the way this has recently been added to the NativeScript CLI so if you haven't gotten the latest NativeScript CLI make sure you install that.
Creating a New NativeScript + Svelte Project
Let's take a look. I'm going to run the Native CLI, ns. The old command was tns by the way, still works, but we're going to use the new command ns create for creating a new project and I'm going to call this one svelt test. By the way it is Svelte, not Svelt. Svelt is actually an English word and it means slender and elegant. Very nice. Svelte. Here's the website for Svelte: svelte-native.technology. Very nice website. You can even see the influence of the NativeScript logo on this Svelte Native logo and you have your tutorial here, a full API, a REPL, and a blog. This is pretty amazing stuff that's been happening here in the Svelte land. Let's take a look at the API here so you have some documentation of the layouts, UI widgets, all kinds of things here, components and buttons and so on. We're going to be trying a couple of these things out right now. So back to the terminal I ran ns create svelt test. By the way that's going to create a brand new project called svelt test for me and because I didn't specify what framework I wanted to use it's asking me do you want to use Angular, React, Vue, Svelte, TypeScript or JavaScript? Quite a collection we got going on here now with NativeScript. I'm going to select Svelte, a fully community driven project. By the way if you're interested in me doing more Svelte tutorials like more deep dive than we're doing today—today is just kind of like getting a taste for it—and if you're interested in more let me know in the comments down below.
Exploring Project Files and Adding VS Code Support
So this takes about the same amount of time that it takes to create a new NativeScript project. It doesn't matter if it's developed or not. Let's go to that directory and open this up in VS Code so we can see the code for that. Alright so we have some Svelte related assets here like svelte.config. Now I don't know much about Svelte. In fact this is the first time I'm ever trying Svelte. I know what it is, I know what it does, but I've never actually been hands on with it in any project web or mobile. So this looks like a configuration file for it. Don't know what it does but it's probably important. Here is app and we have TypeScript support. That's really nice to see. TypeScript support comes out of the box with the template and so does Font Awesome. Font Awesome looks like it's configured right with this template which is nice. So we have app as the main component, very similar to the way Vue is set up. And here is an app.svelte so this is a Svelte component and I'm not getting any kind of IntelliSense or help from Visual Studio Code here because probably I need to install an extension that supports Svelte. So let's go over here to my extensions and let's find something Svelte related. Alright so Svelte for VS Code and this one has 43,000 spelled IntelliSense, 55,000 as well snippets, 30,000 snippets. It's about right so there's quite a few things here isn't there. Let's go with that first one. Svelte for VS Code, I'm going to install this one and hopefully—ah yes my .svelte file lit up. We've got a little Svelte icon there and we got syntax highlighting in that file. Thank you very much. I'm just gonna refresh my VS Code here to see if the problems with the yellow underlines will go away.
Project Structure, Running on iOS Simulator, and Dependencies
Nope they didn't. Not sure what that's all about. A form label must be associated with a control. I'm gonna let that slide for a bit. I don't think that's gonna interfere with me building anything. This resembles Vue NativeScript Vue quite a bit. We have our template up here minus the template tag. We have our script section which is very simple here. That's actually pretty crazy how simple it is and then we have our style section with some CSS. I'm going to run this so let's go back here and issue the command ns run ios. I'm going to run this on iOS simulator and see what happens. While that's happening let's take a look at the dependencies in package.json. So here this is a basic Svelte project and we have very few dependencies which I like—the fewer dependencies the better in my opinion. We're just depending on nativescript-core and theme, it's Svelte Native library which is not quite 1.0 yet, 0.94 but getting pretty close it looks pretty good. Then there's some dev dependencies. We have the NativeScript runtime. By the way if you're not sure what NativeScript core versus NativeScript runtime is I just made a video recently about that—the differences between the different parts of NativeScript and what makes up the framework and the whole ecosystem. Check that video out, I'll link to it down below. Then there's Svelte which is the main JavaScript library, hot loader, svelte pre-process. Notice all these are dev dependencies so they're not going to be bulking down your runtime by being dependencies that are deployed during runtime. All we have here is Svelte Native which is just that layer that connects Svelte with NativeScript which is probably not that big my guess. Alright so what do we got here? We have successfully synced the application. Let's take a look at that simulator. I'm gonna go ahead and restart this because it doesn't look like it automatically started up. Everything else in this project looks kind of similar to other NativeScript projects—we've got a webpack config, we have a NativeScript config here which is new as a NativeScript seven platforms folder, node_modules, hooks, app resources. Yeah so everything is very much similar to regular NativeScript projects. We just have Svelte components. What I want to do here is actually create a button and just have a tap handler and see how that works, maybe issue an alert or something like that. So we're going to work in this Svelte component here. Let's go to the docs.
Ah there it is. By the way it just deployed and there it is running on my iOS simulator and there's nothing really there except for a string. This formatted string which is part of this label. So let's change this message and see what happens here. The app restarts and there it is. Okay so that's good. Let's take a look at the docs to see how far we can get here. So I found the button and that's under the API section. I want to use the button so I'm going to copy this right here. Let's go over here I'm going to switch the label out for a button instead. Okay so a couple things I noticed right away here when I installed that Svelte VS Code extension it highlighted the Svelte file as a component, recognized it but also after I saved it the sections got switched around for me. I think that extension does this automatically for some reason. It used to be template on top then script and style. It got switched around where now script is on top. That's fine with me. What I did notice that's nice here is that after I define the button and the on:tap handler here you can see that on:buttonTap is underlined and it's not defined in our code. It makes sense it's not defined which I like that. So let's go ahead and create a function here. I don't know if I'm doing this right or not—I'm just going to create a function and see if that works. So yeah looks like it did work. I'm gonna trigger a global alert here and I'll say welcome to Svelte. There we go, welcome to Svelte. So let's see if that works with my button. I'm going to tap on this button here and I get an alert that says welcome to Svelte. So that's really easy. There's no need for setting up any functions here or objects or exporting anything. I just have a simple function in my script area—that's all. So let's take this just one step further. I'm gonna have a variable here let's call it counter set it to zero and I'm just gonna put it up here before the message. The message is gonna say counter is and then we'll do counter. Alright and we have a GridLayout here but I'm going to use a StackLayout instead. Let's change this to StackLayout. I'm not sure why these are camel cased right now instead of PascalCased. Typically I use PascalCase in my templates for NativeScript but these are camel cased and I'm going to leave it as such because I'm not quite sure yet what that's all about. Probably there's a reason for that but that's something I'll have to dig into later; let me know down below if you want me to do that. Alright so we're gonna have a StackLayout and I'm gonna have a Label with the text and the text will be for now let's say hello. A form label must be associated with a control so that's not quite what I'm doing here. I'm not doing a label here as in HTML—it's assuming that I'm using HTML but I'm actually using markup for NativeScript so that's not the correct message so I'm gonna safely ignore that. Let's save that my app will restart and there's our label that says hello. Great. So now what I'm gonna do is have that label bound to the message and let's see if I can just use this syntax right here text={message}. I'm just guessing here right now. I didn't actually look this up and it looks like it does not work that way. So let's find out how to do data binding for the text property. I'm going to go back to the documentation here and let's click on Label. Okay so there's text label. What if I wanted to data bind the label? All these are static text. Let's see how do we data bind that. Is there such a thing as data binding? Ah perhaps it's using squigglies or curly braces. So I'm gonna say text={message} and then use curly braces for my message property and let's see if that works. Ah counter is zero. Okay so on:buttonTap instead of alerting I wanna say counter++ let's see if that's reactive. So should be reactive so if I tap this button it should say one. It does not. There might be something else that I need to do in order to get that to reactively change in the UI. Okay so I found this example if I go to REPL up here this gives me an example with Svelte on how to do that. So we have on:tap which is that data binding syntax—that's kind of what we have here. But then let's take a look at on:tap increments to counter. Yes and then the message is different kind of syntax than what I have. It has this $: colon syntax not quite sure what that does yet but I'm going to copy it shamelessly. So let's go ahead and copy that paste it into my script area: let message and then message. Maybe this is some kind of private property I'm not sure exactly. So it says if counter is less than or equal to zero so I'm going to set the counter initially to 42 and it says 42 taps left at the top. I know it's really tiny but sorry about that. Let's go ahead and tap on that. 43, 44, 45 so it's incrementing the counter. It's working. I just need to decrement the counter to kind of match this pattern of the original demo and there we go. So that's actually working. So there's an introduction to Svelte Native—my first time trying it. You saw it right here folks. Again if you want to see more tutorials about Svelte, Svelte Native let me know down in the comments below. By the way if you want to see web Svelte let me know also.
Resources, Swag Giveaway, and Wrap-Up
Now it's time for a swag giveaway. So a little bit ago I have this video called debugging NativeScript apps on Android device. So here I show you how to actually hook up a real Android device and how to set it up for debugging and I actually took you through NativeScript code running on the device very cool video check it out. I got a comment from Valentine Emmanuel says hello Alexander Ziskin and all. I didn't know you can do at all. I wonder if YouTube recognizes that and just sends the message to everybody in the world. All seven billion people maybe. There used to be a website of NativeScript app developed and showcased. I can't find that site again. I wonder why. Do anyone have any information on that? So Valentine I think you might want to check out this site right here called plugins.nativescript.rocks/samples and you'll find many things here like plugins, you'll find templates these are the templates available you can use and samples so look through that there's different samples there that are available for you to look at. This will probably be integrated into the main NativeScript site once that gets a little refresh and hint hopefully soon but for now it's hosted here so check that out. Thanks for your comment Valentine, you're going to get some swag just get in touch with me. And if you want to win swag I'm gonna pick one comment from every video and if it's a good comment I'll send you some stuff. So talk to me down below and if you're not subscribed yet to the channel please do subscribe it helps me out quite a bit it doesn't cost you anything just hit on that subscribe button and hit the little notification bell next to it so that you never miss a video from me. Alright thanks for watching and I'll see you in the next one. You.
