<![CDATA[NativeScript Brasil]]>https://nativescriptbrasil.github.ioRSS for NodeFri, 14 Jul 2017 18:01:48 GMT60<![CDATA[O que é NativeScript e a comparação com Xamarin, Ionic e React]]>

Video introdutório sobre NativeScript e as principais diferenças entre Xamarin, Ionic e React.

]]>https://nativescriptbrasil.github.io/2017/07/14/O-que-e-Native-Script-e-a-comparacao-com-Xamarin-Ionic-e-React.htmlhttps://nativescriptbrasil.github.io/2017/07/14/O-que-e-Native-Script-e-a-comparacao-com-Xamarin-Ionic-e-React.htmlFri, 14 Jul 2017 00:00:00 GMT<![CDATA[Quão facil é criar um plugin para NativeScript]]>

É notório a crescente quantidade de plugins disponíveis para NativeScript desenvolvidos pela comunidade, e o motivo disso não é apenas a boa vontade e senso de contribuição por parte de quem desenvolve, e sim, inclusive, a facilidade que é desenvolver um plugin para NativeScript, principalmente depois da versão 3.0.

Neste artigo, irei demonstrar como desenvolvi o NativeScript Emoji, meu primeiro UI Plugin para NativeScript. Ao termino da leitura deste artigo, espero despertar em você o interesse em desenvolver também um plugin e contribuir para a comunidade de desenvolvedores NativeScript, quem ganha com isso somos nós mesmos.

Por onde começar?

Não vou entrar em detalhes sobre toda a estrutura necessaria para desenvolver um plugin para NativeScript pois isso não vai ser necessário para este artigo. Vou demonstrar o basico que você precisa saber para começar, mas caso prefira, a documentação completa você pode acessar clicando aqui.

A maneira mais facil de começar um plugin para NativeScript, é utilizando o NativeScript Plugin Seed, criado por NathanWalker. Esta biblioteca fará todo o trabalho árduo de criação da estrutura de um plugin NativeScript, e isso é realmente incrível. Veja como é facil:

  1. git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin

  2. cd myplugin

  3. npm run postclone

  4. npm run setup

Pronto, com apenas estas etapas você terá criado toda estrutura necessária para desenvolver, testar e publicar seu plugin, mas antes de por a mão na massa, vamos fazer uma breve introdução sobre o plugin que vamos desenvolver juntos neste artigo.

O plugin NativeScript Emoji

O objetivo deste plugin é entregar um elemento para a interface para exibir Emojis de forma amigavel. A minha ideia inicial era ter um elemento TextView onde ao definir o valor unicode ou hexadecimal do emoji na propriedade correspondente:

<Emoji:Emoji icon="128514"> exibir :😂

O plugin faria a conversão para Emoji, e aqui eu deixo um destaque novamente para a comunidade NativeScript no Slack (se você ainda não participa, faça sua inscrição agora clicando aqui), que me fizeram uma excelente sugestão de substituir a propriedade unicode por um valor amigavel e mais facil de lembrar, ficando então:

<Emoji:Emoji name="joy"> exibir :😂

Implementação para Android e iOS

Agora que já temos a definição do plugin e a estrutura criada, é hora de por a mão na massa. A primeira coisa que precisamos fazer é definir a implementação comum entre as plataformas, sabemos que iremos ter uma propriedade name que servirá tanto para Android como para iOS, esta definição é feita no arquivo common que foi gerado na primeira etapa deste artigo.

emoji.common.ts

import { View, Property } from "ui/core/view";

export class EmojiCommon extends View {
  name: string;
}

export const nameProperty = new Property<EmojiCommon, string>(
  {
    name: "name",
    defaultValue: ""
  });
nameProperty.register(EmojiCommon);

Como se trata de um plugin para interface, precisamos extender a classe View. Os atributos do elemento que iremos criar, definimos criando um novo objeto do tipo Property, a propriedade name definimos o nome do atributo e o valor padrão, como o próprio nome sugere, definimos na propriedade defaultValue. Se o valor deste atributo fosse diferente do tipo string, que não é o nosso caso, seria necessário definir o valor para a propriedade valueConverter.

A codificação dos emojis são distintas para cada plataforma, por tanto precisamos ter uma base de dados para armazenar esses valores para consultarmos durante a execução do plugin.

emoji.database.ts

