Explicação da solução Design-to-code da Infragistics

Neste artigo, explicarei os principais componentes e modelos das soluções de design para código low-code/no-code da Infragistics e detalharei rapidamente os 3 tamanhos diferentes de organizações para que você possa entender melhor seus ciclos de desenvolvimento de aplicativos e as maneiras pelas quais App Builder simplifica tudo, desde o design até o código. Minha ideia é ajudá-lo a aprender como essas soluções de design para código reinventam o design e o desenvolvimento de aplicativos da web e o que exatamente as torna uma necessidade para todos os seus processos.

O que é design para codificar?

Em resumo, design para código é o processo de transição de um aplicativo de software de sua fase de design para a implementação do software. Esse processo geralmente envolve transferências entre várias equipes.

O que são ferramentas de design para código

substantivo

Plataformas de design e desenvolvimento de aplicativos da Web que funcionam como uma única fonte de verdade para reunir equipes, eliminar transferências e simplificar todas as fases do processo de design e desenvolvimento de aplicativos da Web.

É assim que eu definiria esses aceleradores de desenvolvimento de aplicativos.

A necessidade de ferramentas que economizam tempo está crescendo, e empresas de diferentes setores (fintech, estudos clínicos, TI, saúde, viagens, logística) começaram a vê-las e implementá-las como soluções críticas para os negócios. Portanto, inovações como App Builder intervir para fazer um grande progresso e refinar o design e o desenvolvimento de aplicativos da web.

Vamos mergulhar.

Como empresas de diferentes tamanhos criam aplicativos da Web

O processo pode ser resumido rapidamente assim – Se você deseja criar um aplicativo, comece com um design que você montará em termos de um aplicativo. Como na organização individual de desenvolvedor / pequena loja, o designer e o desenvolvedor podem e geralmente são a mesma pessoa, será você novamente quem pegará esse design e desenvolverá o aplicativo da web para ele. Quando estiver satisfeito com o que fez, você o compara com o design novamente. Você olha para ele, diz "Tudo parece bem, testei tudo" e, em seguida, o implanta. E este aplicativo da web é feito ao vivo.

Simples, certo? Mas espere por isso.

Esse processo, que inclui uma fase de design-desenvolvimento-implantação com poucas subfases, é típico para organizações individuais de desenvolvedores/pequenas lojas que incluem no máximo cinco pessoas (geralmente desenvolvedores) e, no máximo, um designer.

Se olharmos para uma organização de médio porte como comparação, ela compreende cerca de 250 funcionários – nem todos desenvolvedores, é claro.

Existem diferentes departamentos – vendas, marketing, uma equipe de design designada e assim por diante. Eles criam aplicativos para si mesmos ou como prestadores de serviços – respondendo às necessidades de outras empresas e projetos externos. O processo de desenvolvimento do aplicativo é praticamente o mesmo, mas existem várias outras etapas intermediárias.

Então, temos organizações de grande porte, e o processo de desenvolvimento de aplicativos aqui é o seguinte.

Mais etapas, mais aprovações, mais partes interessadas que se envolvem em cada etapa – design, desenvolvimento, aprovação, implantação. Normalmente, as equipes precisam colaborar em diferentes mídias, plataformas, aplicativos e até países e fusos horários. Existem vários tipos de software que a organização utiliza para produzir wireframes, visualizar designs, designs de tela e fornecer um aplicativo da web real no final.

Além disso, mais requisitos estão sendo colocados para esse tipo de organização, e os aplicativos geralmente são criados para fins e uso internos. Os integradores de sistemas se enquadram na categoria de grandes organizações, mas ainda criam principalmente aplicativos grandes para outras organizações.

Olhando para essas organizações, não há diferença significativa entre as etapas que elas geralmente executam para construir seu software. É a quantidade de ciclos de colaboração e transferências que complicam o processo. Aí vem um dos maiores desafios quando as equipes colaboram – elas geralmente fazem isso em muitos meios. Eles usam o Outlook para email, o Teams para chamadas de vídeo, o GitHub e as ferramentas da Web para tarefas. Há também o Visual Studio Online ou TFs git, plataformas de design gráfico vetorial e estruturas de colaboração em equipe que se misturam a todas as outras ferramentas. É muito. E o malabarismo entre ferramentas e produtos de software geralmente traz muito atrito.

Nossa solução considera não apenas as operações de design e desenvolvimento, mas também o processo de colaboração. Começa com um sistema de design que integra App Builder low-code/no-code para alinhar UX, gerenciamento de produtos e desenvolvimento de produtos.

App Builder em poucas palavras

App Builder é uma plataforma low-code que permite alinhamento operacional, colaboração profunda e inovação contínua no nível do produto (DesignOps) com uma experiência multiusuário low-code completa para entrega de aplicativos da web.

• Permite que as equipes corporativas de UX e entrega de produtos operacionalizem a compatibilidade entre UX, gerenciamento de produtos e desenvolvimento de produtos
• Suporta arquivos de design Sketch e Figma
• Funciona como uma única fonte de verdade entre as equipes corporativas, facilitando a colaboração com as partes interessadas
• Permita testes de usuários com análises profundas e prototipagem baseada em imagem

Partes principais da solução Design-to-Code da Infragistics

Kits de interface do usuário– A implementação de ferramentas de design de terceiros

O UIKits Siga exatamente o mesmo sistema de design para todas as tecnologias, o que significa que os designers podem até mudar sua ferramenta para escolha (digamos, de Sketch para Figma) e ainda terão suporte para continuar projetando com símbolos fornecidos por nós para a ferramenta específica.

