Začínáme s React:Angular Edition

Zde na SparkPost máme „jednostránkovou JavaScriptovou aplikaci“, která se skládá z asi 50 000 řádků kódu Angular 1.x z počátku roku 2015 rozložených ve více než 400 souborech. Není to malá aplikace. A jak byste očekávali u téměř jakéhokoli jazyka nebo rámce po dobu 2 let, docela jsme se seznámili s dobrými, špatnými a ošklivými stránkami Angularu. Angular 2, který byl vydán jako „Final“ v září minulého roku, by se nám zdál jako docela přirozený. Ale název tohoto příspěvku to již prozradil:s největší pravděpodobností neupgradujeme na Angular 2.

Proč ne Angular 2? Většinou kvůli migrační cestě, která je silným argumentem pro zvažování téměř čehokoli jiného, ​​a možná trochu kvůli TypeScriptu, ale abych byl upřímný, je to hlavně proto, že je příjemné zkoušet nové věci. Nejsme agentura s novým projektem na zelené louce, který začíná každých pár týdnů nebo měsíců, kde můžeme testovat nejnovější pre-alfa verze našich oblíbených chytře pojmenovaných knihoven JavaScriptu. Padesát tisíc řádků kódu se mění pomalu. Ale tehdy se objevila „aplikace nástrojů“.

Vzácný projekt na zelené louce

Náš tým byl požádán, aby vytvořil sadu e-mailových nástrojů, které nebudou fungovat v naší stávající aplikaci. Tyto „hardcore e-mailové nástroje“ pomáhají vývojářům s hlubokým nastavením e-mailu – o takové věci se již staráme pro zákazníky SparkPost – takže jsme chtěli, aby měli svůj vlastní prostor za naším přihlášením. Najednou jsme měli místo k prozkoumání něčeho nového [hudba na harfu].

Přišli jsme s několika důležitými kritérii pro to, co bychom použili k vytvoření této nové aplikace:

  • Musí být snadné se to naučit
  • Potřebovalo být rychlé sestavení
  • Muselo to být něco, co bychom mohli stavět pod širým nebem
  • Nemusí to být Angular
  • Pravděpodobně to muselo být jen React

Po pečlivém a promyšleném zvážení těchto kritérií jako tým jsme dospěli k překvapivému rozhodnutí vyzkoušet React. V té době jsem byl předním odborníkem na React v našem týmu, protože jsem absolvoval jeden Udemy kurz na toto téma, a tak jsem začal něco dávat dohromady.

Některé věci jsme omylem udělali správně

Už jsme měli malou část aplikace navrženou a postavenou. Je těžké podcenit hodnotu navrženého, ​​stylizovaného a schváleného funkčního prototypu byť jen malé části vaší aplikace. Čas, který bylo možné strávit dohadováním se o umístění a formulaci tlačítek, byl nahrazen vymýšlením, jak aplikaci React spustit.

Když už jsme u toho, použili jsme aplikaci Create React. Představte si „html5boilerplate pro aplikace React“ nebo možná „Ember pro aplikace React“. CRA vám poskytuje funkční výchozí bod Reactu se všemi závislostmi (doslova může stáhnout všechny závislosti) a s funkční základní konfigurací Webpacku. Znovu se zaměřme na to, co jsme skutečně budovali. A když jste připraveni, CRA vám umožní „vysunout“ a převzít kontrolu nad celým nastavením. Je to fantastické a měli byste to používat.

Měli byste také najít designéra, který umí obojí. A obojím myslím design a rozumět Reactu. Vím, že je to velmi nespravedlivé navrhnout, protože se opravdu zdá, že je neuvěřitelně těžké najít, ale našli jsme jednoho z těchto kouzelných jednorožců a byli neocenitelní. (Dokonce jsem si teď vyhledal „neocenitelné“, abych si potvrdil, že to znamená opravdu zatraceně cenné.) Pokud můžete, udělejte si prioritu najmout do svého týmu takového člověka. (A díky, že jsi úžasný, Jone.)

Také jsme se brzy rozhodli vytvořit aplikaci pouze pomocí setState / local state, tj. žádný Flux, žádný Redux atd. Nakonec jsme přidali Redux – další téma na jindy – ale počínaje jednoduchou aplikací React to bylo mnohem jednodušší. na palubu nových vývojářů, kteří se seznamovali se spoustou věcí najednou. Nemluvě o tom, že čekání na Flux vám také umožní rozhodnout se, zda to vůbec potřebujete.