export class EmojiDatabase {
    public static list(): Array<any> {
      return [
    {
        "name": "FACE WITH TEARS OF JOY",
        "unicode": "😂",
        "hexcode": "1F602",
        "codepoint": [
            128514
        ],
        "shortname": "joy"
    }];
}

Implementação para Android

Agora que ja temos os atributos do elemento que iremos criar, precisamos implementar o codigo responsável por gerar o elemento correspondente a cada plataforma. O NativeScript interpretará em tempo de execução o codigo específico para Android atravéz do seguinte arquivo.

emoji.android.ts

import { nameProperty, EmojiCommon } from "./emoji.common";
import { EmojiDatabase } from "./emoji.database";
import * as utils from "tns-core-modules/utils/utils";
declare var java: any;

global.moduleMerge(EmojiCommon, exports);

export class Emoji extends EmojiCommon {
  [nameProperty.getDefault](): string {
    return '';
  }
  [nameProperty.setNative](value: string) {
    let emoji = EmojiDatabase.list().find((el) => el.shortname === value).codepoint[0];
    this.nativeView.setText(new java.lang.String(java.lang.Character.toChars(emoji)));
  }

  private _android: android.widget.TextView;

  get android() {
    return this.nativeView;
  }

  public createNativeView() {
    this._android = new android.widget.TextView(utils.ad.getApplicationContext());
    return this._android;
  }
}

O primeiro passo é extender a classe common criada anteriormente. Por se tratar de um plugin para interface, é necessário implementarmos o método createNativeView, que fará com que o o NativeScript entenda que algum elemento tem de ser criado na View. No nosso caso criaremos um TextView.

E novamente aqui temos outra grande ajuda do framework, a equipe do NativeScript mapeou todas as propriedades e métodos nativos de cada plataforma e gerou as definições em TypeScript, o que nos da a possibilidade de navegar por todas estas definições nativas diretamente no editor.

Temos que definir também o que o plugin fará quando receber o atributo name, isso é definido implementando o método setNative, que no nosso caso irá consultar o nome do emoji na base de dados, e com base no codigo correspondente, definira o valor para o TextView criado anteriormente. O metodo getDefault é para casos em que nenhum valor seja definido.

Implementação para iOS

Podemos copiar a mesma implementação feita para o Android, e alterar somente as partes onde é criado e definido o valor para o elemento nativo, que no caso do iOS será o UILabel ficando da seguinte maneira.

emoji.ios.ts

import { nameProperty, EmojiCommon } from "./emoji.common";
import { EmojiDatabase } from "./emoji.database";

global.moduleMerge(EmojiCommon, exports);

export class Emoji extends EmojiCommon {
  [nameProperty.getDefault](): number {
    return 0;
  }
  [nameProperty.setNative](value: string) {
    let emoji = EmojiDatabase.list().find((el) => el.shortname === value).unicode;
    let nsString = NSString.stringWithString(emoji);
    this.nativeView.text = nsString;
  }

  private _ios: UILabel;

  get ios() {
    return this.nativeView;
  }

  public createNativeView() {
    this._ios = UILabel.alloc().init();
    return this._ios;
  }
}

Novamente aqui será possivel acessar a definição dos metodos nativos para iOS, no metodo createNativeView é criado um UILabel e no método setNative é definido o valor para o elemento criado.

Testando o plugin

Sim, terminamos a implementação do plugin e o que resta agora é apenas testarmos. Rapido não? Para testarmos precisamos adicionar o plugin ao projeto demo criado nas etapas iniciais deste artigo. Para isso, é necessário executar o comando:

npm run preparedemo

Adicionar a referencia do elemento no elemento Page do arquivo main-page.xml

xmlns:Emoji="nativescript-emoji"

e então adicionar o elemento no dentro do StackLayout

<Emoji:Emoji name="joy" />

Ficando da seguinte maneira.

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Emoji="nativescript-emoji" navigatingTo="navigatingTo" class="page">

