Anunciando Ionic Vue

Hoje tenho o prazer de anunciar o lançamento do Ionic Vue, uma versão nativa do Vue do Ionic Framework que facilita a construção de aplicativos para iOS, Android e a web como um aplicativo da Web progressivo. O Ionic Vue foi escrito para aproveitar todas as vantagens de todos os excelentes novos recursos que foram enviados recentemente no Vue 3.

O Ionic Vue representa um grande marco no desenvolvimento do Ionic Framework após o lançamento de nossa integração React no início de 2020. Este lançamento é o culminar de nosso impulso ” Ionic para todos ” que foi lançado no início de 2019 com o lançamento do Ionic Framework v4. Como resultado, gostaria de compartilhar um contexto sobre como chegamos aqui e para onde vamos a seguir.

Clique aqui se você deseja apenas começar a construir com Ionic Vue, não ficarei ofendido.

Um pouco sobre o Ionic Framework 

Se esta é a primeira vez que você ouve falar do Ionic, Olá! 

Ionic Framework é um kit de ferramentas de IU de código aberto focado na construção de aplicativos móveis de alta qualidade para iOS nativo, Android nativo e web! Desde o início, ele é construído com HTML, CSS e JavaScript, então os desenvolvedores da web devem se sentir em casa construindo com nossos componentes. Nossos componentes permitem que os desenvolvedores criem experiências nativas, ao mesmo tempo que usam a tecnologia da web. Hoje, o Ionic ativa mais de 15% de todos os aplicativos .

Uma breve história 

Você deve se lembrar do lançamento de um beta do Ionic Vue no início de 2019. Essa versão foi criada para o Vue 2 e não tinha recursos como o v-modelsuporte adequado . Enquanto desenvolvíamos Ionic Vue e Ionic React lado a lado, rapidamente percebemos que eles tinham muito em comum. Na verdade, acabamos implementando recursos semelhantes e corrigindo os mesmos bugs várias vezes.

Também nessa época, a equipe do Vue estava começando a acelerar o desenvolvimento do Vue 3, e decidimos que fazia sentido que o Ionic Framework suportasse essa versão. Pausamos o desenvolvimento do Ionic Vue e mudamos o foco para o Ionic React. Com a sua conclusão, nos encontramos com todos os aprendizados essenciais de que precisávamos para desenvolver o Ionic Vue e estamos realmente felizes com o resultado … se podemos dizer isso.

Um grande marco 

Desde seu lançamento em janeiro de 2019, queríamos que o Ionic Framework v4 fosse conhecido como o framework de aplicativos para todos os desenvolvedores da web. Nesse sentido, carinhosamente nos referimos ao Ionic Framework v4 como “Ionic para todos”. Esta versão reconstruiu o Ionic Framework do zero com Web Components. Embora essa mudança tenha demorado, ela nos permite oferecer suporte a qualquer framework sem ter que reescrever o Ionic Framework.

Hoje, estamos comprometidos em apoiar não apenas o Angular, mas também o React e o Vue. Em certo sentido, o lançamento de Ionic Vue é uma indicação de que nossos esforços valeram a pena. Nem as integrações React nem Vue exigiram grandes reescritas do Ionic Framework, e a API do Ionic permanece notavelmente semelhante em todas as integrações de framework.

O lançamento do Ionic Vue demonstra que qualquer desenvolvedor da web pode construir aplicativos de plataforma cruzada de alto desempenho com o Ionic Framework usando a estrutura de sua escolha.

Começando 

Nota: A primeira versão oficial do Ionic Vue é v5.4.0

Começar com o Ionic Vue é muito fácil. Primeiro, certifique-se de ter a versão mais recente do Ionic CLI instalada:

npm install -g @ionic/cli@latest

Se você usou o Ionic Vue beta, certifique-se de atualizar sua CLI, pois provavelmente estava usando uma versão de pré-lançamento.

A partir daqui, podemos usar o Ionic CLI para criar um aplicativo inicial Ionic Vue:

ionic start my-vue-app --type vue

A CLI o guiará pelo processo de configuração, fazendo algumas perguntas primeiro. Depois de instalar o aplicativo, você pode iniciar o servidor de desenvolvimento executando:

