INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO MARANHÃO

PRÓ-REITORIA DE PESQUISA, PÓS-GRADUAÇÃO E INOVAÇÃO TECNOLÓGICA

DEPARTAMENTO DE PESQUISA E PÓS-GRADUAÇÃO

PEDRO ÍTALO ARAGÃO BRITO

NATIVESCRIPT
FRAMEWORK DE CÓDIGO ABERTO PARA CONSTRUÇÃO DE
APLICATIVOS MÓVEIS NATIVOS

SÃO LUÍS - MA
2018
 PEDRO ÍTALO ARAGÃO BRITO

NATIVESCRIPT
FRAMEWORK DE CÓDIGO ABERTO PARA CONSTRUÇÃO DE
APLICATIVOS MÓVEIS NATIVOS

RELATÓRIO DE PESQUISA

Documentação apresentada ao Curso de

Sistemas de Informação do Instituto
Federal de Educação, Ciência e Tecnologia
do Maranhão - IFMA, para obtenção de 60
horas de pesquisa.

Orientador: Prof. Dr. João Carlos Pinheiro

SÃO LUÍS - MA
2018
 SUMÁRIO

1 INTRODUÇÃO 3
1.1 OBJETIVO GERAL 3
1.2 OBJETIVOS ESPECÍFICOS 3
1.3 METODOLOGIA 3

2 RESULTADOS 4
2.2 PRINCIPAIS CARACTERÍSTICAS DO NATIVESCRIPT 5
2.3 DESVANTAGENS NO USO DO NATIVESCRIPT 5
2.4 INSTALAÇÃO 5
2.4.1 Passo 1: Instalação do Node.js e npm 6
2.4.2 Passo 2: Instalação do NativeScript CLI 6
2.4.3 Passo 3: Instalação dos requisitos do Android 6
2.5 DESENVOLVENDO UM APP ANDROID 7
2.6 COMPARATIVO ENTRE NATIVESCRIPT E FRAMEWORKS HÍBRIDOS 7
2.7 COMPARATIVO ENTRE NATIVESCRIPT E REACT NATIVE 8

3 DISCUSSÃO 10

REFERÊNCIAS 11
 3

1 INTRODUÇÃO
Anos atrás para desenvolver aplicativos móveis para IOS e Android era
necessário ter uma equipe de desenvolvedores para cada SO. Isso aumentava os
custos de produção e obrigava o programador a se especializar em um único SO. Com
o avanço de algumas tecnologias foi possível desenvolver ferramentas para
desenvolvimento de app móveis a partir de uma única fonte de código.
O NativeScript surgiu recentemente como mais uma ferramenta para
desenvolvimento multiplataforma de apps. Vários problemas enfrentados na utilização
de outras ferramentas foram solucionados com o NativeScript. Por isso, ele se tornou
um ótima opção para o desenvolvimento de apps. Contudo, ainda é possível encontrar
diferenças que afetam a execução da aplicação quando comparados aos apps criados
com ferramentas nativas da distribuição correspondente.

1.1 OBJETIVO GERAL

Desenvolver um documento explicativo sobre o framework NativeScript.

1.2 OBJETIVOS ESPECÍFICOS

 Demonstrar a instalação e uso da ferramenta.
 Apresentar as principais características e funcionalidades do framework.
 Comparar o NativeScript com outras tecnologias.

1.3 METODOLOGIA
A metodologia adotada neste trabalho envolveu pesquisa bibliográfica, por
meio da revisão de literatura abordando várias fontes como: artigos, livros, trabalhos
acadêmicos e páginas Web. Isso permitiu compreender o uso, características e
funcionalidades do framework NativeScritp.
 4

2 RESULTADOS
Um aplicativo móvel nativo é um aplicativo que é executado nativamente no
dispositivo com elementos de interface do usuário verdadeiramente nativos. Além
disso, tem acesso total a todas as APIs disponíveis em cada plataforma em que é
executado.

O NativeScript é um framework de código aberto para desenvolver aplicativos

nativos para Android e IOS com o uso da mesma base de código em JavaScript
(Angular 2, TypeScript e Vue). Isso reduz os ciclos de desenvolvimento e testes, além
de diminuir os custos de desenvolvimento e manutenção dos apps implantados. A
ferramenta foi criada pela Telerik, empresa búlgara que desenvolve ferramentas para
desenvolvimento de aplicativos desktop, móveis e web. Caso haja a necessidade, a
empresa fornece suporte a desenvolvedores, porém o serviço não é gratuito.

Figura 1 - Arquitetura do NativeScript

O funcionamento do NativeScript não é complexo. O código da aplicação