    <Page.actionBar>
        <ActionBar title="NativeScript Emoji" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout orientation="horizontal">
        <Label text="I'm happy "> </Label>
        <Emoji:Emoji name="joy" />
        <Emoji:Emoji name="joy" />
        <Emoji:Emoji name="joy" />
    </StackLayout>
</Page>

Agora resta executar o projeto de demonstração nos emuladores de cada plataforma executando os seguintes comandos.

nmm run demo.ios
npm run demo.android

emojiprintscreen.png

Conclusão

Podemos ver como é facil e rapido desenvolver um plugin para NativeScript, destaco alguns pontos como a comunidade de desenvolvedores NativeScript que são bem participativos, a equipe da Telerik que a procura entregar a cada versão ferramentas que visão tornar nosso trabalho como desenvolvedor muito mais produtivo e lanço o convite para você desenvolvedor que está lendo este artigo. Você desenvolveu algo customizado em algum projeto? Tem alguma ideia sobre alguma ferramenta que possa ser util? Contribua conosco também.

]]>https://nativescriptbrasil.github.io/2017/05/22/Quao-Facil-e-criar-um-plugin-para-Native-Script.htmlhttps://nativescriptbrasil.github.io/2017/05/22/Quao-Facil-e-criar-um-plugin-para-Native-Script.htmlMon, 22 May 2017 00:00:00 GMT<![CDATA[Navegação com TabView]]>

Hoje vou mostrar um pouco como fazer uma navegação usando TabView. TabView é aquela navegação por abas que no iOS, por padrão, fica na parte inferior da view, enquanto no Android fica na parte superior.

tab view image.png

Aplicativos como o Twitter, Instagram e Facebook usam esse tipo de navegação. É bastante útil quando você quer uma navegação rápida e sempre visível.

A TabView é criada usando as tags <TabView></TabView>. Dentro dela vão os itens, ou seja, as abas. Veja nesse exemplo como é simples:

<TabView>
    <StackLayout *tabItem="{title: 'Aba A', iconSource: '~/icone_a.png'}">
        <Label text="Conteúdo Aba A" color="green"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Aba B', iconSource: '~/icone_b.png'}">
        <Label text="Conteúdo Aba B" color="green"></Label>
    </StackLayout>
</TabView>

O StackLayout foi só um exemplo, no lugar você pode usar qualquer um dos tipos de layouts do NativeScript. O importante é ele ter o atributo que fala que aquele conteúdo é um item do TabView, o tabItem. Esse atributo recebe como valor um objeto, sendo que ele pode ter um título (title) e uma imagem (iconSource) como propriedades. A imagem referente ao iconSource só é exibida no iOS, no Android só o texto fica visível.

Como podem ter percebido, a aba que vem selecionada por padrão, é sempre a primeira, o que não impede você mudar esse comportamento. Para fazer isso, é só usar o atributo selectedIndex, na tag <TabView>, especificando o index da aba que você quer que venha selecionada. Vale lembrar que o index começa no zero.

<TabView selectedIndex="1">
  ...
</TabView>

E se você quiser mudar a cor de seleção da aba? Não é nada complicado, usando o atributo selectedColor você consegue fazer isso.

<TabView selectedIndex="1" selectedColor="#00FF00">
  ...
</TabView>

Você pode querer executar uma ação quando o usuário seleciona uma das abas. Isso é feito usando o evento selectedIndexChanged, também na <TabView>.

<TabView selectedIndex="1" selectedColor="#00FF00" (selectedIndexChanged)="alterarAba($event)">
  ...
</TabView>

E no .ts:

public alterarAba(e: any) {
    console.log(e);
}

Para páginas (abas) com pouco conteúdo, esse código simples pode ser facilmente usado. O problema é quando o conteúdo das páginas começam a ficar grades, a ter listas, formulários etc. Nesses casos, usar o TabView desse jeito vai deixar o seu código muito difícil de dar manutenções. Vai chegar uma hora que você não vai mais entender o funcionamento das coisas. O ideal é deixar a página com a tabView o mais simples possível e separar as páginas que vão abrir em componentes. Sabendo que no Angular você define um seletor quando cria um componente, a sua TabView poderia ficar assim:

Arquivo aba-a.component.ts

@Component({
    selector: "aba-a",
    moduleId: module.id,
    templateUrl: "./aba-a.component.html",
})
export class AbaAComponent {}

Página com a tabView

<TabView>
    <StackLayout *tabItem="{title: 'Aba A'}">
        <aba-a></aba-a>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Aba B' }">
        <Label text="Conteúdo Aba B" color="green"></Label>
    </StackLayout>
</TabView>

Repare que eu posso tanto usar um conteúdo de compomente, como também posso usar o conteúdo direto na página, vai depender de como você quer organizar o seu código. Eu acho mais organizado deixar tudo em arquivos separados, mesmo quando o conteúdo é pequeno.

