Leia este guia passo a passo para saber como gerar código pronto para produção no Angular com um único clique com pouco código.
Jason Beres
13min de leitura
Este é um guia detalhado para mostrar como ir do design ao código de maneira rápida e simples.
Então, se você quiser:
Então, você descobrirá que este guia e todas as etapas incluídas são extremamente úteis ao iniciar seu próximo projeto.
Vamos começar.
Normalmente, a geração de código é descrita como um processo pelo qual um modelo intermediário de código-fonte é compilado em um formato que pode ser executado nativamente por um microprocessador executando um sistema operacional como Windows, Mac OS ou Linux. O processo de "compilar" seu código-fonte é essencialmente pegá-lo de um formato (talvez C# ou TypeScript) e torná-lo outro formato (como Intermediate Language como DLL ou EXE ou JavaScript). Como os processadores exigem entradas específicas e funcionam de maneiras específicas com base no tipo de hardware em que estão sendo executados, sempre há o desafio para os fabricantes de compiladores garantir que qualquer que seja a parte de execução nativa esperada seja executada corretamente no sistema de destino.
Se você estiver usando uma versão mais antiga do .NET Framework da Microsoft, estará compilando seu código-fonte em uma linguagem intermediária (IL ou MSIL para Microsoft Intermediate Language), que é então "Just-in-Time" (JIT) compilada por um interpretador de tempo de execução – o Common Language Runtime (CLR) – que executa o código em linguagem de máquina no sistema operacional Windows em tempo real. Com novas versões do .NET Framework, como .NET Core e .NET 5, a Microsoft envia compiladores de linguagem intermediária e tempos de execução que funcionam em outros sistemas operacionais, como Linux ou MacOS.
O código-fonte que você escreve é o mesmo, é responsabilidade dos compiladores garantir que seu processo de geração de código esteja produzindo a linguagem intermediária correta e que o tempo de execução na máquina de destino possa executá-lo.
Esta figura demonstra visualmente o processo.
Para estruturas como Angular ou Xamarin, o conceito de AoT ou compilação antecipada é importante. Isso significa que seu aplicativo, o código gerado a partir do processo de compilação, é construído para a execução nativa em qualquer máquina ou dispositivo de destino em que ele será executado. Por exemplo, se você compilar seu aplicativo Xamarin.iOS, o código compilado gerado pelo código será nativo do iOS. Não há necessidade de um runtime no dispositivo para executar seu aplicativo diferente do sistema operacional iOS nativo. Nas primeiras versões do Xamarin, os aplicativos não eram compilados em AoT. Isso significava que o tempo de execução mono precisava ser implantado no dispositivo para executar o código em tempo de execução. Os aplicativos compilados AoT têm melhor desempenho de inicialização e, com base nas especificações do dispositivo, execução de tempo de execução potencialmente mais rápida.
Para os fins deste artigo, a geração de código Angular é direta. Angular geração de código é o processo de usar ferramentas específicas que criam metadados (ou uma linguagem intermediária) para obter saída de código utilizável, como código-fonte para um ou mais componentes de Angular e/ou um aplicativo Angular inteiro. Essa saída estaria em um formato limpo e utilizável que pode ser usado por um desenvolvedor para modificações adicionais e, finalmente, "compilado" em um formato gerado que será executado no navegador como JavaScript e HTML.
Existem várias maneiras de fazer isso:
Este diagrama mostra o nível de interação e saída de código que você pode esperar dessas opções de geração de código.
Você pode ver que há várias opções para geração de código Angular– desde a CLI Angular mais genérica até uma experiência robusta de arrastar e soltar na Web usando o App Builder. Você pode usar qualquer uma dessas opções para acelerar o desenvolvimento e a entrega de aplicativos no Angular.
Para ajudá-lo a aprender como, publiquei recentemente uma visão geral do produto App Builder abrangente e um tutorial. Clique abaixo para assistir.
A entrega de aplicativos é mais do que apenas o processo de compilar o código-fonte e gerar algum tipo de saída que será executada em um processador nativo de destino. Existe um processo para oferecer belas experiências aos clientes que fazem sentido para os problemas que eles estão tentando resolver. Uma parte fundamental desse processo é o Design. Em um processo de design, uma equipe de design trabalhará com as partes interessadas ou clientes para entender suas necessidades e, em seguida, criará um protótipo do aplicativo na ferramenta de sua escolha (como Figma ou Sketch) para que essa parte interessada experimente usar. O processo é iterativo, inclui obter feedback das partes interessadas, atualizar o design com base em feedback e críticas e, em seguida, testar novamente com as partes interessadas. Esse processo iterativo é comprovadamente a base de projetos de software bem-sucedidos. Esse processo de design iterativo acontece antes que qualquer código seja escrito ... Eventualmente, há uma "transferência" de uma equipe de design para uma equipe de desenvolvimento do design aprovado pelo cliente. Neste ponto, as equipes de desenvolvimento usarão suas próprias ferramentas, tentarão decifrar o design que receberam e começarão a escrever código.
É nessa transferência que corre o risco de se desconectar da intenção do design e do que é construído.
Se uma equipe de produto (que inclui equipes de design e equipes de desenvolvimento) for padronizada em uma plataforma de geração de código ou, como o Gartner cunhou, uma plataforma de design de produto digital, o risco e os erros na transferência serão bastante reduzidos ou eliminados. Uma plataforma de geração de código deve incluir mais do que apenas a parte do "código", ela precisa incluir todos os aspectos da entrega de software, como:
Isso significa que uma equipe de design e uma equipe de desenvolvimento devem avaliar as plataformas de geração de código, com ênfase no que a plataforma pode fazer antes da parte de geração de código. App Builder é a única plataforma low-code baseada em nuvem do mundo com uma solução completa de design para código – indo além das metas tradicionais da plataforma de geração de código.
Os prós e contras da geração de código e das plataformas de geração de código têm sido debatidos há muito tempo. O argumento para os benefícios da geração de código sempre foi a produtividade e a velocidade de entrega. De uma ferramenta pode me ajudar a fazer esse esforço de trabalho mais rápido, do que por que eu não a usaria? O contra a geração de código é o argumento da "caixa preta" - um desenvolvedor não tem ideia de qual código está realmente sendo "gerado", eles não podem vê-lo, alterá-lo, modificá-lo, etc. Portanto, o ônus recai sobre o desenvolvedor se algo der errado no produto gerado pelo código. Esse medo de perda de controle geralmente é o que afasta as equipes de desenvolvimento da geração de código. Mas, com as ferramentas mais sofisticadas de hoje. Grande parte desse argumento vai embora.
Qualquer plataforma ou ferramenta de geração de código que queira qualquer nível de sucesso hoje deve:
Isso significa que a saída da geração de código deve ser algo que o desenvolvedor que a inspeciona construiria. Talvez até melhor, e certamente muito, muito mais rápido. O que vai ao cerne do motivo pelo qual uma equipe adotaria uma plataforma de design de produto digital que incluísse a geração de código:
Com as ferramentas modernas de hoje, é uma escolha óbvia para as equipes pelo menos considerar e experimentar plataformas de design de produtos digitais – mesmo que para o benefício da geração de código moderna.
No ambiente de desenvolvimento ágil e acelerado de hoje, passar de um design de UX aprovado para um código utilizável e executável precisa acontecer mais rápido do que nunca. Os desenvolvedores recebem a tarefa quase impossível de transformar um design de UX em um aplicativo em execução em dias e, em alguns casos, horas! Os designers estão sendo solicitados a obter feedback do usuário durante um processo de design iterativo com ferramentas tradicionais que não atendem às necessidades de um processo ágil de UX. É aqui que plataformas como App Builder podem ajudar.
Vamos explorar 2 opções que você precisa para obter um código editável e perfeito em pixels usando App Builder.
Tudo começa com um esboço. Use os controles de interface do usuário e os padrões de interface do usuário compostos em nossos kits de interface do usuário para criar aplicativos no Sketch. Você pode baixar os kits de interface do usuário do Sketch aqui.
Depois que um designer conclui seu design Sketch, ele pode carregá-lo usando o plug-in Sync Sketch integrado. Uma vez na nuvem, uma equipe de design pode aproveitar os recursos da ferramenta low-code, como teste de usuário, colaboração com usuários e criação de protótipos interativos.
Um desenvolvedor pode baixar o plug-in Sketch aqui. O plugin irá ajudá-lo a publicar seus designs/aplicativos criados com Sketch em App Builder. Você também pode baixá-lo seguindo estas etapas:
Agora você pode começar a usar o plugin.
Depois que as coisas estiverem configuradas do jeito que você gosta, é hora de gerar algum código! Clique no botão “Create app” e isso iniciará o processo.
Nessas 3 etapas simples, você pode ir do design ao código, do Sketch ao Angular. Se você não tem um design ou não tem Sketch, experimente o exemplo do HR Dashboard App aqui:
Se você pensou que a opção nº 1 era simples – você vai adorar a opção nº 2! Aqui estão os 4 passos simples para ir do Design ao Código com o App Builder com arrastar e soltar.
Você pode escolher usar os botões no canto superior direito do IDE para gerar aplicativo ou visualizar seu aplicativo e ver o código.
Se você estiver usando o Figma e procurando uma solução de geração de código, App Builder também o cobrirá graças ao seu plug-in Figma. Você pode gerar facilmente código pronto para uso em Angular, Blazor e componentes da Web a partir de um arquivo de design Figma. Basicamente, o processo Figma-to-code refere-se à transformação simplificada de um design ou protótipo criado em Figma em um aplicativo funcional com código real e utilizável. Ao usar nossa solução low-code, isso acontece de forma muito direta e intuitiva, sem precisar escrever nenhum código manualmente. Temos uma postagem de blog dedicada explicando todas as etapas que ajudarão você a converter Figma para código HTML da maneira mais rápida possível.
E assim, um designer ou desenvolvedor pode ir do Sketch ao código com uma ferramenta WYSIWYG baseada na web. As equipes podem projetar e construir aplicativos reais em um arrastar e soltar WYSIWYG baseado na nuvem e obter código – completo com layout da web, CSS e até mesmo dados.
A geração de código é mais do que apenas compilar código-fonte para uma linguagem de máquina nativa. A geração de código tem muitas facetas e muitas ferramentas para fazer o trabalho. Este artigo deu a você um histórico sobre o que é geração de código, por que você precisa dela, como você pode aplicá-la a um aplicativo Angular e você foi apresentado a algumas ferramentas que podem ajudá-lo a construir um software melhor mais rápido.
Boa codificação!
Nesta postagem do blog, usamos nosso App Builder ™ WYSIWYG para criar um aplicativo de CRM Angular personalizado usando um exemplo e uma abordagem de desenvolvimento low-code. Veja como isso é feito.
Às vezes, você não precisa começar um projeto Angular do zero. Você pode usar um aplicativo de exemplo e torná-lo seu com personalizações adicionais. Este artigo fornece alguns exemplos para você começar.
O que é Blazor geração de código? Como você pode aproveitá-lo em um clique usando App Builder low-code? Encontre as respostas neste guia passo a passo.
