Serverless for Startups — A quick way to build and validate your ideas.

High Order Components com React para iniciantes

Métodos do ciclo de vida de componentes ReactJS


Serverless is considered a huge Lego construction. Add every piece you need, build fast, and hit the market as quickly as possible.

For a tech startup, there has never been a better time to build a product. To start genuinely and without spending too much on the start, serverless is a great option. When the cloud first appeared, it allowed us to rent parts and run our operations locally; and serverless now allows us to execute code and not worry about how it happens. This is incredibly powerful for startups, but many still do not understand why.

The cloud has given us the ability to do without infrastructure. We were able to rent servers, storage and networks as easily as renting an office. This on-demand approach enabled a faster and cheaper way of testing ideas and then “scale up” if they succeeded. Smart startups were among the first companies to recognize the sheer scale of this idea. But the cloud is still complicated, and you really need to know what you’re doing in order to orchestrate all moving parts successfully.

Serverless joined the fray a few years ago and changed this model. It analyzes the code and the services required for a platform to function and executes them for you. In the background, there are still servers running, but you no longer have to manage, fix, or maintain anything. It’s the age of noOps, it’s the next iteration of the cloud, allowing you to focus solely on what matters in your product development instead of on the hard work of the underlying stack.

In the first two years of serverless, most were used for specific small-scale tasks such as resizing images, running reports, or running small infrastructure processes. But serverless capabilities have come of age in the last 12 months and you can create a surprising amount of your applications — sometimes all of them — by using a serverless architecture approach.

## The benefits of serverless for startups

There are some important things you need to care about as a startup. First, affordable serverless applications are really very cheap. While the cloud is definitely cheap, you still pay for virtual servers that do not run at full capacity, load balancers that may not do much, and storage blocks that aren’t fully used. You also have to pay for someone to manage it all.

With serverless, you pay for what you use. This means that you will only pay when the code is executed, paying for actually used storage bytes, and the hidden infrastructure support to scale it all is embedded in these figures. It is truly a measured service. For example, on AWS Lambda, you pay USD 0.20 per million requests when the code is executed. In practice, I’ve seen that this usually means that you can pay 70 to 90% less for your infrastructure compared to the cloud equivalent.

Sizing is also a gift for startups. Typically, the gap between the Minimum Viable Product and the Final Product can mean significant rewriting and redesigning of the application. That’s because you create the absolute minimum to test an idea, and that’s not enough for an end product. Most MVPs consist of largely disposable work because of this gap.

With serverless, the design is broken down into much smaller units connected by functions. This code usually does not need any rework as the application receives more traffic because these functions are very small and specific. They can search for a user profile, transcode a video, or send an SMS notification — the difference between MVP and production is purely scaled in these cases. The main benefit of serverless is that sizing is done for you — whether it’s a function performed once a day or thousands of times a minute, the cloud provider ensures that happens.

Finally, there is flexibility. In all startup ideas, the concept changes substantially and functionality changes rapidly. With serverless, it is relatively simple to keep up with the pace of change because the application is made up of dozens of very small units. You can upgrade and change these units without affecting the overall app, and this responsive structure makes it a perfect choice for startups where you often change the engines of the plane mid-flight.

## Commodification

The history of technology has always been the constant commodification of storage, computing, and networking, as a byproduct of the three becoming exponentially faster or cheaper. Much of this is happening so quickly now that it may be easy to dismiss an obvious trend as a fad or fail to notice when you are working on technology issues that have no real value.

The Cloud made it clear that datacenter execution only made sense on a large scale, and even big companies that choose to manage their own resources were not allocating their resources well. As these providers have enhanced automation and provisioning of virtual machines, there is now a clear case that even managing them is a task better performed at scale.

For startups, this means you shouldn’t use any of your scarce resources on technology issues that you can solve. The serverless mindset lets you devote all your engineers to solving business problems and spend very little of their time on server management and infrastructure.

While Amazon and other companies will continue to increase their user numbers, if you focus on differentiation capabilities, this process will work in your favor. Simply put, this is a very bad time to work on infrastructure management, but it is a good time to create solutions that meet business needs.

## Adopting the serverless mindset

Serverless is evolving rapidly; it has become a federation of different managed services. This typically includes Functions-as-a-Service (the code you run), storage and delivery of objects, databases, networking, and security. In the AWS world, this is equivalent to Lambda, S3, CloudFront, DynamoDB, Route53, and IAM, but there are similar services in Microsoft Azure and Google Cloud.

