< Nazad na kurseve

Praktični Frontend (priprema za rad u firmama)

Razvijamo realne aplikaciju preko Githuba, po taskovima i pod pritiskom. Koristimo Node i NPM, Webpack, Sass, Angular, React i ostale moderne frontend alatke.

Za kurs je neophodno predznanje HTML, CSS i JS-a.

Uvod

• Kako postati upotrebljiv?
• Praksa kao teret IT firmama
• Jaz između pravljenja stranica i razvoja softvera
• Kako doprinositi projektima?

Git i Github

• Kontrola verzija koda i zajednički rad
• Samostalni rad sa gitom
  • Inicijalizacija projekta: git init
  • Trenutno stanje: git status
  • Dodavanje fajlova: git add
  • Uknjiženje izmena: git commit
  • Poništenje izmena: git checkout i git stash
• Rad sa gitom u kolektivu
  • Kloniranje
  • Pravljenje grana i spajanje
  • Vučenje i guranje (git pull i git push)
  • Kodni standard i pregled koda
• Git konfiguracija

Node.js i NPM (Node Package Manager)

• Čemu služi Node.js?
  • Rad sa fajlovima
  • Sinhrone i asinhrone operacije
• Čemu služi upravljač paketa?
  • Lična karta projekta: package.json fajl
  • Globalna i lokalna instalacija biblioteka
• Razvojne JS alatke
  • Linter, mali pomoćnik koji ispravlja tvoj kod
  • Live server, lokalni server sa automatskim osvežavanjem
  • localtunnel, za isprobavanje lokalnog projekta preko neta
• Vežba: Pročitaj fajl i ispiši njegov sadržaj

Razvoj softvera

• Uvod u softversko inženjerstvo
  • Objektno-orijentisano programiranje
• Ideje za aplikacije
• Analiza zahteva
  • Slučajevi korišćenja (use cases)
  • Korisničke priče (user stories)
  • Izrada specifikacije
• Projektovanje modela
  • Detektovanje elemenata sistema
  • Izgrada dijagrama klasa
• Dobre prakse pisanja programa

Postavljanje projekta

• Kako organizovati frontend projekat koji raste?
• Izbor tehnologija i biblioteka
• Izbor paket menadžera (Bower, NPM, Yarn)
• Organizacija foldera i fajlova
  • Organizacija po tipu (js, css, slike…)
  • Organizacija po celinama (user, product, cart…)
• Izrada stilskog vodiča (primer: https://www.landshypotek.se/styleguide)
• Build automatizacija (Gulp, Grunt, Webpack)
  • Automatsko prevođenje, minifikacija i spajanje koda
  • Automatsko slanje koda na udaljeni server
  • Automatska analiza koda
• Postavljanje projekta na Github

Komunikacija na projektu

• Alatke za komunikaciju (Skype, Slack i ostalo)
• Alatke za upravljanje projektom (Jira i Redmine, Trello i druge)
• Komunikacija dizajnera i developera (Zeplin)
• Redovni sastanci developera
• Pisanje dokumentacije
  • Markdown format (md)

Prilagodljivi dizajn

• Prvo mobilni pristup
• Osnovna container klasa
• Tačke preloma (breakpoints)
• Mreža ili sistem rešetki (grid)
• CSS grid
• Bootstrap biblioteka
• jQuery dodaci: vrteška (carousel), harmonika (accordion), prozorče (modal)
• Saveti za rad sa Bootstrapom
• Kako tretirati uređaje iste veličine prema dodirljivosti ekrana?

Sass

• Instalacija Sass-a
• Organizacija fajlova i foldera
• Definisanje veličina i tačaka preloma
• Postavljanje sistema boja
  • complement, lighten i darken metode
• Gneždenje selektora i @media upita
• Miksini (@mixin) i pozivanje (@include)
• Petlje (@for, @while, @each)
• Uslovi (@if, @else)
• Kako napraviti prilagodljivi grid sistem u Sass-u?
• Vežba: postavi sistem boja
• Vežba: prevedi CSS u SCSS
• Vežba: napravi grid sistem sa Sass-om

SVG

• Rad sa SVG-om
• SVG kao slika
• SVG kao HTML element
  • Stilizovanje SVG elementa
  • Skaliranje SVG elementa
• Vežba: Skaliraj SVG tag u HTML-u

Komandna linija

• Čemu služi komandna linija?
  • Dovršavanje komandi (tab)
  • Copy (ctrl+shift+c) i paste (ctrl+shift+v)
  • Izlaz iz procesa (ctrl+c)
• Navigacija
  • Listaj (ls)
  • Promeni direktorij (cd)
  • Ako se izgubiš (pwd)
• Rad sa fajlovima
  • Pravi fajl (touch)
  • Prikaži fajl (less, more, cat)
  • Kopiraj fajl (cp)
  • Pomeri fajl (mv)
  • Obriši fajl (rm)
• Pretraga
  • find komanda
  • grep komanda
• Pravljenje aliasa
• Vežba: upiši sortiran spisak .js fajlova u .txt fajl

Bitni koncepti

• Jednostranične aplikacije (Single Page Applications)
• Rutiranje na frontendu
• MVC arhitektura (Angular)
• Dvosmerno vezivanje podataka (two-way data binding)
• Jednosmerni tok podataka (React)
• Komponente

Upotreba JS frameworka

• Upotreba Angulara
• Upotreba Reacta
• Upotreba Vuejs-a
• Vežba: prikaži podatke iz JSON-a
• Vežba: napravi živu pretragu sa filterima

Typescript

• Instalacija
• Tipovi
• Klase
• Interfejsi
• Vežba: prevedi .js fajl u .ts
• Vežba: prevedi projekat u Typescript

Mobilne i desktop aplikacije

• Electron za desktop softver sa Javaskriptom
• PhoneGap za hibridne mobilne aplikacije
• Ionic (Angular + Typescript) za mobilne aplikacije
• React Native za prirodne IOS i android aplikacije

Van u divljini

• Snalaženje na postojećim projektima
  • Nađi projekat na Školi koda ili Githubu
• Čitanje dokumentacije (ako postoji)
• Upoznavanje sa strukturom projekta
• Identifikovanje tehnologija i biblioteka
• Pravljenje nove grane i zahtev za izmenom (pull request)
• Zadatak: nalaženje i menjanje postojećeg projekta otvorenog koda