Escrito por: Bret Cameron

Combine o poder de um front-end com React com o CMS mais popular da internet

Quer as vantagens de uma aplicação de página única (do inglês, single-page application, ou SPA) moderna feita em React, mas precisa de um back-end que pareça familiar? Neste artigo, veremos como configurar a API REST do WordPress, incluindo tipos e campos de publicações personalizados, e como buscar esses dados dentro do React.

Recentemente, eu estava trabalhando em uma aplicação em React para um cliente e ele me fez uma pergunta: "podemos usá-la com o WordPress?"

Desde o final de 2015, a resposta a essa pergunta é "sim". No entanto, as etapas necessárias para se criar um site dissociado e funcional podem não ser óbvias, especialmente para aqueles que não estão familiarizados com o WordPress nem com o React.

Na minha jornada para criar aplicações funcionais, encontrei um punhado de obstáculos complexos e, neste artigo, explicarei como evitá-los. Também vou compartilhar várias dicas e truques que aprendi pelo caminho!

Conteúdo

Parte 1: informações básicas

• O que é um CMS headless?
• O que preciso saber para acompanhar o tutorial?
• Principais siglas
• Onde posso ver os dados em JSON do WordPress?

Parte 2: WordPress

• Como adicionar um tipo de publicação personalizado
• Como alterar o título de espaço reservado
• Como adicionar um campo personalizado ao seu tipo de postagem personalizado
• Como disponibilizar campos personalizados como JSON
• Como restringir dados em JSON visíveis

Parte 3: React

• Promises em JavaScript
• O método fetch
• Manipulação de promises

Um exemplo funcional em React

Conclusão

Parte 1: informações básicas

O que é um CMS headless?

No passado, usar um CMS como o WordPress significava que você tinha que construir seu front-end usando PHP.

Agora, com o CMS headless (em português, algo como "sem cabeça"), você pode construir seu front-end com as tecnologias que desejar. Isso se deve à separação do front-end e do back-end por meio de uma API. Se você quiser criar uma SPA usando React, Angular ou Vue, controlando o conteúdo por meio de um CMS como o WordPress, você pode!

O que preciso saber para acompanhar o tutorial?

Você vai tirar o máximo de proveito desse artigo se tiver:

• algum conhecimento de como funciona um CMS como o WordPress, um pouco de PHP e uma ideia sobre como configurar um projeto básico do WordPress no seu computador;
• um entendimento de JavaScript, incluindo recursos do ES6+ e sintaxe de classes em React.

Principais siglas

A programação é cheia de jargões, mas eles agilizam muito a discussão sobre alguns dos conceitos neste artigo. Eis um resumo rápido dos termos que vamos usar:

• CMS – sistema de gestão de conteúdo (Content Management System, em inglês).  Alguns exemplos são WordPress, Drupal, Joomla e Magneto.
• SPA – aplicação de página única (Single-Page Application, em inglês).  Em vez de recarregar cada página na sua totalidade, uma aplicação SPA carrega o conteúdo dinamicamente. O código fundamental (HTML, CSS e JavaScript) do site é carregado apenas uma vez. Alguns exemplos são React, Vue e Angular.
• API – interface de programação de aplicações (Application Programming Interface, em inglês).  Em termos simples, uma série de definições que um serviço fornece para permitir que você receba e use seus dados.  O Google Maps tem uma. O Medium tem uma. Agora, todo site do WordPress vem com uma API embutida.
• REST – transferência de estado representacional (Representational State Transfer, em inglês).  Um estilo de arquitetura da web baseado nos métodos de solicitação do HTTP: GET , PUT , POST e DELETE. A API embutida do WordPress é uma API REST ou "RESTful".
• HTTP – protocolo de transferência de hipertexto (HyperText Transfer Protocol, em inglês).  O conjunto de regras utilizadas para transferir dados através da web. Ele é especificado no início dos URLs como http ou https (a versão segura).
• JSON – notação de objeto JavaScript (JavaScript Object Notation, em inglês)  Apesar de ser derivado do JavaScript, ele é um formato para armazenamento e transferência de dados que é independente da linguagem.

Neste artigo, estamos usando o WordPress como nosso CMS. Isso significa programar nosso back-end em PHP e usar a API REST do WordPress para entregar dados JSON ao nosso front-end.

Onde posso ver os dados em JSON do WordPress?

Antes de pôr as mãos na massa, uma nota rápida sobre onde você pode encontrar os dados em JSON em seu site do WordPress. Hoje em dia, todo site feito com WordPress tem dados em JSON disponíveis (a menos que o administrador do site tenha desativado ou restringido o acesso a eles). Você pode ver o JSON principal de um site do WordPress anexando  /wp-json  ao nome de domínio raiz.

Então, por exemplo, você pode dar uma olhada no JSON do site WordPress.org visitando  https://wordpress.org/wp-json. Como alternativa, se você estiver executando um site do WordPress localmente, você pode ver seu JSON acessando localhost/nome-do-seu-site/wp-json.

Para acessar os dados das suas publicações, escreva  localhost/nome-do-seu-site/wp-json/wp/v2/posts. Para um formato de publicação personalizado, troque para o novo formato (por exemplo, movies – filmes) em vez de posts. O que agora parece ser um bloco de texto ilegível é exatamente o que nos permitirá usar o WordPress como um CMS headless!

Parte 2: WordPress

Para configurar sua API REST, a maior parte do que você vai fazer acontecerá no seu arquivo functions.php. Partirei do pressuposto de que você sabe configurar um projeto com WordPress e acessá-lo usando localhost, mas, se precisar de ajuda com isso, eu recomendo este artigo (em inglês, mas é o que eu usei para começar a programar com o WordPress).

Para a maioria dos projetos, você vai querer usar um tipo de publicação personalizado. Então, comecemos configurando um.

Como adicionar um tipo de publicação personalizado

Digamos que nosso site seja sobre filmes e queremos um tipo de publicação chamado 'movies' (em português, filmes). Primeiro, queremos garantir que nosso tipo de publicação 'movies' seja carregado o mais rápido possível. Então, vamos anexá-lo ao hook init utilizando add_action:

add_action( 'init', 'movies_post_type' );

Estou usando movies_post_type(), mas você pode chamar sua função do que quiser.

Em seguida, vamos registrar 'movies' como um tipo de publicação, usando a função register_post_type().

O próximo trecho de código pode parecer intimidador, mas é relativamente simples: nossa função requer muitos argumentos embutidos para controlar a funcionalidade do seu novo tipo de publicação. A maioria deles é autoexplicativo. Vamos armazenar esses argumentos no array $args.

Um dos argumentos, labels, pode receber diversos argumentos diferentes em si. Assim, o separamos em um outro array, $labels, o que nos dá:

<?php // Registrar o tipo de publicação personalizada: filmes

