Zapowiadany słownik do projektu. Przydatny zwłaszcza dla osób, które dopiero zaczynają swoją przygodę z programowaniem.
Lada moment rozpocznę serię artykułów w temacie tworzenia aplikacji webowej. Pojawi się wiele pojęć. Pojęć, których nie będę chciała wyjaśniać w każdej linijce. Nie mogę. Inaczej pół artykułu stanowiłby słownik. Dlatego postanowiłam wszystkie te pojęcia zawrzeć w kolejnych częściach słownika do projektu.
Oczywiście poza słownikiem będą artykuły wprowadzające w dany temat. Tam bardziej się przychylę do wyjaśnień nieznanych pojęć.
Będzie to dość nietypowa forma słownika. Definicje pojęć łatwo możesz znaleźć w Internecie. Tutaj postaram się je wyjaśniać „po ludzku”. Coś w stylu słownika, który już zaczynałam na tym blogu (i utknęłam na cz. I).
Część pojęć wyjaśniałam już wcześniej. Początkowo miałam to zrobić ponownie, jednak i bez tego artykuł rozrósł się niesamowicie. Także wiele spośród potrzebnych pojęć oraz nazw technologii znajdziecie w artykułach:
- Kierunek: Web Developer – Wstęp do serii + Frontend (cz. I)
- Kierunek: Web Developer – Front-end (cz. II)
Uporządkowane są one również pod kątem miejsca, kategorii. Także warto się zapoznać z powyższymi artykułami.
Początkowo mocno rozpisywałam się na temat każdego pojęcia. Jednak tak naprawdę każde zasługuje na oddzielny artykuł mu poświęcony. I doczekają się ich. Tu znajdziesz dość krótkie wyjaśnienia czym co jest i gdzie szukać kolejnych informacji. Jednak gdyby coś było totalnie niezrozumiałe – dawaj znać w komentarzach – postaram się temu zaradzić 😉
No to zaczynamy!
HTML, CSS, JavaScript. Podstawa. Przy czym poprzez HTML mam na myśli HTML5, CSS – CSS3, a JavaScript… JavaScript 😉
Jeśli dopiero zaczynasz i potrzebujesz materiałów do nauki zapraszam do wpisów:
Oraz do tagów: html, css, javascript.
Framework to pewien szkielet budowanej aplikacji. Dostarcza strukturę, mechanizmy działania, taki zestaw narzędzi do jej stworzenia.
Każdy język idzie ze swoim zestawem frameworków. Są one bardzo szeroko wykorzystywane. Nie oznacza to, że nie można pisać aplikacji z ich pominięciem. Można. Używanie frameworków niesie za sobą i plusy i minusy, ale to temat na kolejny wpis.
Przykłady konkretnych Frameworków?
Wśród frameworków Javascriptowych możemy wyróżnić m.in. Angular, Vue, Ember, itd. itp.
Wśród frameworków CSS-owych możemy wyróżnić m.in. Bootstrap, Foundation, Materialize, Material UI, Angular Material, itd.
W aplikacji, którą będę budować zamierzam skorzystać z Angular v4. Angular jest właśnie jednym z takich frameworków. Co więcej – jest frameworkiem MVC. To już konrektny typ frameworków implementujących MVC.
Czym jest MVC? To wzorzec architektoniczny dla aplikacji. Pewien zestaw zasad, których powinna się trzymać aplikacja jeśli ma być budowana zgodnie z jego założeniami.
Tak, w aplikacjach korzystamy z pewnych wzorców. Warto je znać. Zwłaszcza w przypadku pracy z większymi aplikacjami. W temacie wzorców JavaScriptowych polecam lekturę „JavaScript. Wzorce”, Stoyan Stefanov lub „JavaScript. Design Patterns”, Addy Osmani (z dostępem online). Ale uwaga! Wzorce to coś, z czym zapoznajesz się mając już pewne pojęcie o programowaniu. Niekoniecznie jest to lektura dla osób rozpoczynających naukę JavaScriptu.
Wracając do MVC. To wzorzec architektoniczny służący do organizacji struktury aplikacji zgodnie z podziałem:
- Model
- View
- Controller
Zakłada to rozdzielenie modelu aplikacji (i tego, co się na nią składa) od widoków (wyświetlania elementów modelu) oraz kontroli nad aplikacją. Chodzi o to by nie mieszać tych warstw (a już zwłaszcza logiki z wyświetlaniem, czego trzymamy się nie tylko w przypadku tego wzorca).
MVC zasługiwałoby tak naprawdę na oddzielny wpis i pewnie się go doczeka 😉
Przykłady innych frameworków MV* znajdziecie na stronie TodoMVC.
Angular
Jeden z najpopularniejszych frameworków Javascriptowych, służący do budowania aplikacji webowych. Korzeniami sięga do 2009 roku oraz Google’a 😉 (AngularJS). Najnowsza wersja tego frameworka (v4) została wydana w tym roku (2017). Aktualnie używanymi wersjami są zarówno v1.x (zwany również AngularJS), v2 oraz v4 (znane już jako Angular :P).
Strona domowa, gdzie znajdziecie więcej informacji.
W ramach serii będę dokładniej opisywać cały stos technologiczny, wszystkie jego elementy oraz odsyłać do polecanych materiałów do nauki 😉
Bootstrap
Wspomniany framework CSS-owy. Jego najnowsza wersja to Bootstrap v4. Znacząco ułatwia budowanie stron. Jednak jest też pewnym obciążeniem. Często krytykowany za bycie wykorzystywanym tylko w celu zapewnienia tzw. grida, czyli responsywnego układu strony.
Pare przykładów zastosowania Bootstrapa
Przykład Dashboardu zbudowanego w oparciu o Bootstrap?
Kliknij by przenieść się do strony.
Bootstrap pomaga w budowaniu warstwy wizualnej aplikacji, nadając im pewien styl. Inny styl pociąga za sobą:
Material Design
Dość popularny ostatnio. Przykład? Wystarczy zajrzeć do aplikacji Google’a, jak np. Google Keep czy Google Contacts. Implementuje go również wiele aplikacji Androidowych.
Material Design to zbiór pewnych zasad, których należy się trzymać. Wytyczne znajdziecie tutaj. Dla różnych platform, języków, frameworków powstają różne implementacje tych zasad. I tak mamy np. Material UI dla Reacta (o którym już pisałam na blogu) czy …
Angular Material
Jak nazwa wskazuje – implementacja Material Design dla Angulara.
Implementacja ta dostarcza pewien zestaw komponentów, które możecie podejrzeć na stronie projektu, która zarazem jest przykładem implementacji Material Design dla Angulara.
TypeScript
Język programowania zbudowany jako „nakładka” dla JavaScript. Tutaj rozpiszę się więcej w artykule dotyczącym tego języka. Tymczasem wystarczy informacja, że kod pisany w TypeScript jest następnie kompilowany do JavaScript.
Więcej informacji na jego temat znajdziecie tutaj.
EcmaScript 6 (ES6)
Programowanie to nie tylko języki. To także pewne wzorce (o których już wspominałam), ale również standardy. EcmaScript jest właśnie takim standardem dla języka JavaScript. A dokładniej JavaScript implementuje standard EcmaScript.
W aplikacji zamierzam korzystać z części możliwości jakie daje, a tematowi samego ES 6 (albo wyższej wersji) poświęcę oddzielny artykuł.
Preprocesor CSS
Pisanie w CSS nie zawsze jest wygodne. W przypadku dużych aplikacji wcześniej czy później – wkurza. Tu z pomocą przychodzą preprocesory dostarczając pewnych dodatkowych możliwości, jak choćby zmienne, zagnieżdżanie kodu, itd. Kod w nich pisany jest następnie kompilowany do CSS.
Jedne z popularniejszych preprocesorów CSS to Less oraz Sass.
Firebase
To platforma dla aplikacji webowych. Stoi za nim Google. Dostarcza wielu możliwości jak: hosting, baza danych, mechanizmy autentykacji użytkowników, itd.
To taki hosting (jak dla stron), który dostarcza nieco większe możliwości 😉
Pełna lista dostarczanych możliwości
Baza danych
Pewien zbiór danych, np. aplikacji. Istnieje wiele różnych typów baz danych, wśród nich m.in. bazy relacyjne, w których posługujemy się językiem SQL do operowania na danych oraz bazy nierelacyjne (NoSQL, którą wykorzystamy w projekcie).
SQL
Strukturalny język zapytań służący do tworzenia, modyfikowania baz danych, pobierania i dodawania do nich danych.
Baza NoSQL
Baza, w której dane są przechowywane w postaci klucz-wartość. Brak powiązań relacyjnych oraz tabel.
Lintery (jakość kodu)
Są pewne standardy dotyczące jakości kodów pisanych w różnych językach. Lintery to narzędzia sprawdzające nasz kod pod kątem właśnie jakości. Oznaczają fragmenty kodu, które mogłyby zostać napisane „lepiej” (pod kątem jakościowym).
I tak mamy np. JSLint dla JavaScriptu, CSSLint dla CSS-a, ESLint – badający kod pod kątem zgodności ze standardem EcmaScript, TSLint – dla TypeScriptu, itd.
Git
System kontroli wersji. Co to jest? Jak się go nauczyć? I dlaczego warto? Pisałam już o tym na blogu.
Github
Jeden z dostępnych hostingów dla kodu źródłowego.
Git != Github, a niestety czasami widzę, że niektórzy używają tych pojęć zamiennie…
Code review
Podejście, w którym Twój kod jest sprawdzany przez innego programistę, który może zgłaszać do niego uwagi, dodawać komentarze.
Uwaga! W Code review nie chodzi o poprawianie czyjegoś kodu, modyfikowanie go, a zgłoszenie uwag, poprawek. Po zgłoszeniu uwag, autor poprawia swój kod i ponownie poddaje go ocenie – code review.
Czekam na ewentualne uwagi odnośnie słownika. Jeśli zauważyliście jakąś niezgodność albo nieścisłość – dawajcie znać w komentarzu. Starałam się opisać pojęcia w miarę zrozumiały sposób. Nie jest to proste zadanie 😉
Ciąg dalszy nastąpi…
.){kind=link}