Brainiac — zautomatyzowane budowanie aplikacji

Jak szybko tworzyć aplikacje, by zadowolić wymagania biznesowe i deweloperów? Te pytania zadaliśmy sobie w Brainly, kiedy zaczynaliśmy prace nad Brainiac — naszym ekosystemem / frameworkiem do tworzenia aplikacji.

Żeby było jasne — nie mówimy tutaj o nowym frameworku JS.  Brainiac to ekosystem lub framework do budowania pełnych systemów czy produktów.

Każda firma potrzebuje standardów, aby poruszać się szybko. Problemy, które chcieliśmy rozwiązać to:

1. Jak szybko przerzucać deweloperów pomiędzy zespołami bez dużej krzywej uczenia się? To częsty przypadek, kiedy priorytety się zmieniają i musimy przegrupować zespoły, aby skupić na najważniejszej rzeczy dla firmy (czyli optymalnym wykorzystaniu czasu i energii zespołów) – myślę, że jest to odczuwalne zwłaszcza w dzisiejszych czasach
2. Jak z prędkością światła tworzyć nowe produkty / subprodukty i dowozić je z jakością, tak, aby wyprzedzać konkurencję i zamiast spędzać 3 miesiące nad budową MVP, zbudować aplikację gotową do rozwoju w ciągu kilku dni?
3. Jak upewnić się, że baza kodu jest gotowa do aktualizacji bibliotek i utrzymana w dobrym stanie na przestrzeni czasu?
4. Jak upewnić się, że tworzony kod jest napisany w dobrej jakości, unit testami, e2e – bez potrzeby kompromisu, na który przystaje wiele firm: „Stwórzmy na razie bez testów, bo na testy nie ma czasu”

Odpowiedzią na te i inne pytania jest framework, który stworzyliśmy. W tym artykule nie chcę wchodzić w szczegóły techniczne, jak rozwiązaliśmy niektóre problemy, lecz przedstawić pełny obraz problemu i jego rozwiązania.

Czym jest Brainiac?

Jest to modułowy system, który pozwala na pracę w izolacji i budowanie horyzontalnych mikrofrontendów. Dzięki temu każdy zespół może pracować nad swoimi modułami bez przeszkadzania innym — co jest niezwykle istotne, kiedy firma rośnie i zatrudnia wielu nowych programistów. Pozwala też deweloperom zmieniać projekty bez pokonywania barier technologicznych, co powoduje, że mogą łatwiej korzystać z internal mobility (mobilność wewnątrz organizacji).

Oferty pracy z

Zalety Brainiaca

Brainiac oferuje wiele zalet i udogodnień dla zespołów pracujących nad dużymi i małymi projektami. Poniżej niektóre z jego najważniejszych cech:

Modułowość

Ekosystem ten został zaprojektowany w sposób modułowy, co oznacza, że każdy zespół może pracować nad swoimi modułami w izolacji. Dzięki temu praca jest bardziej efektywna, a każdy moduł może być rozwijany niezależnie. Wystarczy stworzyć sandbox (osobny storybook — generator od razu generuje storybooka) i rozwijać swój moduł, a na końcu po prostu wyrenderować go w aplikacji.

React

Brainiac jest oparty na React, co oznacza, że gdy zajdzie potrzeba do zwinnego skalowania zespołu/ów, możemy relatywnie szybko rekrutować programistów z  rynku.

Wbudowane generatory kodu

Brainiac ma wbudowane generatory kodu, co pozwala zaoszczędzić czas na pisaniu powtarzalnego kodu. Dzięki temu programiści mogą skupić się na rozwiązywaniu problemów produktowych zamiast na powtarzalnych czynnościach.

Integracja z NX

Brainiac jest zintegrowany z NX-em, które pozwala na zarządzanie dużymi monorepo. Dzięki temu Brainiac jest idealnym rozwiązaniem dla skalujących lub aspirujących do skalowania w przyszłości projektów, gdzie wiele zespołów pracuje nad różnymi częściami aplikacji.

Architektura