function movies_post_type() {

	$labels = array(
		'name'                  => _x( 'Movies', 'Post Type General Name', 'text_domain' ),
		'singular_name'         => _x( 'Movie', 'Post Type Singular Name', 'text_domain' ),
		'menu_name'             => __( 'Movies', 'text_domain' ),
		'name_admin_bar'        => __( 'Movie', 'text_domain' ),
		'archives'              => __( 'Item Archives', 'text_domain' ),
		'attributes'            => __( 'Item Attributes', 'text_domain' ),
		'parent_item_colon'     => __( 'Parent Item:', 'text_domain' ),
		'all_items'             => __( 'All Items', 'text_domain' ),
		'add_new_item'          => __( 'Add New 3D Printer', 'text_domain' ),
		'add_new'               => __( 'Add New', 'text_domain' ),
		'new_item'              => __( 'New Movie', 'text_domain' ),
		'edit_item'             => __( 'Edit Movie', 'text_domain' ),
		'update_item'           => __( 'Update Movie', 'text_domain' ),
		'view_item'             => __( 'View Item', 'text_domain' ),
		'view_items'            => __( 'View Items', 'text_domain' ),
		'search_items'          => __( 'Search Item', 'text_domain' ),
		'not_found'             => __( 'Not found', 'text_domain' ),
		'not_found_in_trash'    => __( 'Not found in Trash', 'text_domain' ),
		'featured_image'        => __( 'Featured Image', 'text_domain' ),
		'set_featured_image'    => __( 'Set featured image', 'text_domain' ),
		'remove_featured_image' => __( 'Remove featured image', 'text_domain' ),
		'use_featured_image'    => __( 'Use as featured image', 'text_domain' ),
		'insert_into_item'      => __( 'Insert into item', 'text_domain' ),
		'uploaded_to_this_item' => __( 'Uploaded to this item', 'text_domain' ),
		'items_list'            => __( 'Items list', 'text_domain' ),
		'items_list_navigation' => __( 'Items list navigation', 'text_domain' ),
		'filter_items_list'     => __( 'Filter items list', 'text_domain' ),
	);

	$args = array(
		'label'                 => __( 'Movie', 'text_domain' ),
		'description'           => __( 'Our featured films.', 'text_domain' ),
		'labels'                => $labels,
		'supports'              => array( 'title', 'editor', 'thumbnail'),
		'taxonomies'            => array( '' ),
		'hierarchical'          => false,
		'public'                => true,
		'show_in_rest'          => true,
		'show_ui'               => true,
		'show_in_menu'          => true,
		'menu_position'         => 5,
		'show_in_admin_bar'     => true,
		'show_in_nav_menus'     => true,
		'can_export'            => true,
		'has_archive'           => true,
		'exclude_from_search'   => false,
		'publicly_queryable'    => true,
		'capability_type'       => 'page',
	);

  register_post_type( 'movies', $args );
  
}

add_action( 'init', 'movies_post_type', 0 );

Dois dos argumentos mais importantes são "supports" e "taxonomies", porque eles controlam quais dos campos de publicação nativos serão acessíveis no nosso novo tipo de publicação.

No código acima, optamos por apenas três "supports":

• "title"– o título de cada publicação.
• "editor"– o editor de texto principal, que usaremos para nossa descrição.
• "thumbnail"– a imagem em destaque da publicação.

Para ver a lista completa do que está disponível, clique aqui para ver quais são os 'supports' e aqui para ver as 'taxonomies' (textos em inglês).

O site Generate WordPress também tem  uma ferramenta útil que ajuda a criar tipos de publicação personalizados, o que pode tornar o processo muito mais rápido.

Como alterar o título de espaço reservado

Se o placeholder (em português, espaço reservado) do título "enter title here" (em português, insira o título aqui) não se encaixar no seu tipo de postagem personalizado, você poderá editá-lo com uma função separada:

<?php // Troque o  placeholder do título por um título customizado

function change_title_text( $title ){
  $screen = get_current_screen();
  if ( 'movies' == $screen->post_type ) {
    $title = 'Enter title here';
  }
  return $title;
}

add_filter( 'enter_title_here', 'change_title_text' );

Como adicionar um campo personalizado ao seu tipo de postagem personalizado

Se você quiser um campo que não vem pré-definido pelo WordPress, o que pode fazer? Por exemplo, digamos que queremos um campo especial chamado "genre" (em português, gênero). Nesse caso, você precisará usar  add_meta_boxes().

Para isso, precisamos anexar uma nova função ao hook add_meta_boxes do WordPress:

add_action( 'add_meta_boxes', 'genre_meta_box' );

Dentro de nossa nova função, precisamos chamar a função add_meta_box()  do WordPress, assim:

function genre_meta_box() {  
    add_meta_box(    
        'global-notice',    
        __( 'Genre', 'sitepoint' ),    
        'genre_meta_box_callback',    
        'movies',    
        'side',    
        'low'  
    );
}

Você pode ler mais sobre os argumentos dessa função aqui. Para nossos propósitos, a parte mais crítica é a função de callback, que nomeamos genre_meta_box_callback. Ela define o conteúdo real na caixa meta. Precisamos apenas de uma entrada de texto simples, então podemos usar:

function genre_meta_box_callback() {
  global $post;
  $custom = get_post_custom($post->ID);
  $genre = $custom["genre"][0];
  ?>
  <input style="width:100%" name="genre" value="<?php 
  echo $genre; ?>" />
  <?php
};

Por fim, nosso campo personalizado não vai salvar seu valor a menos que seja conveniente. Para esse efeito, podemos definir uma nova função  save_genre()  e anexá-la ao hook save_post do WordPress:

function save_genre(){  
    global $post;  
    update_post_meta($post->ID, "printer_category",   
    $_POST["printer_category"]);
};
add_action( 'save_post', 'save_genre' );

Juntando tudo, o código usado para criar o campo personalizado deve ficar assim:

<?php // Add Custom Field Type: Genre

function genre_meta_box() {
  add_meta_box(
    'global-notice',
    __( 'Genre', 'sitepoint' ),
    'genre_meta_box_callback',
    'movies',
    'side',
    'low'
  );
}

function genre_meta_box_callback() {
  global $post;
  $custom = get_post_custom($post->ID);
  $genre = $custom["genre"][0];
  ?>
  <input style="width:100%" name="genre" value="<?php 
  echo $genre; ?>" />
  <?php
}

function save_genre(){
  global $post;
  update_post_meta($post->ID, "genre", 
  $_POST["genre"]);
}

add_action( 'add_meta_boxes', 'genre_meta_box' );
add_action( 'save_post', 'save_genre' );

Como disponibilizar campos personalizados como JSON

Nossas postagens personalizadas ficam disponibilizadas automaticamente como JSON. Para o nosso tipo de publicação "movies", os nossos dados em JSON podem ser encontrados em  localhost/nomedoseusite/wp-json/wp/v2/movies.

No entanto, nossos campos personalizados não fazem parte disso automaticamente e, portanto, precisamos adicionar uma função para garantir que eles também sejam acessíveis por meio da API REST.

Primeiro, precisamos anexar uma nova função ao hook rest_api_init :

add_action ('rest_api_init', 'registrar_genero_como_campo_rest');

Então, podemos usar a função incorporada register_rest_field(), assim:

function register_genre_as_rest_field() {
  register_rest_field(
    'movies',
    'genre',
    array(
      'get_callback' => 'get_genre_meta_field',
      'update_callback' => null,
      'schema' => null,
    )
  );
};

Essa função recebe um array com os callbacks get e update. Porém, em um caso mais simples como esse, só precisamos especificar um 'get_callback':

function get_genre_meta_field( $object, $field_name, $value ) {
	return get_post_meta($object['id'])[$field_name][0];
};

Como um todo, este é o código necessário para registrar um campo personalizado.

<?php // Registrar um tipo de campo personalizado como um campo REST

function register_genre_as_rest_field() {
  register_rest_field(
    'movies',
    'genre',
    array(
      'get_callback' => 'get_genre_meta_field',
      'update_callback' => null,
      'schema' => null,
    )
  );
};

function get_genre_meta_field( $object, $field_name, $value ) {
  return get_post_meta($object['id'])[$field_name][0];
};

add_action( 'rest_api_init', 'register_genre_as_rest_field' );

Como disponibilizar URLs de imagens em destaque como JSON

A API REST do WordPress não inclui URLs para as suas imagens em destaque nativamente. Para facilitar o acesso, você pode usar o seguinte código:

<?php // Add 'featured_image_url' to REST data

  function post_featured_image_json( $data, $post, $context ) {
  $featured_image_id = $data->data['featured_media'];
  $featured_image_url = wp_get_attachment_image_src( $featured_image_id, 'original' );

  if( $featured_image_url ) {
    $data->data['featured_image_url'] = $featured_image_url[0];
  }

  return $data;
}

add_filter( 'rest_prepare_movies', 'post_featured_image_json', 10, 3 );

O filtro rest_prepare_posts do WordPress é dinâmico, então podemos trocar "posts" por um tipo de publicação personalizada, como rest_prepare_movies.

Como restringir dados JSON visíveis

Estamos quase prontos para começar a extrair dados para a aplicação em React, mas ainda dá para fazer mais uma otimização rápida: limitar os dados disponibilizados.