ionic serve

Sob o capô, o ionic servecomando usa a CLI do Vue para compilar seu aplicativo, iniciar um servidor de desenvolvimento e abrir seu aplicativo em uma nova janela do navegador.

A partir daqui, temos acesso a todos os componentes do Ionic Framework:

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Hello Vue</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Hello Vue</ion-title>
        </ion-toolbar>
      </ion-header>
    </ion-content>
  </ion-page>
</template>

<script>
  import { defineComponent } from 'vue';
  import {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
  } from '@ionic/vue';
  export default defineComponent({
    name: 'HomePage',
    components: {
      IonContent,
      IonHeader,
      IonPage,
      IonTitle,
      IonToolbar,
    },
  });
</script>

Para usar os componentes, você precisa importá-los do @ionic/vuepacote e fornecê-los ao seu componente Vue.

Com base no Vue Router 

Assim como nas versões Angular e React do Ionic Framework, optamos por usar o roteador oficial fornecido com o Vue vue-router,. Para lidar com as animações do Ionic Framework, estendemos a API do roteador por meio do ion-router-outletcomponente. Este componente é usado no lugar do router-viewcomponente típico usado nos aplicativos Vue.

Usar este roteador modificado é quase igual ao normal, vue-routerexceto com algumas importações diferentes. O carregamento lento também funciona fora da caixa!

import { createRouter, createWebHistory } from '@ionic/vue-router';
import Home from '@/views/Home.vue'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/lazy',
      component: () => import('@/views/Lazy.vue')
    }
  ]
})

Em vez de importar createRoutere createWebHistoryde vue-router, você precisa importá-los de @ionic/vue-router. Essas importações envolvem as vue-routerfunções de mesmo nome e fornecem alguns detalhes adicionais que permitem que o Ionic Framework funcione bem dentro do ambiente Vue.

Embora recomendemos confiar nas ferramentas que o Vue Router oferece, adicionamos suporte para a router-linkpropriedade em componentes que permitem isso:

<ion-item router-link="/child-page">
  <ion-label>Click Me to Navigate</ion-label>
</ion-item>

Você também pode especificar a direção usando router-directione uma animação personalizada usando router-animation.

Para que os eventos de transição e de ciclo de vida funcionem corretamente, cada página Ionic deve ser envolvida em um ion-pagecomponente:

<template>
  <ion-page> ... </ion-page>
</template>

<script>
  import { defineComponent } from 'vue';
  import { IonPage } from '@ionic/vue';
  export default defineComponent({
    name: 'HomePage',
    components: { IonPage },
  });
</script>

Os eventos de ciclo de vida podem ser acessados ​​fornecendo o evento apropriado como um método:

export default defineComponent({
  name: 'HomePage',
  components: {
    IonPage
  },
  methods: {
    ionViewDidEnter: () => {
      ...
    },
    ionViewDidLeave: () => {
      ...
    },
    ionViewWillEnter: () => {
      ...
    },
    ionViewWillLeave: () => {
      ...
    }
  }
});

Fazendo as coisas do jeito Vue 

@ionic/vueinclui suporte para todos os componentes do Ionic Framework, exceto para rolagem virtual. Estamos adotando as soluções voltadas para a comunidade para rolagem virtual em aplicativos Vue e forneceremos mais informações sobre como começar a usar essas soluções em breve! Usar componentes no Ionic Vue ainda parecerá familiar, mas usará a sintaxe de modelo do Vue:

<template>
  <ion-input v-model="inputValueRef" @ionInput="onChange($event)"></ion-input>
  Value: { inputValueRef }
</template>

<script>
  import { defineComponent, ref } from 'vue';
  import { IonInput } from '@ionic/vue';
  export default defineComponent({
    name: 'MyComponent',
    components: { IonInput },
    methods: {
      onChange: (ev: CustomEvent) => {
        ...
      }
    },
    setup() {
      const inputValueRef = ref('');
      return { inputValueRef };
    }
  });
</script>

