Roadmap2fullstack 2020

Roadmap2fullstack 2020 je projekt kojeg provodi udruženje Ho-Ruk i Srednja strukovna škola Silvija Strahimira Kranjčevića u sklopu meet and code inicijative, koja za cilj ima da upozna djecu i mlade ljude uzrasta od 8 do 24 godina sa svijetom tehnologije i programiranja.
Više o inicijativi možete saznati ovdje .
Cilj projekta je srednjoškolcima pokazati koji bi put trebali proći kako bi postali fullstack web developer/ka.

Dana 21.10.2020. u 18h održat će se webinar gdje će mladi moći zajedno sa IT stručnjakom prokomentirati kako postati fullstack developer te postavljati pitanja i razmijeniti iskustva.

Prijave na webinar se vrše putem google obrasca ovdje
Broj mjesta je ograničen

U u slijedećem članku prezentirane su tehnologije koje su potrebne na tom putu.


Programeri - developeri mogu razvijati razne aplikacije poput:

• web stranica,
• web aplikacija
• mobilnih aplikacija i
• desktop aplikacija

Možda mislite da je potrebno puno toga naučiti kako bi ste mogli raditi nešto od navedenog. Međutim, ako slijedite korake u članku, otkrit ćete kako brzo napredujete.
S jednom osnovnom tehnologijom može se napraviti jednostavna web, mobilna pa čak i desktop aplikacija. Ako ste novi u web programiranju preporuka je prvo naučiti fronted development.
Frontend developeri specijalizirali su se za izgradnju potpuno funkcionalnih korisničkih sučelja web stranice ili web aplikacije.
Ako posjetite bilo koji web site, koristite korisničko sučelje na njemu s kojim komunicirate(kliknite gumb, izbornik, ) sve interakcije, načini učitavanja stranice, način na koji je stranica postavljena, boje, sve vizualne značajke dizajnirao je odnosno razvio i kodirao frontend developer.. Otuda i naziv FrontEnd jer je okrenut prema korisniku.
Web aplikacija ima najmanje dvije komponente. Frontend s kojim korisnik komunicira i Backend koji se ne vidi , ali kada komunicirate s web site-om kada kliknete gumb za prijavu, ti se podaci, korisničko ime i lozinka zapravo šalju na stražnju stranu -end, računalnog sustava a software uzima te podatke i provjerava "da li je ovo korisničko ime ili lozinka ispravno?"
Kada se upiše adresa stranice tada se zapravo traže podaci o stranici odnosno backend odrađuje sljedeće:
"aha, korisnik želi vidjeti stranicu, u redu, pošalji podatke na frontend". Dakle, frontend i backend zajedno rade na izgradnji cijele web stranice odnosno web aplikacije. Frontend developer se brine o tome kako funkcionira korisničko sučelje, kako funkcionira interakcija i kako izgleda web stranica. S druge strane backend developer piše kod koji upravlja protokom podataka, sprema informacije, ažurira informacije, čita podatke i briše podatke, a također upravlja dopuštenjima pristupa podacima.
Ako ste novi u razvoju, prvo naučite frontend razvoj, a zatim izgradite svoje backend razvojne vještine.

Frontend development kao prvi korak u putu prema fullstack web developeru.

Frontend development je lakše razvijati jer se razvijaju već poznata korisnička sučelja slična onima na koje ste navikli. Ima se osjećaj da se radi nešto poznato.
Frontend programeri danas su više traženi, što povećava šanse za zaposlenje.
Prve vještine koje je potrebno naučiti kako bi se krenulo sa fronted develompentom su ovladavanjem HTML i CSS tehnologijama.

Frontend development (HTML i CSS)

HTML je kratica za "HyperText Markup Language". HTML je markup jezik, a ne programski jezik koji pomaže u strukturiranju web stranice.
HTML i CSS se mogu usporediti s izgradnjom kuće.
Prilikom izgradnje kuće prvo se se postave okviri kuće tj. struktura koja će kuću držati stabilnom. Isto tako u razvoju web-a, HTML-om se postavljaju okviri i struktura web stranice.
CSS je sljedeća tehnologija koju je potrebno naučiti. CSS je skraćenica od Cascading Style Sheets. U usporedbi sa gradnjom kuće, CSS se može zamisliti kao dizajner interijera i exterijera. CSS-om se uređuje sam izgled i raspored stranice, odnosno stil kojim će se prikazati HTML elementi. CSS omogućuje primjenu jednostavnih interakcija, efekata lebdenja, boja i naprednog izgleda. Daje puno više moći pri izradi stranice i dodaje vizualnu privlačnost web site-u.

JavaScript

Kada se posjeduju osnove web dizajna sljedeći korak je naučiti programski jezik JavaScript.
JavaScript je skriptni jezik kojim možemo kreirati dinamičke web stranice. Dinamičke web stranice omogućavaju međudjelovanje s korisnikom, upravljanje web preglednikom ili dinamičko kreiranje web stranice. JavaScript se izvodi na klijentskom računalu i može se izvoditi u svim modernim web preglednicima.
Neke od prednosti JavaScripta su:

• Manja potreba za komunikaciju sa serverom. Može se provjeriti ispravnost podatka prije slanja stranice na server. To smanjuje promet prema serveru.
• Trenutni odziv korisniku. Korisnik ne treba čekati da se stranica ponovno učita kako bi vidio je li zaboravio unijeti neki podatak
• Povećana interaktivnost. Moguće je kreirati sučelje koje reagira na korisnikove akcije tipkovnice ili miša.
• Bogatije sučelje. Možete koristiti JavaScript za uhvati i pusti komponente ili animirati bogatije sučelje prema korisniku.

