– Frontend developer to trochę taki one man army. Ze względu na specyfikę naszej pracy, dobry frontowiec musi znać się po trochu na tym, czym zajmują się wszystkie inne działy – powiedział nam Piotr Konowrocki, Head of Front-end w Efigence. Zapytaliśmy trzech specjalistów o to, co ich zdaniem ogranicza frontendowców.
W devdebacie udział wzięli:
Piotr Konowrocki . Head of Front-end w Efigence . Od 16 lat związany ze środowiskiem IT, od 13 lat profesjonalnie. Swoją ścieżkę rozpoczynał jako Content Editor zaliczając kolejno stanowiska juniorskie, seniorskie i liderskie, kończąc jako Head of Front-end. W trakcie swojej kariery pracował z największymi klientami z branż finansowych, telekomunikacyjnych czy motoryzacyjnych w dziesiątkach cmsów i frameworków przecierając szlaki przez nowinki technologiczne, obecnie zajmuje się managementem zespołu programistów.
Łukasz Wełniak . W branży IT od ponad 14 lat, wcześniej pracował w agencjach interaktywnych, od niemal 12 lat związany z Efigence. Zaczynał jako specjalista front-end, aktualnie nadzoruje zespoły produkcyjne. Uczestniczył we wdrażaniu innowacyjnych systemów bankowości internetowej dla dużych banków w Polsce i za granicą, nadzoruje implementację systemów CMS klasy Enterprise dla największych banków w Polsce. Bogate doświadczenie zdobyte w pracy zawodowej wspomaga wykształceniem inżynierskim, studiami podyplomowymi z zakresu
Piotr Kamienowski . Front-end application Team Leader w Efigence S.A. Posiada 10 letnie doświadczenie komercyjne w pracy nad aplikacjami webowymi. Od 8 lat jest związany z Grupą Efigence gdzie pracuje przy projektach bankowych i FinTech. Odpowiadał za projekty aplikacji frontendowych bankowości internetowej dla dużych banków z Polski i Europy. Na co dzień, nadzoruje prace kilkuosobowego zespołu Frontendowego.
Praca we frontendzie
Jak zaczęła się Wasza przygoda z frontendem? Jak wyglądał on kilkanaście lat temu?
Piotr Konowrocki, Head of Front-end w Efigence: Mój pierwszy kontakt z tworzeniem stron internetowych miał miejsce jeszcze w czasach szkolnych. Potrzebowałem zrobić stronę na temat swojej gry, żeby móc zareklamować ją w sieci. Profesjonalnie zacząłem zajmować się tym kilka lat później – po maturze, zamiast na kremówki, poszedłem do swojej pierwszej pracy w IT. Pracowałem przez jakiś czas jako Content Editor wprowadzając treści na strony, ale dość szybko zostałem przeniesiony innego do działu, wtedy jeszcze nazywanego webdeveloperami.
Te kilkanaście lat temu praca na froncie wyglądała kompletnie inaczej i była nieporównywalnie prostsza. Nie było mobile’a i responsywności, nie było żadnych frameworków, preprocesorów, task managerów. Wdrażaliśmy do CMSów proste strony w HTMLu i CSSie. Większość z nich obchodziła się w ogóle bez javascriptu, a największą zmorą każdego webdevelopera było dostosowywanie styli pod IE5.5 lub IE6.
Łukasz Wełniak, Web Development & Operations Director w Efigence:
Moja przygoda z IT zaczęła się od pracy jako webdeveloper – wtedy istniało takie stanowisko, które było odpowiednikiem dzisiejszego fullstacka. W zakresie obowiązków było tworzenie programowanie w PHP oraz tworzenie warstwy front-endowej aplikacji. W tamtym czasie front-end jako osobne stanowisko pracy nie istniał, na czasie były technologie XHTML 1.0 CSS2.1 czy JavaScript w wersji 3 (wersja 5 była jeszcze w trakcie implementacji). W branży toczyła się dyskusja, czy budowanie stron na tabelkach jest złe, czy dopuszczalne. Skrypty JavaScript służyły głównie do walidacji formularzy a przebojem w życie programistów wdarło się jQuery. Musieliśmy wspierać IE6 i robić, jak śpiewał Perfect: “Takie rzeczy, że jeszcze mi wstyd”.
Piotr Kamienowski, Front-end application Team Leader w Efigence:
Kilkanaście lat temu pracowało się jeszcze na tabelkach i walczyło z kompatybilnością z Internet Explorer 6. Style inline nie były takie złe, a o dodanie nowej klasy do div-a do vm-ki prosiło się zespół Java developerów. Moja przygoda zaczęła się od animowania / programowania stron w środowisku Flash i ActionScript. Podobało mi się to, że strona wyglądała tak samo na wszystkich przeglądarkach internetowych oraz to, że można było w łatwy sposób dodawać ciekawe animacje. Później klasycznie, czyli stronki dla znajomych już w HTML, CSS i JS, rozwój i poznawanie bieżących podejść i technologii, aż do teraz gdzie piszemy polskie i europejskie banki – już nie mamy styli inline i tabelek.
Kim jest Frontend Developer
Czym zajmuje się Frontend Developer, a co nie leży w jego zakresie zadań?
Piotr Konowrocki, Head of Front-end w Efigence:
Według mnie front-end developer to trochę taki one man army. Oczywiście naszym głównym zakresem obowiązków jest odpowiedzialność za warstwę wizualną strony/aplikacji oraz wszystkie interakcje pomiędzy stroną, a użytkownikiem. Jednak ze względu na specyfikę naszej pracy, dobry frontowiec musi znać się po trochu na tym, czym zajmują się wszystkie inne działy. Minimum podstaw znajomości języka, w którym pracują backendowcy w jego projekcie, coś o konfiguracji serwerów. A z drugiej strony potrzebna jest też znajomość obsługi programów graficznych, bo nierzadko trzeba samemu coś wyciąć albo poprawić.
Do tego przydaje się choć odrobina poczucia estetyki, ponieważ koniec końców to my przygotowujemy wszystkie animacje, które znajdują się na stronach. Jest takie powiedzenie: “jack of all trades, but master of none”. Parafrazując je w kontekście zadań front-endowca: “jack of all trades, but master of one”.
Łukasz Wełniak, Web Development & Operations Director w Efigence:
Front-end Developer to specjalista od warstwy wizualnej strony. Jego obowiązkiem jest tworzenie widoków/funkcjonalności, które spełniają wymagania funkcjonalne i wizualne wynikające z założeń projektu, a które dodatkowo są:
zbudowane zgodnie ze sztuką (ze standardami),
wydajne: zbudowane zgodnie z podejściem mobile first, progressive enhancement,
atrakcyjne: wzbogacone o drobne animacje, które udynamiczniają całą stronę, wprowadzają “miękkość” działania strony,
dostępne: zakładamy, że nawet jeżeli projekt nie wymaga wyższego standardu dostępności, naszym standardem wewnętrznym powinno być dostarczanie aplikacji spełniające poziom A wytycznych WCAG 2.1,
bezpieczne: w dzisiejszych czasach aplikacje są nieraz pisane w pełni w technologiach frontendowych, a to oznacza dużą odpowiedzialność, również za dane klientów końcowych. Bezpieczeństwo stało się więc w pracy Frontendowca bardzo ważne,
czytelne: kod tworzony przez programistę powinien być samo-dokumentujący, czyli na tyle czytelny, aby inny programista nie potrzebował dokumentacji aby zrozumieć jego działanie.
Co do drugiej części pytania, czyli co nie należy do jego obowiązków, to oczywiście wszystko, co leży poza jego kompetencjami. Nie uważam jednak, że jako specjaliści powinniśmy się odcinać od myślenia szerszego niż tylko nasze podwórko. Praca w zespole projektowym daje możliwości wpływu na to, co się dzieje w całym procesie tworzenia produktu, a każdy członek zespołu, niezależnie od specjalności powinien działać w nim proaktywnie. To oznacza, że zawsze powinniśmy wyrażać nasze wątpliwości i dzielić się pomysłami związanymi z tworzonym oprogramowaniem, bo dzięki temu staje się on lepszy.
Piotr Kamienowski, Front-end application Team Leader w Efigence:
Frontend Developer jest programistą. To nie te czasy, kiedy traktowano nas jak dodatek, w stylu: “o, a to damy frontowi, niech pokoloruje”. Na przestrzeni lat zakres naszych obowiązków rośnie wykładniczo, mógłbym nawet pokusić się o dyskusje, czy nie mamy przypadkiem bardziej złożonego stacku, połączeń i zależności od Backend developerów. Nie chodzi mi jednak o to, żeby teraz prowadzić walkę, kto ma więcej, trudniej czy kto jest bardziej pro – zostawmy to, przecież to nie ma znaczenia. Znaczenie ma to, że nasza praca zyskuje na szacunku ogółu społeczności IT.
Trudno powiedzieć, co nie leży w zakresie naszych obowiązków, bo przecież oprócz kodowania jesteśmy: analitykami, sprzedawcami, osobami kontaktującym się bezpośrednio z klientem, testerami naszego kodu oraz kodu naszych poprzedników, a także nieraz dev-opsami i projektantami prawidłowego według nas api jakie powinno spłynąć z backend. Niektórzy z nas są liderami i muszą dodatkowo zarządzać zespołem. Może inaczej: jedyne czego nie robiłem jako Frontend Developer to stawianie bazy danych oraz backendu, nie programowałem też w Python ani w Java (nie licząc studiów informatycznych).
Jak Waszym zdaniem dziś wygląda zapotrzebowanie na frontendowców? Może jest jakaś branża, która szczególnie potrzebuje frontendowców?
Piotr Konowrocki, Head of Front-end w Efigence:
Zapotrzebowanie na frontendowców systematycznie rośnie z roku na rok, tak samo jak rosną wymagania i obszary, za które frontendowiec jest odpowiedzialny. Coraz więcej rzeczy dzieje się bezpośrednio w przeglądarce, coraz więcej logiki biznesowej przenoszone jest na front, co oznacza, że pracy dla nas nie brakuje i prędko nie zabraknie. Do tego nie zapominajmy, że HTML, CSS i JavaScript wykorzystywane są nie tylko jako języki do tworzenia stron internetowych, ale także do aplikacji mobilnych, desktopowych lub mniej typowo na przykład na telewizory z androidem.
Nie wydaje mi się natomiast, żeby jakaś branża przodowała w zapotrzebowaniu. Warstwa wizualna jest tak samo potrzebna, niezależnie od tego czy chcemy naszemu klientowi sprzedać buty czy ubezpieczyć go od wypadku.
Łukasz Wełniak, Web Development & Operations Director w Efigence:
Zapotrzebowanie jest od kilku lat ogromne. Od momentu wprowadzenia HTML5 i CSS3 ciągle rośnie nacisk na jakość warstwy wizualnej aplikacji, a równocześnie coraz więcej pracy przenosi się na deweloperów Front-end (aplikacje SPA, frameworki). Przez kilka lat mieliśmy okres “dzikiego” wzrostu zapotrzebowania, co skutkowało tym, że każdy aspirujący junior mógł od ręki znaleźć pracę. Aktualnie, od około dwóch lat, mam wrażenie, że sytuacja się unormowała i firmy (jeżeli mogą) wolą jednak zatrudnić specjalistę z doświadczeniem.
Piotr Kamienowski, Front-end application Team Leader w Efigence:
Zapotrzebowanie jest duże, pandemia pomimo początkowego chaosu w branży z cyklu: “co to będzie, czy klienci zrezygnują z projektów lub je zatrzymają?”, nie wpłynęła na obniżenie zapotrzebowania. To co zauważam, to zmniejszające się chęci zatrudniania do cechu juniorów oraz osób entry-level. Nie można się też dziwić, wyszkolenie człowieka na początkowym lub bardzo początkowym etapie kosztuje czas. Nierzadko taka osoba po roku czy półtora zmienia pracę głównie z powodu chęci “świeżego startu z wyższego pułapu” – prawdziwy cytat.
Na ten moment dostrzegam, że niemal każda branża szczególnie potrzebuje frontendowców, ponieważ wiele działalności musiało przejść do weba z powodu aktualnej sytuacji Światowej.
Frontend developer czy fullstack developer
Dzisiaj łatwiej frontendowcowi czy fullstackowi znaleźć pracę?
Piotr Konowrocki, Head of Front-end w Efigence:
Według mnie łatwiej znaleźć pracę fullstackowi, ale z innych powodów, niż mogłoby się to wydawać. Większość poważnych firm rozgranicza stanowiska frontowe i backendowe. Ktoś, kto określa się mianem fullstacka będzie miał ułatwione zadanie, ponieważ zna więcej technologii i może szukać pracy we wszystkich jednocześnie. Natomiast jeżeli chciałby zatrudnić się jako stricte fullstack, to obawiam się, że liczba sensownych ofert może być dość mocno ograniczona.
Łukasz Wełniak, Web Development & Operations Director w Efigence:
Wiadomo, że fullstack ma większe możliwości, bo zna kilka technologii. Zawsze może znaleźć pracę programisty w jednej z nich. Jeżeli jednak szuka pracy, w której będzie miał możliwość pracy w kilku z nich jednocześnie, to już musi znaleźć firmę, która akurat takie wykorzystuje i nie rozdziela twardo tych kompetencji pomiędzy działy.
Piotr Kamienowski, Front-end application Team Leader w Efigence:
Moim zdaniem paradoksalnie łatwiej będzie znaleźć pracę frontendowcowi. Czuję, że dla fullstacka są nieraz zbyt wygórowane oczekiwania. Niektórzy chcieliby od razu mocnego fullstacka, czyli silnego we frontend oraz backend, a nie standardowego, co wie, co w trawie piszczy po obu stronach. Dobry mocny fullstack za to w mojej ocenie będzie chętnie zatrudniany.
Pytanie jest inne: czy warto być fullstackiem, ale to każdy musi odpowiedzieć na nie indywidualne bazując na zainteresowaniach i pomyśle na życie. Hint od mnie: ogarnianie dwóch stron barykady w sposób zadowalający może pochłonąć niezliczoną ilość czasu, a trzeba to zderzyć z późniejszymi zarobkami oraz obowiązkami w firmie.
Z jakimi ograniczeniami wiąże się praca frontendowca?
Piotr Konowrocki, Head of Front-end w Efigence:
Niestety, ograniczeń przybywa wprost proporcjonalnie do możliwości. Kiedyś ograniczeni byliśmy jedynie przez starsze wersje przeglądarek, najczęściej Internet Explorera. Obecnie, mimo że IE rozwija się i coraz więcej klientów porzuca starsze wersje, dochodzą inne ograniczenia. Responsywność, różne systemy operacyjne, przeglądarki wbudowane w popularne aplikacje mobilne (Facebook, Messenger, Instagram itp.). Ze względu na takie ograniczenia czasem trzeba porzucić niektóre rozwiązania, ponieważ sprawdziłyby się jedynie na części urządzeń. Budżet i deadline nie pozwalają na zaprojektowanie dedykowanego interfejsu dla każdego wariantu, w związku z czym kończymy z czymś prostszym, ale bardziej uniwersalnym.
Dodatkowo należy pamiętać, że odbiorcy naszych stron mogą korzystać z nich na sprzęcie o wiele gorszym, niż ten, na którym pracujemy i testujemy my. Jak wspominałem już wcześniej, coraz więcej logiki przenoszonej jest na front, więc jeżeli dodamy do tego jeszcze wszelkiego rodzaju animacje i efekty wow, którymi atakuje użytkownika strona, to musimy naprawdę pilnować wydajności.
Łukasz Wełniak, Web Development & Operations Director w Efigence:
Jedyne co mi przychodzi do głowy to ograniczenia technologiczne i sprzętowe… np. nie zawsze możemy puścić wodze fantazji i zrobić super zaawansowane, skomplikowane animacje, bo u większości użytkowników albo nie zadziałają w pełni albo będą się przycinać, co da efekt odwrotny od zamierzonego. Ciągle z tyłu głowy musimy mieć rankingi popularności systemów operacyjnych, przeglądarek czy rozdzielczości monitorów/wyświetlaczy.
Mimo że to już nie czasy, gdy IE6 nas ciągnęło w dół, to nadal wydajność sprzętu jest ważna, a wsparcie przeglądarek jest jednym z najważniejszych kryteriów, jakie interesują klienta zamawiającego aplikacje internetowe. Poza tym, mamy dużą swobodę, pracy dla specjalistów z doświadczeniem jest dużo, można pracować w pełni zdalnie, dla klienta z drugiego końca świata, wybierać technologię, która nam odpowiada, pracować na porządnym sprzęcie, za dobre pieniądze… brzmi jak wymarzona praca.
Piotr Kamienowski, Front-end application Team Leader w Efigence:
Ograniczenia pochodzą zazwyczaj od klienta. Klient potrafi przyjść i zapragnąć projekt (nawet bankowy) w tym, a nie innym konkretnym stack-u technologicznym. Nikt nie wie i się nie dowie, czym klient się kieruje w doborze i dlaczego to robi, zamiast zdać się na opinię doświadczonych ludzi z branży, którzy dostosują stack do zadania. Tak po prostu czasem bywa.
Inną rzeczą ograniczającą pracę frontendowca może być management, który w porę nie dostosuje złożoności zadań do bieżących umiejętności i chęci rozwoju developera, czytaj – gdy na przykład cały czas dostajesz landing page do stylowania. Wtedy należy poruszyć ten temat z przełożonym i oczekiwać możliwości lepszego rozwoju / zmienienia wewnętrznie projektu w danej firmie.
Dla kogo frontend to dobry kierunek w karierze?
Piotr Konowrocki, Head of Front-end w Efigence:
Wydaje mi się, że to pytanie można odpowiedzieć na dwa sposoby.
Po pierwsze: dla osób, które oprócz programowania lubią też widzieć efekty swojej pracy. Programując w dowolnym języku zawsze możemy stworzyć super algorytm, za którzy pochwalą nas nasi koledzy nerdzi kiwając głową z aprobatą. Jednak praca frontendowca daje nam dodatkowo to, że jej efekt widzą wszyscy użytkownicy końcowi, mają z nim bezpośrednią styczność.
Po drugie: dla osób, które lubią uniwersalność. W 2013 roku byłem na konferencji, na której Allen Wirfs-Brock, jeden z autorów specyfikacji ECMAScript 2015, opowiadał o tym, że każda era komputerowa ma swój wiodący język programowania. I że wypada go znać. Najpierw był to COBOL/Fortran, następnie nastała era C/C++, obecnie jest to javascript. I nie, absolutnie nie twierdzę, że jest to najlepszy z języków, nie o to w tym chodzi. Javascript ma dużo wręcz komicznych rozwiązań, część z nich bardzo słusznie jest obiektami żartów w światku programistycznym. Ale znając javascript w tej chwili można napisać prawie wszystko. Potrzebna strona? Proszę bardzo. Aplikacja mobilna? Oczywiście. Aplikacja desktopowa, najlepiej żeby działała tak samo na Windowsie i Linuksie bez dodatkowego nakładu pracy – droga wolna. Aplikacja na telewizor? Interaktywny kiosk oparty na Raspberry PI, nie wiem, aplikacja na inteligentną lodówkę? Znasz odpowiedź.
Łukasz Wełniak, Web Development & Operations Director w Efigence:
Dla ludzi, którzy to lubią. Zawsze uważałem, że żeby się tym zajmować, trzeba to lubić. NIe mówię tu tylko o front-endzie, ale ogólnie o IT. Programowanie powinno dawać radość, satysfakcję. W każdej pracy, zajmując się tym co się lubi pracuje się wydajniej. Jak to mówią, z niewolnika nie ma pracownika. Branża IT jest branżą kreatywną, wymaga logicznego myślenia, inwencji i proaktywności. Tworzymy rozwiązania, które są później wykorzystywane przez miliony użytkowników, ważne więc żeby nasza praca była wykonana jak najlepiej. To wymaga zaangażowania, a ktoś kto przychodzi do pracy jedynie po pieniądze, nigdy nie wykorzysta w pełni swoich możliwości.
Jeżeli ktoś zastanawia się nad zmianą branży i IT kusi go PRem o wielkich zarobkach i profitach, na początek niech spróbuje się nauczyć w domu choć podstaw jakiegoś języka programowania. Jeżeli tworzenie prostych skryptów czy stron www będzie sprawiało mu radość i nakręcało go do dalszej nauki – to może być praca dla niego.
Piotr Kamienowski, Front-end application Team Leader w Efigence:
Dla osób logicznie myślących, chętnych do nauki i rozwoju. Dla tych, którzy nie mają problemu w szukaniu wiedzy na własną rękę. Dla ludzi lubiących pracę w grupie, ale i osoby wolące być w cieniu odnajdą się. Nasza branża jest mocno perspektywiczna, cały czas też ewoluuje, więc jest dla osób elastycznych, potrafiących się co parę lat przekwalifikować na inną technologię lub całkowicie na inną pokrewną może nawet nieistniejącą jeszcze na ten moment podobną branżę. Zarobki również pozytywnie napędzają do rozwoju.
Czy Fullstack ma łatwiej na rynku pracy? O to zapytaliśmy specjalistów w kolejnej devdebacie.
Opis kursu
Kurs powstał w ramach projektu "MOOC@PB-Nowoczesne technologie w procesie kształcenia" umowa nr POWR.03.01.00-00-W040/18-00
O kursie
Kurs dotyczy podstaw programowania aplikacji front-endowych typu Single Page Application (SPA). Będziemy korzystać z frameworków: React i Angular2+.
Kurs jest skierowany przede wszystkim do studentów studiów informatycznych, ale każdy, kto chce poznać podstawy tych dwóch frameworków, będzie usatysfakcjonowany. W tworzeniu kursu brali udział studenci, więc poziom i forma przekazu (dużo przykładów, filmy, prezentacje kodu, interaktywny kod na StackBlitz) jest dostosowana do wymagań młodych osób.
Organizacja kursu: harmonogram cotygodniowych modułów: część teoretyczna, refaktorowany co tydzień przykład projektu, zadania do samodzielnej implementacji.
Treści edukacyjne:
Wiadomości wstępne: na początku powiemy parę słów na temat różnych technologii: frameworków, bibliotek do tworzenia aplikacji front-endowych,
dowiesz się też, co to jest aplikacja Single Page Application,
poznasz podstawy JavaScript,
przygotujesz środowisko programistyczne: instalacja i konfiguracja IDE oraz serwera Node.js do uruchamiania aplikacji. Programowanie w technologii React: opowiemy o podstawowych elementach aplikacji: komponentach,
odkryjesz język JSX, który pozwoli na przejrzyste zamieszczanie kodu HTML w komponentach,
poznasz podział komponentów na stanowe i funkcyjne, dlaczego warto je wyróżniać i jak implementować,
pokażemy, jak komunikują się komponenty: standardowo oraz w architekturze Flux,
oraz jak aplikacja komunikuje się ze zdalnym serwerem w celu pobrania danych i ich modyfikacji - dowiesz się, co mają z tym wspólnego Obietnice. Programowanie w technologii Angular 2+: poznasz język TypeScript - odmianę JavaScriptu, która czyni go mocno podobnym do języków takich, jak Java czy C#,
sprawdzisz, czy rzeczywiście można stworzyć działającą i funkcjonalną aplikację w ciągu jednej godziny,
dowiesz się, jak korzystać z filtrów, potoków i strumieni,
odkryjesz tajemnice dyrektyw i mechanizmu walidacji wprowadzanych danych.
WYMAGANIA WSTĘPNE
Do nauki potrzebujesz serwera Node.js, menedżera pakietów npm oraz edytora z zainstalowanymi frameworkami. Instrukcje instalacji wszystkich narzędzi znajdziesz w kursie.
Kurs możesz przeglądać zarówno na komputerze, jak i urządzeniach mobilnych, lecz do wykonania zadań implementacyjnych będziesz z pewnością potrzebować komputera.
Nie musisz znać języka angielskiego, chociaż, jeśli miałeś(aś) już do czynienia z programowaniem, to wiesz, że elementy kodu są pisane w tym języku. Ale nie musisz się tym martwić, każda instrukacja jest wyjaśniona.
WARUNKI ZALICZENIA
Aby zaliczyć kurs musisz uzyskać co najmniej 50% punktów z: testów sprawdzającyh wiedzę (w każdym tygodniu), zadań implementacyjnych (w każdym tygodniu), projektu (pod koniec kursu) oraz egzaminu końcowego (na zakończenie kursu).
Każdy, kto uzyska zaliczenie, otrzyma zaświadczenie o ukończeniu kursu.
KADRA KURSU
dr inż. Urszula Kużelewska
Adiunkt, Wydział Informatyki, Politechnika Białostocka
Wieloletni pracownik naukowo-dydaktyczny na Wydziale Informatyki Politechniki Białostockiej. Prowadzi zajęcia w ramach przedmiotu "Sieci komputerowe", a także z przedmiotów dotyczących programowania: w języku C++, Java, JavaScript, React i Angular. Zainteresowania naukowe: analiza danych, web mining oraz systemy rekomendacji. Jest też współwłaścicielem firmy zajmującej się inteligentnymi rozwiązaniami w dziedzinie Internet of Things, odznaczoną europejskim certyfikatem Seal of Excellence.
inż. Patryk Sienkiewicz
Absolwent wydziału Informatyki Politechniki Białostockiej oraz Technikum Elektrycznego w Białymstoku
Interesuje się tworzeniem gier komputerowych, stron internetowych oraz muzyką i sportem – szczególnie siatkówką i pływaniem. Głównie programuje w technologii ASP.NET, JavaScript i React.
inż. Kacper Wojciech Kozioł
Absolwent Wydziału Informatyki Politechniki Białostockiej
Programista full stack developer. Płynnie korzystający z języka Java z frameworkiem Spring, JavaScript z React i ReactNative oraz TypeScript z Angular 2+. W wolnym czasie fotograf i obserwator nocnego nieba. Laureat konkursów fotograficznych. Zainteresowania: jeździectwo, muzyka, nowoczesne technologie, programowanie i biometria.
inż. Mateusz Rachubka
Absolwent Wydziału Informatyki Politechniki Białostockiej
Główne obszary zainteresowań to programowanie - JavaScript, React, React Native oraz Java z frameworkiem Spring, a także nowości technologiczne. Dodatkowo interesuje się zagadnieniami związanymi z biometrią. W czasie wolnym osoba aktywna fizycznie. Posiada osiągnięcia na poziomie wojewódzkim. Laureat konkursów recytatorskich oraz fotograficznych.
inż. Marek Dziakowski
Absolwent wydziału Informatyki Politechniki Białostockiej oraz Technikum Elektrycznego w Białymstoku
Interesuje się biometrią, programowaniem (zarówno front-end jak i back-end). Głównie specjalizuje się w technologii React, React Native oraz technologii .NET MVC. Posiada tytuł technika wraz z certyfikatami E.12, E.13, E.14. W czasie wolnym lubi jeździć na rowerze.
Transkrypt
1 WYKŁAD 1 TECHNOLOGIE FRONT-END CZĘŚĆ 1
2 TROCHĘ HISTORII strona internetowa Webmaster - grafika, baza, programowanie, layout (Photoshop, MySQL, PHP, HTML, CSS, JS) strona internetowa Grafik - grafika (Photoshop, Adobe Illustrator) Webmaster - baza, programowanie, layout (MySQL, PHP, HTML, CSS, JS)
3 TROCHĘ HISTORII Webdesigner, grafik - grafika (Photoshop, Adobe Illustrator) aplikacja internetowa UX prototyp interfejsu aplikacji (HTML, CSS, narzędzia UX) Front-end developer kodowanie interfejsu aplikacji (HTML, CSS, LESS, SASS, JS, frameworki JS, Karma, Node.js) Back-end developer kodowanie logiki aplikacji (języki programowania, bazy danych)
4 TECHNOLOGIE FRONT-END OWE Technologie pozwalające na tworzenie interfejsu użytkownika w aplikacjach internetowych. Wraz z rozwojem aplikacji webowych, praca nad interfejsem użytkownika ewoluowała z tworzenia statycznych, generowanych po stronie serwera widoków w kierunku dynamicznych interfejsów, reagujących na działania użytkownika z jednoczesnym ograniczeniem odwołań do serwera.
5 CO NA TO PRACODAWCY?
6 CO NA TO PRACODAWCY?
7 TECHNOLOGIE FRONT-END OWE Obejmują: Język znaczników HTML; Kaskadowe arkusze styli CSS: o preprocesory CSS: Less, Sass (SCSS), Stylus, CSS-Crush; o frameworki CSS: Twitter Bootstrap, Materialize, Foundation; o Responsive Web Design: media queries;
8 TECHNOLOGIE FRONT-END OWE JavaScript: o Biblioteki JS: jquery, jquery Mobile, Vanilla JS; o MV* Frameworki JavaScript: AngularJS, Backbone.js, Ember.js, React.js, Knockout.js, itd o Testy jednostkowe: Karma, Jasmine; Narzędzia: o Node.js; o Bower; o Grunt; o Gulp; o I wiele innych.
9 TECHNOLOGIE FRONT-END OWE
10 BASIC FRONT-END Podstawowe umiejętności: HTML 5; Kaskadowe Arkusze Styli CSS; Język JavaScript;
11 FRONT-END DEVELOPER Umiejętności front-end developera: Preprocesory i frameworki CSS; MV* frameworki JavaScript; Narzędzia do budowania front-end u;
12 FRAMEWORKI CSS Frameworki oparte o język HTML, kaskadowe arkusze stylów CSS oraz język skryptowy JavaScript. To zestaw gotowych rozwiązań, bibliotek i narzędzi, które można wykorzystać przy tworzeniu stron internetowych albo ich prototypów. Obsługują media queries, są oparte o siatkę grid, oferują własny system kontrolek i przycisków. Twitter Bootstrap, Foundation (Zurb), Material Design (Google).
13 BOOTSTRAP (TWITTER, SIERPIEŃ 2011) (Twitter, sierpień 2011, v.4) Twitter Bootstrap to jeden z najbardziej popularnych framework ów do tworzenia responsywnych i przyjaznych urządzeniom mobilnym stron internetowych.
14 BOOTSTRAP (Twitter, sierpień 2011, v.4) Oparty o siatkę 12 kolumn; 4 punkty przełamania dla urządzeń mobilnych; Współpracuje z preprocesorami SCSS i Less;
15 FOUNDATION (Zurb, październik 2011, v.6) Również w pełni konfigurowalny, dzięki użyciu preprocesora SASS. Posiada 12-kolumnową płynną siatkę, którą można łatwo zagnieżdżać. Warto dodać, iż jest to pierwszy duży framework wykonany zgodnie z regułą mobile first, co sprawia iż tworzenie mobilnych wersji stron jest bardzo szybkie i proste. Zawiera pełen zestaw elementów UI i skryptów JS.
16 FOUNDATION (Zurb, październik 2011, v.6) Oparty o siatkę 12 kolumn; 6 punktów przełamania dla urządzeń mobilnych; Współpracuje z preprocesorem SASS; Trzy rodzaje: dla serwisów, newsletterów, aplikacji webowych (w pakiecie pełna integracja z AngularJS).
17 MATERIAL DESIGN (Google, lipiec 2014) Opracowany dla Androida zestaw reguł i styli dotyczących interfejsu. Na tej podstawie powstało wiele framework ów oferujących komponenty tworzone według wytycznych Google, np. Materialize. Google oferuje też własny framework: Material Design Lite.
18 PREPROCESORY CSS Preprocesory CSS to narzędzia, które pozwalają pisać kod CSS z wykorzystaniem bardziej zaawansowanych możliwości, takich jak zmienne, operatory, funkcje czy bloki danych. Po zapisaniu, pliki preprocesorów są kompilowane do zwykłych plików CSS i mogą być swobodnie wykorzystywane w aplikacjach webowych. Plik wejściowy (.less,.scss,.styl) Kompilator Plik wyjściowy
19 PREPROCESORY CSS - ZALETY Możliwość ustawiania zmiennych i parametrów, dzięki czemu zachowuje się spójność w stylach, np. można zdefiniować główny kolor lub obramowanie współdzielone w całej aplikacji. Zmniejszenie kodu CSS przez eliminację powtórzeń tych samych bloków kodu. Zagnieżdżanie reguł, dzięki czemu łatwiej zarządzać selektorami. Łatwość zarządzania kodem CSS i przenoszenia go między aplikacjami z jednoczesnym wyborem, które moduły css będą potrzebne. Możliwość wykorzystywania matematyki i funkcji logicznych.
20 PREPROCESORY CSS - { max-width: 960px; padding-top: 30px; p { font-size: 12px; a { text-decoration: none; color: red; p a { font-weight:bold; color: blue; p a:hover { color: green; } { max-width: 960px; padding-top: 30px; a { text-decoration: none; color: red; } p { font-size: 12px; a { font-weight:bold; color: blue; &:hover { color: green; } } } } less
21 PREPROCESORY CSS Do najbardziej znanych preprocesorów CSS zaliczają się: Sass (Syntactically Awesome Style Sheets) - najbardziej dojrzały ze wszystkich preprocessorów. Swoimi początkami sięga 2006 roku. Najnowsza wersja to Less (Leaner CSS) - został stworzony w odpowiedzi na język Sass w roku W odpowiedzi Sass wprowadził nową składnię scss. Aktualna wersja została oznaczona numerem Stylus - najmłodszy z całej trójki, swoimi początkami sięga 2011 roku. Najnowsza wersja, która została opublikowana 4-tego września, nosi numer
22 SASS (SCSS) Oficjalna wersja Sass jest wersją open-source opartą o język Ruby. Istnieją jednak rozszerzenia oparte o inne języki, w tym np. PHP czy Java. Sass umożliwia pisanie kodu w dwóch składniach sass lub scss. Składnia sass zamiast nawiasów klamrowych do definiowania bloków wykorzystuje wcięcia, natomiast reguły oddziela od siebie znak nowej linii (podobne do kodu napisanego w YAML lub Haml). Składnia scss wraca swoimi założeniami do klasycznego formatowania kodu CSS. Do definiowania bloków wykorzystujemy nawiasy klamrowe, z kolei średniki oddzielają reguły od siebie.
23 SASS (SCSS) - PRZYKŁAD =border-radius($radius) sass -webkit-border-radius: $radius -moz-border-radius: $radius -ms-border-radius: $radius border-radius: $radius.box +border-radius(10px).box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } scss border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; }.box border-radius(10px); }
24 LESS Dynamiczny język arkuszy stylów stworzony przez Alexis Selliera. Pierwsza implementacja napisana była w Ruby, późnej została zastąpiona wersją napisaną w JavaScript. Less jest zagnieżdżonym metajęzykiem - poprawny kod CSS jest również poprawnym kodem Less. Główną różnicą pomiędzy Less i innymi prekompilatorami CSS jest możliwość kompilacji w czasie rzeczywistym kodu przez przeglądarkę.
25 LESS - 100px) { { color: red; } img } img { width: 50px; height: 100px; color: red; } css
26 STYLUS Stosunkowo nowy preprocesor wzorowany na obu poprzednich. Został stworzony przez TJ Holowaychuk a, byłego programistę Node.js i twórcę języka Luna. Napisany w JADE i Node.js. To, co odróżnia go od pozostałych to fakt, że można w nim korzystać z dowolnego zapisu reguł zarówno używając klamer i średników (SCSS i LESS) jak i ignorując je (SASS). Można też mieszać zapisy w jednym pliku.
27 PORÓWNANIE PREPROCESORÓW 2015 Preprocesor Ilość głosów Procentowo Sass % Less % Stylus % Inny % Żaden % Razem % Wyniki ankiety z 2015 roku,
28 PORÓWNANIE PREPROCESORÓW 2015 Wyniki ankiety z 2015 roku,
29 MVC MODEL-VIEW-CONTROLLER Model-View-Controller (pol. Model-Widok-Kontroler) wzorzec architektoniczny służący do organizowania struktury aplikacji posiadających graficzne interfejsy użytkownika. Klasyczny MVC zakłada podział aplikacji na trzy główne części: Model jest pewną reprezentacją problemu bądź logiki aplikacji. Widok opisuje, jak wyświetlić pewną część modelu w ramach interfejsu użytkownika. Kontroler przyjmuje dane wejściowe od użytkownika i reaguje na jego poczynania, zarządzając aktualizacje modelu. Wszystkie trzy części są ze sobą wzajemnie połączone.
30 MVC MODEL-VIEW-CONTROLLER Kontroler wybiera model oraz widok i przekazuje temu widokowi, z którego modelu ma skorzystać. Widok wysyła zapytanie do modelu, który zwraca odpowiednie dane. 2 CONTROLLER 1 VIEW MODEL
31 MVP MODEL-VIEW-PRESENTER Widok przesyła do prezentera żądanie użytkownika. Prezenter wysyła do modelu prośbę o konkretne dane. Model odsyła dane, na których prezenter może dokonać jeszcze manipulacji i dopiero przesyła je do widoku. 1 PRESENTER VIEW MODEL
32 MVVM MODEL-VIEW-VIEWMODEL Model zawiera tylko dane. View odpowiada za wyświetlanie danych i przekazywanie zdarzeń. ViewModel opiera się o dwustronne wiązanie: zawiera logikę biznesową, odpowiada za modyfikacje modelu oraz obsługuje widoki, dzięki czemu możliwe jest automatyczne wprowadzanie zmian.
33 FRAMEWORKI JS Możemy wyszczególnić kilka głównych cech/narzędzi, które powinien dostarczać dobry framework MVC JavaScript: binding danych pomiędzy HTML em, a obiektem modelu po stronie klienta (w tym aktualizacja danych w obie strony); szablony widoków, w które wstrzykiwane są dane z modelu ; routing URL czyli udawanie przed przeglądarką, że aplikacja ma więcej niż jedną stronę; składowanie danych rozumiane zwykle jako narzędzia do zapisywania zmian do serwera.
34 FRAMEWORKI JS Użycie JS w projektach Głosy Procentowo Vanilla JS % jquery % AngularJS % React % Backbone % Ember % Knockout % Underscore % Wyniki ankiety z 2015 roku, Framework Rozmiar Rozmiar z bibliotekami AngularJS kb 39.5kb Backbone.js kb 43.5kb (jquery + Underscore) 20.6kb (Zepto + Underscore) Ember.js kb 136.2kb (jquery + Handlebars)
35 BACKBONE.JS (Jeremy Ashkenas, 2010 r.) Backbone.js - biblioteka programistyczna napisana w języku JavaScript wykorzystywana do tworzenia aplikacji internetowych typu Single Page. Biblioteka została zbudowana z użyciem interfejsu RESTful JSON i bazuje na wzorcu MVP. Backbone.js jest lekką biblioteką wymagającą do działania tylko Underscore.js oraz jquery.js. Twórcą biblioteki jest Jeremy Ashkenas, znany jako twórca języka CoffeeScript.
36 BACKBONE.JS W backbone.js dane reprezentowane są jako Model, który może być tworzony, walidowany, usuwany oraz zapisywany na serwerze. Za każdym razem gdy akcja UI wywoła zmianę w Modelu zostaje wywołane zdarzenie change, które informuje Widok o potrzebie ponownego wyrenderowania z wprowadzoną zmianą. Nie trzeba szukać elementu po ID i wymuszać zmiany w HTML jeśli model się zmieni, zmieni się też widok.
37 CECHY BACKBONE.JS Najstarszy framework Małe rozmiary Wbudowana obsługa routingu Polega na innych bibliotekach underscore.js, jquery.js Brak wbudowanego two way data-binding podwójnego wiązania Bezpośrednia manipulacja drzewem DOM. Nie zapewnia żadnej struktury, a raczej narzędzia do jej samodzielnego określenia przez dewelopera.
38 ANGULAR.JS (Google, rok 2009) AngularJS - otwarta biblioteka języka JavaScript, wspierana i firmowana przez Google, wspomagająca tworzenie i rozwój aplikacji internetowych na pojedynczej stronie. Zadaniem biblioteki jest wdrożenie wzorca Model-View-Controller (MVC) do aplikacji internetowych, aby ułatwić ich rozwój i testowanie. Podwójne wiązanie pozwala na automatyczną synchronizację danych, które mamy po stronie widoku, a naszym kontrolerem / modelem danych po stronie JavaScript.
39 ANGULAR.JS Niezależny od innych bibliotek, jqlite Podwójne wiązania (two way data-binding) Wstrzykiwanie zależności Wbudowane szablony widoków Dyrektywy rozszerzające działanie HTML Szablony deklaratywne i tekstowe Synchronizacja z danymi serwera Wbudowana obsługa routingu Duży rozmiar całego środowiska, jednak zapewnia on pełne środowisko do tworzenia aplikacji.
40 EMBER.JS (Yehuda Katz oraz Tom Dale, 2011 r) Ember.js - otwarta biblioteka języka JavaScript, ułatwiająca pisanie aplikacji internetowych po stronie klienta z użyciem wzorca Model- View-Controller (MVC). Framework zawiera ułatwienia związane z pisaniem aplikacji na pojedynczej stronie internetowej, między innymi router oraz automatyczną aktualizację szablonu strony (template) z pomocą biblioteki Handlebars.js.
41 EMBER.JS Zależny od innych bibliotek: jquery oraz Handlebars.js Podwójne wiązania (two way data-binding) Szablony tekstowe dołączane zewnętrznie przez Handlebars.js Bezpośrednia manipulacja drzewem DOM Synchronizacja z serwerem przez RESTAdapter (wymaga serwisu REST-owego) Wbudowana obsługa routingu
42 NARZĘDZIA JS Narzędzie Używam często Używam czasem Słyszałem Nie znam NPM 68.39% (1,387) 19.63% (398) 6.76% (137) 5.23% (106) Bower 45.36% (920) 28.06% (569) 23.27% (472) 3.30% (67) Yeoman 19.97% (405) 30.57% (620) 37.13% (753) 12.33% (250) Ender 0.54% (11) 1.43% (29) 28.55% (579) 69.48% (1,409) Wyniki ankiety z 2015 roku,
43 NODE.JS (Ryana Dahl, 2009 r.) Środowisko programistyczne zaprojektowane do tworzenia wysoce skalowalnych aplikacji internetowych, szczególnie serwerów www napisanych w języku JavaScript. Umożliwia tworzenie aplikacji sterowanych zdarzeniami wykorzystujących asynchroniczny system wejścia-wyjścia. Jest aplikacją open source. NODE PACKAGED MODULE (NPM) NPM to powiązany z Node.js program do zarządzania modułami Node.js. Dzięki niemu w prosty sposób można rozszerzać możliwości Node.
44 BOWER Bower jest to narzędzie wykorzystywane do zarządzania bibliotekami, które są dołączane do projektów webowych. To znaczy, za pomocą tego narzędzia, z wykorzystaniem linii komend, można dołączyć najnowszą wersję bibliotek, takich jak: jquery czy Backbone.js, do projektu. Dzięki niemu nie trzeba się martwić o kilka rzeczy: Skąd pobrać daną bibliotekę czy rozszerzenie? Czy dana biblioteka jest aktualna?
45 YEOMAN Yeoman pozwala na generowanie różnego rodzaju projektów, a konkretnie utworzenie struktury katalogów zgodnie z najlepszymi praktykami, wstępne utworzenie niezbędnych plików, a także zainstalowanie niezbędnych zależności na przykład tworząc projekt AngularJS może zostać od razu zainstalowany Bootstrap, Less itp. itd.
46 SYSTEMY AUTOMATYZACJI PRACY System Ilość głosów Procentowo Gulp % Grunt % NPM % Broccoli % Inny % Żaden % Razem % Wyniki ankiety z 2015 roku,
47 SYSTEMY AUTOMATYZACJI PRACY Wyniki ankiety z 2015 roku,
48 DZIĘKUJĘ ZA UWAGĘ
Leave a Comment