• Eles visam e ajudam os projetistas, independentemente da ferramenta que usam, permitindo que eles trabalhem com uma ferramenta de sua escolha e, ao mesmo tempo, possam se integrar ao App Builder, reduzindo o atrito
• Funcionar como a fonte de verdade para componentes de interface do usuário, independentemente da implementação da plataforma
• Existem adaptadores para Sketch e Figma também, que utilizam os metadados por trás dos símbolos do kit de interface do usuário para trazer as telas projetadas para o App Builder e visualizá-las em termos de componentes reais

Componentes da interface do usuário –Implementações de componentes reutilizáveis específicos da estrutura

Seus comportamentos, aparência e sensação são impulsionados pelo sistema de design.

• Reutilização de conceitos entre estruturas
• Cada novo componente é disponibilizado na plataforma App Builder
• Controles para Angular, Blazor, Web Components

Modelo de aplicativo comum– a peça central do sistema

Ele nos permite descrever aplicativos de maneira agnóstica de estrutura.

• Abstrair uma maneira de definir a estrutura, as visualizações e as interações do aplicativo
• Permite que você tenha um mesmo aplicativo em diferentes tecnologias
• Pega um design, torna-o compreensível para o App Builder e permite a geração de código para Angular, Blazor ou Web Components (React ainda em andamento)
• Define padrões comuns entre tecnologias
• Gerado por analisadores de ferramentas de design sobre os kits de interface do usuário, o App Builder ou outros plug-ins de terceiros

App Builder– A joia da coroa da nossa solução Design-to-Code

Em resumo, App Builder é a plataforma que permite projetar visualmente aplicativos e gerar código para eles em Angular, Blazor ou Web Components (React em breve) de forma low-code/no-code. Tudo é arrastar e soltar, proporcionando uma verdadeira experiência de desenvolvimento WYSIWYG. Você tem componentes na caixa de ferramentas, diferentes tipos de layouts de exibição que você pode escolher e navegação/estrutura entre as exibições.

• Funciona como uma economia de tempo que produz código para iniciar seu aplicativo com a mesma qualidade ou melhor do código que você mesmo escreveria
• Permite que você inicie seu aplicativo do zero, a partir de modelos de projeto prontos para uso ou de arquivos de design já concluídos Figma, Sketch ou Adobe XD
• Serve como uma única fonte de verdade que facilita a colaboração entre desenvolvedores, designers, PMs, partes interessadas que podem entrar em qualquer estágio do ciclo de desenvolvimento de aplicativos
• Consome o modelo de aplicativo comum por meio dos analisadores (os metadados fornecidos pelos kits de interface do usuário) e o produz por meio de sua superfície de design
• Recebe aprimoramentos e recursos contínuos

Um de nossos clientes destaca que:

"Pela minha experiência, o App Builder permite uma economia de tempo de 70% ou mais ao criar uma estrutura de aplicativo totalmente funcional. A colaboração com designers, clientes e outras partes envolvidas é consideravelmente acelerada e significativamente otimizada.

A capacidade de criar facilmente um aplicativo com os componentes e estilos de interface do usuário usados no aplicativo final e mostrá-los interativamente sem programá-los com antecedência é uma vantagem inestimável quando se trata de atender aos requisitos do cliente.

O aplicativo Angular gerado pelo App Builder não é diferente de um aplicativo criado com a CLI do Angular e pode ser concluído com o fluxo de trabalho usual."

Visualização e geração de código

O Code Gen é um serviço que consome o Common App Model e produz código específico da estrutura para aplicativos.

• Compreende a transição de um modelo de aplicativo abstrato para o produto específico que implementa os componentes da interface do usuário no aplicativo
• Compreende padrões comuns de aplicativos – roteamento, comportamentos, transições
• Cria uma estrutura de repositório específica da estrutura
• Pode implantar o aplicativo gerado em um novo repositório GitHub
• Pode PR atualizações para um repositório GitHub existente
• No futuro, será capaz de iniciar uma compilação e implantação do Azure do aplicativo gerado
• Permite ativar a visualização de código e vê-la lado a lado com o aplicativo em execução
• Existe geração de código para geração de código Angular ou Blazor

Integração com o GitHub

Por meio do App Builder, habilitamos a integração do GitHub, onde você pode sincronizar o projeto em que trabalha da superfície de design para um repositório do GitHub, onde o código gerado real na plataforma de destino pode residir.

• O código gerado a partir de designs pode ser carregado diretamente no GitHub como novos repositórios de usuários
• As atualizações de designs com o repositório GitHub associado podem ser iniciadas como uma solicitação de pull por meio do App Builder
• App Builder oferecerá a implantação do aplicativo gerado diretamente no Azure
• O Gerador de código cria yml de ações do GitHub para implantação e CI

Quando você está no setor de TI, percebe rapidamente que os agentes, os processos e os fatores que afetam a maneira como atualmente montamos aplicativos da web estão mudando constantemente e se tornando mais complexos.

Existem:

Equipes de fusão, desenvolvedores individuais, designers single-player, partes interessadas, PMs, escritores de UX, profissionais de marketing, testadores de usabilidade, clientes com seus requisitos específicos, consumidores com experiência digital que podem descartar rapidamente desenvolvimentos de software que não têm a velocidade, funcionalidade e abrangência a que estão acostumados.

Fases de ideação, design, transferências, codificação, POCs, iteração, teste, implantação, marketing e assim por diante.

Tempo comprimido, ambientes de trabalho dinâmicos, mudança de prioridades, transformação digital, comunicação dispersa em diferentes canais.

Parece muito complexo, leva muito tempo e parece que poderia realmente usar alguma automação e ferramentas.

É por isso que "reinventores" de design e desenvolvimento como App Builder intervir, acelerar o DesignOps e o DevOps e refinar a maneira como criamos aplicativos da Web modernos com cerca de 80% de aumento no tempo de lançamento no mercado.