Svelte Native é uma estrutura para desenvolver aplicativos nativos iOS e Android com Svelte e NativeScript, fornecendo a camada necessária para conectar Svelte a NativeScript.
Ao combinar duas tecnologias poderosas em o ecossistema JavaScript, os desenvolvedores podem escrever lógica de aplicativo móvel com Svelte enquanto constroem uma IU com componentes Svelte Native personalizados, que, por baixo do capô, são componentes NativeScript.
Ao contrário de estruturas de desenvolvimento de aplicativo móvel como Ionic, que usa tecnologias da web e WebView para renderizar um aplicativo, NativeScript se comunica diretamente com APIs nativas, tornando a renderização da IU mais rápida e dando aos aplicativos móveis uma aparência verdadeiramente nativa.
Neste post, aprenderemos o que é Svelte Native, como para trabalhar com seus componentes e construir um aplicativo iOS Svelte Native simples.
Introdução ao Svelte Native
Porque Svelte Native usa Nati veScript , execute o seguinte comando para instalar o NativeScript globalmente:
npm i-g nativescript
Para criar um aplicativo inicializador Svelte Native, execute o seguinte comando em seu terminal:
npx degit halfnelson/svelte-native-template svelte-native-app cd svelte-native-app npm i
Agora que instalamos as dependências, vamos executar nosso aplicativo.
Para executar o aplicativo em um físico dispositivo, precisamos de dois aplicativos da equipe NativeScript instalados em nosso dispositivo móvel: NativeScript Playground e Visualização NativeScript .
Depois de instalar esses dois aplicativos, execute o ns preview na raiz do aplicativo Svelte Native e escaneie o código QR no terminal com o NativeScript Playground que você acabou de instalar:
Para executar seu aplicativo em qualquer simulador iOS, execute ns run ios. Depois de construir e compilar, o aplicativo é iniciado em seu simulador iOS padrão:
Uma coisa importante a notar é que Svelte Native usa TypeScript por padrão.
Trabalhando com Svelte Native componentes
Svelte Native tem muitos construídos – em componentes que são na verdade componentes NativeScript nos bastidores. Para demonstrar como eles podem funcionar em um aplicativo, vamos ver como o componente de botão funciona.
Adicionando um componente de botão no Svelte Native
Para adicionar e usar um componente de botão, adicione o seguinte:
Observe como temos o evento on: tap para lidar com o clique em oposição ao evento on: click em um Svelte aplicativo. Isso segue a implementação NativeScript de manipuladores de eventos em vez de Svelte.
Além disso, o botão Svelte Native difere de Elemento do botão HTML . O botão Svelte Native é uma tag de fechamento automático, e o texto renderizado na IU é colocado com os adereços de texto.
Veja como o botão fica com um pouco de estilo aplicado:
Uma coisa importante a se observar ao trabalhar em um projeto Svelte Native é como renderizar componentes NativeScript e Svelte.
Ao renderizar componentes NativeScript, as tags devem começar com uma letra minúscula:
No entanto, os componentes Svelte são capitalizados, como em
Adicionando um componente da página ao Svelte Native
O componente da página é o componente pai de nível superior que envolve todos os outros componentes nas telas de nossos aplicativos. Isso significa que deve haver apenas um componente de página por tela:
Adicionando um componente actionBar em Svelte Native
O componente
O código então renderiza uma página com o título actionBar, “Perfil,” abaixo:
Adicionando um componente listView no Svelte Native
O componente listView fornece uma maneira de listarmos itens que são tipicamente uma matriz e funciona como a tag ul em HTML.
listView aceita um prop chamado item, que aceita uma matriz JavaScript, e on: itemTap lida com o evento click de cada item listView. Finalmente, podemos usar o componente Template da Svelte Native para renderizar cada um dos itens do array:
O código acima então renderiza a seguinte lista de frutas em nossa página do aplicativo:
Um importante observar é que a diretiva {#each…} no Svelte não pode iterar listas de itens no componente ListView. Em vez disso, devemos usar o , como visto acima.
Adicionando um componente textField em Svelte Native
O componente textField fornece uma interface de campo de entrada semelhante ao elemento de entrada em HTML .
Ele aceita as propriedades de texto , que define o valor do componente, os adereços de dica, que define o texto do marcador de posição, e os adereços editáveis, que define o componente como somente leitura.
Podemos ativar a vinculação de dados bidirecional usando o bind: diretiva de texto:
O código acima renderiza um campo para os usuários fornecerem seus nomes em nosso aplicativo:
Adicionando um componente de guia no Svelte Native
O componente de guia exibe uma interface de guia no topo de uma janela por padrão. Isso permite que os usuários selecionem e percorram diferentes telas, ao mesmo tempo que oferecem suporte a gestos e transições entre cada visualização.
Como bônus, adicionar tabContentItem permite que os usuários alternem entre as visualizações deslizando o dedo.
Construindo um Aplicativo iOS com Svelte Native
Nesta seção, construiremos um aplicativo móvel simples com Svelte Native. Também usaremos listView, flexboxLayout e navigate.
O recurso de navegação nos ajuda a aprender como passar e receber props da função de navegação. Para mostrar como usar o listView, buscaremos dados de uma API externa e os renderizaremos com o componente listView.
Abaixo está a versão finalizada do aplicativo que criaremos:
Criando o aplicativo Svelte
Devemos primeiro construir o componente pai de nosso aplicativo em nosso componente raiz, App.svelte. Para começar, devemos primeiro importar Svelte para criar nosso aplicativo Svelte:
Usando a função getUser, podemos fazer um chamada assíncrona para uma API usando a API fetch e salvando o resultado no array users que criamos definindo users=data.
Podemos então chamar getUsers () no gancho do ciclo de vida onMount, que carrega a página.
A função onItemTap usa a função de navegação que importamos de svelte-native no topo. Estamos navegando programaticamente o usuário para uma página de Detalhes (criaremos esta página mais tarde) e passando o item clicado na opção de adereços.
Criando a IU Svelte
Agora que temos nossa configuração lógica, vamos trabalhar na IU do nosso aplicativo:
Observe como usamos o flexboxLayout para alinhar nosso conteúdo. Isso funciona da mesma forma que o flexbox em CSS funciona. Por padrão, o flexboxLayout alinha nosso conteúdo em uma linha.
Observe que aqui deve ser chamado de item; qualquer outro nome gera um erro.
Criando uma página de detalhes
Lembra quando passamos o item de clique nos adereços para nossa função de navegação anteriormente? Agora precisamos receber esses dados. Para fazer isso, use o usuário export let; prop no componente Details.svelte que devemos navegar.
Isso significa que agora podemos acessar os dados através do usuário; é chamado de usuário porque é o que usamos em nossa função de navegação:
function onItemTap (args) {navigate ({page: Details, props: {user: users [args.index]},}); }
Agora, podemos navegar para o componente pages/Details.svelte:
Conclusão
Embora Svelte Native seja um projeto de comunidade sem suporte oficial de Svelte e NativeScript ainda, o framework mostra uma grande promessa. Ele vem com os componentes básicos que a maioria dos aplicativos móveis tem e tem um desempenho eficiente.
Todo o código para isso demo está disponível no GitHub . Sinta-se à vontade para deixar um comentário para me dizer o que você achou deste artigo. Você também pode me encontrar no Twitter e no LinkedIn . Obrigado por ler!
