An Indian company called GeekyAnts developed Vue Native, based on the React Native implementation.

  • Introducing Vue Native
  • Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

The sentiment of the JavaScript community at large towards Vue is subtle, but that didn’t stop me from trying to develop mobile apps using Vue Native.

Hello World

This is a very simple example of just displaying “Hello World” on the page.

motivation

As a front-end developer, I love the simplicity of HTML. Write code directly and use CSS to customize styles. Vue. Vue files provide a similar experience.

Vue has a wealth of features: support for templating, style definition, Vuex-based state management, and routing. That makes it a perfect choice.

With Vue Native, we had a similar experience in development.

First try

A simple Internet search reveals the React-Vue project developed by SmallComfort. React -vue translates vue files to React and React Native components. Thanks to the react-Vue authors for solving many problems. Vue Native is the same.

Vue Native compiles to React Native

Vue Native relies on React Native. When you initialize a new app using vue-native CLI, the entry file is app.vue.

Just like.js files, you can combine a.vue file with many.vue files. In fact, all.vue files are translated into the React Native component with the.js suffix. For more information, see here.

An example of bidirectional binding

Vue Native also supports two-way data binding using V-Model.

<template>
   <text-input v-model="Name" />
</template>
<script>
export default {
 data: function() {
   return {
     name: "John Doe"}; }};</script>
Copy the code

cycle

You can write loops using the V-for directive, similar to JavaScript maps.

<template> <view> <text V-for ="name in names "V-bind :key="name">{{name}}</text> </view> </template> <script> export Default {data: function() {return {names: [" Gaurav ", "Neeraj", "Sanket", "Neeraj"]}; }}; </script>Copy the code

The App sample

KitchenSink application

We’ve rewritten the KitchenSink app using Vue Native, which you can download here: GeekyAnts/KitchenSink-Vue-Native.

Todo application

Ankit Singhania, a senior software engineer at GeekyAnts, wrote a simple ToDo application using Vue Native.

How to start

In order to use Vue Native, you first need to install React Native. Follow the steps here to install.

Next, install the Vue Native CLI using NPM.

$ npm install -g vue-native-cli
Copy the code

After that, you can initialize a Vue-native project:

$ vue-native init <projectName>
$ cd <projectName>
Copy the code

You can use NPM Run directly to run the Vue Native app on the IOS/ Android emulator.

instruction

In Vue, directives are special attributes that are prefixed with v-. Here are a few common instructions.

V – if and v – else

V-if and V-else are used to write conditional statements.

<template>  
 <view class="container">    
   <view class="btn-container">      
     <button title="show A" :on-press="() => handleBtnClick('A')"/>
     <button title="show B" :on-press="() => handleBtnClick('B')"/>        
     <button title="show C" :on-press="() => handleBtnClick('C')"/>      
   </view>    
   <view>      
     <text v-if="type === 'A'">
       A
     </text>      
     <text v-else-if="type === 'B'">        
       B      
     </text>      
     <text v-else-if="type === 'C'">
       C
     </text>      
     <text v-else>
       Not A/B/C      
     </text>    
   </view>  
 </view>
</template>
Copy the code

The result is as follows:

v-for

V-for is similar to JavaScript maps.

<template> <view class="container"> <text class="text-container" v-for="todo in todos" :key="todo.text" > {{ todo.text }} </text> </view> </template> <script> export default { data: function() { return { todos: [ { text: "Learn JavaScript" }, { text: "Learn Vue" }, { text: "Build something awesome" } ] }; }}; </script>Copy the code

The result is as follows:

v-model

The V-model directive is used to create a bidirectionally bound element, either based on an input element or a component. Inside, it binds value and onChangeText to React Native’s TextInput.

<template>
 <view class="container">
     <text-input
       class="text-input-container"
       placeholder="Type here"
       v-model="textContent"
     />
     <text
       class="text-container"
     >
       {{textContent}}
     </text>
 </view>
</template>
<script>
export default {
 data: function() {
   return {
     textContent: ""}; }};</script>
Copy the code

The code above binds textContent in both directions. If you enter content in text-input, it will be stored in textContent and displayed directly below text-input.

The result is as follows:

Vue Native routing

Vue Native uses vue-Router to implement navigation logic. Let’s look at the following implementation:

Use Vuex for state management

You can use Vuex to manage state, see: Vuex.

Limitations and known problems

  • Sometimes for a component, you need to create a function that returns JSX code; For example, the renderItem function in the FlatList must return JSX.
  • The error is reported at the React Native level and does not map to Vue Native code. We are optimizing this problem.

Can it be used in a production environment?

We’ve rewritten the entire KitchenSink using Vue Native so you can use it in production. But remember that it has limitations.

Vue-native is completely open source and can be found at Github: Vue-native core.

About Fundebug

Fundebug focuses on JavaScript, wechat applets, wechat mini games, Alipay applets, React Native, Node.js and Java real-time BUG monitoring. Since its official launch on November 11, 2016, Fundebug has handled more than 700 million error events in total, which has been recognized by many well-known users such as Google, 360, Kingsoft, and People’s Net. Welcome free trial!

Copyright statement

Reprint please indicate the author Fundebug and this article addresses: blog.fundebug.com/2018/07/23/…