Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Técnicas de Util Prototype

Técnicas de Util Prototype

Descreve técnicas de como criar protótipos de forma otimizada e reaproveitáveis no futuro

Matheus Monte

July 27, 2019
Tweet

More Decks by Matheus Monte

Other Decks in Programming

Transcript

  1. MVP

  2. –Usuários, clientes e Steakholders “Sucesso!” “Adorei Isso” “Exatamente o que

    eu queria” “Vai precisar aguentar 3 trilhões de usuários” “Novo unicórnio” “Precisa só mudar um pouco essa tela!”
  3. Vantagens • Reaproveitamento máximo de código já desenvolvido • Mantém

    a identidade visual dos produtos • Melhora a legibilidade e manutenção • Reduz o tempo de desenvolvimento
  4. A parte chata • Por que fazer isso para um

    teste? • Pensar em comportamentos variados • Construir o pacote inicial • Refino exagerado
  5. Exemplo import React,{useState, useEffect} from "react"; import './Timer.css'; function Timer(props){

    const [time, setTime] = useState(props.startTimer); useEffect(() =>{ let timerID = setInterval(() => tick(), 1000); return function cleanup(){ clearInterval(timerID); } }); function tick(){ if(time > 0){ setTime(time - 1); } } return( <div className="TimerContainer"> <p className="CountNumber">{time === 0 ? <marquee>{props.finishText}</marquee> : time }</p> </div> ) } export default Timer;
  6. Exemplo <Timer startTimer={13} finishText="time is over"/> <Timer startTimer={13} finishText="time is

    over"/> <Timer startTimer={13} finishText="time is over"/> <Timer startTimer={13} finishText="time is over"/> <Timer startTimer={13} finishText="time is over"/> <Timer startTimer={13} finishText="time is over"/>
  7. Vantagens • Foco nas regras de negócio • Abstração de

    infraestrutura • Sua linguagem preferida • Atomico • Custo
  8. A parte chata • Controle e organização de código •

    Sem “Utils" • Atomicidade • Cold Time
  9. Vantagens • Agilidade • Manutenção • Code once • Bom

    desempenho • Documentação disponível