Според „проучването“ на Nielsen Norman Group за времето за реакция в мрежата, когато зареждането на уебсайт отнема повече от 100 милисекунди, ние започваме да забелязваме забавянето и чувстваме, че компютърът „работи“ усилено по командата (но не достатъчно бързо за нашите очаквания). Това е проблем, с който се сблъскахме и в Hootsuite.

Тъй като се разраснахме, за да обслужваме по-големи клиенти - такива със стотици до хиляди членове и социални мрежи - нашите клиенти започнаха да изпитват проблеми с производителността като забавяне на зареждането, излишни комуникации със сървъра и не толкова удобни опреснявания на страници. Най-важното е, че страниците за управление на членове — където нашите клиенти организират връзките между членовете и социалните мрежи — може да отнеме повече от 500 милисекунди за изобразяване. Ние пренаписахме нашите страници за управление на членове с помощта на React + Flux и намалихме времето за зареждане на страницата до под 100ms; 80% спестявания. Това ранно подобрение ни кара да се вълнуваме да видим как React & Flux могат да се възползват от ефективността на останалата част от нашия сайт.

[caption id=”attachment_3387 align=”aligncenter” width=”500]

Предишна страница за управление на членове в BackboneJS[/caption]

Сбогом, гръбнак

В приложението представяме резюмето на профила на потребителя, организациите, към които принадлежи, и списъка със социални акаунти, които могат да използват. Първоначално създаден с BackboneJS, той ни помогна да дадем структура на този раздел и да експериментираме със зряла javascript рамка. Въпреки това, той не се мащабира добре с големи клиенти, защото е претоварен с излишни ajax заявки и опреснявания на страници поради липсата на централизирано съхранение на данни от страна на клиента. За да разрешим тези проблеми, внедрихме повторно този раздел с React и Flux с внедряване на Flummox.

Здравейте React & Flux

На първо място, React ни предлага повторно използваеми UI компоненти, които можем лесно да поддържаме и да сме в крак с промените в дизайна. За този раздел внедрихме набор от общи компоненти за многократна употреба като аватари, бутони и икони в сътрудничество с дизайнерския екип. Това предотврати несъответствието на потребителския интерфейс в приложението, намалявайки усилията на разработчиците при внедряването на тези компоненти и ни предоставя по-добър начин да организираме структурата на предния край.

Ето потребителския интерфейс за компонента OrganizationItem React. Той има два общи компонента на библиотеката: Button и StandardIcon. Използването на общи компоненти осигурява последователно потребителско изживяване и намалява времето за поддръжка на разработчиците при промяна на дизайна. Самият този контейнерен компонент може лесно да се повтори и покаже като колекция от обобщения на организацията:

Компонентите на React като този се управляват от данни от магазина на Flux. Flux ни помага да създадем универсален магазин, който е достъпен в предния край и уеднаквява данните, които ще комуникираме към задния край. Разделът за управление на членове се захранва от три магазина на Flux: магазин за членове, организации и социални профили, заедно с техния набор от действия. Съществуващият поток от данни е обезпокоителен, защото получаваме данни от ajax заявки и подаваме ad hoc рендера. Например, ако потребител се опита да добави нов социален профил, приложението обикновено ще изпълни следното:

Той върши работата, но е специфичен за случая и е труден за поддръжка и синхронизиране, което създава технически дълг.

Свързвайки компонентите на React с Flux, ние контролираме формата на данните в едно централизирано място, което автоматично ще рендерира нашите компоненти, ако състоянието на съответния магазин се е променило. Диаграмата по-долу демонстрира моментна снимка на магазина SocialProfile Flux. Различни действия протичат през диспечера, който комуникира с бекенда с единствения източник на истина, отделяйки манипулирането на данни от слоя на потребителския интерфейс:

В резултат на това намалихме времето за изобразяване на секцията за управление на членове до по-малко от 100 ms. По-горе има графика, заснета по време на фазата на внедряване на новото внедряване. Както е показано, новото време за рендиране (в червено) е около 100 ms, а оригиналната версия е непостоянно бавна. Освен това, ако необходимите данни се заредят в хранилището на Flux от други области на приложението, управлението на членовете сега се зарежда и изобразява незабавно. Сега данните и потребителските взаимодействия са свързани директно с магазина на Flux, броят на заявките за ajax беше намален и няма повече принудително опресняване на страницата.

[caption id=”attachment_3385 align=”aligncenter” width=”500]

Нова страница за управление на членове, вградена в React[/caption]

Повече реакция

С нетърпение, моят екип и аз сме много развълнувани да въведем Flux и React в повече области на приложението. Чрез използването на универсалния магазин на Flux и React компонентите за многократна употреба, това ще направи Hootsuite по-бърз, по-лесен за поддръжка и по-мащабируем.

Специални благодарности на моя колега Gabriel за това, че ми помогна да напиша това и на Kimli за редактирането на копието. :)

Допълнителна литература:

За автора

Катрин е софтуерен инженер в екипа на Engagement. Тя обича разработването на уеб и мобилни приложения и прекарва много време с котката си „Боузър“. Следвайте я в Twitter @catherinettt.