JS - w jakim kierunku dokładnie iść?

Witam, chciałbym się zapytać w jakim dokładnie kierunku pójść, jeśli chodzi o JS? Nie będzie to pisanie gier, tylko chciałbym skupić się na webowych apkach. Parę pytań odnośnie tego. 

Czy potrzebuję do tego zagłębiać się w dziedziczenie prototypowe, czy obiektowość (znać, znam), aby dobrze operować nim jako wspomagacz do stron? Chciałbym nauczyć się na początek przydatnych rzeczy, które pozwoliłby mi na późniejszy staż, czy pracę jako junior. Jakie projekty móglbym robić, aby się doskonalić?

Sugerowałbym JQuery i jakiś popularny framework do budowania aplikacji typu Angular. Wnikanie w szczegóły implementacyjne języka moim zdaniem mniej istotne, od praktycznych umiejętności budowy stron.

Może jeszcze fajnie poznać jakąś nadbudówkę nad JS, typu TypeScript.

 

Do pierwszej pracy nie musisz tego wszystkiego znać na wylot. Nawet nie ma to sensu, bo za szybko się zmienia. Dopiero pracując nad konkretnym projektem, w konkretnej firmie, będziesz wiedział na czym się skupić. Dobrze jednak znać podstawowe koncepcje i pojęcia oraz mieć jakieś praktyczne doświadczenie.

A ja przeciwnie. Najpierw upewniłbym się, czy dobrze rozumiesz język. W tym celu polecam lekturę JavaScript: The Good Parts od Douglasa Crockforda (książka stara ale nadal bardzo aktualna). Potem zabawa jakimś frameworkiem (ale nie mieszanie tego z jQuery, bo frameworki widoku zazwyczaj transformują DOM po swojemu i podpieranie się jQuery niepotrzebnie miesza w logice, często gryzie się z frameworkiem). Angular 1.5, Angular 2 albo React z jakimś Fluxowym backendem (na Reakcie słabo się znam, więc żadnego nie zarekomenduję). Dalej lub w międzyczasie systemy budowania/modularyzacji (Gulp, Grunt, Webpack - wybierz w zasadzie dowolny i przez jakiś czas się go trzymaj). W wolnych chwilach zacznij wnikać w szczegóły języka, bo JS ma masę pułapek i tylko z gruntowną znajomością “spodu” nie będziesz się dziwił “a skąd to się wzięło/dlaczego to nie działa”. Tu polecam ten kurs. Nieco leciwy ale często aktualizowany. I ostatnia rzecz do poznania po podstawach frameworka - ES6 lub Typescript.

Aktualnie znam HTML i CSS, ale na jakim poziomie? Nie jestem w stanie stwierdzić. 

HTML - myslę, że nawet jakbym czegoś nie wiedział łatwo poszukać i się doinformować, więc nie będę się rozpisywał. 

CSS - tutaj myślę, że podobnie. Jest trochę bardziej rozbudowany, ale takie rzeczy jak pozycjonowanie, opływanie, before/after, przejścia, czy animacje znam. Oczywiście dochodzi także SASS, którego znam. 

JS - tutaj chyba największy problem, jeśli chodzi o wykorzystanie w projektach. Z takich funkcjonalnych rzeczy, to przycisk scrollujący do góry, proste podświetlanie wiersza w tabeli (z poziomu cssa z tego co wiem nie zrobimy), slider z przyciskami lewy/prawy oraz slideshow (za animacje odpowiada CSS), zrobiłem prostą gierkę testującą czas reakcji (kod pewnie koślawy, ale działa… ;o), elementy które ‘dynamicznie’ wpływają podczas scrollowania, oraz inne, mniejsze proste rzeczy jak tworzenie nowych elementów w DOMie itp. Nie ręczę, że kod jest najwyższych lotów, ale uczę się. Jakby ktoś chciał niech podrzuci pomysły :smiley: Będę wdzięczny.

 

Byłoby świetnie, jakby ktoś w temacie mógłby mniej więcej powiedzieć jakie rzeczy robi się w średnich firmach, gdzie móglbym dostać się na juniora. 

 

Dzisiaj zaznajomiłem się z Reactem, a dokładnie rzecz biorąc JSX. Nie wiem tylko, czy moja znajomość JS-a wystarczy, aby nie mieć problemów z nauką Reacta. Tutaj najpierw chciałbym skupić się na samym reactie, a potem zobaczyć jak połączyć go z reduxem. 

Jeżeli tak się sprawa ma, to klepacze webowego (bo można go używać również na serwerach, urządzeniach mobilnych, internecie rzeczy) JS-a dzielą się z grubsza na dwie kategorie - programistów frameworków i czarodziejów frontendów.

Ci pierwsi piszą znacznie więcej czystego JS-a, skupiają się na logice aplikacji, a ich twór (poza użytym językiem) nieszczególnie różni się od tego, co tworzy się w Javie, .Net czy innych “backendowych” języków, bo często tacy frontendowcy to backendowcy przerzuceni na weba. Znajomość HTML-a i CSS-ów jest drugorzędna.

Drugich niewiele dzieli od klasycznych webmasterów. Piszą masę HTML-a, CSS-ów, JS-a używają, żeby podbić atrakcyjność strony. 

Przedstawiciele obu “teamów” często współpracują, stanowiska mogą się nawzajem przenikać. Ale na początek powinieneś zdefiniować, do której grupy chcesz należeć. 

Zdecydowanie osoba, która odpowiada za interakcje z użytkownikiem, czyli frond-endowiec. Za back-end wziąłbym się później jakbym już pracował jakiś czas i miał większe doświadczenie. 

 

Dlatego właśnie pomyślałem o Reactjs jako framework na fronta. Z jquery nie chciałbym zaczynać. Angular także dobry, ale boję się, że za parę lat znowu im się odwidzi i wyjdzie angular 3 i trzeba będzie się wszystkiego od zera uczyć… 

 

To nie takie proste. Ostatnimi laty frontendy stawały i nadal stają się coraz bardziej i bardziej skomplikowane. Coraz rzadziej mówi się o stronach internetowych, coraz częściej o aplikacjach webowych. Taki Angular, mimo że występuje wyłącznie w przeglądarce - warstwie widoku, operuje wzorcami i konstrukcjami znanymi z frameworków MVC (serwis, kontroler etc.). Można być więc czystym frontendowcem (programistą JS-a przeglądarkowego), który porusza się w logice i bebechach angularowych, ale nie tyka się HTML-a, CSS-a i co bardziej “graficznych” części Angulara. A można wręcz przeciwnie. Ja np. pracuję i w backendzie, i we frontendzie, ale moja angularowa odpowiedzialność kończy się na napisaniu i otestowaniu serwisów, komponentów i kontrolerów, jako-takim rozmieszczeniu dyrektyw własnych i gotowych, ale optymalizacją HTML-a, stylowaniem i dopieszczeniem wodotryskami zajmuje się inny frontendowiec. Moim zdaniem warto na początku określić, której stronie frontendowej “barykady” ci bliżej, bo ludzi, którzy potrafią współtworzyć (frontendowy) szkielet enterprajsowej aplikacji, a potem samodzielnie napisać dobre CSS-y, nawet w sporej firmie poznałem niewielu.

Chciałbym odpowiadać za rzeczy, które widzi użytkownik strony. Nie chciałbym tykać się rzeczy po stronie serwera - przynajmniej na początku. Zdaję sobie sprawę z tego, że angular, czy react może być po stronie użytkownika jak i serwera (full stack). Dlatego zadałem na początku pytanie, jakie wymagania stawiają pracodawcy na początku kariery (junior developer). Konkrety o ile to możliwe. Bo napisanie, że wymagają bardzo dobrej znajomości JSa niewiele mówi. Bardzo dobrej, ale czego? Czysto OOP, czy może biegłe posługiwanie się eventami? A może wszystko na raz? Jak często używa się OOP, jeśli chodzi o sam wpływ na wygląd? 

 

W planach mam naukę Reacta i JSa przy okazji. Mógłbym się uczyć także innych rzeczy, ale chcę po prostu skupić się na 1, czy 2 rzeczach i solidniej na początku przyswoić. 

Obecnie standardowy zakres na juniora w Warszawie:

* HTML5 + znajomość ogólna nowości jakie wprowadza. Jak firma z Railsami to dobrze znać HAML’a.

* CSS3, SASS no i czasami LESS (ale to już nieliczne wyjątki)
* Git (od commitów po teorię o git flow)

* Podstawy działania NPM i umiejętność tworzenia prostych paczek

* Gulp, Webpack podstawy

* JS ES5 i ES6 Vanilla. Bardzo dobrze liznąć TypeScript (szczególnie w środowiskach angularowych) bądź CoffeeScript u Railsowców (ten ostatnio odchodzi na bok, bo firmy przerzucają się na standardowy ES6)

* Podstawy React’a / Vue.js / Angular1 & Angular2 / jQuery. (Zazwyczaj w ogłoszeniach jest info o 1-2 bibliotekach. Jak od siebie polecam ogarnąć podstawy Reacta i jQuery, bo to obecnie lwia część rynku. A1 i A2 zazwyczaj rezyduje w większych firmach,  do A1 szuka się teraz doświadczonych ludzi w celu utrzymania kodu, a dodatkowo sam ekosystem A2 jeszcze nie jest w pełni stabilny)

* Zapoznanie się z linterem i jakąś biblioteką od testów (np. jslint + jasmine)

* Podstawy teoretyczne jak np. CORS, REST, SOAP, JSON, JSONP, HTTPS, HTTP, API, Shadow DOM, DOM, TDD, BDD etc.

* Znajomość podstaw Bootstrap v3 i Font Awesome 

 

i to w sumie tyle. 

 

Lista może się wydawać długa, ale większość tych wymagań jest w jakiś sposób ze sobą powiązana. Np. używając Reacta od razu załatwiasz sobie temat Webpacka / Gulpa, Shadow DOM,  UnitTestów i NPM. 

 

Dobre repo githubowe z kilkoma projektami też jest pewnym plusem dla pracodawcy. 

 

 

Od siebie dodam: Jeśli nigdy nie bawiłeś się w MVC / MVVM w JS to zacznij od Vue.js, nie od Reacta czy Angulara. Vue jest bardzo łatwy na starcie, cała składnia to praktycznie czysty JS i w bardzo łagodny sposób wprowadza w typowy Component Lifecycle, teorię State Management czy chociażby same Componenty. 

 

Jednak zobaczę jak pójdzie mi z Reactem. Jak będę miał ogromne problemy ze zrozumieniem, wtedy zacznę patrzeć w innym kierunku.  Dzięki. 

 

Krótkie pytanko, jakie ciekawy projekty można robić z JSa na początku? Mam na myśli takiej bardziej ‘firmowe’ projekty. 

Z takich appek na szybko z  łatwym poziomem trudności: 

 

* Nieśmiertelny TODO

* Appka pogodowa (pobierająca np. wundergrund api dane) i zmieniająca tło/ikony w zależności od danych.

* Notatnik z funkcją zapisu notatek do localStorage (to bardzo dobrze uczy state management i componentów) i np. renderowaniem markdowna.

* Appka z czasomierzem i kilkoma customowymi timerami (dobrze uczy computed properties). 

* Appka która tworzy portfolio (zbiera od ciebie dane, ty dorzucasz do tego np. jeszcze jakiś plik) i na końcu wypluwa .pdf (ale to już wymaga backendu. więc lepiej po prostu wygenerować statyczną podstronę z możliwością wydruku)

* Appka generująca galerię z wrzuconych plików

* Appka używająca jakiś chartsów i pozwalająca modyfikować wyświetlane na nich dane

Sam React jak już zdążyłem się ‘oswoić’ nie jest trudny. Jest logiczny i przyjemny. Problem dla mnie pojawia się jak dochodzi do tego redux. Wtedy nawet mała aplikacja wygląda na bardzo skomplikowaną.

Nie idź w reduxa. Redux jest przekombinowaną kobyłą od której się odchodzi. Obecnie coraz większą popularność zdobywa MobX. Sądzę że w przeciągu roku wyprze reduxa jak to kiedyś redux zrobił z fluxem. 

 

Poradnik na start: https://mobxjs.github.io/mobx/getting-started.html

Dzięki wielkie! Zaraz zabiorę się za czytanie. Mam tylko jeszcze pytanie co do JSa. Jakie aktualnie wzorce się używa? Nadal popularny jest moduł po wejściu ECMA6?

Tzn o jakie wzorce ci chodzi? Grupowanie plików? Jeśli grupowanie plików i importy między nimi to tylko export. 

Chodzi mi o pisanie kodu, o standardy. Problem mam taki, że jestem wstanie napisać pożądaną funkcjonalność gorzej jednak z kodem, który wygląda dość amatorsko. 

 

btw, 

JavaScript. Programowanie Obiektowe - Stoyan Stefanov - warto się zainteresować?

Mam jeszcze taką: Freeman E., Robson E. - Head First JavaScript Programming (Head First) - 2014

Douglas Crockford - JavaScript: The Good Parts

JSLint

https://google.github.io/styleguide/jsguide.html

https://github.com/airbnb/javascript