Brainiac składa się z czterech głównych elementów architektury: komponentów, usług, modułów i aplikacji. Każdy z tych elementów jest odpowiedzialny za określone zadania i jest zaprojektowany tak, aby umożliwić łatwą integrację i rozwój. Pozwala to na pracę granularną nad jednostkami systemu.

Open Source (soon)

Brainiac jest narzędziem wewnętrznym firmy Brainly, ale planujemy jego otwarte / publiczne udostępnienie. Dzięki temu inne firmy będą mogły skorzystać z naszej pracy i skrócić czas rozwoju własnych rozwiązań frontendowych. Spędziliśmy 2 lata na budowaniu tego ekosystemu i testowaniu różnych rozwiązań — społeczność i inne firmy, będą mogły skorzystać z naszej pracy.

Podsumowanie

Wyżej wymieniłem najważniejsze elementy naszego frameworku, ale wróćmy do 4 pytań postawionych we wprowadzeniu:

1. Jak szybko przerzucać deweloperów pomiędzy zespołami bez dużej krzywej uczenia się?
   Dzięki generatorom oraz takiej samej architekturze trzymamy jednolity kod i strukturę katalogów. Podział jest zawsze taki sam — UI komponenty, serwisy danych, moduły, które zlepiają te elementy i na samym końcu mamy aplikację, która służy tylko do routingu i renderowania modułów. Dzięki temu, że każda aplikacja czy moduł jest rozwijana w ten sam sposób — łatwo możemy przerzucać programistów pomiędzy zespołami, bo wszystko jest takie samo poza samą specyfikacją biznesową produktu.
2. Jak z prędkością światła tworzyć nowe produkty / subprodukty i dowozić je z jakością?
   Tutaj znowu — generatory. Generujemy wszystkie elementy architektury razem z testami E2E w Cypress i z unitami. Również generujemy konfigurację deploymentu danej aplikacji — więc stworzenie aplikacji i wypuszczenie tego live dzieją się automatycznie. Jedyne, co musimy zrobić, to zaimplementować logikę biznesową zgodnie z wyżej przedstawioną architekturą. W Brainly byliśmy w stanie wypuścić nowy projekt w 2 dni (razem z logiką biznesową) – z dobrą jakością kodu i testami.
3. Jak upewnić się, że baza kodu jest gotowa do aktualizacji bibliotek i utrzymana w dobrym stanie na przestrzeni czasu?
   Dzięki temu, że generujemy wszystko i trzymamy kod zorganizowany w ten sam sposób na przestrzeni całego monorepo — jesteśmy w stanie łatwo tworzyć codemody lub korzystać z tych dostarczonych przez twórców bibliotek — to sprawia, że aktualizowanie zależności jest znacznie łatwiejsze i mniej czasochłonne.
4. Jak upewnić się, że tworzony kod jest napisany w dobrej jakości, unit testami, e2e?
   Unit testy i e2e są generowane na bieżąco — wymagamy napisania przypadków testowych, również posiadamy własne akcje na Githubie, gdzie robimy statyczną analizę kodu za pomocą JSCodeshift, gdzie sprawdzamy, czy komponenty, serwisy i moduły napisane są w odpowiedni sposób, zgodnie z naszymi standardami. Weryfikujemy również, czy dany element został wygenerowany i trzyma wymaganą strukturę, czy nie. Dzięki NXowi mamy za darmo dependency graph — więc wiemy, co dokładnie zostało dotknięte na danym branchu, więc jak ktoś tworzy Pull Request — automatycznie odpalane są testy e2e i unit tylko dla dotkniętych modułów / serwisów / komponentów.

Standaryzacja procesów developmentowych jest bardzo ważna w każdej branży i dziedzinie biznesu, która opiera się na ciągłym rozwoju i innowacjach. Wprowadzenie standardów pozwala na lepsze zarządzanie procesami, a także umożliwia szybsze i bardziej efektywne rozwiązywanie problemów. Dzięki Brainiacowi procesy stają optymalne i inteligentne. Warto zainteresować się tematem bliżej: odwiedzić Brainly Tech Blog na Medium i obejrzeć videoprezentację zespołu frontendowego o tym ekosystemie.