Czym jest front-end a czym back-end ?
front-end a czym back-end ? Co składa się na front-end a co na back-end ?
front-end a co na back-end ? Kim jest front-end a kim back-end developer?
front-end a kim back-end developer? Czym zajmuje się front-end a czym back-end developer?
front-end a czym back-end developer? Co musi umieć front-end a co back-end developer?
front-end a co back-end developer? Jak zostać front-end a jak back-end developerem?
Przed przystąpieniem do tego artykułu przeanalizowaliśmy kilka ofert pracy a ten artykuł będzie odbiciem technologii jakie są obecnie wymagane.
Co to jest frontend?
Po tym jak uzupełnimy nasz adres URL w przeglądarce wciskając „ENTER” zobaczymy wizualną część strony, innym słowem front-end. Mówiąc o działaniach na front-end bardzo często chodzi nam o elementy związane z tym, co może zobaczyć użytkownik, czyli np. design, kolor, przyciski, czcionka, formularze. To bardzo ważne elementy strony ponieważ nie zapominajmy, że zazwyczaj to co widzimy składa się na nasze pierwsze…oby pozytywne wrażenie.
Co składa się na frontend?
Programista Front-End bazuje na językach programowania interpretowanych nie przez serwer ale przez przeglądarkę. Musi znać trzy najważniejsze technologie jakimi są: HTML, CSS i JavaScript. Każda z nich pełni inne funkcje:
HTML – opisuje elementy strony i ich znaczenie przy pomocy tzw. znaczników (definiuje tytuły, opisy, tagi, hiperłącza, obrazki, buttony, tabele, akapity, nagłówki, nawigację i wiele więcej…)
CSS – określa wygląd strony html z poziomu pliku CSS, dzięki zastosowaniu znacznika w naszym elemencie strony html, a w nim zagnieżdżonej klasy, która następnie będzie miała odniesienie w pliku CSS po nazwie klasy html, jesteśmy w stanie sterować tym elementem html(definiować jego kształt, położenie, kolor itd.)
JavaScript – odpowiada za zachowanie wybranych elementów strony (nadaje im dynamiki i wiele więcej…)
Dodatkowo niezbędna jest znajomość RWD (Responsive Web Design) aby nasza aplikacja ładnie się skalowała bez względu na urządzenie na jakim jest otwierana oraz podstawowych frameworków czyli pewnych zasobów bibliotek i odpowiednich komponentów, odpowiadających za strukturę aplikacji oraz za to jak właściwie ona działa, a zaliczamy do nich:
Bootstrap – framework CSS, zestaw predefiniowanych gotowych klas z których możemy korzystać, odpowiada za tworzenie interfejsu graficznego strony/aplikacji.
Foundation – framework opierający się na regule mobile first, a co za tym idzie bardzo szybko i prosto możemy tworzyć mobilne wersje stron
Backbone – ma na celu wspomóc szablony tekstowe i automatycznie zapisywać wszystkie zmiany, które zachodzą w modelu
AngularJS – framework oparty na Javascript jego celem jest wspomaganie procesu tworzenia aplikacji internetowych
EmberJS – pozwala tworzyć aplikacje internetowe przy pomocy wzorca Model – View – Controller, automatyczna aktualizacja szablonu strony zdecydowanie ułatwia pisanie aplikacji
JQuery – jedna z najpopularniejszych bibliotek JavaScript – jQuery, która zdecydowanie ułatwia korzystanie z JS. jQuery daje możliwość wybierania dowolnego podzbioru węzłów modelu DOM, a także pozwala przygotować wyjątkowe animacje na stronie. Co ważne, przy korzystaniu z jQuery nie ma konieczności dostosowywania kodów do różnych przeglądarek, czyli wszystko działa poprawnie w każdej dosłownie przeglądarce.
Naszym zdaniem, programowanie w JavaScript, często z użyciem jakiegoś frameworka, to najbardziej pasujący opis do nazwy “frontend developer”.
Kim jest, czym się zajmuje, co musi umieć frontend developer ?
W wielu firmach, a co za tym idzie, ogłoszeniach o pracę, na stanowisko Frontend Developera szuka się osób ze znajomością: HTML, CSS oraz Photoshopa. Czasem nazwa stanowiska jest inna, na przykład “Web Developer”. Bardzo często zakres obowiązków takiego pracownika jest przesunięty w stronę bycia grafikiem, który dodatkowo ma uczestniczyć w końcowych etapach realizacji projektu w Photoshopie i exportu go aby następnie kodować do HTML/CSS. Jest to trochę błędne użycie nazwy “Frontend Developer” Mamy tutaj bowiem do czynienia z grafikiem, którego obowiązki zostały poszerzone o kodowanie statycznych stron. Niemniej jednak, tego typu wymagania spotyka się w ogłoszeniach o pracę i warto zdawać sobie z tego sprawę. W firmach granice często są naginane / rozciągane.
Front-End Developer’ów możemy podzielić na 2 główne grupy:
1. Zajmuje się kodowaniem z projektów graficznych do layoutów WWW. Najczęściej wykorzystywane technologie to HTML i CSS.
2. Druga zajmuje się głównie programowaniem komunikacji pomiędzy interfejsem użytkownika a serwerem. Najczęsciej wykorzystywane technologie to Java Script (np. AngularJS) – najliczniejsza obecnie grupa
Postaramy się uogólniając w największym skrócie objaśnić drogę projektu, przy czym już na wstępnie zaznaczamy, że istnieje zatarta linia pomiędzy Front-end a Javascript:
1.Web Designer – tworzy projekt graficzny strony np. w Photoshopie, realizując m.in. prototypowanie.
2. Front-end Developer przekształca projekt graficzny na HTML i CSS. Może dodać jakieś pluginy i prostą obsługę zdarzeń.
3. Javascript Developer dodaje całą logikę do Front-endu, (której na ogół nie widać) np. autoryzację, komunikację z back-endem, złożone operacje (np. płatności) i inne bardziej skomplikowane rzeczy
Celowo uwzględniliśmy to w ten sposób ponieważ od kilku lat JavaScript sprytnie przedostaje się także na back-end ( po stronie serwera przy pomocy node.js) gdzie może odpowiadać i za frontend a także logikę aplikacji (back-end). Wtedy taki programista nazywany jest full-stack developer ale o tym w dalszej części…
Od osoby na stanowisku frontend developer wymaga się przede wszystkim bardzo dobrej znajomości języka JavaScript, dzięki któremu implementowane są wszelkie wymagane “ficzery” aplikacji (funkcjonalności). Praca nad frontendem aplikacji, polega m.in. na komunikacji z API (najczęściej REST) wystawianym przez backend w celu pobierania z niego danych. Następnie dane te są, w odpowiedni sposób, prezentowane przez część frontendową. Do tego mogą dochodzić różne operacje na tych danych, które odbywają się już po stronie przeglądarki internetowej. Frontend aplikacji służy też do odbierania informacji od użytkownika. Są one następnie odpowiednio przetwarzane i wysyłane do backendu, za pomocą tego samego API. W powyższych działaniach, bardzo przydatne są frameworki JavaScript, które dostarczają programiście narzędzi wspomagających wykonywanie opisanych powyżej zadań. Osoba, która świetnie porusza się w języku JavaScript, jest w stanie szybko przyswoić sobie zasady pracy z każdym frameworkiem JS, dostępnym na rynku. Dużo osób niestety zbyt szybko przeskakuje od nauki JavaScriptu do nauki jQuery lub wręcz stara się pominąć JavaScript. Uczenie się jQuery przed JavaScript może boleć. Więcej, jQuery swój szczyt popularności już miało. Coraz więcej osób stara się go unikać, wraca do czystego JavaScriptu aby kolejno przejść do wykorzystania jakiegoś frameworka np. Angular JS, React.js, Vue.js, Node.js.
Ponadto znajomość wielu różnego rodzaju narzędzi (SASS/LESS, webpack, babel, grunt/gulp, npm, git itd.) wspierających pracę, również jest ważna i przydatna.
Pojęcie frontend jest jednak na tyle szerokie, że bez wątpienia może się zdarzyć, że natkniesz się na jeszcze inny miks wymaganych kompetencji. Warto więc dobrze studiować ogłoszenia o pracę.
W tym artykule wypiszę co powinna opanować osoba, która chce się nazywać Programistą WordPress lub WordPress Developerem. Wszyscy wiemy, że system ten można z powodzeniem wykorzystywać nie posiadając zaawansowanej wiedzy technicznej i wnikania w to jak działa. Tworzenie stron w systemie WordPress możemy ograniczyć do wykorzystywania gotowych motywów. Nieco ambitniejsi blogerzy mogą wykorzystywać wtyczki a nawet dodać snippety do pliku functions.php.
Proces tworzenia strony internetowej w taki sposób w ogóle nie przypomina tego jak strony internetowe są tworzone przez WordPress Developerów. Programista WordPress może tworzyć całą stronę internetową samodzielnie, wykonywać zlecenie klienta dotyczące np. konkretnej funkcjonalności lub jako członek mniejszego bądź większego zespołu wspierać proces tworzenia w konkretnym obszarze.
Kim tak naprawdę jest WordPress Developer?
WordPress to system CMS, który oczywiście obsługuje back-end ale dostarcza też prosty system szablonowania. Chcąc nie chcąc, WordPress Developer to tak naprawdę Full-Stack Developer wyspecjalizowany w tym konkretnym środowisku. WordPress jest napisany w PHP czyli idąc tym tropem. Jest to programista, który biegle zna PHP, specjalizuje się na stosie LAMP (Linux, Apache, MySQL, PHP) lub LEMP (Linux NGINX, MySQL, PHP) i zna cały framework WordPressa.
W średnich i dużych projektach może nastąpić specjalizacja na Front-End WordPress Developera i Back-End WordPress Developera. Ten pierwszy czyli Front-End WordPress Developer będzie miał częściej do czynienia z językami front-endowymi czyli kodem HTML, CSS i JavaScript. Back-End WordPress Developer go uzupełnia i będzie miał zazwyczaj do czynienia z PHP, MySQL i kwestiami związanymi z serwerem.
W mniejszych zespołach i w samodzielnej pracy jest się Full-Stack WordPress Developerem. Jest to kombinacja tych dwóch specjalności i jeżeli nie napisano inaczej, samo określenie WordPress Developer określa kogoś kto swobodnie porusza się zarówno w obszarach front-endowych i back-endowych. Fakt ten potwierdzają oczekiwania od kandydatów na to stanowisko jakie możemy przeczytać w ofertach pracy bądź w opisie stanowiska.
Jakich umiejętności się wymaga od programisty WordPress?
Z pomocą przychodzą ogłoszenia o pracę. Jeżeli wyeliminujemy te niedorzeczne, w których wymagamy np. znajomości z obszaru SEM, Photoshopa bądź (całkiem innego systemu) PrestaShop, mamy spójną listę zadań jakie stoją przed programistą WordPress.
1. Znajomość systemu WordPress
No, trzeba przyznać, że brzmi to troszkę zbyt ogólnikowo. Znajomość czyli co konkretnie? Znajomość WordPressa z perspektywy dewelopera to osiem filarów.
8 obszarów w witrynie
Pierwszym filarem jest dokumentacja. Zawiera ona funkcje, haki, klasy i metody, które będą ułatwiać programowanie we frameworku WordPress. Znajomość dokumentacji pozwala wykorzystywać WordPressa zgodnie z przeznaczeniem oraz rozwiązywać problemy w fachowy czyli najmniej kreatywny sposób.
Warto zwrócić uwagę na fakt, że wszelkie materiały dotyczące WordPressa są pisane w języku angielskim. W pracy programisty język angielski to coś tak oczywistego, że nie będę o tym pisał w osobnym punkcie.
Oczywiście, WordPress Developer nie musi znać na pamięć wszystkich funkcji i argumentów jakie przyjmuje. Posługiwanie się nimi szybko wejdzie w nawyk podczas tworzenia kolejnych stron i aplikacji. Programiści często tutaj zaglądają, bo jest to najpewniejsze i najbardziej aktualne źródło wiedzy na temat tworzenia wtyczek i motywów.
Fragment definicji funkcji register_sidebar() w
Każda funkcja posiada swoją definicję, wraz z opisem jak działa jakie przyjmuje argumenty i co zwraca. Na końcu wpisu znajduje się kilka przykładowych zastosowań danej funkcji w konkretnych przypadkach użycia.
Mimo, że określenie WordPress Developer nie jest ściśle sprecyzowane, do czegoś taka nazwa zobowiązuje i programista WordPress zna i stosuje w praktyce drugi filar czyli standardy kodowania WordPressa.
Trzecim filarem jest Edytor Blokowy. Nie można pominąć tego filaru jeżeli chcemy tworzyć własne bloki od podstaw. Jak wiemy zwykły edytor WYSIWYG został zastąpiony edytorem Gutenberg, który służy do edycji stron i wpisów. Choć w wielu projektach tworzenie własnych bloków nie będzie konieczne, każdy WordPress Developer potrafi stworzyć prosty blok.
Edytor blokowy WordPress
API to czwarty filar developmentu w WordPressie. System ten udostępnia szereg interfejsów API i rozwiązań charakterystycznych dla tego ekosystemu. Programista WordPress zna większości z poniżej wymienionych rozwiązań:
Rewrite API,
Shortcode API,
REST API,
XML-RPC,
Transients API
Tworzenie motywów WordPress,
Settings API – standaryzuje dodawanie półautomatycznych formularzy do panelu administratora,
Options API – standaryzuje przechowywanie opcji w bazie danych,
Plugin API – tworzenie własnych wtyczek.
Metadata API,
Zmienne globalne (takie jast $post, $posts, $authordata, $page itd..)
Filesystem API – wyższa warstwa abstrakcji do odczytu i zapisu danych w plikach w różnych środowiskach serwerowych,
i18n oraz l10n – zbiór przydatnych funkcji i wytycznych służących do internacjonalizacji i lokalizowania WordPressa.
Dashboard Widgets API,
Responsive Images,
Database API – ułatwia odczyt, zapis i aktualizację w bazie danych.
Piątym filarem są motywy WordPress. Umiejętność tworzenia motywów pozwala tworzyć front-end stron internetowych, przyspieszać budowanie spersonalizowanych szablonów a także modyfikować i optymalizować obecne.
Szóstym filarem są wtyczki WordPress, które rozszerzają funkcjonalność WordPressa, modyfikują standardowe jego działanie bądź optymalizują i automatyzują wykonywanie niektórych czynności. WordPress Developer potrafi nie tylko tworzyć własne wtyczki ale zna popularne wtyczki stworzone przez społeczność. Jedną z takich wtyczek jest WooCommerce, która dodaje do WordPressa funkcjonalność prostego ale rozszerzalnego systemu sklepowego.
Siódmy filar to REST API, który pozwoli na łatwe integrowanie systemu WordPressa z innymi aplikacjami.
Ósmy filar to WP-CLI czyli narzędzie przyspieszające administrację i prace serwisowe wprost z linii komend.
2. PHP
Aby móc wejść w te wszystkie tematy, trzeba opanować język PHP na poziomie podstawowym lub średniozaawansowanym. Nie trzeba znać innych frameworków niż WordPress. Aby stosunkowo łatwo poruszać się po środowisku WP należałoby panować zarówno teoretyczny jak i praktyczny aspekt:
Mile widziana będzie znajomość:
Rozszerzenia PHP DOM,
Założeń architektury REST,
systemu Git jeżeli będziemy pracować w zespole.
3. MySQL, podstawy baz danych i język SQL
W pracy WordPress developera możemy się spotkać z potrzebą wykonania złożonych kwerend. Tutaj przydadzą się podstawy języka SQL czyli standardowe polecenia SELECT i JOIN oraz tworzenie użytkowników i prace konserwacyjne w przypadku konieczności wykonania prac administracyjnych.
4. JavaScript
Przy tworzeniu motywów lub dodawaniu własnych funkcjonalności do front-endu, potrzebna będzie znajomość JavaScript. W momencie pisania tego artykułu, standardowym wyposażeniem WordPressa jest jeszcze biblioteka jQuery. Warto poznać też Vanilla JS ponieważ pojawiają się próby wyeliminowania jQuery w najbliższych aktualizacjach a samo programowanie JavaScript jest przydatne podczas tworzenia bloków.
5. HTML i CSS
Ten punkt to formalność w przypadku zajmowania się warstwą front-endową. HTML pozwala tworzyć szkielety stron internetowych a CSS pozwala dostosowywać jego wygląd za pomocą szeregu instrukcji.
6. Hosting i serwer
WordPress to aplikacja działającą na stosie LAMP. Dlatego WordPress developer nie powinien mieć problemów z takimi zagadnieniami:
Jak uruchomić LAMP na serwerze Linux,
instalacja rozszerzeń PHP i modułów do Apache,
DNS (Strefy DNS),
Certbot,
wymagania i zalecenia dla hostingu WordPress według
świadomość ograniczeń współdzielonego hostingu wirtualnego.
7. SEO
Dla wielu posiadaczy stron obszar SEO i wysoki stopień zoptymalizowania pod SEO to priorytet w przypadku tworzenia nowej strony bądź dużego portalu. Wiele istotnych decyzji z perspektywy SEO zapada w momencie programowania. Programista WordPress zna podstawowe założenia SEO oraz wie jak zastosować rekomendacje dotyczące tej warstwy projektu.
8. Serwis, bezpieczeństwo i dobre praktyki
Dobre praktyki przyspieszają pracę oraz chronią nas przed rozwiązywaniem banalnych problemów. O tym jak ważna jest konieczność tworzenia kopii zapasowych, jak dobierać hosting WordPress i ile czasu zaoszczędza WP-CLI to rzeczy, których nie wyczytamy z dokumentacji.
W przypadku złożonych aplikacji jaką niewątpliwie jest tytułowy CMS, ważne stają się kwestie bezpieczeństwa. Czytaj więcej na ten temat w artykule: Jak zabezpieczyć stronę WordPress?. Dobre praktyki to także zbiór zasad dotyczących tego czego nie powinno się robić. Modyfikacje rdzennych funkcji WordPressa, blokowanie aktualizacji czy wykorzystywanie szkodliwych wtyczek to niestety częsta praktyka wśród użytkowników WordPressa.
Podsumowanie
W tym artykule wyjaśniliśmy kim jest a kim nie jest WordPress Developer. Jest to web developer, który potrafi programować i tworzyć projekty w środowisku WordPressa. Niezależnie czy specjalizuje się w obszarach front-endowych czy back-endowych zna dokumentacje, standardy kodowania i API dostępne w tym środowisku.
Źródła
Czy jesteś gotowy na pierwszą pracę? - zadania dla początkującego front-end developera
W ramach mentoringu tworzę zadania dla mojego mentee i postanowiłam się z Wami nimi podzielić :) Ten wpis jest dla osób początkujących po kursach. Tych którzy czują się gotowi na podjęcie pierwszej pracy lub chcą sprawdzić się w prawdziwym zadaniu.
Jak wiadomo od słuchania i oglądania nikt programistą nie został, więc do roboty. Dobrze zrobione zadania tego typu to fajny wpis do pierwszego CV front-end developera :)
Słowniczek
Zanim przejdziemy do zadań musimy wyjaśnić sobie kilka słów:
AC (Acceptance Criteria) - lista biznesowych (czyli nietechnicznych), wymagań, które trzeba spełnić aby zadanie zostało zakończone. Czym dokładniejsze tym lepsze :) A dzisiaj to ja będe je przygotowała.
standardy kodowania - każdy team ma swoje, uczymy się ich kodując i współpracując z innymi programistami. Jeśli nie masz swoich to polecam te od Google'a. Dla mnie podstawą dla juniora będzie: ES6, modularność i reużywalność kodu (na takim poziomie jak dacie radę), logicznie ponazywane zmienne, czytelny kod.
CTA - skrót marketingowców od Call To Action; zwykle interaktywny komponent, kluczowy w kontekście danego widoku strony. Powinien się wizualnie wyróżniać.
Formularz kontaktowy
Poziom trudności dla początkującego: wysoki.
Zaczęłam od najtrudniejszego zadania, ale front-end developer powinien umieć stworzyć dobry formularz. Moim zdaniem perfekcyjne zadanie dla kogoś kto opanował podstawy HTML, CSS oraz JavaScript i szuka wyzwania.
AC:
podstawą formularza jest prosty landing page z białym tłem
formularz jest wycentrowany zarówno w poziomie jak i w pionie
formularz posiada tytuł "Skontaktuj się ze mną" oraz podtytuł "Zawsze chętnie się dowiemy się co Ci chodzi po głowie"
Formularz posiada trzy pola (imię, adres e-mail oraz treść wiadomości) oraz przycisk "Wyślij"
wszystkie pola w formularzu są walidowane: w polu imię da się wpisać tylko imię a w polu email tylko email. Błędna walidacja pola jest sygnalizowana czerwonym kolorem.
pole "Treść wiadomości" pozwala na wpisanie maksymalnie 120 znaków
przycisk "Wyślij" jest CTA (więc jest wystylowany jako taki)
przycisk "Wyślij" jest nieaktywny gdy formularz jest niepoprawnie wypełniony
design ma być elegancki, czytelny i klarowny, a obsługa intuicyjna i zgodna z nawykami użytkowników
To wbrew pozorom trudne zadanie, które wymaga zainteresowania jak wyglądają formularze i interakcje z nimi. Dla początkującego front-end developera jest to wiedza wręcz niezbędna, więc zostawiam Was z wyszukiwarką.
Stopka
Poziom trudności dla początkującego: średni.
Kolejnym zadaniem jest klasyczna stopka w której zwykle umieszczane są linki do najważniejszych podstron. Niezbędna część strony.
AC:
stopka znajduje się na dole strony, jest to rozciągnięta na całą szerokość
tło stopki jest w kolorze #383B44, tekst (linki oraz tekst) w #EBECF0
Stopka zawiera trzy kolumny ułożone obok siebie, a w każdej z nich tytuł oraz pięć Twoich ulubionych linków dotyczących web developmentu
Każda kolumna ma taką samą szerokość
W wersji mobilnej kolumny zamieniają się w rozwijaną listę składającą się z tytułów.
Listę rozwijasz klikając na tytuł, dzięki czemu ukazują się linki. Liste zwijasz klikają na tytuł, linki się chowają. Jak w poniższym przykładzie można użyć jakieś ikonki pokazującej stan (plus/minus albo strzałki góra/dół).
Da się to zrobić w samym CSS i jest to wersja preferowana ze względu na wydajność, ale zostawiam to Wam :)
Menu typu hamburger
Poziom trudności dla początkującego: niski.
Jest to typowy komponent stworzony pod mobilne wersje, ale wiele stron - w tym YouTube - korzysta z niego na wszystkich rozdzielczościach. Możecie je kojarzyć jako charakterystyczne trzy poziom kreski po naciśnięciu których pojawia się menu tak jak na zdjęciu poniżej:
AC:
strona posiada klikalną ikonkę hamburgera w lewym górym rogu strony
ikona zawsze (niezależnie od skrolowania) jest u góry strony
po naciśnięciu ikonki pojawia się menu o szerokości 200px którego wysokość jest równa wysokości strony
w menu są klikalne bloki z linkami
menu posiada wewnętrzny scroll na wypadek gdyby pozycji menu było więcej niż pozwala na to wysokość strony
menu chowa się po ponownym naciśnięciu na ikonkę hamburgera
dodatkowym atutem będzie animacja pojawiania się i chowania menu, ale nie jest konieczna
Hamburger jest obecnie nielubiany przez UXowców, ale to w miarę proste zadanie, idealne na rozgrzewkę lub mniej śmiałego adepta frontu :) Protip: To również można wykonać samym CSS.
Podsumowanie
Udostępniłam 3 zadania o różnym (wg mnie) poziomie trudności, które sprawdzają wiedzę i - przede wszystkim - umiejętność zdobywania informacji. Możecie zauważyć, że zadania nie kolidują ze sobą, więc szaleńcy mogą wykonać je w jednym pliku.
Piszcie jeśli coś jest niejasne i chwalcie się wynikami Waszej pracy :)
Zapraszam do kodowania :)
Leave a Comment