Por hoje é isso. O código é simples mas bastante útil.

]]>https://nativescriptbrasil.github.io/2017/05/01/navegacao-com-tabview.htmlhttps://nativescriptbrasil.github.io/2017/05/01/navegacao-com-tabview.htmlMon, 01 May 2017 00:00:00 GMT<![CDATA[Imersão NativeScript #2 - Criando um novo projeto NativeScript com Angular 2]]>

Fala pessoal, compartilho com vocês uma video aula parte do curso NativeScript com Angular 2 que estou gravando.

O curso completo contará com aproximadamente 20 aulas, em breve trarei mais informações. Deixe seu comentario com sugestão, duvidas e temas que você gostaria que fosse discutido nas aulas.

]]>https://nativescriptbrasil.github.io/2017/04/21/criando-novo-projeto-nativescript-com-angular-2.htmlhttps://nativescriptbrasil.github.io/2017/04/21/criando-novo-projeto-nativescript-com-angular-2.htmlFri, 21 Apr 2017 00:00:00 GMT<![CDATA[UI Layouts no NativeScript]]>

Se você está começando agora a mexer com NativeScript, é bom entender o que é possível fazer na parte visual, no UI do aplicativo.

Aproveitando, não deixe de ler o primeiro artigo de Imersão NativeScript que o Douglas está escrevendo.

O NativeScript possui 6 tipos de layouts predefinidos que vai ajudar a organizar o visual do seu aplicativo. Esses layouts, na verdade, são marcações inseridas no html dos componentes de um aplicativo, e também podem ser criados usando os módulos de cada um diretamente no componente (no arquivo js ou ts).

Aqui vou mostrar exemplos de escrita no HTML, que é mais comum.

StackLayout

Talvez esse seja o que layout que será mais usado. Ele faz o básico, que é colocar em pilha (stack) os elementos na view, ou seja, se você precisa mostrar elementos um embaixo do outro, como campos de formulário, esse é o layout que deverá ser utilizado.

Para quem vem do HTML e CSS, podemos dizer que é como deixar todos os elementos dentro do container com um display:block. É possível usar um atributo orientation para organizar os elementos na horizontal. Basta atribuir o valor do atributo para horizontal. Um exemplo:

<StackLayout>
    <Label text="Nome" />
    <TextField hint="Digite o nome" />
    <Label text="E-mail" />
    <TextField hint="Digite o e-mail" />
</StackLayout>

GridLayout

Define áreas em colunas e linhas, ou seja, na tag GridLayout você define columns e rows em que os elementos internos irão se posicionar. Em cada elemento, é adicionado um atributo col e/ou row para deixar o elemento no lugar certo.

<GridLayout columns="60, auto" rows="auto, *" >
    <Label text="Coluna 0 - Linha 0" col="0" />
    <Label text="Coluna 1 - Linha 0" col="1" />
    <Label text="Coluna 0 - Linha 1" col="0" row="1" />
    <Label text="Coluna 1 - Linha 1" col="1" row="1" />
</GridLayout>

WrapLayout

Esse layout posiciona os elementos internos em colunas ou linhas, dependendo da definição da propriedade orientation, que pode ser vertical ou horizontal, por padrão o valor é horizontal.

O WrapLayout lembra um pouco o StackLayout, posicionando elementos na horizontal ou vertical. A diferença é que o StackLayout não faz quebras de linhas ou colunas. O WrapLayout, quando tem a propriedade orientation como horizontal, quebra a linha quando o elemento não cabe mais na tela. Se a propriedade estiver com o valor vertical, ele cria colunas quando o elemento chega no final da tela.

<WrapLayout orientation="vertical">
    <Label text="Elemento 1" />
    <Label text="Elemento 2" />
    <Label text="Elemento 3" />
    <Label text="Elemento 4" />
    <Label text="Elemento 5" />
    <Label text="Elemento 6" />
    <Label text="Elemento 7" />
    <Label text="Elemento 8" />
    <Label text="Elemento 9" />
</WrapLayout>

DockLayout

Esse layout posiciona os elementos internos nas bordas do DockLayout. Para isso, cada elemento recebe um atributo dock, que pode ter os valores top, right, bottom e left. Você pode adicionar um elemento sem o atributo dock e ele ficará posicionado no espaço que sobrar no meio do layout.