These services are like Lego. If you break your technology product down into a flowchart, you can find out which Lego pieces you need to perform each step. For example, a very simple service that retrieves user orders and receipts might look like this:

<img alt="" class="bh le na c" width="1000" height="264" loading="eager" role="presentation" src="https://miro.medium.com/v2/resize:fit:2000/0*9nlZd8tJtd2laJ-e">

The mapping of these steps in AWS tools could be modeled as follows:

<img alt="" class="bh le na c" width="1000" height="563" loading="eager" role="presentation" src="https://miro.medium.com/v2/resize:fit:2000/1*1uZXx8pNIlKNmum2eQPj-g.png">

Identifying the events known as triggers for things to happen and where information is stored or managed are the first steps to breaking down tasks. In most early diagrams, the steps tend to be very rough (for example, “Find user recommendations”), but subsequent iterations can split exact functionality, simplifying serverless conversion.

There are now many pessimists who will discard limitations of this model before considering what it brings to the table. <b>For latency-sensitive applications or compute-intensive activities, serverless is probably not the answer.</b> But in every startup product I’ve ever seen, even these services have user interfaces, websites, and asynchronous elements throughout the project that can be handled perfectly that way.

## It’s all about the business benefit

A large start-up case study is A Cloud Guru, a popular training site for engineers with 600,000 global clients. This platform was built using serverless tools from the start and has been scaled to deliver a large amount of media to a fast-growing user base.

This web application consists of 287 Lambda functions with almost 4 terabytes of data stored in S3. These functions are used more than 6 million times a day. In any other system project, this would require a large amount of infrastructure to build, monitor, and maintain. However, by August 2018, the Cloud Guru project cost for Lambda was only USD 580 per month.

In this case, the business focuses its efforts on where users receive the most value — that is, quality training — rather than on delivery infrastructure. In many ways, the transcoding and streaming mechanisms of these videos are mundane and commoditized, so the company has taken the smart step in delivering these processes to AWS.

I am really excited about what serverless means for startups. As Rupert Murdoch said, “The world is changing very fast. The big will no longer defeat the little. The fast will beat the slow.” Serverless gives us the best chance to deliver quickly, use our limited resources to focus on our products, and use speed and agility to our advantage.