Několik dalších věcí, které bych doporučil na základě naší první zkušenosti:

  • K testování použijte Jest. Jest přichází s aplikací Create React a přestože je 100% Mocha/Chai ve všech našich ostatních projektech, bylo pro nás příliš těžké popřít, jak skvělý Jest je. Zvláště užitečné jsou pro nás úžasné Jest CLI a Snapshot testování.
  • Používejte nástroje pro vývojáře. Existují jedny pro React (Chrome, Firefox) a jedno speciálně pro Redux, pokud jej používáte. Jsou zdarma, fungují skvěle a jsou neuvěřitelně užitečné.
  • Najděte si skupinu lidí, kterým důvěřujete, požádejte je o radu a udělejte, co říkají. Mám to štěstí, že mám přátele v naší místní skupině setkání (CharmCityJs) a v komunitě NYC JavaScript (BoroJS), obě s aktivními týmy Slack. Umět se zeptat „co lidé používají pro x?“ byla obrovská pomoc, protože opravdu, stačí si něco vybrat. Důvěřovat někomu jinému je stejně dobrý důvod jako každý jiný.

Padesát tisíc řádků kódu se pomalu mění

A co ta aplikace Angular s 50 000 řádky? Nebudeme ji migrovat do Reactu, alespoň ne přímo, a také nemůže přežít jako aplikace Angular 1.x navždy. Ale tady je zajímavá věc, které jsem si všiml, když jsem se seznamoval s Reactem:v některých ohledech se o tolik neliší než Angular. Zde je komponenta Angular 1.5+:

const template = `<div>
  <h1>{{ "{{ banner.message " }}}}</h1>
  <button ng-click="banner.update()">Update message</button>
</div>`

class BannerCtrl {
  constructor() {
    this.message = 'Some default message'
  }

  update() {
    this.message = 'New message'
  }
}

export default angular.module('bannerComponent', [])
  .component('banner', {
    template,
    controller: BannerCtrl,
    controllerAs: 'banner'
  })

Pokud předstíráte, že řetězec šablony je nějaký JSX a vrátí se z metody vykreslování tohoto ovladače, v podstatě máte komponentu React (alespoň strukturálně). Takže místo toho, abychom se pokoušeli přenést 400 souborů starého kódu Angular s velkým ovladačem do nového rámce, naším plánem je zaměřit se na vzory. Konkrétně vzory „malých, zaměřených komponent“ a „jednosměrného toku dat“. O této druhé části povím více v pozdějším příspěvku o našich dobrodružstvích s Reduxem, ale přeměna našich obřích ovladačů na malé Angular komponenty má dvě velké výhody:

  1. Reagovat není navždy. Jakékoli přepisování/refaktorování velkých aplikací bude chvíli trvat, a pokud jste si toho nevšimli, ekosystém JavaScriptu se pohybuje velmi rychle. Tím, že se zaměříme na refaktorizaci naší stávající aplikace tak, aby používala lepší vzory, připravíme ji na migraci na cokoliv, co se stane nejlepším řešením v době, kdy jsme konečně v lepší kondici, abychom mohli tento krok provést.

  2. Iterativní, postupný vývoj je nebezpečný. Jedním z mých oblíbených obrázků, jak by měl fungovat „agilní vývoj“, je kresba Henrika Kniberga z prezentace na Spotify, která vysvětluje, jak být produktivním způsobem iterativní. Pravděpodobně jste to již viděli:

Pokud strávíme 6 až 9 měsíců nebo více pokusy o přepsání aplikace v Reactu a neuspějeme, dojde čas nebo práci odložíme na jiné priority, nakonec nemáme vůbec nic užitečného. Ale s plánem refactor-first je nejhorší věc, se kterou skončíme, lepší a lépe udržovatelná aplikace Angular. Jinými slovy, je to snadné rozhodnutí.

Angular, React, Kumbaya

Žádná lež, užili jsme si spoustu zábavy při vytváření naší nové aplikace nástrojů v React/Redux. Je to skvělá knihovna s fantastickým ekosystémem a spoustou dobrých vzorů. Ale abych byl upřímný, naše aplikace Angular již funguje, a to je v pořádku. Pokud spravujete velkou starší aplikaci, nezapomeňte:

  • Najděte malé projekty na zelené louce, kde můžete něco postavit pomocí nových nástrojů.
  • Zaměřte se na vzory a zjistěte, jak je můžete začlenit do své starší aplikace, aniž byste museli celou věc přepisovat.

Jak jsem již zmínil, vytvořili jsme to otevřeně, takže se můžete podívat na kód i na samotnou živou aplikaci. Pokud přicházíte z aplikace Angular, sepsal jsem spoustu poznámek o učení React, které mohou být užitečné i pro vás. Pokud byl pro vás tento příspěvek z nějakého důvodu zajímavý, vracejte se sem často, protože stále píšeme více o našich dobrodružstvích s Angular, React a vývojem front-endu. Máte-li nějaké dotazy nebo chcete-li ještě něco konkrétního, dejte nám vědět!

Tento příspěvek byl původně odeslán ze SparkPost.