Code Sharing com NativeScript-Vue
No meu último artigo eu tive o prazer de falar um pouco sobre NativeScript-Vue e dar uma introdução desse incrível framework. Mas se você achou que aquilo era tudo que iria ler sobre o assunto (da minha parte), estava EXTREMAMENTE ERRADO (se não viu, da uma conferida no artigo).
Que porra é Code Sharing?
Anos atrás, eu estava desesperadamente estudando Objective-C/Swift, gostava muito do desenvolvimento de apps, porém, algo sempre me deixou indignado, e isso era o Java. Eu não conseguia acreditar que precisava aprender Java para desenvolver apps para Android (meio obvio isso kkk), e com isso veio o Cordova, parecia incrível, a proposta de “abandonar” Swift e não precisar aprender Java, e mesmo assim conseguir desenvolver apps para iOS, Android e de bônus, ainda conseguiria reutilizar boa parte do código na Web ( ̶s̶a̶b̶e̶m̶o̶s̶ ̶c̶o̶m̶o̶ ̶i̶s̶s̶o̶ ̶”̶a̶c̶a̶b̶o̶u̶”̶). E ai, veio o NativeScript e React Native, tudo parecia perfeito, até percebermos que seria ótimo além de poder ter o mesmo código para iOS e Android, ter também para Web. Parece um “sonho” distante, né? ERRADO! Graças aos membros da comunidade do NativeScript e a sua equipe, isso é possível.
Como isso funciona, exatamente?
Como eu ja disse no outro artigo, o NativeScript nos permite utilizar, Angular, Vue.js, React.js, Svelte, TypeScript e JavaScript e isso por si já é uma coisa incrível, e desde a versão 2.5 do NativeScript (se não estiver engano), temos a possibilidade de usar compartilhamento de código no nosso desenvolvimento mobile.
“Ok! O que exatamente podemos compartilhar?”, basicamente podemos compartilhar métodos, assets, styles, state e etc.
Hands On
Como nem tudo é só teoria, vamos colocar a mão na massa. Para isso precisamos criar nosso projeto, é bem simples quanto criar um projeto Vue (é exatamente como criar um projeto Vue rs).
$ vue create instagram-clone-nativescript-vue // Cria projeto
$ cd instagram-clone-nativescript-vue // Acessa a pasta
$ vue add vue-cli-plugin-nativescript-vue // Add PluginApós adicionarmos o plugin, precisaremos responder algumas perguntas para concluir a configuração da nossa aplicação.
1. Enter a unique application identifier
Nesse passo você escolhe o id da sua aplicação, ex: com.instagram
2. Use HTML5 History mode?
Nesse passo você decide se seu aplicativo ira usar o HTML5 History, selecionei N nessa etapa, essa configuração pode ser alterada posteriormente.
3. Is this a brand new project?
Nesse passo iremos marcar com Y, pois estamos construindo um novo projeto, e em seguida escolheremos a opção Dual Native and Web.
4. What type of template do you want to start with?
Nesse passo iremos escolher o template simple para iniciarmos nosso projeto.
Feito isso, seu projeto foi criado, agora basta iniciarmos nosso app, para isso vamos utilizar dois terminais, um para executar o app para iOS e outro para Web:
$ npm run serve:ios
$ npm run serve:webE com isso teremos o seguinte resultado.
Lista de comandos
Vou deixar aqui a lista de alguns comandos, porém, todos eles podem ser vistos no package.json
$ npm run serve:android // Executa no dispositivo Android
$ npm run serve:ios // Executa no dispositivo iOS
$ npm run serve:web // Executa localmente para o navegador
$ npm run build:android // Faz o build para Android
$ npm run build:ios // Faz o build para iOS
$ npm run build:web // Faz o build para WebCriando nossa interface
Para não gastarmos tanto tempo em UI, decidi fazer novamente o instagram (mesmo app feito no artigo anterior), entretanto, dessa vez iremos um pouco mais além. Vamos iniciar modificando nosso App.vue.
Vamos entender o que fizemos no App.vue.
No nosso arquivo, temos dois template, um que contém nosso conteúdo para Web e o outro para o Mobile, isso é diferenciado pela nossa prop web ou native. Em ambos utilizamos o componente Post (que será criado posteriormente) e renderizamos ele N vezes baseado no nosso array posts com v-for. Usamos o VUE_APP_MODE para sabermos onde nossa aplicação está sendo executada, para assim, modificarmos nossa aplicação, sendo assim, estamos usando para definir o width da nossa imagem de perfil.
Criando component Post
No componente Post, criamos os elementos para exibir nossa imagem, descrição, username e avatar.
Resultado 🎉
O que eu mais gosto é que estamos tendo apenas um código fonte, e mesmo que precisemos fazer algumas adaptações, o resultado é incrível ❤
Vamos além
Tudo isso é maravilhoso, porém para não deixarmos muitas lacunas, que tal irmos um pouco além? Vamos complementar um pouco nossa aplicação e trabalhar com rotas.
Um tempo atrás, o NativeScript-Vue nos permitia trabalhar com o Vue Router (experimental), e isso seria algo incrível se tivesse ido para frente. Mas não desanime, assim como o React Native, o NativeScript possui formas simples de se trabalhar com rotas (se bem que o Manual Routing é bem simples), nesse projeto, iremos trabalhar com nativescript-vue-navigator, que é bem similar ao Vue Router.
Modificando nossa aplicação
Vamos iniciar criando dois novos arquivos na pasta views, Timeline.vue e Profile.vue, em seguida, vamos modificar o nossa arquivo router.js com as nossas alterações.
Agora vamos criar nosso perfil de usuário, nessa nossa view, iremos exibir apenas a foto do usuário (você pode ir alem). Agora, vamos passar todo nosso estado de post para o Vuex. Vamos abrir o store.js e edita-lo.
Basicamente o que fizemos, foi pegar o array post e coloca-lo no estado do Vuex, além disso, adicionamos um novo objeto (user) e os campo _id e Description nos objetos do posts, dessa maneira, conseguimos gerenciar o estado da nossa aplicação de forma global.
Agora precisamos fazer algumas alterações no App.vue, é importante entender que o App.vue ficará responsável apenas por controla o router-view da Web, tiraremos todo código Mobile que estiver ali. O App.vue ficará assim:
Já que tiramos nossa estrutura Mobile do App.vue, passaremos ela para o Timeline.vue.
Basicamente passamos o conteúdo criado anteriormente para o arquivo Timeline, criamos uma computada para retornar nossos posts do Vuex, e passamos uma nova prop para o Post (Description).
Já que agora temos a descrição do post de forma dinâmica, precisamos mudar nosso componente para respeitar essas informações.
Além de receber a nova prop, também criamos um método chamado goTo, que será responsável por chamar a Profile. Usamos o evento @tap para chamar nossa função goTo. Agora o que precisamos é criar o conteúdo da nossa Profile.
Basicamente o que fizemos no Profile foi exibir a foto de usuario.
Resultado 🎈
Para não ficar tão extenso, aqui é nosso limite, entretanto, acredito que chegamos a um resultado legal, e conseguimos ver ótimos pontos como Vuex, Router, Code Sharing e etc.
Como é de costume, todo o código fonte do projeto está disponível no github