Alguns dados vêm por padrão e é possível que você nunca precise deles no seu front-end. Se for o caso, podemos removê-los usando um filtro, como este:

<?php // Filter REST data

function filter_rest_data( $data, $post, $request ) {
  $_data = $data->data;
  $params = $request->get_params();
  if ( ! isset( $params['id'] ) ) {
    unset( $_data['date'] );
    unset( $_data['slug'] );
    unset( $_data['date_gmt'] );
    unset( $_data['modified'] );
    unset( $_data['modified_gmt'] );
    unset( $_data['guid'] );
    unset( $_data['type'] );
  };
  $data->data = $_data;
  return $data;
};

add_filter( 'rest_prepare_movies', 'filter_rest_data', 10, 3 );

Você pode achar os nomes dos tipos de dados acessando a parte /wp-json/wp/v2/filmes do seu site.

Com isso feito, assim que tiver adicionado alguns filmes usando o back-end do WordPress, teremos todo o necessário para começar a trazer dados para o React!

Parte 3: React

Para buscar dados externos em JavaScript, você precisa usar promises. Isso provavelmente influenciará a melhor maneira de estruturar seus componentes no React, e, no meu caso (converter um projeto React pré-existente), eu tive que reescrever boa parte do código.

Promises em JavaScript

As promises em JavaScript são usadas para manipular ações assíncronas: coisas que acontecem fora do passo a passo tradicional, ou seja, a ordem de execução "síncrona" (após o hoisting).

O bom é que JavaScript assíncrono é muito mais fácil hoje em dia. Antes da ES6, dependíamos de funções de callback. Se múltiplas callbacks fossem necessárias (e muitas vezes eram), o aninhamento levaria a um código que era muito difícil de ler, escalonar e depurar – um fenômeno às vezes chamado de "callback hell" ou "pirâmide da perdição"!

As promises foram introduzidas na ES6 (ou ES2015) para resolver esse problema, e a ES8 (ou ES2018) viu a introdução do async ... await, duas palavras-chave que simplificam ainda mais a funcionalidade assíncrona. Porém, para os nossos propósitos, o método mais importante que usa as promises é o fetch().

O método fetch

Esse método está disponível desde o Chrome 40 e é uma alternativa ao XMLHttpRequest(), sendo mais fácil de usar.

fetch() retorna uma promise e, portanto, é compatível com "then", ou seja, podemos usar o método then() para processar o resultado.

Você pode adicionar fetch a um método dentro de seu componente de classe do React, desta maneira:

fetchPostData() {  
    fetch(`http://localhost/yoursitename/wp-json/wp/v2/movies?per_page=100`)  
    .then(response => response.json())  
    .then(myJSON => {  
        // A lógica vai aqui
    });
}

No código acima, duas coisas são importantes:

• Primeiro, estamos chamando um URL com o filtro  ?per_page=100 anexado ao final. Por padrão, o WordPress mostra apenas 10 itens por página. Muitas vezes, me vejo querendo aumentar esse limite.
• Segundo, antes de processar os dados, usamos o método .json(). Esse método é utilizado principalmente em relação ao fetch(), onde ele retorna os dados como promise e analisa o corpo do texto como JSON.

Na maioria dos casos, queremos que essa função seja executada assim que o componente React for montado. Podemos especificar isso usando o método componentDidMount() :

componentDidMount() {  
    this.fetchPostData();
}

Manipulação de promises

Depois de devolver uma promise, você deve ter o cuidado de lidar com ela no contexto correto.

Na primeira vez que tentei usar promises, levei um tempo tentando passar os dados para variáveis fora do escopo da promise. Aí vão algumas regras básicas:

• Em React, a melhor forma de usar promises é através do state (em português, estado). Você pode usar this.setState() para passar dados da promise para o state do seu componente.
• É melhor processar, classificar e reorganizar seus dados em uma série de métodos then() após o fetch() inicial. Depois que todo o processamento estiver completo, a melhor prática é adicionar os dados ao state dentro do seu método then() final.
• Se quiser chamar qualquer outra função adicional para processar a sua promise (inclusive dentro do render()), é boa prática prevenir que a função rode até que a promise seja resolvida.
• Então, por exemplo, se estiver passando sua promise para this.state.data, você pode incluir uma condicional dentro do corpo de qualquer função que dependa dela, como no exemplo abaixo. Isso pode evitar comportamentos indesejados irritantes!

myPromiseMethod() {  
    if (this.state.data) {    
        // processe a promise aqui   
    } else {    
        // o que fazer antes do fetch ser concluído  
    }
}

Um exemplo funcional em React

Digamos que queremos trazer name, description, featured_image e gender (em português, nome, descrição, imagem em destaque e gênero, respectivamente) do tipo de publicação customizado do WordPress que definimos na parte 1.

No exemplo a seguir, vamos buscar esses quatro elementos para cada filme e renderizá-los.

Como tantas vezes acontece em tutoriais de React, o bloco de código a seguir pode parecer intimidador, mas espero que fique bem mais simples conforme o dividimos em partes.

import React, { Component } from 'react';

export default class Movies extends Component {
  
  constructor(props) {
    super(props);
    this.state = { data: {} };
  
    this.fetchPostData = this.fetchPostData.bind(this);
    this.renderMovies = this.renderMovies.bind(this);
    this.populatePageAfterFetch = this.populatePageAfterFetch.bind(this);
    
  }

  componentDidMount() {
    this.fetchPostData();
  }

  fetchPostData() {
    fetch(`http://localhost/yoursitename/wp-json/wp/v2/movies?per_page=100`)
      .then(response => response.json())
      .then(myJSON => {
        let objLength = Object.keys(myJSON).length;
        let newState = this.state;
      
        for (let i = 0; i < objLength; i++) {
          let objKey = Object.values(myJSON)[i].title.rendered;
          let currentMovie = newState.data[objKey];
          
          currentMovie = {};
          currentMovie.name = Object.values(myJSON)[i].title.rendered;
          currentMovie.description = Object.values(myJSON)[i].content.rendered;
          currentMovie.featured_image = Object.values(myJSON)[i]['featured_image_url'];
          currentMovie.genre = Object.values(myJSON)[i]['genre'];          
        }
      
      this.setState(newState);
      });
  }
  
  renderMovies() {
    if (this.state.data) {
      const moviesArray = Object.values(this.state.data)
      return Object.values(moviesArray).map((movie, index) => this.populatePageAfterFetch(movie, index));
    }
  }

  populatePageAfterFetch(movie, index) {
    if (this.state.data) {

      return (
        <div key={index} index={index}> 
          <h2 className="name">{movie.name}</h2> 
          <h3 className="genre">{movie.genre}</h3>
          <div className="description" dangerouslySetInnerHTML={{__html: movie.description}} />
          <img className="featured_image" src={movie.featured_image} alt={movie.name} />
        </div>
      )
    }
  }

  render() {
      return (
      <>
        <h1>Movies</h1>
        <div>{this.renderMovies()}</div>
      </>
      )
  }
}

constructor(props)

Nesse método, chamamos super(props), definimos o estado inicial (um objeto data vazio) e anexamos três métodos novos:

• fetchPostData()
• renderMovies()
• populatePageAfterFetch()

constructor(props) {
    super(props);
    this.state = { data: {} };
  
    this.fetchPostData = this.fetchPostData.bind(this);
    this.renderMovies = this.renderMovies.bind(this);
    this.populatePageAfterFetch = this.populatePageAfterFetch.bind(this);
    
  }

componentDidMount()

Queremos baixar nossos dados assim que o componente estiver montado, então vamos chamar fetchPostData() aqui.

componentDidMount() {
    this.fetchPostData();
}

fetchPostData()

Buscamos o JSON do URL, passando .json() no primeiro método .then().

No segundo método .then(), extraímos os quatro valores que queremos para cada entrada de filme que recebemos e, em seguida, os adicionamos ao objeto newState.

Em seguida, usamos this.setState(newState) para adicionar essas informações ao this.state.data.

