O Fusion.js, framework web, universal e open source da Uber, foi projetado para facilitar o desenvolvimento web e produzir aplicativos leves e de alto desempenho.

Inicialmente, construímos o Fusion.js para renovar nossos próprios sites e, desde então, oferecemos isso à comunidade como um projeto open source.

Neste artigo, mostramos como começar a usar o Fusion.js e a criar um aplicativo “Hello World!” em cinco minutos. O texto apresenta três etapas simples, desde a criação do aplicativo até a exibição de “Hello World!” no navegador.

O aplicativo “Hello World!” é um bom ponto de partida para quem busca se aprofundar no framework Fusion.js.

Etapa 1 – Crie um aplicativo padrão

Criar um aplicativo Fusion.js é fácil. Neste artigo, usaremos o Yarn, um gerenciador de pacotes open source criado no Facebook para configurar o scaffold do Fusion.js para o nosso aplicativo.

O Yarn substitui o fluxo de trabalho existente pelo cliente npm ou por outro gerenciador de pacotes, permanecendo compatível com o registro npm.

Ele possui o mesmo conjunto de recursos que os fluxos de trabalho existentes, operando com mais rapidez, segurança e confiabilidade.

Observação: se você já concluiu esta etapa, pule para a Etapa 2.

No seu terminal, execute o seguinte comando yarn para criar um aplicativo padrão, hello-world-app:

yarn create fusion-app hello-world-app

O comando criará um novo diretório, o hello-world-app, que contém todos os arquivos necessários para configurar e executar o Fusion.js.

Quando o Yarn termina com sucesso, o terminal exibirá a mensagem “Success! You have created a Fusion.js project”. Agora vá para o diretório de origem recém-criado do hello-world-app.

cd hello-world-app/src

Execute ls para visualizar a estrutura de arquivos do hello-world-app.

.
├── pages
│   ├── home.js
│   └── pageNotFound.js
├── main.js
└── root.js

Etapa 2 – Execute seu app

Agora você está pronto para iniciar o aplicativo criado na Etapa 1. No seu terminal, execute o seguinte comando yarn no diretório-raiz do projeto:

yarn dev

Isso serve a página de demonstração do Fusion.js, como mostrado abaixo, em http://localhost:3000.

Etapa 3 – Diga ‘Hello World!’

Na etapa final deste artigo, você irá reescrever a página de demonstração padrão do Fusion.js para dizer “Hello World!”.

Para simplificar esta etapa, você deve substituir o código de demonstração no arquivo home.js existente por um novo código que possa renderizar o texto “Hello World!” no seu navegador.

Isso significa que as rotas permanecerão as mesmas e que nenhuma outra alteração de código é necessária.

• 1. Abra o home.js e remova o código existente para que o arquivo fique completamente vazio.
• 2. Copie e cole o trecho de código abaixo em home.js. Esse trecho importa as bibliotecas React usadas para renderizar o texto “Hello World!” no seu navegador.

// src/pages/home.js

import React from ‘react’;

const Home = () => (

);

export default Home;

Adicione o texto “Hello World!” entre as tags <div>.

// src/pages/home.js

import React from ‘react’;

const Home = () => (
 <div>Hello World!</div>
);

export default Home;

Finalmente, volte a executar yarn dev para rodar novamente seu aplicativo. Assim que o servidor iniciar novamente, acesse seu arquivo visitando http://localhost:3000.

A mensagem de Build completed in x.xxxs será mostrada no terminal quando o servidor for reiniciado. No seu navegador, você verá a página inicial do seu aplicativo exibindo “Hello World!“.

Bom trabalho! Você acabou de aprender a criar um aplicativo simples com o Fusion.js.

Ansioso para aprender mais sobre o framework web? Leia nosso artigo sobre como criar plugins com o Fusion.js.

Se você deseja criar aplicativos web em grande escala, considere a possibilidade de se candidatar a uma função na equipe da Web Platform da Uber!

***

Este artigo é do Uber Engineering. Ele foi escrito por Carsten Jacobsen. A tradução foi feita pela Redação iMasters com autorização. Você pode conferir o original em: https://eng.uber.com/build-a-hello-world-application-in-5-minutes-with-fusion-js/