Upload plików w aplikacji jest dość często pojawiającą się funkcjonalnością. Pozwala na wysyłanie plików do innych osób, serwisów, dostarczaniu danych do aplikacji żeby nie musieć wypełniać ich ręcznie lub zwykłym umieszczaniu zdjęć na stronie. Podczas tworzenia aplikacji możemy wykorzystać jedną z wielu bibliotek, która dodaje w naszej aplikacji frontendowej taką funkcjonalność ale może da się to zrobić samemu?

Mając napisaną naszą aplikację w Electronie potrzebujemy ją jeszcze zbudować tak aby można ją było łatwo rozprowadzać wśród użytkowników. Nie możemy w końcu im kazać samemu uruchamiać aplikacji w konsoli ;). Jak to zrobić w prosty sposób, który zadowoli nas oraz naszych użytkowników?

Jak tworzymy aplikację w Electronie to widok i główna część aplikacji są od siebie oddzielone. Jednak czasami możemy potrzebować odwołać się z widoku do głównego wątku aby na przykład wyświetlić powiadomienie lub też powiadomić widok o zdarzeniu, które nastąpiło w głównym wątku. Pytanie jak to zrobić w Electronie?

Większość ludzi kojarzy JavaScript głównie z tworzeniem stron internetowych. Ostatnio pojawia sie też coraz więcej aplikacji backendowych i mikroserwisów napisanych w NodeJs. Ale czy wiecie, że możemy również tworzyć aplikacje desktopowe? Okazuje się, że JavaScript jest językiem w którym da się napisać prawie wszystko. Co więcej możecie korzystać z takiej aplikacji nie wiedząc o tym. Więc jak napisać własną aplikację desktopową?

Jak już kiedyś wspominałem w poście dotyczącym testowania(znajdziecie go tutaj) testowanie jest ważnym elementem podczas tworzenia oprogramowania. Dziś chciałbym poświęcić chwilę czasu na testy jednostkowe w React’cie. Testy jednostkowe powinniśmy tworzyć dla właściwie każdego komponentu dzięki czemu będziemy mieć pewność, że działa poprawnie i niczego nie psujemy podczas zmian lub ulepszania kodu.

Do tej pory WorkTimetable był tylko mniej lub bardziej ładnym widokiem. Jednak samym widokiem wiele nie zrobię nie ważne jak dopracowany byłby. Więc żeby mój projekt stał się prawdziwą aplikacją dodałem do niego Redux’a. Czym jest Redux? Redux jest małą biblioteką służącą do zarządzania stanem aplikacji. Wyewoluowała z idei Flux’a, której głównym założeniem jest jednokierunkowy przepływ danych. Polega to na tym, że wszystkie dane przechodzą przez identyczny cykl życia dzięki czemu logika aplikacji jest przewidywalna i łatwa do zrozumienia.

Ten weekend był wyjątkowo piękny pod względem pogody i atmosfery więc postanowiłem wykorzystać ten czas by popracować nad UI mojej aplikacji. Projektowanie UI nigdy nie jest łatwą sprawą, ponieważ trudno dogodzić wszystkim. Przy tworzeniu aplikacji jest to dla mnie szczególnie trudna część, ponieważ dopiero sobie wyrabiam pewien zmysł artystyczny i estetyczny. Jednak nie poddaję się i ostro z tym walczę.  UI WorkTimetable Jak już wspominałem o tym wcześniej w mojej aplikacji chciałbym sam popracować nad UI i dlatego zrezygnowałem z framework’a takiego jak Bootstrap na rzecz własnych klas napisanych w SCSS i flexboxgrida.

Mało jest aplikacji, które składają się tylko z jednego widoku. Zdecydowana większość ma ich więcej i pojawia się potrzeba sprawnego zarządzania nimi z poziomu kodu. W przypadku aplikacji opartych na React’cie z pomocą przychodzi react-router.

Jako, że konkurs już się zaczął to czas zacząć programować. Dziś będzie jeszcze krótko na temat startu projektu w React’cie. W moim projekcie zamiast standardowego menadżera npm będę korzystać z yarna(trochę informacji o nim i dlaczego uważam, że jest lepszy od npm znajdziecie TUTAJ). Tak więc nie zostaje nam teraz nic innego niż stworzyć WorkTimetable.

Nie samym backendem full stack żyje więc przyszła pora napisać coś na temat warstwy wizualnej każdej aplikacji internetowej. Od czasu wyjścia Angulara2 ta właśnie biblioteka zyskała sporo na popularności i stała się głównym wyborem podczas projektowania interfejsu użytkownika. Skoro React stał się taki popularny to czas żebym ja też się nim zainteresował. Czym jest React? React nie jest frameworkiem. Jest biblioteką służącą do tworzenia zaawansowanych interfejsów użytkownika. Dopiero w połączeniu z dodatkowymi z innymi bibliotekami takimi jak redux, redux-saga, react-router powstaje nam pełnoprawny framework.