fetchPostData() {
    fetch(`http://localhost/yoursitename/wp-json/wp/v2/movies?per_page=100`)
      .then(response => response.json())
      .then(myJSON => {
        let objLength = Object.keys(myJSON).length;
        let newState = this.state;
      
        for (let i = 0; i < objLength; i++) {
          let objKey = Object.values(myJSON)[i].title.rendered;
          let currentMovie = newState.data[objKey];
          
          currentMovie = {};
          currentMovie.name = Object.values(myJSON)[i].title.rendered;
          currentMovie.description = Object.values(myJSON)[i].content.rendered;
          currentMovie.featured_image = Object.values(myJSON)[i]['featured_image_url'];
          currentMovie.genre = Object.values(myJSON)[i]['genre'];          
        }
      
      this.setState(newState);
      });
  }

renderMovies()

O if (this.state.data) condicional significa que a função só será executada depois que os dados forem obtidos.

Aqui, recebemos um array de todos os nossos filmes buscados de this.state.data e o passamos para a função populatePageAfterFetch().

renderMovies() {
    if (this.state.data) {
      const moviesArray = Object.values(this.state.data)
      return Object.values(moviesArray).map((movie, index) => this.populatePageAfterFetch(movie, index));
    }
  }

populatePageAfterFetch()

Nessa função, vamos preparar os dados de cada filme para serem renderizados. Isso deve ser simples para qualquer pessoa que tenha usado o JSX, mas com um obstáculo em potencial.

O valor de movie.description não é texto simples, mas marcação em HTML. Para ver o valor, podemos usar dangerouslySetInnerHTML={{__html: movie.description}}.

populatePageAfterFetch(movie, index) {
    if (this.state.data) {

      return (
        <div key={index} index={index}> 
          <h2 className="name">{movie.name}</h2> 
          <h3 className="genre">{movie.genre}</h3>
          <div className="description" dangerouslySetInnerHTML={{__html: movie.description}} />
          <img className="featured_image" src={movie.featured_image} alt={movie.name} />
        </div>
      )
    }
  }

Observação: o motivo disso ser potencialmente "perigoso" é que, se seus dados forem hackeados e injetados com scripts XSS maliciosos, eles também serão analisados. Como estamos usando nosso próprio servidor/CMS neste artigo, não precisamos nos preocupar. Porém, se você quiser higienizar seu HTML, dê uma olhada no DOMPurify.

render()

Por fim, controlamos onde os dados renderizados aparecerão chamando o método renderMovies() dentro das tags <div> escolhidas. Acabamos de baixar e exibir dados do nosso site WordPress com sucesso!

render() {
      return (
      <>
        <h1>Movies</h1>
        <div>{this.renderMovies()}</div>
      </>
      )
  }

Conclusão

No geral, espero que este artigo tenha tirado o máximo possível da dor do processo de conectar um front-end em React a um back-end do WordPress.

Como tantas outras coisas na programação, o que pode parecer intimidador em princípio logo se torna natural com a prática!

A API React Context tornou-se a ferramenta de gerenciamento de estado (em inglês, state) favorita de muitos, por vezes substituindo completamente o Redux. Neste rápido tutorial de cinco minutos, você terá uma introdução sobre o que é o Context e como usá-lo!

Nota da tradução: nas traduções de textos a respeito de React e de outras tecnologias, sempre que os textos são relativos a versões anteriores da tecnologia, avisamos que, no momento da tradução, os resultados podem variar. Como o React passou por muitas mudanças em suas versões mais recentes desde que o texto original foi lançado, pode haver partes do código que não ajam como o esperado na época do lançamento do artigo original.  

Considere esta árvore, na qual as caixas inferiores representam diferentes componentes:

Podemos adicionar states (ou, em português, estados) aos componentes inferiores com facilidade, mas, até agora, a única maneira de passar dados para um componente irmão era mover o state para um componente superior e depois mandá-lo de novo para baixo até o irmão por meio de props.

Se, mais tarde, notarmos que o irmão do componente com o state também precisa dos dados, temos que elevar o state novamente e passá-lo de volta para baixo:

Embora essa solução funcione, os problemas começam quando um componente em um ramo diferente precisar dos dados:

Nesse caso, precisamos passar o state do topo da aplicação, passando por todos os componentes intermediários, até aquele que precisa dos dados lá no fundo, mesmo que os níveis intermediários não precisem deles. Este processo tedioso e demorado é conhecido como prop drilling.

É aí que entra a API Context. Ela oferece uma maneira de passar dados pela árvore de componentes por meio de um par provedor-consumidor (em inglês, provider-consumer) sem ter que passar props por cada nível. Pense nisso como os componentes brincando de bobinho com os dados – os componentes intermediários podem nem "saber" que alguma coisa está acontecendo:

Para demonstrar isso, vamos criar esta divertida (e utilíssima) imagem de troca de dia e noite.

Se quiser ver o código completo, dê uma olhada no playground do Scrimba deste artigo.

Criando o contexto

Para começar, criamos um contexto. Como queremos que toda a aplicação tenha acesso a ele, vamos ao index.js e envolvemos a aplicação com ThemeContext.Provider.

Também passamos a prop value para o nosso provedor. Ele armazena os dados que queremos salvar. Por enquanto, vamos apenas passar a string 'Dia'.

import React from "react";
import ReactDOM from "react-dom";
import ThemeContext from "./themeContext";

import App from "./App";

ReactDOM.render(
  <ThemeContext.Provider value={"Dia"}>
    <App />
  </ThemeContext.Provider>,
  document.getElementById("root")
);

Consumindo o contexto com contextType

No momento, no App.js, estamos apenas retornando o componente <Imagem />.

import React from "react";
import Imagem from "./Imagem";

class App extends React.Component {
  render() {
    return (
      <div className="app">
        <Imagem />
      </div>
    );
  }
}

export default App;

Nosso objetivo é usar o Context para alternar os nomes de classe em Imagem.js de Dia para Noite, dependendo de qual imagem queremos renderizar. Para isso, adicionamos uma propriedade estática ao nosso componente chamada ContextType e, em seguida, usamos a interpolação de string para adicioná-la aos classNames no componente <Imagem />.

Agora, os classNames contêm a string da prop value. Observação: eu movi o ThemeContext para um arquivo próprio para evitar um bug.

import React from "react";
import Botao from "./Botao";
import ThemeContext from "./themeContext";

class Imagem extends React.Component {
  render() {
    const theme = this.context;
    return (
      <div className={`${theme}-image image`}>
        <div className={`${theme}-ball ball`} />
        <Botao />
      </div>
    );
  }
}

Imagem.contextType = ThemeContext;

export default Imagem;

Context.Consumer

Infelizmente, essa abordagem só funciona com componentes baseados em classes. Se você já aprendeu sobre hooks em React (texto em inglês), deve saber que podemos fazer praticamente qualquer coisa com componentes funcionais hoje em dia. Portanto, como boa prática, devemos converter nossos componentes em componentes funcionais e daí usar o componente ThemeContext.Consumer para passar informações pela aplicação.

Fazemos isso envolvendo os elementos em uma instância de <ThemeContext.Consumer> e, dentro dela, (onde os componentes filhos ficam), declarando uma função que retorna esses elementos. Isso usa o padrão "render prop", onde fornecemos como filho uma função normal que retorna o JSX que será renderizado.

import React from "react";
import Botao from "./Botao";
import ThemeContext from "./themeContext";

function Imagem(props) {
  // Não precisamos mais disso
  // const theme = this.context

  return (
    <ThemeContext.Consumer>
      {theme => (
        <div className={`${theme}-image image`}>
          <div className={`${theme}-ball ball`} />
          <Botao />
        </div>
      )}
    </ThemeContext.Consumer>
  );
}

// Não precisamos mais disso
// Imagem.contextType = ThemeContext;

export default Imagem;

Observação: também precisamos envolver o componente <Botao /> no <ThemeContext.Consumer> para adicionar funcionalidade ao botão mais tarde.

import React from "react";
import ThemeContext from "./themeContext";