interage com os módulo do NativeScript para construir os componentes específicos de
cada SO, em seguida, é usada a máquina virtual JavaScript para compilar aplicação
para o SO correspondente do dispositivo. No Android a VM usada é o V8 e no IOS a
VM utilizada é o JavaScriptCore. A Figura 1 ilustra a arquitetura do NativeScript.
 5

2.2 PRINCIPAIS CARACTERÍSTICAS DO NATIVESCRIPT

 Desempenho nativo: UI nativa em cada plataforma, sem a necessidade do uso
de WebViews. O código é escrito uma única vez e o NativeScript adapta a
interface do usuário aos dispositivos e telas específicas.
 Extensível: fornece a possibilidade do uso de plugins por meio do gerenciador
de pacotes npm.
 Fácil de aprender: utiliza as mesmas tecnologias para construção de páginas
web: JavaScript.
 Cross-Plataform: a partir de uma única base de código, o usuário desenvolve
aplicativos móveis nativos para Android e IOS.
 Open Source: o framework é 100% gratuito e seu código é aberto.
 Uso da API nativa: fornece acesso total a API nativa do dispositivo
correspondente.

2.3 DESVANTAGENS NO USO DO NATIVESCRIPT

➔ Relativamente novo: JavaScript como estrutura nativa é algo relativamente

novo, portanto, a comunidade ainda está construindo recursos e estendendo a
documentação.
➔ Curva de aprendizado mais longa: embora os frameworks híbridos permitam o
uso de HTML, o NativeScript força o usuário a usar mais conceitos de
aplicativos nativos, como elementos de interface do usuário nativos.
➔ Tamanho do app: o tamanho do app construído com NativeScript é muito maior
se comparado com outras ferramentas. Isso se deve a máquina virtual que
precisa estar no pacote.

2.4 INSTALAÇÃO
Para iniciar a construção de aplicativos móveis com NativeScript a interface de
linha de comando do framework precisa estar instalado e uma IDE ou editor de texto
da preferência do desenvolvedor poderá ser utilizada. Para concluir a instalação do
framework são necessários apenas 03 passos.
 6

2.4.1 Passo 1: Instalação do Node.js e npm

Primeiro é necessário instalar o Node.js. O NativeScript foi construído sobre o
Node.js, por isso ele precisa estar instalado na máquina. Antes, é possível verificar se
há alguma versão instalada através do comando node --version. Para instalar no
ambiente Linux é usado o seguinte comando: apt-get install nodejs. No ambiente
Windows basta fazer o download no site oficial do Node.js e realizar a instalação.
Além do Node.js, no Linux é preciso instalar o npm, gerenciador de repositório do
Node.js, através do comando: curl http://npmjs.org/install.sh | sudo sh. No ambiente
Windows o npm é instalado automaticamente com o Node.js.

2.4.2 Passo 2: Instalação do NativeScript CLI

Para instalar o NativeScript CLI basta usar o seguinte comando: npm install -g
nativescript. Após a conclusão será possível usar o comando tns (abreviação de Telerik
Native Script) e verificar se a instalação foi bem sucedida.

2.4.3 Passo 3: Instalação dos requisitos do Android

Linux:
Instalar as bibliotecas de tempo de execução:
 x64: sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 libstdc++6:i386
Instalar o compilador G ++:
 sudo apt-get install g++
Instalar 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
Configurar a variável de ambiente do sistema JAVA_HOME
 export JAVA_HOME=$(update-alternatives --query javac | sed -n -e 's/Best: *\
(.*\)\/bin\/javac/\1/p')
Instalar o Android SDK
 Baixar o SDK através do site oficial: https://developer.android.com/studio/
 7

2.5 DESENVOLVENDO UM APP ANDROID

Para criar um aplicativo básico com o nome HelloWorld utilizando Angular
basta executar o comando: tns create HelloWorld --ng. Todo o conjunto de arquivos e
diretórios será criado automaticamente.
Para executar o aplicativo recém criado, é preciso ter instalado na máquina um
emulador para IOS ou Android. Em seguida executar o comando: tns run android ou
tns run ios. Qualquer alteração feita no código refletirá automaticamente no emulador
através do livesync.

2.6 COMPARATIVO ENTRE NATIVESCRIPT E FRAMEWORKS

HÍBRIDOS
O uso das tecnologias nativas para construção dos apps móveis é bastante
complexo, para facilitar este processo foram desenvolvidos alguns frameworks
híbridos. Entre estes, os mais famosos são: PhoneGap e Ionic.

Figura 2 - Funcionamento do NativeScript comparado a frameworks híbridos.

O NativeScript é executado diretamente no sistema operacional do dispositivo

móvel, ou seja, não utiliza nenhuma ferramenta externa para tal, fornecendo todos os
recursos nativos do SO. Os frameworks híbridos, ao contrário, utilizam a tecnologia
 8

webview, componente do SO semelhante a um browser, para executar o aplicativo.