_Originally published in the [Creditas Tech](https://medium.com/creditas-tech/serverless-for-startups-a-quick-way-to-build-and-validate-your-ideas-4890dbfe0bf3)_

Serverless is considered a huge Lego construction. Add every piece you need, build fast, and hit the market as quickly as possible.


## Prefácio

Estou escrevendo isso porque todos os outros artigos — incluindo a documentação oficial do React sobre componentes de ordem superior — é um inferno para compreender enquanto iniciante. Compreendi que os Componentes de Ordem Superior (High Order Components) eram uma coisa, mas eu realmente não entendia como eram úteis. Este artigo tem como objetivo esclarecer sobre esse tipo de componente as famosas HOCs.

Antes de poder entender HOCs, primeiro devemos entender algumas coisas sobre funções em JavaScript.

## Breve introdução sobre arrow functions em ES6

Este artigo fornecerá exemplos exclusivamente usando as <b>arrow functions</b> do ES6. Se você nunca viu uma <b>arrow function</b> antes, elas são essencialmente equivalentes a função regular. O código abaixo mostra as diferenças entre funções regulares e arrow functions.

```
function () {
  return 42
}

// same as:
() => 42

// same as:
() => {
  return 42
}

function person(name) {
  return { name: name }
}

// same as:
(name) => {
  return { name: name }
}
```

Leia a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions" target="_blank">documentação de arrow functions no MDN</a> no MDN para uma compreensão mais completa.

## Funções como Valores e Aplicação Parcial

Assim como números, strings, booleans, etc., as funções são valores . Isso significa que você pode passar funções ao redor como qualquer outro dado. Você pode passar uma função como um argumento para outra função:

```
const execute = (someFunction) => someFunction()

execute(() => alert('Executed'))

```

E você pode retornar uma função de uma função.

```
const getOne = () => () => 1

getOne()()

```

A razão pela qual temos dois ()depois dogetOneé que a primeira aplicação da função retorna outra. Ilustração:

```
const getOne = () => () => 1

getOne
//=> () => () => 1

getOne()
//=> () => 1

getOne()()
//=> 1
```

A coisa útil sobre funções que retorna funções é que podemos escrever funções que acompanham a entrada inicial. Por exemplo, a função abaixo aceita um número como argumento e retorna uma função que multiplica esse argumento por um novo:

```
const multiply = (x) => (y) => x * y
multiply(5)(20)
```

Este exemplo funciona da mesma forma que <b>getOne<b>, cada parêntese aplica alguma entrada para a função. Neste caso, estamos atribuindo ```x``` a ```5``` e ```y``` para ```20```.

```
const multiply = (x) => (y) => x * y

multiply
//=> (x) => (y) => x * y

multiply(5)
//=> (y) => 5 * y

multiply(5)(20)
//=> 5 * 20
```

Quando chamamos a função ```multiply``` com apenas um argumento, estamos parcialmente aplicando a função. Quando chamamos ```multiply(5)```, obtemos uma função que irá multiplicar a entrada em 5. Se chamarmos ```multiply(7)```, obteremos uma função que irá multiplicar a entrada por 7 e assim por diante. Podemos usar uma aplicação parcial para criar novas funções com uma entrada predefinida:

```
const multiply = (x) => (y) => x * y

const multiplyByFive = multiply(5)

const multiplyBy100 = multiply(100)

multiplyByFive(20)
//=> 100

multiply(5)(20)
//=> 100

multiplyBy100(5)
//=> 500

multiply(100)(5)
//=> 500
```

Isso pode não parecer super útil no início. No entanto, você pode usar uma aplicação parcial para escrever um código que seja mais fácil de ler e raciocinar. Por exemplo, podemos substituir <code><a class="af ni" href="https://www.styled-components.com/docs/basics#adapting-based-on-props" rel="noopener ugc nofollow" target="_blank">styled-components</a></code> sintaxe de interpolação de função complexa com algo um pouco mais limpo.

```

// before

const Button = styled.button`
  background-color: ${({ theme }) => theme.bgColor}
  color: ${({ theme }) => theme.textColor}
`;

<Button theme={themes.primary}>Submit</Button>

// after

const fromTheme = (prop) => ({ theme }) => theme[prop]

const Button = styled.button`
  background-color: ${fromTheme("bgColor")}
  color: ${fromTheme("textColor")}
`

<Button theme={themes.primary}>Submit</Button>

```

Criamos uma função que aceita uma seqüência de caracteres como um parâmetro: ```fromTheme("textColor")``` que retorna uma função aceitando um objeto com uma propriedade ```theme:({ theme }) => theme[prop]``` a qual tentamos pesquisar através da cadeia inicial que passamos ```"textColor"```. Podemos ir além e escrever funções como ```backgroundColor``` e ```textColor``` que parcialmente aplicam a função fromTheme:


```

const fromTheme = (prop) => ({ theme }) => theme[prop]
const backgroundColor = fromTheme("bgColor")
const textColor = fromTheme("textColor")
const Button = styled.button`
  background-color: ${backgroundColor}
  color: ${textColor}
`

```

## Funções de ordem superior

As funções de ordem superior são definidas como funções que aceitam uma função como um argumento. Você já pode estar familiarizado com funções de ordem superior se você já usou uma função como ```map```. Se você não está familiarizado ```map```, é uma função que se desloca e aplica uma função a cada elemento em uma matriz. Por exemplo, você pode colocar uma matriz de números como assim:

```
const square = (x) => x * x

[1, 2, 3].map(square)

//=> [ 1, 4, 9 ]
```

Podemos escrever nossa própria versão ```map``` para ilustrar este conceito:

```

const map = (fn, array) => {
  const mappedArray = []
for (let i = 0; i < array.length; i++) {
    mappedArray.push(
      // apply fn with the current element of the array
      fn(array[i])
    )
  }
return mappedArray
}


```

Podemos usar o nosso ```map``` para fazer algo como quadrado uma série de números:

```

const square = (x) => x * x

console.log(map(square, [1, 2, 3, 4, 5]))

//=> [ 1, 4, 9, 16, 25 ]
```

Ou devolva uma matriz de ```<li>```React Elements:

```
const HeroList = ({ heroes }) => (
  <ul>
    {map((hero) => (
      <li key={hero}>{hero}</li>
    ), heroes)}
  </ul>
)
<HeroList heroes=[
  "Wonder Woman",
  "Black Widow",
  "Spider Man",
  "Storm",
  "Deadpool"
]/>
/*=> (
  <ul>
    <li>Wonder Woman</li>
    <li>Black Widow</li>
    <li>Spider Man</li>
    <li>Storm</li>
    <li>Deadpool</li>
  </ul>
)*/

```

## Componentes de ordem superior

Sabemos que uma função de ordem superior é uma função que aceita uma função como argumento. Em React, qualquer função que retorna JSXé conhecida como Componente Funcional sem Estado. Um Componente Funcional básico parece assim:

```
const Title = (props) => <h1>{props.children}</h1>

<Title>Higher-Order Components(HOCs) for React Newbies</Title>

//=> <h1>Higher-Order Components(HOCs) for React Newbies</h1>
```

Um componente de ordem superior é uma função que aceita um Componente como um argumento e retorna um novo Componente. Como você usa o componente passado depende de você. Você pode ignorá-lo completamente:

```
// Technically an HOC
const ignore = (anything) => (props) => <h1>:)</h1>
const IgnoreHeroList = ignore(HeroList)
<IgnoreHeroList />
//=> <h1> :| </h1>

```

Você pode escrever um HOC que transforma sua entrada em maiúscula:

```

const yell = (PassedComponent) =>
  ({ children, ...props }) =>
    <PassedComponent {...props}>
      {children.toUpperCase()}!
    </PassedComponent>
const Title = (props) => <h1>{props.children}</h1>
const AngryTitle = yell(Title)
<AngryTitle>Whatever</AngryTitle>
//=> <h1>WHATEVER!</h1>

```

Você também pode retornar um Componente Stateful, porque as classes em Javascript são <i>syntax</i> sugar para funções. Isso permite que você se encaixe nos métodos do lifecycle do React como ```componentDidMount```. É aí que os HOCs se tornam realmente úteis. Agora podemos fazer coisas como passar o resultado de uma solicitação HTTP como adereços para um Componente Funcional.

```
const withGists = (PassedComponent) =>
  class WithGists extends React.Component {
    state = {
      gists: []
    }
componentDidMount() {
      fetch("https://api.github.com/gists/public")
      .then((r) => r.json())
      .then((gists) => this.setState({
        gists: gists
      }))
    }
render() {
      return (
        <PassedComponent
          {...this.props}
          gists={this.state.gists}
        />
      )
    }
  }
const Gists = ({ gists }) => (
  <pre>{JSON.stringify(gists, null, 2)}</pre>
)
const GistsList = withGists(Gists)
<GistsList />
//=> Before api request finishes:
// <Gists gists={[]} />
//
//=> After api request finishes:
// <Gists gists={[
//  { /* … */ },
//  { /* … */ },
//  { /* … */ }
// ]} />

```

Você pode ligar ```withGists``` para qualquer componente e irá passar para baixo o resultado da chamada api gists. Você pode ver um exemplo mais detalhado disso <a href="https://codesandbox.io/embed/o2YpJnpDj" target="_blank">aqui</a>.

## Conclusão: HOCs são 🔥 🔥 🔥

Redux usa um HOC, <a href="https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options" target="_blank">connect</a> para passar valores da sua loja de aplicativos para componentes "conectados". Também faz algumas verificações de erros e otimizações do ciclo de vida do componente que, se feito manualmente, faria com que você escrevesse uma tonelada de código de referência.

Se você se achar escrevendo muitos códigos em diferentes lugares que faz o mesmo, você poderá refatorar esse código em um HOC reutilizável.

Os HOCs são realmente expressivos e você pode construir muitas coisas legais com eles. No entanto, porque eles são tão expressivos, você pode ir ao mar com eles se quiser.

Tente manter seus HOCs simples e apontar para escrever um código que não exija que você leia um artigo longo para entendê-lo.

## Exercícios adicionais

Aqui estão alguns exercícios para solidificar sua compreensão de HOCs:

- Escreva um HOC que reverte sua entrada
- Escreva um HOC que fornece dados de uma API para o Componente Passado
- Escreva um HOC que implemente <a href="https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate" target="_blank">shouldComponentUpdate</a><a href="https://facebook.github.io/react/docs/optimizing-performance.html#avoid-reconciliation" target="_blank">para evitar a reconciliação</a>
- Escreva um HOC que use <a href="https://facebook.github.io/react/docs/react-api.html#react.children.toarray" target="_blank">React.Children.toArray</a> para ordenar as crianças passadas para o componente Passed.


_Originally published in the [Creditas Tech](https://medium.com/creditas-tech/high-order-components-para-iniciantes-b4c80e054b7e)_

Como dar novos poderes as suas funções e componentes utilizando composição e o conceito de High Order Functions / High Order Components.

Stories. Updates. Guides.

Featured Articles

Serverless for Startups — A quick way to build and validate your ideas.

High Order Components com React para iniciantes

All Articles