An updated getting started approach #50

tjvantoll · 2015-03-02T21:07:24Z

Here's my suggested approach for NativeScript's getting started guide. It's basically a merger of what the two of us had already done. In your article I was concerned that people would get confused about having to clone a random git repo and use the --copy-from option, so with this merger I introduced a new tutorial that can run alongside the “tap challenge” that the default template creates.

Please let me know let me know if you have any concerns. I have time to make any necessary changes to get this ready for the release.

tjvantoll · 2015-03-02T21:12:12Z

getting-started.md

+* [OS X](/quick-start/setup/ns-setup-os-x)
+* [Linux](/quick-start/setup/ns-setup-linux)
+
+> **Tip**: If you're looking for a NativeScript environment that removes the need to do this local setup, and/or if you're a Windows user that wants to use NativeScript to build iOS apps, try [using NativeScript in Telerik AppBuilder](http://telerik.com/nativescript).


It might make more sense to link to https://github.com/NativeScript/docs/blob/ikoevska/beta-release/quick-start/hello-world/hello-world-appbuilder.md here.

TIP/WARNING/IMPORTANT - apply across

-> agreed about the linking

Thanks. I updated both.

ikoevska · 2015-03-03T07:07:09Z

getting-started.md

@@ -0,0 +1,255 @@
+---
+nav-title: "Getting Started with NativeScript"


Hey TJ,

Please, pay attention to how these meta fields have been changed across the other docs.

ikoevska · 2015-03-03T07:08:35Z

getting-started.md

+position: 2
+---
+
+## Step 0: Install system requirements


This Step X approach is not aligned with the other "quick starts". In addition, I'd like to see a proper title in H1 (this is not handled automatically at this point), a proper introduction and a TOC below it.

Inner titles should be title-case.

ikoevska · 2015-03-03T07:10:05Z

getting-started.md

+
+## Step 0: Install system requirements
+
+The NativeScript CLI has a handful of system requirements necessary to build and run NativeScript apps. Most notably you need to have Xcode installed to build iOS apps, and you need to have an Android SDK installed to build Android apps. Review our setup documentation to make sure your development machine is all set:


"requirements necessary" sounds repetitive

The "we/our" approach to docs is not a good practice.

Good call on both

ikoevska · 2015-03-03T07:16:13Z

getting-started.md

+
+## Step 1: Install NativeScript
+
+Next you need to install the [NativeScript CLI](https://github.com/NativeScript/nativescript-cli) itself; the CLI runs on the Node.js platform and you can install it using npm:


This is precisely what we got as feedback - this going back and forth between setup and requirements and the quick start is frustrating to users.

The previous section says - look at the setup requirements. However, assuming I'm scanning through the article I will not get a clear idea that I need to go and set things up. I will just jump to the install part, I will try running npm install and nothing will happen. I will start wondering what this Node.js thing is, I might go back and check the previous section, lose my way installing stuff, get back here and again run npm install -g nativescript. I will wonder why do I have to install this several times?

ikoevska · 2015-03-03T07:16:41Z

getting-started.md

+Next you need to install the [NativeScript CLI](https://github.com/NativeScript/nativescript-cli) itself; the CLI runs on the Node.js platform and you can install it using npm:
+
+```
+$ npm install -g nativescript


Drop the $ - we've found that users tend to write in the prompt...

ikoevska · 2015-03-03T07:17:54Z

getting-started.md

+
+## Step 2: Create a project
+
+The installation of the NativeScript CLI creates two commands, `nativescript` and `tns`, that you use to create, build, and run your NativeScript projects. Running `tns create` (or `nativescript create`) creates a new project:


Drop the Oxford comma :) the Telerik style guide advises against it.

NOOOOOOOOOOOO. Sigh. Ok, you're right :)

ikoevska · 2015-03-03T07:18:50Z

getting-started.md

+```
+$ tns create hello-world
+```
+


Exploring the project structure is more relevant here.

My thought was that it is more important for people to see their project running before trying to figure out how it works. That's why I defer that discussion until things are working.

You're probably right. Sounds very reasonable when you put it that way =)

ikoevska · 2015-03-03T07:19:28Z

getting-started.md

+
+## Step 3: Add platforms
+
+NativeScript needs to know which platforms you intend to target to do some one-time initialization. You add each platform with the `tns platform add` command:


It's not really a one time thing and you need to explain what's happening here and why.

Yeah you're right. I'm going to steal some of your wording for this.

ikoevska · 2015-03-03T07:19:59Z

getting-started.md

+$ tns platform add android
+```
+
+> **Warning**: If you have not completed the NativeScript CLI system requirements you will receive an error when you try to run the `platform add` command.


You need to meet the requirements or complete a system configuration.

-> "when you run platform add" is sufficient.

ikoevska · 2015-03-03T07:20:57Z

getting-started.md

+
+## Step 4: Run your app
+
+After adding platform(s), you use the `tns run` command to run your app. For example, the following runs your app in the iOS emulator:


you can use

because you might want to do other stuff before that.

ikoevska · 2015-03-03T07:21:27Z

getting-started.md

+After adding platform(s), you use the `tns run` command to run your app. For example, the following runs your app in the iOS emulator:
+
+```
+$ npm install -g ios-sim-portable  # Needed to launch the iOS emulator from the CLI


nope, not needed. this is installed automatically when you run npm i -g nativescript

Ah that must be new. Awesome! Removed.

ikoevska · 2015-03-03T07:22:48Z

getting-started.md

+
+You can deploy your app to physical, USB-connected devices by omitting the `--emulator` flag. The following deploys your app to a USB-connected Android device:
+
+```


Why don't you combine the prompts?

We have a syntax that lets us show code block/prompt blocks in a tab view in the docs so that users can switch between the tabs for iOS and Android. It's neater that way.

Definitely neater. I didn't realize that was an option. Done.

ikoevska · 2015-03-03T07:23:43Z

getting-started.md

+$ tns run ios
+```
+
+> **Warning**: Deploying your app to iOS devices requires that a valid iOS certificate and provisioning profile pair are configured on your development machine. For more information see [iOS Code Signing - A Complete Walkthrough](http://seventhsoulmountain.blogspot.com/2013/09/ios-code-sign-in-complete-walkthrough.html).


Warnings should be used when something is potentially dangerous to your system. Same goes for cautions.

This is either important or does not require a tag since it is a note.

ikoevska · 2015-03-03T07:24:41Z

getting-started.md

+
+> **Warning**: Deploying your app to iOS devices requires that a valid iOS certificate and provisioning profile pair are configured on your development machine. For more information see [iOS Code Signing - A Complete Walkthrough](http://seventhsoulmountain.blogspot.com/2013/09/ios-code-sign-in-complete-walkthrough.html).
+
+By default `tns create` command scaffolds a small sample project; therefore if all went well you should see the following:


drop the "therefore if all went well" part. Also, please, avoid ending with a colon unless you intend to put a period after the screenshots.

ikoevska · 2015-03-03T07:24:58Z

getting-started.md

+
+![step3 android](img/getting-started/step3-android.png "step3 android")![step3 ios](img/getting-started/step3-ios.png "step3 ios")
+
+## Step 5: Peruse the sample app


I am not getting why this is here?

ikoevska · 2015-03-03T07:25:15Z

getting-started.md

+
+Here's a guide to what these files do:
+
+* The outer `app` directory is the **development space for your application**.


Actually the inner app is.

ikoevska · 2015-03-03T07:26:50Z

getting-started.md

+
+## Step 6: Build something awesome
+
+Now that you have an app running, let's switch up the NativeScript-generated sample to introduce some of NativeScript's features.


Take the time to explain what kind of app you'll be creating.

ikoevska · 2015-03-03T07:27:46Z

getting-started.md

+</Page>
+```
+
+Take note of a few things here. The first is that this uses two of [NativeScript's layout mechanisms](/layouts): `GridLayout` and `StackLayout`. The `GridLayout` provides an elegant way to divide an area of the screen into rows and columns. In this case you divide the screen into two rows: a `StackLayout` on top and a `ListView` on the bottom.


link needs to end in .md when pointing to a file -> this is something specific to this implementation of our docs infrastructure.

at the top/at the bottom

ikoevska · 2015-03-03T07:29:02Z

getting-started.md

+
+One last thing to note: did you notice the double curly brace syntax used in the XML (e.g. `text="{{ name }}"`)? This is used to configure NativeScript's data binding syntax. Let's see how it works.
+
+> **Note**: For more on what you can do with UIs in NativeScript, check out the [UI with XML](./ui-with-xml.md) article.


the Note tag is not necessary unless a warning or a tip or an important

ikoevska · 2015-03-03T07:29:45Z

getting-started.md

+
+> **Note**: For more on what you can do with UIs in NativeScript, check out the [UI with XML](./ui-with-xml.md) article.
+
+### Step 6.2: Implementing MVVM


Please, try and make step titles more action-oriented by using infinitives instead of gerunds.

ikoevska · 2015-03-03T07:30:44Z

getting-started.md

+
+### Step 6.2: Implementing MVVM
+
+The [MVVM](http://en.wikipedia.org/wiki/Model_View_ViewModel) pattern is the preferred approach for building NativeScript apps, as it provides an elegant approach to keeping your model data in sync with your UI. To see how it works, create a `list.js` file in the same directory as your existing `list.xml` file, and paste in the following code:


Who prefers that?

Also, this is a second "elegant" instance :) While I love this adjective, it does not really bring value and it is ambiguous.

ikoevska · 2015-03-03T07:31:33Z

getting-started.md

+
+The [MVVM](http://en.wikipedia.org/wiki/Model_View_ViewModel) pattern is the preferred approach for building NativeScript apps, as it provides an elegant approach to keeping your model data in sync with your UI. To see how it works, create a `list.js` file in the same directory as your existing `list.xml` file, and paste in the following code:
+
+```JavaScript


I'm wondering about having the typescript implementation in there as well.

Yeah I think it's a good idea. If I can't get it working I'll at least add a note that TypeScript is a first-class citizen in NS.

Ah wait, I already have the note. I'll see how good my TS skills are.

ikoevska · 2015-03-03T07:31:57Z

getting-started.md

+};
+```
+
+> **Tip**: Although this article doesn't include it, TypeScript is a first-class citizen in NativeScript. If you'd like to use TypeScript, create .ts files instead of .js files. NativeScript takes care of compiling them to JavaScript and using them automatically. You'll find sample sample TypeScript code provided throughout our documentation.


sample sample TypeScript code

ikoevska · 2015-03-03T07:32:24Z

getting-started.md

+
+> **Tip**: Although this article doesn't include it, TypeScript is a first-class citizen in NativeScript. If you'd like to use TypeScript, create .ts files instead of .js files. NativeScript takes care of compiling them to JavaScript and using them automatically. You'll find sample sample TypeScript code provided throughout our documentation.
+
+The first thing to notice here is the use of the `exports` keyword. NativeScript modules adhere to the [CommonJS](http://wiki.commonjs.org/wiki/CommonJS) spec, much like Node.js modules do. In this case the `exports` keyword is used to expose two functions to this page's view: `loaded` and `add`. The view's `<Page>` binds to the `loaded` function with `<Page loaded="loaded">`, and the view's `<Button>` bind to the `add` function with `<Button tap="add"></Button>`.


Again, do not consider that users know what Node.js is.

Across the docs the "loaded" event is typically "onPageLoad", "onPageLoaded" or "pageLoaded". Let's keep it consistent.

I switched up the wording related to Node.

Switched to onPageLoaded for consistency

ikoevska · 2015-03-03T07:34:58Z

getting-started.md

+
+The first thing to notice here is the use of the `exports` keyword. NativeScript modules adhere to the [CommonJS](http://wiki.commonjs.org/wiki/CommonJS) spec, much like Node.js modules do. In this case the `exports` keyword is used to expose two functions to this page's view: `loaded` and `add`. The view's `<Page>` binds to the `loaded` function with `<Page loaded="loaded">`, and the view's `<Button>` bind to the `add` function with `<Button tap="add"></Button>`.
+
+The other thing to note is the `page.bindingContent = pageData` assignment in the `loaded` function. This line sets the `pageData` `Observable` object as the *binding content* of this page. Simply put, this line means that properties of the `pageData` object are accessible in the UI components using the `{{ }}` syntax. For example, the page's `<ListView>` binds to the `pageData` object's `tasks` property using `<ListView items="{{ tasks }}">`.


Across the other docs it's binding context, typically bindingContext in the code. I'd keep it consistent with that.

I actually can't find an example of that. (See https://github.com/NativeScript/docs/search?p=1&q=bindingContext&utf8=%E2%9C%93) Most examples use page.bindingContext = obj, and personally I find pageData far more descriptive—unless I'm misunderstanding.

Ah, if you're referring to “binding content”, yeah that's a typo. Fixed.

ikoevska · 2015-03-03T07:37:01Z

getting-started.md

+
+The other thing to note is the `page.bindingContent = pageData` assignment in the `loaded` function. This line sets the `pageData` `Observable` object as the *binding content* of this page. Simply put, this line means that properties of the `pageData` object are accessible in the UI components using the `{{ }}` syntax. For example, the page's `<ListView>` binds to the `pageData` object's `tasks` property using `<ListView items="{{ tasks }}">`.
+
+The power of using an MVVM approach is best seen in the first line of the `add()` function:


Please, avoid passive voice. It is impersonal and not action-oriented. It rarely brings value and is advised against in all style guides.

A case where the usage of passive voice is acceptable is when you don't know who did/does the action so you can't write it in a matter that clearly identifies the subject.

Yeah this was sloppy of me. Upon rereading I don't really like this section and I'll reword. Thanks for flagging this.

ikoevska · 2015-03-03T07:37:23Z

getting-started.md

+tasks.push({ name: pageData.get("task") });
+```
+
+This line of code adds the user-provided task to the `tasks` array, but it doesn't only do that. Because the `tasks` array is setup as an `ObservableArray`, and because the `tasks` array is bound to the page's `<ListView>` (`<ListView items="{{ tasks }}">`), this call also adds the user-provided value to the list shown on the screen—automatically!


Is the exclamation mark necessary?

is set up.

setup is the noun, set up is the verb

Both changed. Thanks.

ikoevska · 2015-03-03T07:38:39Z

getting-started.md

+This line of code adds the user-provided task to the `tasks` array, but it doesn't only do that. Because the `tasks` array is setup as an `ObservableArray`, and because the `tasks` array is bound to the page's `<ListView>` (`<ListView items="{{ tasks }}">`), this call also adds the user-provided value to the list shown on the screen—automatically!
+
+
+This code is not only clean, it also helps to decouple your XML UI declaration from your JavaScript logic. In this case, your JavaScript doesn't need to know which UI components are bound to this data; it is just managing JavaScript objects and letting the XML take care of the rest. NativeScript fully embraces this separation-of-concerns-based approach to building apps. This approach extends to how you style your apps.


move the present continuous to present simple =)

done. good call

ikoevska · 2015-03-03T07:39:05Z

getting-started.md

+
+This code is not only clean, it also helps to decouple your XML UI declaration from your JavaScript logic. In this case, your JavaScript doesn't need to know which UI components are bound to this data; it is just managing JavaScript objects and letting the XML take care of the rest. NativeScript fully embraces this separation-of-concerns-based approach to building apps. This approach extends to how you style your apps.
+
+> **Note**: For more details on how NativeScript's data binding works, check out out our [Data Binding](bindings.md) documentation.


double out in here

ikoevska · 2015-03-03T07:39:29Z

getting-started.md

+
+### Step 6.3: Adding Styles
+
+Now that you have a small functioning app, let's look at how at you can change how your app looks. Styling in NativeScript is done with a [subset of the CSS syntax](./styling.md).


look at how ... how

ikoevska · 2015-03-03T07:40:02Z

getting-started.md

+
+For each page, the NativeScript runtime automatically loads and applies any CSS file that has the same name as the XML file for the page. Under the hood, the runtime parses the CSS, evaluates the selectors and applies the properties to the style object of the selected view.
+
+NativeScript also provides an `app.css` file that contains global CSS rules that apply to each page. To add a little spacing to your tasks app open up `app.css` and replace its contents with the following code:


ikoevska · 2015-03-03T07:40:19Z

getting-started.md

+}
+```
+
+> **Note**: For a more in-depth look at styling NativeScript apps, including a list of support CSS properties, check out our [styling](styling.md) article.


of supported

ikoevska · 2015-03-03T07:42:28Z

getting-started.md

+
+To switch your app to use the new tasks page, open `app/app.js` and replace its contents with the following code:
+
+```JavaScript


app.js looks like that in our latest template, so nothing to replace.

Are you using the updated template for this tutorial or are you using the packages available from NPM?

ikoevska · 2015-03-03T07:43:51Z

getting-started.md

+application.start();
+```
+
+With this change in place, make sure to save all your changed files, including the updated `app.js`, `app.css`, `tasks.js`, and `tasks.xml` files, and then rerun your app with the `tns run` command. The following runs the project on the iOS simulator:


You said a few lines above:

"To see how it works, create a list.js file in the same directory as your existing list.xml file, and paste in the following code:"

Please, keep the file names for the custom files consistent.

Good catch yet again. I switched to tasks last minute because I thought it was cleaner and apparently I missed some references.

ikoevska · 2015-03-03T07:44:33Z

getting-started.md

+
+Congratulations! You have just completed your first app with NativeScript. NativeScript does a whole lot, and you're just getting started. As a next step, try adding a delete button to your lists app, or tying the list to a backend using the NativeScript http module.
+
+Feel free to peruse our [API reference](ApiReference/) to see all of what NativeScript has to offer. You can also learn more about NativeScript features in the following articles:


Why peruse instead of explore, read or something else?

Explore is better. changed.

ikoevska · 2015-03-03T14:27:55Z

getting-started.md

+
+```JavaScript
+var application = require("application");
+application.mainModule = "app/main-page";


This is a shot in the dark after your reply by email -> shouldn't this be app/list or app/tasks if you are changing the default landing page? Right now, this would keep them at the counter page.

AH! Yep, good catch, I can't believe I missed this.

tjvantoll · 2015-03-03T20:16:29Z

Closing in favor of #52.

lock · 2019-08-27T17:32:28Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

An updated getting started approach

d5dd1ea

tjvantoll mentioned this pull request Mar 2, 2015

Getting started revisions #39

Closed

tjvantoll reviewed Mar 2, 2015
View changes

ikoevska reviewed Mar 3, 2015
View changes

getting-started.md Outdated

}

```

> **Note**: For a more in-depth look at styling NativeScript apps, including a list of support CSS properties, check out our [styling](styling.md) article.

This comment has been minimized.

Sign in to view

ikoevska Mar 3, 2015
Contributor

of supported

ikoevska reviewed Mar 3, 2015
View changes

tjvantoll added 2 commits Mar 3, 2015

Updating metadata

ff13e46

Various fixes per Iva's suggestions

e33dfcc

ikoevska reviewed Mar 3, 2015
View changes

tjvantoll added 3 commits Mar 3, 2015

Various updates

23ebebc

More small changes

c158129

Saving off changes

af92617

tjvantoll closed this Mar 3, 2015

lock bot locked and limited conversation to collaborators Aug 27, 2019

		@@ -0,0 +1,255 @@
		---
		nav-title: "Getting Started with NativeScript"


		## Step 0: Install system requirements

		The NativeScript CLI has a handful of system requirements necessary to build and run NativeScript apps. Most notably you need to have Xcode installed to build iOS apps, and you need to have an Android SDK installed to build Android apps. Review our setup documentation to make sure your development machine is all set:


		## Step 1: Install NativeScript

		Next you need to install the [NativeScript CLI](https://github.com/NativeScript/nativescript-cli) itself; the CLI runs on the Node.js platform and you can install it using npm:


		## Step 2: Create a project

		The installation of the NativeScript CLI creates two commands, `nativescript` and `tns`, that you use to create, build, and run your NativeScript projects. Running `tns create` (or `nativescript create`) creates a new project:


		## Step 3: Add platforms

		NativeScript needs to know which platforms you intend to target to do some one-time initialization. You add each platform with the `tns platform add` command:


		## Step 4: Run your app

		After adding platform(s), you use the `tns run` command to run your app. For example, the following runs your app in the iOS emulator:


		You can deploy your app to physical, USB-connected devices by omitting the `--emulator` flag. The following deploys your app to a USB-connected Android device:

		```


		> Warning: Deploying your app to iOS devices requires that a valid iOS certificate and provisioning profile pair are configured on your development machine. For more information see [iOS Code Signing - A Complete Walkthrough](http://seventhsoulmountain.blogspot.com/2013/09/ios-code-sign-in-complete-walkthrough.html).

		By default `tns create` command scaffolds a small sample project; therefore if all went well you should see the following:


		![step3 android](img/getting-started/step3-android.png "step3 android")![step3 ios](img/getting-started/step3-ios.png "step3 ios")

		## Step 5: Peruse the sample app


		Here's a guide to what these files do:

		* The outer `app` directory is the development space for your application.


		## Step 6: Build something awesome

		Now that you have an app running, let's switch up the NativeScript-generated sample to introduce some of NativeScript's features.


		One last thing to note: did you notice the double curly brace syntax used in the XML (e.g. `text="{{ name }}"`)? This is used to configure NativeScript's data binding syntax. Let's see how it works.

		> Note: For more on what you can do with UIs in NativeScript, check out the [UI with XML](./ui-with-xml.md) article.


		> Note: For more on what you can do with UIs in NativeScript, check out the [UI with XML](./ui-with-xml.md) article.

		### Step 6.2: Implementing MVVM


		### Step 6.2: Implementing MVVM

		The [MVVM](http://en.wikipedia.org/wiki/Model_View_ViewModel) pattern is the preferred approach for building NativeScript apps, as it provides an elegant approach to keeping your model data in sync with your UI. To see how it works, create a `list.js` file in the same directory as your existing `list.xml` file, and paste in the following code:


		The [MVVM](http://en.wikipedia.org/wiki/Model_View_ViewModel) pattern is the preferred approach for building NativeScript apps, as it provides an elegant approach to keeping your model data in sync with your UI. To see how it works, create a `list.js` file in the same directory as your existing `list.xml` file, and paste in the following code:

		```JavaScript


		> Tip: Although this article doesn't include it, TypeScript is a first-class citizen in NativeScript. If you'd like to use TypeScript, create .ts files instead of .js files. NativeScript takes care of compiling them to JavaScript and using them automatically. You'll find sample sample TypeScript code provided throughout our documentation.

		The first thing to notice here is the use of the `exports` keyword. NativeScript modules adhere to the [CommonJS](http://wiki.commonjs.org/wiki/CommonJS) spec, much like Node.js modules do. In this case the `exports` keyword is used to expose two functions to this page's view: `loaded` and `add`. The view's `<Page>` binds to the `loaded` function with `<Page loaded="loaded">`, and the view's `<Button>` bind to the `add` function with `<Button tap="add"></Button>`.


		The first thing to notice here is the use of the `exports` keyword. NativeScript modules adhere to the [CommonJS](http://wiki.commonjs.org/wiki/CommonJS) spec, much like Node.js modules do. In this case the `exports` keyword is used to expose two functions to this page's view: `loaded` and `add`. The view's `<Page>` binds to the `loaded` function with `<Page loaded="loaded">`, and the view's `<Button>` bind to the `add` function with `<Button tap="add"></Button>`.

		The other thing to note is the `page.bindingContent = pageData` assignment in the `loaded` function. This line sets the `pageData` `Observable` object as the binding content of this page. Simply put, this line means that properties of the `pageData` object are accessible in the UI components using the `{{ }}` syntax. For example, the page's `<ListView>` binds to the `pageData` object's `tasks` property using `<ListView items="{{ tasks }}">`.


		The other thing to note is the `page.bindingContent = pageData` assignment in the `loaded` function. This line sets the `pageData` `Observable` object as the binding content of this page. Simply put, this line means that properties of the `pageData` object are accessible in the UI components using the `{{ }}` syntax. For example, the page's `<ListView>` binds to the `pageData` object's `tasks` property using `<ListView items="{{ tasks }}">`.

		The power of using an MVVM approach is best seen in the first line of the `add()` function:

		This line of code adds the user-provided task to the `tasks` array, but it doesn't only do that. Because the `tasks` array is setup as an `ObservableArray`, and because the `tasks` array is bound to the page's `<ListView>` (`<ListView items="{{ tasks }}">`), this call also adds the user-provided value to the list shown on the screen—automatically!


		This code is not only clean, it also helps to decouple your XML UI declaration from your JavaScript logic. In this case, your JavaScript doesn't need to know which UI components are bound to this data; it is just managing JavaScript objects and letting the XML take care of the rest. NativeScript fully embraces this separation-of-concerns-based approach to building apps. This approach extends to how you style your apps.


		This code is not only clean, it also helps to decouple your XML UI declaration from your JavaScript logic. In this case, your JavaScript doesn't need to know which UI components are bound to this data; it is just managing JavaScript objects and letting the XML take care of the rest. NativeScript fully embraces this separation-of-concerns-based approach to building apps. This approach extends to how you style your apps.

		> Note: For more details on how NativeScript's data binding works, check out out our [Data Binding](bindings.md) documentation.

NativeScript / docs

Sponsor NativeScript/docs

An updated getting started approach #50

An updated getting started approach #50

Conversation

tjvantoll commented Mar 2, 2015

This comment has been minimized.

tjvantoll Mar 2, 2015 Author Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

tjvantoll Mar 3, 2015 Author Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

tjvantoll Mar 3, 2015 Author Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

tjvantoll Mar 3, 2015 Author Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

tjvantoll Mar 3, 2015 Author Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

tjvantoll Mar 3, 2015 Author Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

tjvantoll Mar 3, 2015 Author Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

tjvantoll Mar 3, 2015 Author Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

tjvantoll Mar 3, 2015 Author Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

tjvantoll Mar 3, 2015 Author Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

tjvantoll Mar 3, 2015 Author Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

tjvantoll Mar 3, 2015 Author Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

This comment has been minimized.

ikoevska Mar 3, 2015 Contributor

tjvantoll Mar 2, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor

ikoevska Mar 3, 2015
Contributor

tjvantoll Mar 3, 2015
Author Contributor


		### Step 6.3: Adding Styles

		Now that you have a small functioning app, let's look at how at you can change how your app looks. Styling in NativeScript is done with a [subset of the CSS syntax](./styling.md).


		For each page, the NativeScript runtime automatically loads and applies any CSS file that has the same name as the XML file for the page. Under the hood, the runtime parses the CSS, evaluates the selectors and applies the properties to the style object of the selected view.

		NativeScript also provides an `app.css` file that contains global CSS rules that apply to each page. To add a little spacing to your tasks app open up `app.css` and replace its contents with the following code:


		To switch your app to use the new tasks page, open `app/app.js` and replace its contents with the following code:

		```JavaScript


		Congratulations! You have just completed your first app with NativeScript. NativeScript does a whole lot, and you're just getting started. As a next step, try adding a delete button to your lists app, or tying the list to a backend using the NativeScript http module.

		Feel free to peruse our [API reference](ApiReference/) to see all of what NativeScript has to offer. You can also learn more about NativeScript features in the following articles: