Jakiś czas temu, jeden z czytelników mojego bloga frontendinsights.com, zadał mi pytanie: jakie narzędzia front-end developera powinien on znać aby zacząć pracę w tym zawodzie. Chciał też wiedzieć jaki jest obecnie najlepszy “workflow” w dzisiejszym web developmencie.

Oczywiście odpowiedziałem mu czym prędzej w mailu ale wydaje mi się, że temat ten może też zainteresować dużo szersze grono czytelników. Dlatego też, stwierdziłem, że rozwinę swoją odpowiedź i w ten sposób powstał ten wpis.

No więc, jakie narzędzia front-end developera trzeba znać?

W sumie to zależy… Od czego? Ano od tego, jakie technologie, frameworki, biblioteki używane są w Twoim projekcie. Generalnie mówi się: “stos technologiczny ReactJS/Angular/Ember/Backbone (niepotrzebne skreślić)”. To powoduje, że wszystkie te frameworki/biblioteki (jak i oczywiście te, których tutaj nie wymieniłem) mogą posiadać swoje własne, rekomendowane narzędzia. Część z nich się pokrywa, ale nie wszystkie…

Pierwszy z brzegu przykład: jeśli pracujesz w projekcie opartym na ReactJS, zwykle wykorzystujesz też Webpack to “bundlowania” zasobów. Oprócz tego, standardem jest użycie Babela w celu umożliwienia zastosowania składni ES6. Dodatkowo, w zależności od podejścia, może być również użyty Gulp do automatyzacji zadań, ale częstsze jest, że wykorzystuje się po prostu skrypty NPM.

Jeden przykład to za mało? Proszę bardzo, oto kolejny: jeśli chcesz używać Angular 2 to tam zalecane jest zastosowanie TypeScript aby zapewnić statyczną kontrolę typów ale również obsługę ES6. Czyli w tym przypadku używane jest coś innego niż Babel…

Tych przykładów z pewnością można namnożyć więcej ale myślę, że te dwa już wystarczająco dobrze obrazują w jakiej “dupie” jesteśmy ;)

Dużo tego… To czego się uczyć?

Cóż… Narzędzia front-end developera to w zasadzie temat rzeka. Na rynku dostępnych jest całe mnóstwo świetnych narzędzi. Moim skromnym zdaniem nie możliwym jest aby poznać je wszystkie. Masz dużo szczęścia jeśli dołączasz do istniejącego już zespołu, w którym stos technologiczny i wszystkie niezbędne toole są już wybrane. Wszystko co w takiej sytuacji masz do zrobienia jako początkujący front-end developer to nauczyć się ich. Jest to zresztą świetny start do dalszego “grzebania”.

Gorzej jest jeśli nie zacząłeś jeszcze pracy jako front-end developer i chcesz się do tego przygotować zanim podejmiesz pierwszą prawdziwą pracę… **Na szczęście mam dla Ciebie rozwiązanie! **Jak być może wiesz, jestem fanem Yeomana. I to co chcę Ci dziś poradzić to użycie go do sprawdzenia jakie konkretnie narzędzia front-end developera używane są w świecie technologii do której chciałbyś się przyuczyć.

Oto jak to zrobić: Yeoman pomaga w generowaniu gotowych konfiguracji projektów front-endowych. Pisałem o nim już kiedyś tutaj na blogu. Jeśli zajrzysz na stronę tego projektu to znajdziesz tam ogromną bazę generatorów dla praktycznie wszystkich nowoczesnych technologii front-endowych. Angular, React, Backbone, Polymer, Vue? Wszystko tam jest. Kompletne rozwiązania, struktury projektów, skonfigurowane i gotowe do użycia.

A więc, jeśli chcesz wiedzieć jakie technologie są potrzebne by programować w ReactJS, wybierz jeden z generatorów, użyj go i przeanalizuj co tam zostało “wyplute”. Zapoznaj się ze strukturą projektu, sprawdź jakie narzędzia zostały użyte i jak zostały skonfigurowane. Teraz, kiedy wiesz już to wszystko, możesz zgłębić wiedzę na ich temat. Oprócz czytania dokumentacji, możesz też poeksperymentować na projekcie, który wygenerowałeś.

O jednej rzeczy warto jednak pamiętać. W bazie generatorów Yeaomana znajduje się na prawdę dużo generatorów. Niestety niektóre z nich mogą być już przestarzałe więc warto sprawdzać datę ostatniej aktualizacji. Narzędzia nieustannie się rozwijają więc lepiej uczyć się tych najnowszych. Poza tym jest wiele generatorów rozwiązujących ten sam problem na różne sposoby, moim zdaniem więc, najlepiej jest sprawdzić kilka z nich.

Podsumownie

Opisany dziś sposób wykorzystałem przy swojej pierwszej styczności z Reactem. W tamtym czasie nie wiedziałem praktycznie nic na temat Webpacka czy Babela. Zacząłem od generatora, który używał Gulpa ale później sprawdziłem jeszcze kilka innych. Jeden z nich wykorzystywał skrypty NPM do automatyzacji zadań. Od tego czasu jest to moje ulubione podejście, które zresztą staje się obecnie standardem w świecie ReactJS. Z tego też powodu uważam właśnie, że nie warto ograniczać się do pierwszego z brzegu generatora. Zawsze lepiej “kopać głębiej”.

A Wy co sądzicie o takim podejściu? Myślicie, że to dobry sposób żeby sprawdzić jakie narzędzia front-end developera trzeba znać w danej technologii?