Caso queira que o último elemento ocupe todo o espaço restante, existe a propriedade stretchLastChild para a tag DockLayout. Essa propriedade recebe um valor true/false. Se true, ele vai pegar o último elemento e esticar até ocupar o espaço vazio.

<DockLayout stretchLastChild="true">
    <Button dock="left" text="1" style="background-color: red; margin: 5;" />
    <Button dock="top" text="2" style="background-color: green; margin: 5;" />
    <Button dock="right" text="3" style="background-color: blue; margin: 5;" />
    <Button dock="bottom" text="4" style="background-color: yellow; margin: 5;" />
    <Button text="ocupa espaço" style="background-color: black; margin: 5;" />
</DockLayout>

AbsoluteLayout

Fazendo uma analogia com o CSS, é como fosse usado o position:absolute nos elementos internos. Bem simples, cada elemento interno recebe os atributos left e top.

<AbsoluteLayout>
    <Label text="Posição 0 left e 70 top" left="0" top="70" />
    <Label text="Posição 10 left e 100 top" left="10" top="100" />
</AbsoluteLayout>

FlexboxLayout

O layout FlexboxLayout merece um post para falar sobre ele. Basicamente, ele funciona como o CSS flexbox. A documentação no NativeScript deixar até como referência esse link, porque eles traduzem as propriedades do CSS para propriedades que funcionam em um código xml ou js do NativeScript.

A tag FlexboxLayout é como se fosse um div com display:flex. Então, nos elementos internos, você precisa definir os espaços, as colunas, o posicionamento, como se fosse no css.

Propriedades

Para finalizar, todas essas tags de layouts possuem algumas propriedades:

  • width

  • height

  • minWidth

  • minHeight

  • visibility

  • marginTop

  • marginRight

  • marginBottom

  • marginLeft

  • horizontalAlignment

  • verticalAlignment

]]>https://nativescriptbrasil.github.io/2017/03/19/ui-layouts-no-nativescript.htmlhttps://nativescriptbrasil.github.io/2017/03/19/ui-layouts-no-nativescript.htmlSun, 19 Mar 2017 00:00:00 GMT<![CDATA[Imersão NativeScript #1 - Instalando o NativeScript]]>

Este é o primeiro de uma série de artigos que irei lançar nas próximas semanas onde irei abordar a criação de um projeto em NativeScript com Angular 2 desde o inicio, desde a instalação, criação, melhores práticas e muito mais.

Instalando NativeScript

Windows

Se você estiver no Windows, você pode optar por utilizar o instalador oficial do NativeScript atravéz o seguinte link: https://docs.nativescript.org/start/ns-setup-installer

O instalador irá realizar toda a configuração do ambiente necessária para desenvolvimento com Android (já que para desenvolver para iOS você precisa de um Mac). Se preferir, você pode acessar o guia avançado de instalação para Windows clicando aqui.

Mac

  • Instale o Node:

brew install node

  • Instale o NativeScript:

npm install -g nativescript

  • Configurar o Android e iOS SDK

Agora precisamos configurar o ambiente para desenvolver para Android e iOS. Existe um script oficial da Telerik onde é realizada a instalação completa executando o seguinte comando:

ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"

O processo de instalação pode demorar alguns minutos, seja paciente. Se preferir, você pode consultar o manual de instalação completo para macOS clicando aqui.

Linux

  • Instale o node:

sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 libstdc++6:i386

se o comando anterior estourar o erro Unable to locate package lib32bz2-1.0, então use este comando:

sudo apt-get install lib32z1 lib32ncurses5 libbz2-1.0:i386 libstdc++6:i386

  • Instale o G++ compiler:

sudo apt-get install g++

  • Instale o JDK 8:

sudo apt-get install python-software-properties
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer

  • Configure o JAVA:

sudo update-alternatives --config java

  • Configure a variavel de ambiente JAVA_HOME

export JAVA_HOME=$(update-alternatives --query javac | sed -n -e 's/Best: *\(.*\)\/bin\/javac/\1/p')

  • Instale o Android SDK Acesse o link abaixo, navegue até a seção de downloads para linux e realize o download: https://developer.android.com/sdk/index.html#Other

  • Configure a variavel de ambiente ANDROID_HOME Após a instalação do Android SDK, execute o comando:

export ANDROID_HOME=Path to Android installation directory

  • Instale os pacotes necessarios para o ambiente de desenvolvimento Android:

sudo $ANDROID_HOME/tools/android update sdk --filter tools,platform-tools,android-23,build-tools-23.0.3,extra-android-m2repository,extra-google-m2repository,extra-android-support --all --no-ui

  • Instale o CLI do NativeScript

sudo npm install nativescript -g --unsafe-perm

Verificando o status da Instalação

Após a instalação do NativeScript, você terá acesso ao CLI (command line interface). Confira se tudo esta certo executando o seguinte comando:

tns doctor

o resultado deverá ser o seguinte:

λ tns doctor

┌──────────────┬─────────────────┬────────────────┬──────────────────┐
│ Component    │ Current version │ Latest version │ Information      │
│ nativescript │ 2.5.1           │ 2.5.2          │ Update available │
└──────────────┴─────────────────┴────────────────┴──────────────────┘

Próximos passos

Agora que você tem um ambiente configurado, você está apto a desenvolver em NativeScript utilizando JavaScript, TypeScript ou Angular 2. Na próximo artigo irei iniciar um projeto do zero em Angular 2 e iremos abordar diversos temas sobre o NativeScript.

]]>https://nativescriptbrasil.github.io/2017/03/14/instalando-nativescript.htmlhttps://nativescriptbrasil.github.io/2017/03/14/instalando-nativescript.htmlTue, 14 Mar 2017 00:00:00 GMT<![CDATA[10 motivos para optar por NativeScript]]>

Apesar de novo, o framework vem demonstrando sua força a cada atualização. Nesse artigo demonstro algumas motivos de porque escolhe-lo.

1: Open Source

Não poderia começar por outro ponto que não este. O NativeScript é totalmente open source, o repositório do projeto pode ser acessado atravéz o link https://github.com/NativeScript. O projeto possui uma comunidade muito ativa, por diversas vezes que precisei abrir uma issue, em poucas horas obtive respostas de membros da propria equipe do projeto, bem como demais usuários.

2: Mantido pela Telerik

telerik new logo.png

Esse foi um dos motivos que me levou a escolher o NativeScript quando estava estudando sobre frameworks para desenvolvimento de aplicativos móveis: Ser mantido pela Telerik. Telerik é uma empresa búlgara criada em 2002 e se destaca por desenvolver ferramentas poderosas para desenvolvedores, como Fiddler, Telerik Reporting, JustCode, Kendo UI, entre outros. Ferramentas estas que não são acessíveis para todos, pois possuem licenças caríssimas, entretanto para o NativeScript, eles adotaram uma maneira de monetizar o negócio diferente, a exemplo do que vem fazendo a Microsoft com seus produtos, a Telerik oferece o NativeScript totalmente gratuito, e caso você desejar, pode contar com um suporte técnico da empresa e ferramentas exclusivas como o NativeScript-UI (componentes extras para interfaces) adquirindo uma licença premium.

3: Web Skills: JavaScript e CSS

Screenshot 90.png

Ao iniciar um projeto em NativeScript você tem a opção de escolher 3 arquiteturas para o projeto: JavaScript, TypeScript ou Angular2. Além disso, você poderá contar com o CSS para a interface. Não são todas as propriedades do CSS que temos ao desenvolver para web, até por que não temos DOM para manipular já que são elementos puramente nativos, você pode acessar a lista completa clicando aqui. De modo geral, você irá reaproveitar todo seu conhecimento em desenvolvimento para web, ao desenvolver com NativeScript.

4: Multi-plataforma

REDMackie0613AndroidiOS v2.jpg

Um dos slogans do NativeScript é "write once, run everywhere" (escreva uma vez, rode em qualquer lugar). Com o NativeScript você terá um unico projeto escrito em JavaScript servindo diferentes plataformas (Android e iOS).

5: Componentes nativos

nativescript theme.png

As interfaces do NativeScript são escritas em XML, não temos HTML, não há DOM, o NativeScript entrega para você componentes realmente nativos, por conta disso o ganho em performance é elevado em comparação a outros frameworks

6: Sem compilação

cross platform app development telerik nativescript.png

O NativeScript não compila nenhum código. O código que você escreve em JavaScript é entregue integralmente no dispositivo. O NativeScript lhe da acesso integral a VM JavaScript do dispositivo (V8 no android e JavaScriptCore no iOS). Por conta disso, desenvolver em NativeScript se torna muito mais atrativo, pois você tem um ambiente mais fluido, sem pausas para recompilar, e também graças ao livesync que você pode utilizar enquanto está desenvolvendo, onde o aplicativo é atualizado automaticamente a cada mudança no código. Falarei mais sobre esse assunto em outra oportunidade.