Kada se savladaju osnove JavaScript-a, potrebno je naučiti primijeniti neke popularne library-e i frameworke koji će ubrzati implementaciju.
JavaScript se može usporediti sa čekićem. Čekićem se može nešto raditi dok library-i i framework-ci mogu biti kao električni alati, odnosno može mnogo više i brže uraditi.
Library-i i framework-ci JavaScript-a izgrađeni su u JavaScript-u, ali su im dodane značajke sustava koji pomažu ubrzati posao. Baš kao što će i električni alati pomoći da se uradi više uz manje napora i to brzo.
Postoje brojni library-i i framework-ci ali njih par se posebno ističe i smatraju se standardom u IT industriji. Njih je potrebno obavezno naučiti na putu ka fullstack developeru.

JQuery

Prva i najvažnija biblioteka koju je potrebno naučiti nakon što se savladaju osnove JavaScript-a je jQuery.
jQuery je lagani JavaScript library koji se u usporedbi sa čistim JavaScript-om može usporediti kao: "piši manje, čini više".
Svrha jQueryja je znatno olakšati upotrebu JavaScript-a na web stranici.
jQuery uzima puno uobičajenih zadataka koji zahtijevaju mnogo redaka JavaScript koda i umotava ih u metode koje možete nazvati jednim retkom koda.Također pojednostavljuje mnoge složene stvari iz JavaScript-a, poput AJAX poziva i DOM manipulacije.

React /ili Angular

Angular i React su JavaScript framework-ci koji strukturiraju izgradnju moderne web aplikacije, odnosno pomažu u izgradnji cijele aplikacije.
React library, kreirana od strane Facebook-a i izašla je kao tehnologija za izgradnju dinamičkih korisničkih interfejsa (UI). React je baziran na JavaScript-u i JSX-u (PHP ekstenzija). JSX se koristi za razvoj HTML-a za višekratnu upotrebu i za dalju implementaciju u front-end razvoju. React je najpopularniji među JavaScript library-ima i često se naziva najboljom Javascript library/frameworkom.
React se koristi i u web development-u i u mobile development-u. Međutim, za mobile development potrebno je da bude povezan sa Cordovom, što više, za razvoj mobilnih uređaja postoji dodatna biblioteka - React Native. React se može koristiti za izradu web site-ova sa jednom stranicom, kao i web site-ove sa više stranica.
Angular framework razvio je Google, prvi put je objavljen 2010. godine kao AngularJS zasnovan na JavaScript-u, jednom od najpopularnijih programskih jezika, zbog toga i ima u nazivu sufiks JS. U trenutku izdavanja, prepoznatljiva karakteristika Angulara-a bila je mogućnost pretvaranja HTML dokumenta u dinamični sadržaj, što je utabalo put njegovom daljem uspehu i razvoju. Šest godina kasnije, 2016. godine, Angular je imao potpuni preobražaj. Google je ponovo ispisao kompletan framework pomoću TypeScript-a, relativno novog programskog jezika.
Angular je pogodan i za web development i za mobile development. U mobile development-u, međutim, veliki dio posla obavlja Ionic. Angular, kao i React, ima dodatni library za mobile development. Nasuprot React Native-a je NativeScript.
Angular se takođe može koristiti za web-aplikacije sa jednom ili više stranica.

Backend

Tipične tehnologije koje se koriste u backend razvoju su PHP, Java, C#, Python, Ruby, itd. Ali ukoliko se poznaju osnove frontend developmenta odnosno JavaScript-a onda je svakako najbolje izabrati node.js kao prvu backend tehnologiju za naučiti.

Node.js

Node.js je tehnologija koja omogućuje JavaScriptu da postane backend programski jezik, odnosno da se JavaScript može izvoditi na serveru . Node.js koristi asinkrono programiranje!
Node.js pokreće jednonitni, neblokirajući, asinkroni program, što je vrlo memorijski učinkovito.
Node.js može generirati dinamički sadržaj stranice.Može stvarati, otvarati, čitati, pisati, brisati i zatvarati datoteke na poslužitelju Može prikupljati podatke o obrascima, dodavati, brisati, mijenjati podatke u bazi podataka.

ExpressJS

Express je aplikacijski framework za node.js, namijenjen je za izradu aplikacija i API-a sa JavaScript-om
Express nudi minimalno sučelje za izradu aplikacija te pruža alate potrebne za izgradnju aplikacije. Fleksibilan je i koristi brojne module sa npm a koji se mogu izravno priključiti na Express.
Osoba koja zna raditi sa frontend i backend tehnologijama naziva se Fullstack developer i vremenom može postati software-ski arhitekt jer poznaje kako stvari funkcioniraju u oba dijela.To naravno dolazi sa iskustvom.

Zaključak

Ukratko smo pokušali objasniti koji bi put bio odnosno kojim tehnologijama ovladati kako bi se postao fullstack developer. Postoje i drugi načini koji se razlikuju u backend dijelu jer se koriste druge tehnologije ali frontend je zajednički svima.
Predloženi roadmap je izabran iz razloga što se i u frontendu i backendu koristi ista tehnologija odnosno JavaScript te je prijelaz mnogo lakši nego kad se treba učiti novi programski jezik.