E-commerce

Frontend

Technologio X – Wybieram Cię!

Grafika z logówkami technologii

Jak dobrać rozwiązanie frontendowe do Twoich wyzwań?Zanim Ash Ketchum stał się doświadczonym trenerem pokemonów, dobór tego właściwego nie był najłatwiejszą sprawą. Czy Squirtle poradzi sobie z ogniem, a Charmander nie ugnie się pod naporem skał? Czy Pikachu zawsze powinien być pierwszym wyborem?W świecie frontendowym od dawna krąży żart, że technologie, które były aktualne w zeszłym tygodniu, w obecnym są już przestarzałe. Jest to oczywiście przesada, jednak kryje się w tym ziarenko prawdy.

Mnogość rozwiązań rzeczywiście przyprawia o zawrót głowy. Co więc zrobić w sytuacji, kiedy wiemy, co chcemy stworzyć, ale nie mamy pewności, która metoda będzie najlepsza do osiągnięcia celu? Z pomocą przychodzi nam frontendowy Pokedex – przegląd technologii idealnie odpowiadających na dany problem projektowy.

Potrzebuję lekkiej i wygodnej w użyciu strony informacyjnej…

W tego typu projektach ważne jest, aby witryna działa szybko i sprawnie. 20 lat temu najlepszym rozwiązaniem byłoby napisanie jej w czystym HTML. Oczywiście utrzymanie takiego projektu byłoby dość trudne i czasochłonne. Na szczęście w tym momencie mamy rozwiązania, które oferują nam zarówno szybkość “czystego HTML”, jak również niezbędną funkcjonalność rozwiniętych frameworków. Przy tworzeniu takiego projektu warto zwrócić szczególnie uwagę na dwa narzędzia: Next.js oraz Gatsby. Oba bazują na powszechnie znanej bibliotece – React, ale wspierają błyskawiczne prototypowania i wdrożenie. W obydwu znajdziemy mechanizmy renderowania widoków po stronie serwera (SSR), co niesamowicie przyspiesza późniejsze korzystanie z witryny przez użytkowników. Narzędzia te są dodatkowo bardzo przyjazne deweloperom, więc rozwój projektu z ich użyciem powinien być szybki i łatwy. Warto też wspomnieć, że korzystając z tych rozwiązań, nasza strona będzie przyjazna dla wyszukiwarek i bez problemu poradzimy sobie z wymaganiami naszych specjalistów od SEO.

Kto używa: Hulu, Nike, Playstation Network, Spotify, Airbnb, Braun
Dostępność deweloperów: Bardzo duża. W zasadzie, każdy kto miał styczność z React poradzi sobie z tymi narzędziami.

Chciałbym skutecznie sprzedawać w Internecie…

Na rynku istnieje mnóstwo zintegrowanych rozwiązań e-commercowych. Jednak, gdy chcemy, aby nasza aplikacja sklepowa działała błyskawicznie, zapewniając jak najlepsze doświadczenia użytkownikom, warto rozdzielić rdzeń sklepu od narzędzia odpowiedzialnego za wyświetlanie naszych produktów. W tym aspekcie niekwestionowanym liderem jest Vue.js. Oparta o tę bibliotekę platforma Vue Storefront zapewnia doskonałe doświadczenia użytkownika, połączone z wygodnym developmentem opartym o integracje z dużymi, popularnymi platformami sprzedażowymi jak Magento, Shopware czy Sylius. Ze względu na wsparcie dla SSR, nasz sklep będzie dobrze współpracował z wyszukiwarkami. Vue umożliwia również tworzenie tzw. progresywnych aplikacji webowych (PWA), dzięki czemu przeniesienie naszego sklepu na urządzenia mobilne będzie dużo prostsze, niż budowanie osobnej aplikacji natywnej dla każdego z mobilnych systemów operacyjnych.

Kto używa: Netflix, Adobe, Grammarly, Alibaba
Dostępność deweloperów: Średnia, ale rośnie w błyskawicznym tempie.

Mam uporządkowaną i przemyślaną koncepcję na rozbudowaną aplikację…

Ze względu na swoją kompleksowość naturalnym wyborem jest Angular. Framework ten, aktywnie rozwijany od wielu lat przez Google, jest wszechstronnym rozwiązaniem, dzięki któremu w szybki i bezpieczny sposób zaprojektujemy i wykonamy nawet największe aplikacje. Popularne i oficjalnie wspierane biblioteki pozwolą nam błyskawicznie połączyć się na przykład z Firebase i skorzystać z autentykacji oferowanej przez Google, Facebook czy Microsoft. Dodatkowo duża biblioteka rozszerzalnych komponentów Material Design oraz jasno opisane zasady i dobre praktyki, ułatwią nam utrzymanie spójności całej aplikacji.

Kto używa: Samsung, Deutsche Bank, BMW, Microsoft
Dostępność deweloperów: Bardzo duża. Framework o ugruntowanej pozycji rynkowej.

Chciałbym szybko stworzyć prototyp pomysłu i przetestować go przed wdrożeniem…