7: Vasta opções de pacotes

npmcocoapodgradle.png

Você poderá utilizar a maioria dos pacotes NPM que você ja utiliza para desenvolver para web, também no NativeScript (desde que este não dependa de DOM). No momento em que escrevo esse artigo existem cerca de 466 pacotes exclusivos para NativeScript no repositório NPM. E não é só isso, caso você deseje, poderá utilizar também pacotes dos repositórios cocoapods e gradle, e reaproveitar pacotes nativos de cada plataforma, também no NativeScript. Isso é muito útil para quem ja desenvolve apps em JAVA ou Object-C e já tenha experiência com alguns pacotes em cada plataforma.

8: Depuração de Código

maxresdefault.jpg

O NativeScript possui extensões para o Visual Studio Code, Web Storm para debugar o código durante o desenvolvimento. E na ultima atualização (versão 2.5.0) foi entregue suporte para utilizar o Chrome Developer Tools para debugar também. Isso tornará o ambiente de desenvolvimento mais produtivo.

9: 100% de acesso as API’s nativas

native script by sebastian witalec 8 638.jpg?cb=1420811743

Esse sem sombra de dúvidas é o que faz com que o NativeScript se destaque perante os concorrentes. Tanto no ReactNative como no Xamarin por exemplo, você tem acesso limitado as API’s nativas, o que esses frameworks fazem é encapsular a API nativa, uma por uma, e te entregar o acesso atravéz o código o framework, como um atalho. No NativeScript isso não ocorre, você tem acesso integral a API do dispositivo, como uma ponte direta a engine. Você não precisa escrever JAVA ou Object-C, você tem acesso integral atravéz JavaScript. Outro ponto positivo em ter acesso direto a API do dispositivo, é em questão de atualizações. Se o Android lançar uma SDK nova por exemplo, você poderá utilizar sem maiores dificuldades, bastanto apenas atualizar sua suite de desenvolvimento, no caso do Xamarin ou ReactNative, você teria que esperar sair uma atualização do framework.

10: Atualizações frequentes, muita novidade

update frequently.jpg

Se você acompanhar o projeto no github verá que a equipe de desenvolvimento não para. É atualização atraz de atualização, a versão 2.5.0 mal foi entregue, recheada de recursos novos e melhorias, e a Telerik já soltou notícias de um major update para 3.0.

Destaques da última versão

O que vem por ai

Muito rumor ainda paira sobre a versão 3.0, mas a equipe Telerik já deu algumas dicas de que vem coisa grande por ai. Estão reestruturando a arquitetura do NativeScript para torna-lo ainda mais rapido, em alguns testes resultaram em um ganho de performance de até 400%, e não é só isso, estão ampliando o acesso as funcionalidades do Chrome Dev Tools, melhorias no minificador WebPack e um instalador novo para quem não se sentir confortavel em usar linha de comando.

Conclusão

O objetivo desse artigo foi fazer um panorama sobre o NativeScript e seus benefícios. A curva de aprendizado é baixíssima, visto que você reaproveitará grande parte do seu conhecimento em desenvolvimento para Web. Nas próximas semanas irei lançar conteúdos sobre o NativeScript e espero que possamos juntos enriquecer esse portal com material de qualidade para todos os níveis.

]]>https://nativescriptbrasil.github.io/2017/03/11/Por-que-escolher-Native-Script.htmlhttps://nativescriptbrasil.github.io/2017/03/11/Por-que-escolher-Native-Script.htmlSat, 11 Mar 2017 00:00:00 GMT<![CDATA[NativeScript Brasil]]>

Comunidade brasileira sobre NativeScript.

Grupo criado com o intuito de reunir artigos, materiais e projetos sobre NativeScript para a comunicade de desenvolvedores brasileiros.

Em breve novidades, acompanhe-nos nas redes sociais:

Facebook

Youtube

Github

]]>https://nativescriptbrasil.github.io/2017/03/10/Native-Script-Brasil.htmlhttps://nativescriptbrasil.github.io/2017/03/10/Native-Script-Brasil.htmlFri, 10 Mar 2017 00:00:00 GMT