Reinkarnacja – Polskie Budowy v2

Reinkarnacja – Polskie Budowy v2

Postanowiłem, że przeprojektuję Polskie Budowy. Pisałem ten system w PHP, na początku używałem tylko jQuery do frontu. Jednak jak pojawił się nowy moduł, który miał obsługiwać wyceny budowlane, ich tworzenie i dynamiczne edytowanie to wpadł mi w oko Angular. Niestety w jQuery dostał bym białej gorączki jak miałbym dynamicznie zmieniać wartości w polach. Cały formularz jest bardzo duży i dynamicznie kalkulujące się wartości zabiły by bardzo szybko napisany skrypt. Dlatego użyłem Angulara. Pisałem to już 2 lata do tej pory. Przyszedł czas na pozyskanie klientów. Niestety idzie nam to opornie. Chcemy narazie pozyskać takich użytkowników by otrzymać feedback czy w ogóle jest zapotrzebowanie na tego typu rozwiązanie. Okazuje się, że jest, ale jest też wiele do poprawy, zarówno w projekcie, w marketingu i w wydajności.

Czym to jest?

Polskie Budowy to system z założenia obsługujący branżę budowlaną w zakresie planowania prac budowlanych, wyceniania prac, kosztorysowania, wyszukiwania przetargów prywatnych i publicznych, zgłaszania się w tych przetargach i wiele innych rzeczy. Aplikacja jest postawiona na szablonie, który napisany jest w Less i jQuery. Na początku nie przejmowałem się gotowymi skryptami i używałem ich takie jak są, bez modyfikacji i głębszego wgryzania się. Ważne, że działa. Niestety wtedy nie miałem na tyle doświadczenia żeby zastanowić się nad wydajnością. Chodzi tu oczywiście o frontend, bo serwer w PHP daje sobie radę spokojnie – jest to tylko API. Jednak jak w tym tygodniu usiadłem do tego okazuje się, że wydajność leży całkowicie. Na produkcji skrypty wykręcają duże czasy, a sam CSS to 2.5MB danych w jednym pliku, co po bundlingu pobierało się w 350ms – nie długo, ale 2.5MB??? Cały theme zajmuje ok 40MB ze wszystkimi komponentami, czego i tak w większości nie używam. Dodatkowo mam słabo rozwiązaną autoryzację użytkowników i przydało by się użyć SASS zamiast Less do budowania CSSów.

Decyzja…

Podjąłem decyzję o przepisaniu aplikacji Polskie Budowy. Wcześniej kiedyś tam wpadło mi do głowy rozwiązanie, które było by świetną kartą przetargową dla klientów – zapis real-time. Dzisiaj można to już w prosty sposób zrealizować. Zgłębiłem tematykę narzędzia o nazwie Firebase. Jest to swego rodzaju boilerplate dla projektów JavaScriptowych. Podłączam pod to Angulara i specjalne serwisy i można budować aplikację działającą real-time. Oczywiście wymaga to zaprojektowania backendu od nowa. Nie będzie już łączenia się z API PHP tylko baza NoSQL obiektowa z Firebase właśnie. Nie ma tam requestów zapisu, odczytu czy innych. Dzieje się to w czasie rzeczywistym, natychmiast – coś w rodzaju synchronizacji.

Największy na razie challange jaki mam to dostosować ten szablon nasz do Angulara – wszystkie rozbudowane i customowe skrypty w jQuery muszą działać, żeby sam szablon wyglądał i działał w pożądany sposób. Chciałbym zminimalizować pisanie elementów od nowa, skoro mam już szablon – chciałbym użyć tego co jest, ale niektóre elementy trzeba będzie przerobić na dyrektywy i komponenty. Na ten moment mam postawiony szablon i zrobione prowizoryczne logowanie przez Firebase (obsługują autentykację). Zamieniłem też skrypty menu na dyrektywę, która wywołuje pożądane zachowanie. W kolejnym kroku trzeba menu przerobić na dynamiczny komponent, który będzie pobierał strukturę w JSON, a następnie budował menu dynamicznie. Samo menu w tym szablonie ma 1500 linii kodu HTML! Myślę, że można sprowadzić to do około max 100 linii w HTML w połączeniu z Angularem.

Wersję produkcyjną możecie sobie zobaczyć tu: http://polskiebudowy.pl , a nawet się zarejestrować i poklikać.