Już wiesz – chcesz się uczyć JS! Świetnie, najważniejsze jest to, że chcesz się nauczyć czegoś nowego. Kilka lat temu miałem podobne zauroczenie JavaScriptem, usłyszałem o npm, tonie bibliotek, szybkim dewelopmencie, super frameworkach – no nic tylko kodzić. Niestety na samym początku nauki ilość rzeczy do ogarnięcia może wydawać się co najmniej przytłaczająca, dlatego postanowiłem pokazać od czego zacząć i na czym się skupić na początek. Dodam tylko, że „czystego” JS-a znałem (albo tak tylko mi się wydawało 😉 już z robienia stronek, teraz przyszedł czas na jakieś poważniejsze aplikacje.
Zderzenie z rzeczywistością
Od czego zacząłem? Oczywiście wybranie IDE, w tym przypadku padło na WebStorma (swoją drogą jeśli masz aktywnego maila z jakiejś uczelni możesz od JetBrains darmową wersję edukacyjną – więcej info tutaj). Struktura projektu dosyć standardowa:
no to teraz czas na zabawę! Nowe tutoriale, wskazują aby używać czegoś o nazwie template literals. Co to mi da?, kiedyś trzeba było szyć stringi w taki sposób:
var name = 'Hello ' + first + ' ' + last + '.' var url = 'http://localhost:3000/api/mail/' + id
dzięki ES6, będziemy w stanie zrobić coś takiego:
var name = `Hello ${first} ${last}.`
var url = `http://localhost:3000/api/mail/${id}`
czy nie ładniej, klarowniej i przyjemniej? A to tylko jedna z wielu funkcji nowego standardu – chcesz znać więcej? Polecam ten top 10:
A co to jest ten ES6?
No właśnie narzucamy nowe pojęcia, a warto byłoby wytłumaczyć co w ofertach o prace oznacza magiczne ES6. W sumie to banalne – to po prostu kolejna wersja JavaScript, która ma za zadanie umilić czas spędzony na programowaniu aplikacji internetowych. W internetach znajdziesz też nazwę ES2015, która w zasadzie oznacza ten sam standard. Także, żadnej magii tutaj nie ma, warto tutaj nadmienić, że na kolejną wersję czekaliśmy około 16 lat, ale za to ES7 wyszedł w 2017 🙂
Jak to wyglądało kilka lat temu?
Kiedy ja zaczynałem zabawę z JS i chciałem użyć nowych featuerów, nic nie chciało działać. Hmm dziwne, nie? Chociaż w naszym zawodzie nie do końca 🙂 Co w takim razie było przyczyną?
Konkretna wersja JavaScript jest wspierana bezpośrednio przez przeglądarkę, której używasz Ty lub Twój klient. Musisz być przygotowany na to, że ktoś może nie aktualizować przeglądarki nawet przez kilka lat (np. IE10), w takim przypadku warto skorzystać ze strony:
wystarczy wpisać z jakiej funkcjonalności chcemy skorzystać i natychmiast dostaniemy informację, jakie wersje przeglądarek wspierają daną funkcjonalność. Często w umowach podaje się minimalną wersje przeglądarek, w których strona będzie wyświetlać się prawidłowo – nie chcesz przecież robić aplikacji dostosowanej do IE6?:)
Wystartuj z ES6 już dziś!
Żeby ułatwić Ci wejście w świat nowoczesnego JavaScriptu postanowiłem nakręcić dla Ciebie filmik, w którym krok po kroku pokazuje jak skonfigurować mini aplikację działającą w oparciu o webpack. Nie znajdziesz tam, żadnym frameworków, jedynie podstawy step-by-step. Dodatkowo stworzyłem najprostszą (działającą) konfiguracje webpacka jaką tylko mogę sobie wyobrazić, żeby zrozumieć jak to działa:
https://pastebin.com/XHEdBu58
Możesz również pominąć cały proces zabawy z npm, webpack etc. Jeśli chcesz po prostu szybko wystartować wystarczy, że zastosujesz jeden z linków do unpkg, o których piszę w tym artykule. Pamiętaj jednak, że na dłuższą metę (a zdecydowanie jeśli chcesz znaleźć pracę we front-endzie) warto zainwestować czas na naukę narzędzi do konfiguracji projektów.
Moją historię już znasz, a jak wyglądała Twoja przygoda z JS? Zostaw informację w komentarzu i pomóż innym uniknąć często powtarzanych problemów na starcie 🙂 Dzięki!
