Moderni frontend workflow

Ivan Dorić Moderni front-end workflow

Ivan DorićSenior Front-End Developer / Team Leader

Gauss Development

@ivan_doric

http://gledaj-uci.com

http://watch-learn.com

http://gledaj-uci.com/

http://watch-learn.com/


Kako je to bilo prije...


CSSCSS 1 - završen 1996

2000 - IE 5.0 za Mac prvi browser sa potpunom impementacijom

CSS 2.1 potpuno prihvaćen tek 2011

CSS 3 predložen 1999 počeo se koristiti tek nedavno

Nek i browseri još uvijek nemaju potpunu podršku za CSS3


CSS Zen Garden

2003 Popularizacija CSS-a


Web standardi


CSS3 & HTML 5

Korištenje počelo prije nekoliko godina

Browseri još uvijek ne podržavaju cijelu specifikaciju

Bit će bolje.... možda.


Kako smo došli do front-enda?

Razvojem web standarda i web tehnologija internet postaje sve kompleksniji

Prije: web dizajner, web master

Danas: web dizajner (samo dizajn), UI/UX dizajner, back-end developer, front-end developer, SEO stručnjak, social media stručnjak...


Front-end developer? Što to znači?


Što moderni front-end developer mora znati?

Nije strašno...


... osim što bi trebali znati još i ovo...

Kako radi internet

Osnove *nix sustava

Git

SSH

Korištenje konzole/terminala

Osnove back-end programiranja

CMS: WordPress, Drupal, Magento....

Photoshop / Sketch / Illustrator

Angular.js, Node.js, Ruby on Rails...

Sass, Stylus, Less, Gulp.js, Grunt.js, Haml, Jade, Yeoman....

Osnove dizajna, UI/UX-a


***ŽELJA ZA UČENJEM***


PREDPROCESORI


Svi su dobri... ali Sass

Velika zastupljenost

Kontinuirani razvoj

Opcije

Brzina (libsass)

Tata svih ostalih predprocesora


Sass mogućnostiVariables

Mixins

Nesting

Extends

Partials

Matematika

Funkcije


Problemi sa predprocesorima.hint: većinom ste vi krivi ;)

Prvo dobro naučiti vanilla CSS!


Kako kompajlirati Sass?

Codekit (https://incident57.com/codekit/)

PrePros (https://prepros.io/)

Ili ako se želite družiti sa velikim dečkima komandna linija + Sass / node.js / RoR / Task Runner / Guardfile / Compass

https://incident57.com/codekit/

https://prepros.io/


SASS MIXIN LIBRARIES


CompassCSS Authoring Framework (?)

Može kompajlirati Sass

Ima GUI aplikaciju (http://compass.kkbox.com/)

Sprajtovi

Velika količina Mixina

Spoooooooor... (libcompass možda popravi stvari)

http://compass-style.org/

http://compass-style.org/


BourbonVelika količna mixina

Neat (Grid framework)

Brži od compassa

Manje opcija i helpera nego Compass

http://bourbon.io/

http://bourbon.io/


BEM, OOCSS, SMACSSMetodologije pisanja i organizacije CSS-a za bolje održavanje i skalabilnost koda

Može se koristiti sa predprocesorima

Zasniva se većinom na modularnom kodu i ponovnom korištenju koda (reusability, DRY)

BEM (https://en.bem.info/)

OOCSS (http://oocss.org/)

SMACSS (Scalable and Modular Architecture for CSS - https://smacss.com/)

https://en.bem.info/

http://oocss.org/

https://smacss.com/


GIT


Git

Pomaže u radu timova

Verzionira kod

Zamjenjuje FTP

Feature testing


GitIako Git na prvu izgleda zastrašujuće sa ovih nekoliko komandi ćete moći napraviti većinu stvari za male projekte

$> git init$> git add -A$> git commit -m "Napravio sam nešto"$> git push origin master


Hosting mi ne podržava Git, i/ili SSH!

Nađite bolji hosting ;) (npr. Small Orange)

Prebacite datoteke sa SFTP-om

git-ftp (https://github.com/git-ftp/git-ftp)

Say no to FTP

$> git-ftp push

https://github.com/git-ftp/git-ftp


TASK RUNNERS


Gulp.js

Zato što nikad nisam koristio Grunt.js :)

Kažu ljudi da je brži

Definitivno jednostavniji kod

Grunt je isto dobar


Čemu služe task runneri?Kompilacija Sassa

Minimiziranje i konkatinacija datoteka

LiveReload

Optimizacija slika

Auto prefiksiranje

i još mnogo toga (http://gulpjs.com/plugins/)

Trenutno 1500 plugina

http://gulpjs.com/plugins/


CSS Frameworks


Dali mi to stvarno treba?

Ubrzava izradu često korištenih komponenti

Brži razvoj layouta

Sve stranice izgledaju isto

Overhead

Dobri za izradu administracije i prototyping

Automatski responzivno

Koristiti na vlastitu odgovornost


WORDMOVE


Što je to?RoR gem za automatiziranje prijenosa WordPress specifičnih podataka i baze na server i sa servera

Odlično komplementira Git (pošto on nema prijenos baze), ali se može koristiti samostalno

Podrška za razvojna okruženja

Say no to FTP - again

https://github.com/welaika/wordmove

$>wordmove init $>wordmove push -dupw$>wordmove pull -dupw

https://github.com/welaika/wordmove


APPS


Editori koda

Sublime text (Hayaku, Emmet)

Brackets (ako radite većinom samo HTML i CSS)

GitHub - Atom


Grafika

Photoshop (duh!)

Sketch 3

Illustrator


Ako se još uvijek bojite komandne linije

CodeKit, PrePros

Source Tree (Free) - https://www.sourcetreeapp.com/)

Tower ($59) http://www.git-tower.com/

MAMP, XAMP, WAMP

https://www.sourcetreeapp.com/

http://www.git-tower.com/


TIPS & TRICKS


Tips & TricksMinimalizam

Osobna WordPress Starter Tema (https://github.com/ivandoric/olympos)

Osobni starter scaffolding

DRY

Učenje, učenje, učenje

https://github.com/ivandoric/olympos

Moderni frontend workflow

Technology

Transcript of Moderni frontend workflow