Isso limita o uso de recursos do sistema e ferramentas para desenvolver apps móveis,
uma vez que exibe uma página HTML através de um browser próprio. Desta forma, os
frameworks híbridos são indicados apenas para o desenvolvimento de aplicativos
móveis que não possuem grande dependência de recursos do dispositivo. A Figura 2,
demonstra a diferença entre os dois tipos de frameworks.

2.7 COMPARATIVO ENTRE NATIVESCRIPT E REACT NATIVE

React é um framework JavaScript criado pelo Facebook para facilitar a
construção de interfaces de usuário. React Native, da mesma empresa, possibilita a
criação de aplicações mobile nativas utilizando JavaScript, na lógica, e React, para
estruturar as views.
O React Native fornece ao usuário uma experiência que se aproxima muito ao
nativo. Os apps React mostram melhor desempenho comparado a outros frameworks
de desenvolvimento. No NativeScritp a renderização através da VM desacelera o app
NativeScript, provocando menor desempenho comparado ao React Native.
O NativeScript é uma ferramenta relativamente nova. Por isso, há poucos
desenvolvedores se dedicando a colaborar com o seu desenvolvimento. Existem
poucos plugins disponíveis e muitos não passaram por verificação adequada. Por outro
lado, o React Native já está consolidado no mundo da colaboração, existem mais mil
desenvolvedores atuando em melhorias. Abaixo, o quadro demonstra algumas
diferenças visíveis na fase de desenvolvimento.

Quadro 1 - Comparação no desenvolvimento de apps móveis

 9

NativeScript React Native

Linguagem JS / TypeScript JS

Frameworks para codificação Angular 2, Vue e TypeScript React JS

Curva de aprendizagem Média Média

(baixa/média/alta)

IDE VS Code, Visual Studio Editores de JS

Requisito do MAC para o Sim Sim

desenvolvimento do IOS

Suporte CSS Sim Restrito

Ligação nativa Sim Sim

 10

3 DISCUSSÃO
É inegável que os frameworks para desenvolvimento multiplataforma são uma
tendência atual. O mercado cada vez mais exige agilidade e versatilidade na
construção de aplicativos desktop, móvel e web. Ter o conhecimento aprofundado em
um conjunto de tecnologias e poder utilizá-las para desenvolver apps para todos as
plataformas é algo muito poderoso para os programadores, além de gerar mais renda
para os que trabalham como freelancer.

Assim, o NativeScript e o React Native são duas ferramentas que estão

concorrendo no mercado do desenvolvimento multiplataforma. Elas possuem maior
compatibilidade com os SO após a compilação dos apps e trabalham de forma nativa
no dispositivo. Cada uma tem vantagens e desvantagens e somente após uma análise
profunda do projeto e capacidades dos frameworks é possível afirmar qual irá
responder melhor.
 11

REFERÊNCIAS

BROSTEINS. The NativeScript Book. 2018. Disponível em:

<https://www.nativescript.org/get-the-nativescript-book>. Acesso em: 15/09/2018.

CÂMARA, Rafael. O que você deve saber sobre o funcionamento do React Native.
2018. Disponível em: <https://tableless.com.br/o-que-voce-deve-saber-sobre-
funcionamento-react-native/>. Acesso em: 15/09/2018.

KRILL, Paul. What’s new in NativeScript. 2018. Disponível em:

<https://www.infoworld.com/article/3238006/javascript/whats-new-in-
nativescript.html>. Acesso em: 15/09/2018.

LOOPER, Jen. NativeScript or Hybrid? How to Choose. 2016. Disponível em:

<https://developer.telerik.com/featured/nativescript-hybrid-choose/>. Acesso em:
14/09/2018.

NATIVESCRIPT. Crie aplicativos Android e IOS nativos com JavaScript. Disponível em:
<https://www.nativescript.org>. Acesso em: 17/09/2018.

NATIVESCRIPT. In: Wikipédia: a enciclopédia livre. Disponível em:

<https://en.wikipedia.org/wiki/NativeScript>. Acesso em: 12/09/2018.

PROGRESS. NativeScript. Disponível em: <https://www.progress.com/nativescript>.

Acesso em: 17/09/2108.

RABOY, Nic. 7 Problems With Hybrid Mobile Development And How NativeScript
Solves Them. 2018. Disponivel em:
<https://www.thepolyglotdeveloper.com/2018/07/7-problems-hybrid-mobile-
development-how-nativescript-solves-them/>. Acesso em: 14/09/2018.

REACT NATIVE. Disponível em: <http://www.reactnative.com/>. Acesso em:

13/09/2018.

TODEA, Robert. NativeScript Vs React Native. 2017. Disponível em:

<https://teabreak.e-spres-oh.com/nativescript-vs-react-native-7c7f230b3e>. Acesso
em: 15/09/2018.