Por que NativeScript-Vue?
Muito se fala de React Native ( ̶a̶ ̶m̶a̶i̶s̶ ̶t̶e̶m̶p̶o̶ ̶d̶o̶ ̶q̶u̶e̶ ̶g̶o̶s̶t̶a̶r̶í̶a̶m̶o̶s̶), Xamarin (honestamente faz muito tempo que não ouço falar dele) e Flutter. Mas você já ouviu falar do NativeScript? Se sua resposta for “não!”, não se culpe.
Aqui teremos um overview do que é NativeScript e NativeScript-Vue, porque utiliza-lo e ainda veremos como dar os primeiros passos com ele.
O que é NativeScript?
Assim como o React Native, NativeScript é um Framework que nos possibilita o desenvolvimento de apps nativo para Android e iOS (escrevendo apenas uma vez).
Você pode ver mais em:
Ok! Mas por que NativeScript?
Você deve estar pensando “Caramba, mais um framework? por que eu deixaria o React Native/Flutter, por esse framework?”, acredite, é super comum pensar isso, afinal, quase que diariamente vemos nascer frameworks JS (Não para desenvolvimento Mobile nativo), porém, apesar de tudo isso, NativeScript não é um framework novo, na verdade, ele é mais antigo que o próprio React Native (se não me engano), mas o que chama a atenção nele não é a data de lançamento dele (2014), muito menos o fato de você poder escrever apps “nativos” utilizando apenas Javascript (React Native também faz isso), o que realmente chama a atenção é como ele faz isso, a flexibilidade que ele nos proporciona (vamos entender isso daqui a pouco).
Enfim, vamos entender esse troço
Assim como o React Native, o NativeScript funciona em cima de uma VM Javascript, no React Native para acessar as APIs nativas, você precisa acessar uma série de APIs (APIs de ponte).
Agora, do seu arquivo JS você pode chamar o método assim:
O React Native precisa utilizar essa abordagem pois o próprio React está sendo executado dentro de uma VM Javascript, e por isso, não pode acessar APIs Nativas do iOS e Android diretamente.
Já no NativeScript é adotada uma abordagem bem diferente, para acessar as APIs Nativas, ao invés de ser usado Bridge (API de ponte), o NativeScript injeta todas as APIs do iOS e Android nas VMs JavaScript.
Com isso, se você precisar acessar uma API Nativa, basta fazer isso:
React Native usa React, o que usamos com NativeScript?
Baseado no titulo, já da para imaginar que é Vue.js, certo? Sim e não!
NativeScript nos possibilita utilizar não só o Vue.js, ele nos permiti escolher, tem para todos os gostos, Angular, Vue.js, JavaScript e TypeScript. E para completar, recentemente recebi um email da equipe da Telerik anunciando que em breve teremos o NativeScript-React e NativeScript-Svelte. Se tudo o que falei até agora não é motivo para você dar uma olhada, não sei mais o que é.
Hands On
Ambiente de desenvolvimento
Como o titulo sugere, iremos utilizar o NativeScript-Vue, mas fique a vontade para utilizar o framework JS de sua preferencia.
Para não perdermos tempo com o ambiente de desenvolvimento do NativeScript, siga esse tutorial (MacOSX, Windows, Linux) antes de continuar.
Com o ambiente do NativeScript configurado, vamos configurar o ambiente do Vue.js, para isso basta executar o seguinte comando no terminal:
npm install -g @vue/cli @vue/cli-init
Criando um aplicativo
Uma das coisas que mais gosto no desenvolvimento de apps atualmente é a facilidade de iniciar um projeto, e isso, todos os frameworks fazem bem (seja React Native, Flutter, IONIC ou NativeScript). E sabendo disso, basta executarmos o seguinte comando no terminal:
$ vue init nativescript-vue/vue-cli-template my-first-projectAgora vamos executar um npm i (ou yarn install), com isso todos os módulos necessários para executar nossa aplicação serão instalados.
Iniciando app e entendendo estrutura
Até aqui, tudo foi super fácil, seria chato se isso mudasse, não? Então, para iniciarmos nosso app recém criado é tão simples quanto todos os outros passos, basta executarmos:
$ tns run ios --bundle // or tns run android --bundleA Flag bundle aciona uma compilação do webpack, que compila os arquivos .vue e observa mudanças. Também podemos utilizar a flag hmr (Hot Module Replacement), ele nos permite recarregar módulos modificados sem a necessidade de reiniciar a aplicação e mantem o estado atual do app.
Para quem já trabalhou com Vue.js estará completamente em casa, pois a estrutura e a forma de escrever é praticamente idêntica. Aqui iremos focar basicamente em uma pasta (app) que contem todos os arquivos do nosso app, é nela que iremos criar nossas views, stylesheet, images, fontes e etc. Vamos analisar um pouco o arquivo main.js.
Na primeira linha temos a instancia do Vue/NativeScript.
segunda linha importamos a nossa view principal (App.vue).
Em seguida temos o import do VueDevTools, para quem não sabe é um “plugin” que nos permite debugar aplicações em Vue pelo Chrome, com ele é possível ver a estrutura da nossa aplicação, nosso estado do Vuex e muito mais.
Modificando o App
Não desanime, não ficaremos apenas na parte teórica e que faz parte da documentação, vamos um pouco alem disso, vamos modificar nosso app e fazer algo legal. Para isso, vamos fazer algumas mudanças na nossa view (App.vue)
Vamos entender o que foi feito no App.vue.
1. Modificamos o ActionBar adicionando o logo do instagram
2. Usamos o ScrollView para termos uma barra de rolagem vertical
3. Importamos e utilizamos o componente Post (criaremos logo em seguida)
4. Usamos o velho e bom CSS para estilizar nosso app
OBS: Note que para repetirmos nosso componente Post, utilizamos apenas o v-for do Vue.js, simples!
Criando component Post
Assim como toda boa estrutura, vamos ter um componente para gerenciar nossos posts, para isso, basta criarmos um novo arquivo na pasta components chamado Post.vue
Vamos entender o que foi feito no Post.vue
1. Criamos a estrutura do nosso post usando os componentes Image, StackLayout, FlexboxLayout e Label (Se quiser saber mais sobre os componentes do NativeScript, sugiro dar uma olhada na documentação)
2. Setamos a prop Image, para recebermos a imagem dinamicamente
3. Utilizamos o velho e bom CSS ❤
Resultado
Com isso temos o momento mais esperado, o resultado! Veja que com poucas linhas de código, conseguimos chegar em um resultado INCRIVEL!
Finish 🎉
Vimos como configurar, instalar e iniciar nossa aplicação utilizando NativeScript-Vue, além disso, falamos um pouco sobre algumas vantagens de se utilizar, e por fim, construimos um pedacinho do Instagram. Espero que esse incrível framework lhe chame alguma atenção, porque chamou a minha.
Todo o código fonte do projeto está disponível no github