function Botao(props) {
  return (
    <ThemeContext.Consumer>
      {context => (
        <button className="botao">
          Switch
          <span role="img" aria-label="sol">
            ?
          </span>
          <span role="img" aria-label="lua">
            ?
          </span>
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

export default Botao;

Extraindo o provedor do contexto

No momento, estamos passando um valor imutável para o provedor. No entanto, nosso objetivo é usar o botão para alternar entre noite e dia.

Isso requer mover nosso provedor para um arquivo separado e colocá-lo em seu próprio componente, que, neste caso, é chamado de ThemeContextProvider.

import React, { Component } from "react";
const { Provider, Consumer } = React.createContext();

class ThemeContextProvider extends Component {
  render() {
    return <Provider value={"Dia"}>{this.props.children}</Provider>;
  }
}

export { ThemeContextProvider, Consumer as ThemeContextConsumer };

Observação: a propriedade value, agora, está sendo gerenciada no novo arquivo ThemeContext.js e, portanto, deve ser removida de index.js.

Alterando o contexto
Para configurar o botão, primeiro adicionamos o state ao ThemeContextProvider:

import React, { Component } from "react";
const { Provider, Consumer } = React.createContext();

// Note: você também pode usar hooks para criar o state e converter num componente funcional.
class ThemeContextProvider extends Component {
  state = {
    theme: "Dia"
  };
  render() {
    return <Provider value={"Dia"}>{this.props.children}</Provider>;
  }
}

export { ThemeContextProvider, Consumer as ThemeContextConsumer };

Em seguida, adicionamos um método para alternar entre dia e noite:

toggleTheme = () => {
  this.setState(prevState => {
    return {
      theme: prevState.theme === "Dia" ? "Noite" : "Dia"
    };
  });
};

Agora, alteramos nossa propriedade value para this.state.theme para que ela retorne as informações vindas do state.

 render() {
    return <Provider value={this.state.theme}>{this.props.children}</Provider>;
  }
}

Em seguida, alteramos value para um objeto contendo {theme: this.state.theme, toggleTheme: this.toggleTheme} e atualizamos todos os locais onde usamos um único valor para procurar o theme em um objeto. Isso significa que cada theme se torna context e cada referência ao theme como valor se torna context.theme.

Por fim, dizemos ao botão para escutar o evento onClick e, em seguida, acionar o context.toggleTheme – isso atualiza os consumidores que estão usando o state do provedor. O código para o botão fica assim:

import React from "react";
import { ThemeContextConsumer } from "./themeContext";

function Botao(props) {
  return (
    <ThemeContextConsumer>
      {context => (
        <button onClick={context.toggleTheme} className="botao">
          Switch
          <span role="img" aria-label="sol">
            ?
          </span>
          <span role="img" aria-label="lua">
            ?
          </span>
        </button>
      )}
    </ThemeContextConsumer>
  );
}

export default Botao;

Nosso botão, agora, alterna a imagem entre a noite e o dia com um só clique!

Ressalvas sobre o Context

Como todas as coisas boas na programação, existem algumas ressalvas no uso do Context:

Não use o Context para evitar prop drilling em apenas uma ou duas camadas. O Context é ótimo para gerenciar os state necessários para grandes porções de uma aplicação. No entanto, prop drilling é mais rápido se você estiver passando informações por algumas poucas camadas.

Evite usar o Context para salvar um state que deveria ser mantido localmente. Ou seja, se você precisar salvar as entradas de formulário de um usuário, por exemplo, use o state local em vez do Context.

Sempre envolva o provedor em torno do pai comum mais baixo possível na árvore, não do componente de nível mais alto na aplicação. Não precisa exagerar.

Por fim, se você passar um objeto como prop, monitore o desempenho e refatore conforme necessário. Isso, provavelmente, não será necessário, a menos que uma queda no desempenho seja perceptível.

Resumo

Este exemplo é bastante simples e, provavelmente, seria mais fácil colocar o state no App e passá-lo por meio de props. No entanto, espero que isso mostre o poder de usar os consumidores, que podem acessar dados independentemente dos componentes acima deles na árvore.

Se você quiser uma introdução mais detalhada sobre o assunto, pode entrar na lista de espera para o meu próximo curso avançado de React (em inglês), ou, se ainda for um iniciante, confira meu curso introdutório gratuito de React.

Boa programação para você! 😀

Desenvolvedores para a web full-stack são o canivete suíço do mundo da programação. Ter essa designação significa que você pode produzir soluções de ponta a ponta, um conjunto de habilidades altamente comercializáveis e ágeis. O que, no entanto, é realmente necessário para alcançar esse status?

Seja você novo, experiente ou especializado em uma das pontas da stack, há muito o que digerir aqui. Sinta-se livre para mergulhar fundo desde o início ou para pular direto para o tópico no qual você precisa de mais ajuda.

• Primeiro, o que realmente torna um desenvolvedor full-stack?
• Antes de seguir em frente, vamos falar sobre foco
• Então, por onde começamos?
• Front-end
• Back-end
• DevOps e a nuvem
• Design
• Outras coisas se você está apenas começando
• Outras coisas se você estiver procurando por mais

Primeiro, o que realmente torna um desenvolvedor full-stack?

É divertido e está na moda dizer que qualquer desenvolvedor de front-end é um desenvolvedor full-stack (texto em inglês), mas ser capaz de pôr um site no ar através do Netlify não o torna full-stack.

Não se sinta desencorajado – é só que, sendo realista, essa experiência por si só não será suficiente para justificar o título em sua próxima entrevista. Apesar de você estar tecnicamente criando e implantando seu trabalho do início ao fim, Netlify, Zeit e outros provedores dão a você o poder de fazer isso com suas ferramentas mágicas que removem a necessidade de realizar a maioria das operações da stack.

Não que eu queira desdenhar do que podemos realizar agora como desenvolvedores de front-end. O crescente movimento de compilar e fazer deploy de sites estáticos simplificou esse processo no lado do back-end, com benefícios para todos.

Além disso, com a flexibilidade das diferentes ferramentas disponíveis, como a possibilidade de executar JavaScript no servidor, nossas habilidades podem ser transferidas para mais casos de uso do que nunca.

De onde viemos

O cenário de desenvolvimento para a web está mudando rapidamente. O Wordpress vem sendo o rei do CMS há algum tempo, representando mais de um terço dos sites que usam CMS e ajudando o PHP a ganhar popularidade. Outros, contudo, preferem suas próprias soluções.

Essas "soluções próprias" representam uma stack da web mais tradicional, como a LAMP. Nesses casos, você tinha servidores da web, geralmente executando algum tipo de sistema de gerenciamento de conteúdo e uma linguagem do lado do servidor (como o PHP), que faria a interface com os bancos de dados e produziria o código que acabaria por ser entregue ao navegador.

Além disso, você pode ter o JavaScript fazendo alguns recursos interativos e CSS gerenciando a exibição da página. Agora, em alguns casos, basta ter um servidor gerenciado com Wordpress para determinados provedores. Outros sites maiores, porém, exigiriam outra equipe para gerenciar esses serviços e o pipeline de deploy para colocar o código em produção.

Onde estamos e para onde vamos

Embora o Wordpress não vá desaparecer tão cedo, as arquiteturas serverless e JAMstack estão ganhando força (textos e sites em inglês). Para quem não está familiarizado, a ideia não é literalmente a de que não existem servidores, mas de usar servidores que são gerenciados para você na nuvem.

Serviços como o AWS Lambda permitem criar uma "função" que processa entradas e saídas simples. Anexe-a ao gateway da API e você terá imediatamente um endpoint com o qual poderá interagir sem precisar gerenciar um servidor.

Outros, como o S3, deixam você despejar HTML, CSS, JS, imagens e qualquer outro recurso estático no armazenamento e servir o site diretamente neles. Nada é processado no servidor, você está simplesmente servindo os arquivos estáticos para o client.

A parte brilhante disso é que o servidor não fica sobrecarregado e normalmente sai bem mais barato. Em muitos casos, você também terá um enorme aumento de desempenho, já que servir um site usando o S3 exigirá menos processamento para enviar a primeira resposta ao navegador, o que pode levar a uma melhor experiência do usuário.

A ideia não é convencê-lo a usar o JAMstack, mas mostrar que o paradigma do full-stack está mudando e vale a pena prestar atenção nisso. Ainda existe uma noção conservadora da diferença no trabalho, mas isso está mudando.

Agora, são as equipes de DevOps que gerenciam recursos na nuvem e deploys. Os desenvolvedores de back-end agora criam APIs e código que fazem interface com serviços usando ferramentas como funções lambda. Os desenvolvedores de front-end trabalham principalmente com Javascript na criação de aplicações em React ou Vue, que acessam os serviços que os desenvolvedores de back-end criaram. Isso pode ou não incluir coisas como CSS, mas é mais um vespeiro discutir sobre em qual título essa tarefa se enquadra "oficialmente" (spoiler: depende da equipe).

Embora ainda haja uma noção de divisão de tarefas, a linha está ficando turva, tornando mais viável expandir o seu foco.

Antes de seguir em frente, vamos falar sobre foco

Pode ser bastante tentador querer mergulhar a fundo e tratar de todo o espectro de um desenvolvedor full-stack, mas há algo que precisa ser dito sobre foco. É a base da expressão "jack of all trades, master of none" (algo como "pau para toda obra, mestre de nada" em tradução livre), em que você tenta aprender um pouco de cada parte do full-stack, mas nunca domina nada de verdade.

Isso pode ser perigoso quando você ainda é um iniciante e está começando a desenvolver seus pontos fortes. Portanto, tente avaliar que tipo de aluno você é e concentre-se no que é importante. Se você estiver tendo dificuldades com um currículo muito abrangente, ele não necessariamente vai ajudá-lo a adquirir a experiência necessária para conseguir aquele primeiro emprego ou o emprego dos sonhos que você está buscando.

Uma abordagem diferente seria, por exemplo, ter um foco em particular, mas desenvolver suas habilidades full-stack ao redor desse ponto forte. Você pode ser um desenvolvedor de front-end que pode fazer deploy de suas próprias aplicações da web e constrói seu conhecimento em cima desse conhecimento fundamental.

Além disso, ser um desenvolvedor full-stack não é necessariamente ser capaz de dizer que você conhece as linguagens x, y e z. Entender de programação e conceitos de design de software, bem como ser capaz de enfrentar qualquer desafio pela frente, seja qual for a stack, é o que faz um grande desenvolvedor.

Resumindo, tente descobrir o que é melhor para você e não deixe que grandes ambições atrapalhem o domínio da sua jornada.

Então, por onde começamos?

Para fins deste artigo, vamos manter as divisões tradicionais que compõem a stack (front-end, back-end etc.). Embora algumas pessoas digam que isso não existe mais (texto em inglês), realisticamente, existe uma infinidade de empregos para desenvolvedores full-stack e, no dia a dia, eles se referem a essas divisões tradicionais. O "desenvolvedor full-stack" definitivamente veio para ficar.

No que diz respeito à stack, tenderemos às arquiteturas serverless/JAMstack, porque elas não param de crescer. Se você as aprender, isso só o tornará mais desejável, com diversos empregos surgindo em torno delas.

Como você notará abaixo, o objetivo não é ser abrangente com todos os tipos de banco de dados e todas as soluções de renderização. Um desenvolvedor forte deve ser capaz de ser flexível com suas ferramentas, se esforçando para entender os conceitos de seu trabalho, em vez de ter a mente fechada e só ser capaz de ser produtivo em um framework.

Em um momento, você pode estar confortável usando React no seu trabalho atual (e está tudo bem!), mas seu próximo trabalho pode ser pesado no Vue, ou ("surpresa!") seu líder de equipe decide reescrever a aplicação com Svelte. Tente entender por que você está usando um framework de interface do usuário em primeiro lugar e como ele está ajudando você a resolver o problema em questão.

Agora, vamos ao que interessa...

Front-end

O front-end de um site ou aplicação geralmente é a interface do usuário com a qual a pessoa que usa seu serviço interage. A linguagem de mais destaque aqui é o Javascript, do qual você normalmente dependerá para usar bibliotecas de interface de usuário, como o React ou o Vue, para gerenciar os componentes do seu projeto.

O uso desses frameworks de IU permite que você crie "componentes", essencialmente blocos de código que acabarão por produzir HTML com a capacidade de criar interações e estados dinâmicos junto com seu código. Isso é muito poderoso e, embora possa haver uma pequena curva de aprendizado no início, fica muito agradável de utilizar depois que você pega o jeito.

Seja você novo na área ou bem experiente, alguma hora você deve se deparar com o jQuery. Embora tenha seus méritos e tenha servido bem à comunidade, os recursos nativos do Javascript cresceram muito e diminuíram a demanda pela funcionalidade que o jQuery era capaz de fornecer. Agora, em vez disso, os desenvolvedores se utilizam dos frameworks de IU e do Javascript nativo.

Por isso, é bom entender o que é o jQuery, mas não recomendo dedicar seu tempo a aprendê-lo a essa altura. O lado bom é que, se você conseguir um trabalho que o use, pode escrever Javascript nativo junto com o jQuery. Então, aprender o Javascript puro é a resposta certa.

Então, o que devo aprender?

Se você realmente está começando agora, dedique seu tempo a aprender o básico do HTML e CSS. Pode não ser tão divertido e atraente como mergulhar direto no Javascript, mas ter uma boa base sobre os fundamentos (texto do autor em inglês) do que faz a web será a chave para começar com o pé direito.

Em seguida, aprenda Javascript. Ele continuará sendo o rei no futuro próximo. O Javascript fornecerá a base de qualquer framework ou biblioteca que você utilizar. Assim, entender os detalhes de como a linguagem em si funciona ajudará a impulsioná-lo em sua jornada para aprender o lado do front-end das coisas.

Isso também vai facilitar a sua vida quando você estiver tentando entender algumas das complexidades dos diferentes padrões e conceitos por trás dos frameworks que você usar.

Falando em frameworks, React e Vue são provavelmente os melhores candidatos, dada a sua popularidade. O React é o mais popular do grupo e vai continuar crescendo. Sua equipe está sempre trabalhando para amadurecer o framework e produzir APIs que ajudarão a criar aplicações para a web modernas e rápidas.

Iniciar um projeto com create-react-app ou Gatsby, inclusive, facilita a configuração de uma aplicação em React para que você esteja imediatamente pronto para mexer no código.

Embora haja benefícios em citar pré-processadores de CSS e ferramentas como o Sass, há uma porção de soluções agora para CSS, incluindo o CSS-in-JS.

Embora colocar o CSS dentro do JS tenha seus prós e contras (texto do autor em inglês), não vale necessariamente a pena indicar uma direção específica do que usar, já que depende muito da equipe.

Compreender o básico e o poder do CSS e como usá-lo em sua forma mais básica vai ajudar você a se preparar para utilizá-lo, independentemente do framework.

Recursos

• Certificação de Design responsivo para a web (novo) do freeCodeCamp
• Put Down the Javascript: Learn HTML & CSS first (artigo do autor em inglês)
• MDN Introdução ao Javascript
• Curso por e-mail Just Javascript (em inglês)
• Jogo educativo JSRobot (em inglês)
• Introdução ao React da reactjs.org (em inglês)
• Tutoriais da gatsbyjs.org (em inglês)

Back-end

No mundo do JAMstack, o back-end geralmente se refere às APIs que nossos front-ends usam para criar experiências dinâmicas ao interagir com os endpoints do client (como os das APIs CRUD). A possibilidade de fazer essas solicitações do lado do client elimina a necessidade de ter que fazer qualquer processamento antes que a página seja servida ao navegador.

Apesar de não ser bom achar que você só pode programar com uma linguagem, ser capaz de escrever em JavaScript dá uma boa vantagem aqui, já que você pode se introduzir aos fundamentos de trabalhar com o lado do back-end das coisas com uma linguagem familiar (ou vice-versa, com o front-end).

O NodeJS é um ambiente de tempo de execução comum, que você encontrará na maioria dos ambientes na nuvem como opção e que dará a você uma experiência semelhante ao que você esperaria em um navegador. A principal diferença é que você não terá acesso a determinadas APIs do navegador nem haverá um objeto Window com suas APIs associadas.

Dito isto, o Python também é outra linguagem popular que está crescendo, especialmente devido à sua popularidade na comunidade de ciência e engenharia de dados. PHP e Ruby, embora sejam ambos válidos e ofereçam opções no mercado de trabalho, não parecem ser tão populares e nem tendem a crescer tanto quanto Javascript e Python.

Com a linguagem de sua escolha, sua melhor aposta será aprender a criar serviços na nuvem com os quais suas aplicações possam interagir.

Criar um lambda simples com que você possa brincar, seja na AWS, na Netlify ou em qualquer outro provedor de serviços na nuvem, proporcionará uma boa experiência sobre o que você pode esperar ao trabalhar na área.

Mesmo que você não trabalhe diretamente em um lambda no emprego que conseguir, vai poder começar a se familiarizar com conceitos que são fundamentais para se trabalhar com o back-end. Cedo ou tarde, você usará essas funções para se conectar a outros serviços e bancos de dados para criar seus próprios serviços dinâmicos.

Então, o que devo aprender?

Se você já está se empenhando em aprender Javascript do lado do front-end das coisas, continue usando o Javascript para o seu back-end. Rode um lambda usando as funções do Netlify, onde você só precisa se concentrar no código e o Netlify cuida do resto (como compilar e fazer o deploy da função).

Com a sua linguagem de escolha e primeira função, tente começar a trabalhar com outros serviços dentro do seu código para adquirir experiência trabalhando com APIs de terceiros.

Talvez construir um endpoint que possa enviar um tweet usando a API do Twitter (mas não abuse dela). Aprenda a criar um banco de dados e configurar sua função para interagir com ele em um padrão CRUD. Isso dará a você um caso de uso mais realista de como uma aplicação típica pode interagir com um back-end.

Seu objetivo aqui deve ser criar serviços com os quais seu front-end interaja por meio de um endpoint para executar operações para a pessoa que usa sua aplicação. A boa notícia é que, dado o crescimento de tecnologias da nuvem, você terá uma porção de opções, algumas delas gratuitas, para começar a brincar.

Recursos

• Super simple start to Netlify functions (em inglês)
• Building Serverless CRUD apps with Netlify Functions & FaunaDB (em inglês)

DevOps e a nuvem

O DevOps decorre da necessidade de se criar soluções que suavizam e aceleram o processo de levar o código da sua escrita à sua implementação.

Esse trabalho pode variar de muitas responsabilidades a umas poucas, seja escrever scripts bash para uma solução personalizada, seja escrever um modelo de CloudFormation que cria todos os recursos necessários para que uma aplicação seja executada.

Normalmente, você encontrará isso como parte de uma orquestração maior de fluxos de trabalho de CI/CD que automatizam os processos de compilação e deploy.

Isso muda constantemente! Dada a febre do serverless, surgiu o framework serverless para gerenciar muito disso para você de uma maneira mais fácil, o que levou a AWS a criar sua própria solução, o SAM. Ferramentas como o Jenkins já existem há algum tempo para parte do CI/CD, mas agora estamos vendo o GitHub, o GitLab e outros provedores de controle de versão fornecerem suas próprias soluções. Vemos também ferramentas, como o CircleCI, que se conectam diretamente ao seu projeto.

Essas soluções, contudo, ainda não são perfeitas – escrever modelos do CloudFormation pode ser assustador. Escrever scripts de automação também não é muito divertido, embora seja supergratificante quando eles funcionam!

O processo, porém, está melhorando. É aí que produtos como Netlify e Zeit entram. Apesar de estarem mais enraizados no lado da hospedagem estática, onde você compila sua aplicação e a despeja no armazenamento, suas ofertas estão crescendo, como as Funções da Netlify, que não passam de AWS Lambdas mais fáceis de configurar e de fazer deploy para um endpoint totalmente funcional (é realmente superfácil).

Então, o que devo aprender?

Se for a primeira vez que você configura esse tipo de coisa, comece com o Netlify. Configure uma aplicação do React ou mesmo apenas um arquivo HTML simples em um repositório do GitHub, conecte-o a uma nova conta do Netlify e veja o deploy acontecer.

A partir daí, ou se você já tiver um pouco de experiência, comece a pesquisar sobre o que está acontecendo internamente. O Netlify, provavelmente, está pegando seu código, executando os comandos que você configurou (como yarn build) em um ambiente virtual, despejando os arquivos gerados em algum armazenamento, como o S3, e colocando uma CDN, como o CloudFront, na frente para servir de endpoint.

Primeiro, tente fazer isso manualmente do seu computador, usando o AWS Console e sua CLI e, em seguida, escreva um script para automatizar todo o processo de integração com o Circle CI em seu projeto no GitHub em vez do Netlify para que o deploy realmente aconteça no AWS.

Indo mais além, você pode criar serviços para fazer interface com o seu back-end. Você tem um banco de dados que seus serviços usam? Você pode automatizar a criação desse banco de dados usando CloudFormation ou scripts bash.

Tratar sua infraestrutura como código, com recursos descartáveis e facilmente recriáveis, ajudará você e seus projetos a se tornarem mais flexíveis e a terem uma melhor capacidade de voltar a funcionar em caso de falha.

Tudo isso vale para qualquer provedor de nuvem ou CI/CD, não apenas para a AWS e o Circle CI. Escolha sua ferramenta de nuvem e fluxo de trabalho favorita e mande ver. A questão é começar a observar as necessidades do seu projeto e descobrir o que realmente está acontecendo nas partes automatizadas da stack. Assim, você vai aprender mais e se tornará mais criativo para lidar com necessidades do seu projeto.

Recursos

• A Step-by-Step Guide: Deploying on Netlify (em inglês)
• Tutorial: Configuring a static website on Amazon S3 (em inglês)
• AWS Certified Cloud Practitioner Training 2019 - A Free 4-hour Video Course (em inglês)
• Consulte os recursos de Javascript da sessão de front-end acima

Design

Sim, você deve entender o básico de design. Não, você não precisa ser um designer.

Há muitos aspectos do design que acelerarão suas habilidades como desenvolvedor. Todo mundo sabe que designers visuais e de experiência do usuário fazem mágica, mas ter um entendimento básico pode impedir que sua aplicação se torne uma grande decepção.

Todos no processo de desenvolvimento estão trabalhando em direção a uma meta que afeta um usuário final de uma forma ou de outra. Ser capaz de entender quais necessidades seu trabalho está tentando resolver e como isso afeta os usuários ajudará a equipe como um todo a desenvolver uma solução final mais abrangente.

Considere um desenvolvedor de back-end criando uma API para permitir que alguém gerencie usuários em uma aplicação. Os requisitos da API são bastante enxutos e incluem apenas o nome do usuário. Fornecer isso como um único campo "nome" em vez de "nome" e "sobrenome" pode não ser a solução mais intuitiva para a maioria, mas pode ser um descuido que complica como o desenvolvedor do front-end expõe isso na interface do usuário, o que tornaria difícil para o desenvolvedor exibir ou poderia confundir o usuário final que está consumindo o produto.

Além de tudo isso, o design pode impactar diretamente a conversão. Se você estiver desenvolvendo na área de comércio eletrônico, fazer um botão que não se parece com um botão pode impedir que as pessoas adicionem um produto ao carrinho. Isso, é claro, impedirá uma compra, o que significa receita perdida. Entender como humanizar a interface do usuário, mesmo em um nível básico, pode literalmente gerar mais dinheiro para o seu projeto ou, pelo menos, ajudar as pessoas a usá-lo com mais facilidade.

Mais importante do que isso, é importante que seu site seja acessível. Muitas pessoas têm necessidades diferentes, seja porque elas não podem ver cores do mesmo jeito ou porque não podem ouvir os sons que sua aplicação produz. Você precisa reconhecer as necessidades alheias e tentar criar um design de tal modo que sua aplicação seja acessível a todos.

Então, o que devo aprender?

Embora eu não espere que você faça um curso inteiro para isso, tente ser consciente e curioso. Talvez, da próxima vez, não pule aquele artigo de design que você viu aparecer no Twitter do freeCodeCamp.

Ao criar soluções, tente imaginar como seu trabalho será usado. O que os outros desenvolvedores da sua equipe precisarão na sua API? O que as pessoas que usam sua aplicação precisam na sua interface?

Você também pode tentar se inspirar no que os outros estão fazendo em seu espaço. Que aparência você espera que uma aplicação tenha ao fornecer funcionalidades semelhantes? Isso não é licença para copiar ou roubar, mas é bom entender as necessidades que a solução está resolvendo. Reflita no motivo do botão Adicionar ao Carrinho ser tão grande, por que estão deixando os usuários darem zoom em uma foto de produto ou como você pode tornar o design de uma tabela um pouco mais utilizável.

Quanto à acessibilidade, tente aprender o básico. Há cada vez mais recursos disponíveis para ajudá-lo a entender as necessidades das pessoas. Tente entender quais deficiências existem e como elas podem afetar o uso da sua aplicação. Quem sabe, você poderá até encontrar alguns padrões comuns de como lidar com essas questões.

Na maioria das vezes, não é muito difícil incorporar essas questões. Se você adquirir o hábito de fazer isso desde o início, nem vai pensar sobre o assunto na próxima vez em que você construir uma aplicação.

Recursos

• Design for developers (em inglês)
• Hack Design (em inglês)
• Design for Hackers (em inglês)
• Introduction to Web Accessibility (em inglês)

Outras coisas se você está apenas começando

Muito deste artigo pressupõe que você já domine alguns conceitos básicos, como entender o que é o Git e o controle de versão ou simplesmente configurar o editor de código. Se você está mesmo começando só agora, vai ser útil ter pelo menos uma compreensão simples desses conceitos, porque vai ficar cada vez mais desafiador sem eles.

Também é preciso falar sobre aprender a usar o terminal. Pode ser assustador não usar uma GUI quando se está começando, mas uma vez que você começar a se acostumar, vai descobrir rapidamente que será mais produtivo usando um terminal, e, de qualquer maneira, muitos projetos exigem o uso do terminal.

Então, o que devo aprender?

Primeiro de tudo, configure seu editor de código. O Visual Studio Code está em alta agora, mas há outros que o servirão bem, dependendo de suas preferências, como o Atom ou o Sublime Text. Você também vai encontrar IDEs baseados na nuvem, como o Repl.it, ou pode começar com uma barreira de entrada mais baixa, brincando no CodePen ou no JSFiddle.

De qualquer modo, assim que estiver pronto para programar, você vai precisar entender o que é o controle de versão. O Git é o maior representante disso no momento. O Git é uma ferramenta poderosa que permite rastrear alterações no código e se tornar mais produtivo colaborando com outros desenvolvedores.

Familiarize-se com alguns dos comandos básicos do Git, como adicionar novas alterações, bem como o que são as branches e como usá-las. O mundo do Git é enorme, você não precisa dominá-lo imediatamente, mas logo vai aprender que há uma quantidade infinita de coisas novas para aprender em sua jornada para dominar o Git.

Muitas ferramentas que você vai usar, como o GitKraken, têm interfaces gráficas disponíveis, mas elas ainda são um pouco limitadas no que podem fazer. Aprender a lidar com os terminais padrão na sua máquina ou baixar outras opções, como o iterm2 (minha preferência) ou o Xterm.js, valerá mais a pena. Bônus: você vai se sentir como um hacker dos filmes toda vez que usá-los (ou será que sou só eu?).

Recursos

• Introduction to Visual Studio Code (em inglês)
• Tutoriais de Git do Github
• Learn Git Branching!
• Introduction to the command line on Mac (em inglês)

Outras coisas se você estiver procurando por mais

Existem muitas outras coisas em que você pode se aprofundar. Lembre-se de não dispersar o seu foco e tente não se sobrecarregar. Se, no entanto, estiver se sentindo confiante com a sua situação, há alguns outros conceitos que ajudarão você a enfrentar desafios no mundo real.

Testes e as diferentes metodologias

Escrever código é uma coisa, mas ser capaz de configurar testes eficazes solidificará o seu código e evitará que bugs apareçam. Você não quer perder seu tempo no futuro ou mesmo perder a renda do seu produto quando o site cair. Aprender a escrever testes e as diferentes abordagens é importante para solidificar seu código.

Ferramentas do navegador, como o Chrome DevTools

Uma das ferramentas mais poderosas que você pode ter ao depurar sua aplicação, na minha opinião, é ser capaz de fazer isso no navegador.

Seja observando como o DOM está sendo renderizado, mexendo no CSS (texto em inglês) ou depurando suas solicitações de rede, você aprenderá rapidamente a economizar tempo e identificar mais facilmente de onde o bug está vindo.

HTTP e como depurar solicitações no painel de rede

Já que a web é baseada na internet, sua aplicação acabará fazendo solicitações para outros servidores. Quando isso acontece, entender os gargalos de solicitação ou simplesmente como uma solicitação está sendo feita pode ajudá-lo a entender por que sua aplicação parece lenta ou por que o botão Salvar não está funcionando.

Ter uma compreensão básica de como as solicitações funcionam e de como visualizá-las para depuração ajudará muito na sua jornada.

Software de código aberto e gerenciadores de pacotes

Aqui, o assunto não é tanto sobre uma habilidade ou ferramenta para aprender, mas um modo como o software é distribuído. Ao começar a criar soluções com código, você logo perceberá que muitos de nós dependemos de pacotes de código aberto. Na maioria das vezes, é através do npm, se estiver escrevendo em Javascript, o que nos ajuda a sermos mais produtivos, já que não precisamos reinventar a roda toda vez.

Passe algum tempo entendendo o conceito de código aberto e até considere retribuir colaborando no seu projeto favorito. Dar uma mão é geralmente muito bem-vindo, além de ajudá-lo a ganhar experiência, e você pode até mesmo ganhar brindes no seu primeiro pull request aprovado (texto em inglês)! Porém, seja respeitoso! Há uma pessoa de verdade do outro lado da solicitação também.

O que mais?

Esta lista pode não acabar nunca, pois o mundo da programação é imenso. O que mais você acha que é importante na jornada para se tornar um mestre do desenvolvimento? Envie um tweet ou mensagem direta para o autor se acha que ele deixou passar algo importante!

Você está com tudo! Hora de unir todas as pontas

Dada toda a experiência que você terá acumulado com o que vimos, você já deve ser capaz de criar uma aplicação inteiro do início ao fim sozinho. Você tem ideia do poder que tem?

É aqui que a diversão começa. Tente criar uma aplicação do zero – não importa o que seja, basta criar algo. A melhor coisa que você pode fazer para aprender é ganhar experiência fazendo. Não importa se é um dos milhões de tutoriais de listas de tarefas por aí ou se vai se ensinar a programar construindo uma das maiores redes sociais, como o criador do Instagram (texto em inglês).

A partir daqui, você deve ser capaz de criar:

• Um front-end de aplicação da web que é executada no navegador
• Serviços de back-end para os quais sua aplicação da web pode fazer solicitações por meio de endpoints
• Escrever um script para se conectar a uma ferramenta de CI/CD para automatizar seu processo de compilação e deploy
• Bônus: tomar boas decisões sobre a aparência da sua interface para que as pessoas possam usá-la bem!

Vá em frente e desenvolva! Compartilhe com o autor sua jornada na programação no Twitter usando a hashtag #codejourney. Adoraríamos de saber mais sobre o que você passou, o que construiu ou para onde está indo e o que quer construir.

• Siga o autor no Twitter
• Inscreva-se no canal do autor no YouTube
• ✉️ Inscreva-se na newsletter do autor