Componentes de sobreposição, como ion-modal, podem ser criados dinamicamente importando o controlador apropriado de @ionic/vue:

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="openModal()">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent } from 'vue';
  import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
  import ModalExample from '@/components/Modal.vue';
  export default defineComponent({
    name: 'HomePage',
    components: { IonButton, IonContent, IonPage },
    setup() {
      const openModal = async () => {
        const modal = await modalController.create({
          component: ModalExample,
        });
        await modal.present();
      };

      return { openModal };
    },
  });
</script>

Os componentes de sobreposição também podem ser usados ​​diretamente no modelo do seu componente:

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="setModal(true)">Open Modal</ion-button>
      <ion-modal :is-open="isOpen" @onDidDismiss="setModal(false)">
        <ModalExample></ModalExample>
      </ion-modal>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent, ref } from 'vue';
  import { IonButton, IonContent, IonModal, IonPage } from '@ionic/vue';
  import ModalExample from '@/components/Modal.vue';
  export default defineComponent({
    name: 'HomePage',
    components: { ModalExample, IonButton, IonContent, IonModal, IonPage },
    setup() {
      const isOpen = ref(false);
      const setModal = (state: boolean) => (isOpen.value = state);

      return { isOpen, setModal };
    },
  });
</script>

Construindo seu caminho com TypeScript ou JavaScript 

Amamos o TypeScript na Ionic e há algum tempo acreditamos que é uma ótima ferramenta para criar aplicativos escaláveis. Dito isso, sabemos o quanto a comunidade Vue valoriza a simplicidade – em suas ferramentas, linguagens e muito mais. Na verdade, é provavelmente o que o atraiu para Vue em primeiro lugar. Comece simples – depois aumente conforme necessário.

Portanto, se preferir usar JavaScript em vez de TypeScript, você pode. Depois de gerar um aplicativo Ionic Vue (veja acima), siga estas etapas:

1. Remova as dependências do TypeScript:

npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript

1. Altere todos os .tsarquivos para .js. Em um aplicativo Ionic Vue vazio, deve ser apenas router/index.tse main.ts.
2. Remova @vue/typescript/recommendede @typescript-eslint/no-explicit-any: ‘off’, de .eslintrc.js.
3. Remova Array<RouteRecordRaw>de router/index.js.

Experiências verdadeiramente nativas com Vue 

O Vue não oferece suporte nativo ao desenvolvimento de aplicativos móveis, mas felizmente, você pode emparelhar o Ionic Vue com o capacitor . Usando o runtime nativo de plataforma cruzada oficial do Ionic, você pode implantar seus aplicativos como aplicativos web progressivos e aplicativos iOS / Android – todos a partir da mesma base de código.

Aqui está um exemplo usando duas APIs de capacitor, a câmera e o sistema de arquivos . Depois de abrir a câmera no dispositivo móvel, o usuário pode tirar uma nova foto e salvá-la no armazenamento do dispositivo.

const takePhoto = async () => {
  const cameraPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100,
  });

  const base64Data = convertPhotoToBase64(cameraPhoto);

  const savedFile = await Filesystem.writeFile({
    path: 'myphoto.jpg',
    data: base64Data,
    directory: FilesystemDirectory.Data,
  });
};

Observe que não há menção a “web”, “iOS” ou “Android” no código. Isso porque o Capacitor detecta automaticamente a plataforma em que o aplicativo está sendo executado e chama o código da camada nativa apropriada. Com APIs de núcleo como essas, juntamente com acesso total a SDKs nativos, o Capacitor permite que você crie aplicativos móveis verdadeiramente nativos.

Qual é o próximo? 

Para uma análise mais aprofundada do Ionic Vue, recomendamos verificar nosso Guia de início rápido . Para uma experiência mais prática, dê uma olhada em nosso Guia de construção do seu primeiro aplicativo .

Embora o lançamento do Ionic Vue seja um marco importante para o Ionic Framework, sempre há mais a fazer. Planejamos lançar suporte completo de Server Side Rendering (SSR) para Ionic Vue no futuro. Fique atento para uma postagem no blog sobre como você pode começar com isso!

Em termos de desenvolvimento geral do Ionic Framework, temos muitas coisas interessantes planejadas, portanto, fique atento. Além disso, deixe-nos saber onde você gostaria de ver o Ionic Framework chegar a seguir, enviando um tweet para nós @ionicframework !