W tym wypadku dobrym wyborem będzie biblioteka aplikacyjna React. Stworzona na wewnętrzne potrzeby przez inżynierów Facebook, jest nadal aktywnie rozwijana i utrzymywana przez ten wielki portal społecznościowy. Doskonale sprawdzi się do błyskawicznego prototypowania, a jej duża elastyczność pozwoli dobrać optymalne rozwiązania. Cały ekosystem stworzony wokół React pozwoli też w późniejszych etapach projektu przekształcić go w dojrzałą i wydajną aplikację, bez konieczności zmiany technologii.

Kto używa: Facebook, Instagram, Netflix, New York Times, Dropbox
Dostępność deweloperów: Bardzo duża. W tym momencie najpopularniejsza technologia frontendowa na rynku.

Chcę uruchomić aplikację mobilną…

Oczywiście, możemy dla każdej z platform mobilnych napisać i uruchomić dedykowaną, natywną aplikację stworzoną w jednym z rekomendowanych języków (np. Swift albo Kotlin). Możemy też pójść inną drogą i zbudować aplikację uniwersalną – posiadającą jedną bazę kodu, i uruchomić ją na wszystkich popularnych platformach jednocześnie. W takim wypadku warto wybrać jedno z wiodących narzędzi – React Native lub Ionic. Oba frameworki pozwalają na tworzenie zaawansowanych aplikacji mobilnych, bez konieczności angażowania dodatkowych środków i zasobów na każdą platformę. Największą zaletą tych rozwiązań jest jednorodna i uniwersalna baza, na podstawie której w prosty sposób buduje się finalne aplikacje. Oba narzędzia posiadają rozbudowane biblioteki komponentów i integracji, więc skorzystanie z dostępu do aparatu czy innych wbudowanych funkcji naszych smartfonów nie będzie stanowiło problemu.

Kto używa: Skype, Tesla, Airbnb, Uber Eats, Barclays, Electronic Arts, NASA
Dostępność deweloperów: Duża. Frameworki bazują na React i Angular – osoby z takim doświadczeniem poradzą sobie z nimi z łatwością.

Potrzebuję aplikacji serwerowej, która…

Dla niektórych może to być zaskoczeniem, ale nic nie stoi na przeszkodzie, aby za pomocą technologii frontendowych stworzyć pełnoprawną aplikację serwerową. Dzięki NestJS w szybki sposób możemy zbudować system o dowolnej wielkości czy złożoności. Framework oparty jest o popularne środowisko serwerowe Node.js. Jest kompleksowym rozwiązaniem z mnóstwem modułów dostępnych “w pudełku”, pozwalających m.in. na tworzenie architektury mikroserwisowej, łączenie z popularnymi bazami danych, czy też tworzenie aplikacji typu “stand-alone”. Wzorowana na Angularze architektura aplikacji jest przejrzysta, a rozbudowane CLI (command-line interface) pozwala na błyskawiczne tworzenie kolejnych modułów i komponentów.

Kto używa: Roche, Adidas, Autodesk, Decathlon
Dostępność deweloperów: Przeciętna. Osoby z doświadczeniem w Angular połączonym z wiedzą backendową nie powinny mieć problemów z pracą w tym frameworku.

Potrzebuję szybko uruchomić backend dla mojej aplikacji…

Tu też z pomocą przychodzi narzędzie opierające się o Node.js. Dzięki Strapi.io w zasadzie w kilka minut możemy uruchomić serwer z narzędziem administracyjnym pozwalającym przechowywać i zarządzać danymi. Dostarczone wraz z platformą pluginy pozwolą nam w błyskawiczny sposób uruchomić obsługę e-mail, upload plików czy zarządzanie uprawnieniami i rolami. Prosta architektura umożliwi nam także rozwijanie naszego systemu w przyszłości, bez konieczności inwestowania dużych środków.

Kto używa: IBM, Walmart, NASA
Dostępność deweloperów: Średnia. Samo uruchomienie platformy jest bardzo proste, jednak do jej rozwoju niezbędna jest większa wiedza.

Podsumowanie

Jak możemy zaobserwować, świat frontendu nie jest już tak jednorodny, jak kiedyś. Przed przystąpieniem do realizacji konkretnego projektu warto przez chwilę zastanowić się, czy technologia, którą chcemy wykorzystać jest rzeczywiście tą właściwą. Nie warto ulegać chwilowym trendom, ale nie powinno się także kurczowo trzymać rozwiązania, z którego korzystamy “od zawsze”. Gdy zagubimy się w poszukaniu odpowiedniego narzędzia, najlepszym pomysłem będzie skorzystanie z pomocy doświadczonego zespołu specjalistów, którzy pomogą nam dokonać najlepszego wyboru.

Zdjęcie profilowe Piotra Wegnera

Piotr Wegner

Lider obszarów Frontend i Product Design z kilkunastoletnim doświadczeniem w branży. Świeżo upieczony absolwent Executive Master of Business Administration IT. Change manager odpowiedzialny za promocję podejścia produktowego. FRISowy Wizjoner w myśleniu i Strateg w działaniu. Na pierwszy miejscu stawia ambicję oraz chęć działania – reszty można nauczyć każdego. Z Britenet związany jest od ponad 5 lat.