Przedstawiam mój projekt: polskifrontend.pl!

Jeśli subskrybujesz mój Newsletter to być może wiesz już, że ostatnio pracowałem w pocie czoła nad pewnym moim prywatnym projekcikiem… W sumie w ostatnim wpisie też coś tam o tym przebąknąłem. Dziś wreszcie przyszła pora przedstawić mój projekt szerszej publiczności!

Z tytułu możesz wywnioskować, że chodzi o serwis polskifrontend.pl. Poniżej przedstawiam co to jest, po co to zrobiłem i czego użyłem do jego stworzenia.

Co to jest i po co?

Pomysł na ten serwis nie jest w sumie niczym szczególnym… W zasadzie można powiedzieć, że jest to typowy agregator treści, który skupia w jednym miejscu serwisy, blogi i strony na temat szeroko pojętego front-endu oraz web-developmentu. Stworzyłem go w zasadzie z dwóch powodów.

Po pierwsze, chyba nie ma niczego takiego w polskim internecie, a czasem zdarzało mi się szukać różnych polskich treści w google i wcale nie jest łatwo wyszperać blogi i serwisy, które by pisały na ten temat i to jeszcze po polsku. Zresztą, spójrz na mój wpis o tym, kogo warto obserwować w 2017 roku. W sekcji dotyczącej treści polskojęzycznych wcale nie ma tak wielu pozycji… Dlatego też jedną z głównych funkcjonalności mojej aplikacji jest możliwość zgłaszania nowych serwisów przez czytelników!

Po drugie, moim zdaniem zawsze warto mieć jakiś poboczny projekt na tapecie. Jest to okazja do nauki nowych technologii i narzędzi - takie wypłynięcie na nie znane dotąd wody. Na codzień często pracujemy przy nudnych, mało rozwijających projektach. Taki “side project” to, moim zadniem, super okazja do oderwania się na chwilę od tej szarej, programistycznej codzienności.

Główne funkcjonalności

Generalnie jest to “single page application”. Na stronie głównej widać ostatnie artykuły pogrupowane według serwisów. Są one posortowane po ostatniej aktywności w danym serwisie. Istnieje też drugi widok, przedstawiający wszystkie artykuły z dostępnych w serwisie, posortowane od najnowszego. Do przełączania tych dwóch widoków służą guziki znajdujące się po prawej nad artykułami.

Jak widać na powyższym screenie, najnowsze artykuły mają specjalne oznaczenie: kolor różowy oraz label “Nowość”. Po odwiedzeniu takiego linku, zmienia on kolor na zielony aby łatwo było odróżnić przeczytane już artykuły. Kliknięcie w tytuł artykułu po prostu otwiera nową kartę przeglądarki z danym artykułem, już w macierzystym serwisie. Autorzy blogów będą więc zadowoleni, że ruch jest przekierowywany bezpośrednio do nich.

Aby zapewnić płynne działanie serwisu, na początek ładowane są tylko najnowsze dane o blogach i artykułach, a kolejne doczytywane są gdy czytelnik “doskrolluje” się do końca strony. To się chyba nazywa “infinite scroll”.

Po lewej stronie, nad artykułami znajduje się przycisk przenoszący do formularza zgłaszania nowego serwisu. Wystarczy podać jego adres URL, ewentualnie podać też swój email (jeśli chcesz abym mógł się w razie czego z Tobą skontaktować) oraz potwierdzić “reCaptche”. W ten sposób wysyłasz mi wiadomość z linkiem do bloga, który ja mogę dodać do serwisu lub też nie. Myślę, że dzięki moderacji dodawanych blogów, do serwisu trafią tylko te, które faktycznie niosą ze sobą jakąś wartość.

Baza danych artykułów jest odświeżanaco 15 minut - dzięki temu, sama strona otwiera się szybko ponieważ, nie zaczytuje ona od nowa RSS’ów przy każdym żądaniu. Na tę chwilę nie ma (jeszcze) odświeżania w tle za pomocą websocketów, więc aby sprawdzić czy coś nowego się nie pojawiło trzeba niestety odświeżać stronę…

Jak to działa i co jest “po spodem”

Jako, że jest to projekt stricte front-endowy to myślę, że mogą Cię też zainteresować technikalia siedzące wewnątrz tego serwisu. Jest on oparty o React + Redux + RxJS, natomiast back-end napisany jest w Node.js (Express.js) co oznacza, że w zasadzie cały projekt stworzony został w JavaScript. Komunikacja między front-endem a back-endem odbywa się standardowo za pomocą REST API.

Do wystartowania z projektem użyłem Reactowego startera react-starter-kit. Ogólnie jestem zadowolony z wyboru chociaż, zamiast standardowego react-routera wykorzystuje on bibliotekę universal-router (ten sam autor co react-starter-kit). W sumie jest to całkiem ciekawa alternatywa i nieźle mi się sprawdziła.

Ogólnie rzecz biorąc to podczas pracy nad tym projektem chciałem przetestować kilka rzeczy, których wcześniej nie używałem. Są to: “server side rendering” na serwerze Node.js, tworzenie REST’owego back-endu w oparciu o Node.js (czego wcześniej nigdy nie robiłem) oraz praca z bazą MongoDB.

Muszę powiedzieć, że jeśli chodzi o to czego się nauczyłem to po pierwsze: SSR to jedna z najwspanialszych zdobyczy zachodniej cywilizacji; po drugie tworzenie serwera w Node.js jest bardzo fajne - mogę być “full-stackiem” jeśli miałbym pracować właśnie w tej technologii; po trzecie nadal nie mam zdania co do MongoDB. W sumie pracuje się z tym ok (korzystałem z biblioteki Mongoose), natomiast pewnie czas pokaże jak wygląda sprawa z wydajnością.

Zarówno front-end jak i back-end aplikacji stoją na osobnych instancjach w Heroku. Muszę powiedzieć, że jestem pozytywnie zaskoczony wydajnością tego rozwiązania oraz łatwością deploymentu (w skrócie polega to na commitach do specjalnego repozytorium Git na Heroku).

To w zasadzie tyle szczegółów technicznych - jeśli masz jakieś pytania to pisz do mnie na priv.

Mój projekt - podsumowanie

No i to tyle… na tę chwilę dodałem do serwisu około 16 blogów i stron. Mam nadzieję, że ta liczba się powiększy dzięki zgłoszeniom od użytkowników! Dlatego jeśli znasz jakieś blogi czy strony, które według Ciebie nadałyby się do dodania do serwisu Polski Front-End, to zapraszam do skorzystania ze wspomnianego formularza na stronie!

Mam jeszcze parę pomysłów na usprawnienia w serwisie ale wprowadzę je w późniejszym terminie. Na razie chcę zobaczyć czy w ogóle ktoś będzie tego używać - wiesz… “lean startup” i te sprawy.

Jeśli masz jakieś uwagi, chcesz wyrazić opinię lub stanowczo się czemuś sprzeciwić to pisz w komentarzach albo poprzez formularz kontaktowy!