Front-end dezvoltator împărtășește experiențele sale.
În primul rând permiteți-mi să mă prezint: Serghei Garsiya (Sergei Garcia). Eu lucrez front-end full-time - dezvoltator, 2 ani de experiență. În acest timp a lucrat ca firmă de consultanță din lista de Forbes 500, si o companie mica.
Poate te simți că este un pic de experiență, dar al doilea an de funcționare a fost un reper important. Nu am avut nici o experiență reală în domeniul de dezvoltare web, am avut puțină programare experiență în general. Am cunoștințe de bază de C # și Java, obținute pe mai multe cursuri online. De asemenea, am avut o diplomă de manager al IT-proiecte, nu programator.
N-am scris despre experiența sa, în ciuda ajutorului primit de la el resurse minunate, cum ar fi mediu, Stack Overflow și Reddit. Astăzi a decis să schimbe acest lucru și să-ți spun ce a mers bine și ce nu. Deci, dacă te duci în această călătorie, vei avea mai mult noroc decât mine.
Știu, pe acest subiect, multe articole scrise, dar nu mulți dintre ei au discutat acest proces cu o retrospectivă a experienței doi ani.
Am început călătoria. Am rândul său, și că nu a fost ea. Dacă sunteți interesat în recomandările mele pe calea cea mai scurtă dezvoltare web de la sol în sus, se simt liber pentru a sări la ultima secțiune: Cel mai scurt traseu.
Deci, fără alte formalități, începem!
Elementele de bază
Decizia de a face dezvoltare web, am întrebat prima întrebare: „Ce să studieze?“. După o serie de căutări, am planificat o cale de formare bazat pe cerințele majorității dezvoltatorilor web entry-level:
Așa cum se întâmplă acest lucru.
pot învăța jQuery (deși eu nu-l recomand, mai mult pe acest lucru mai târziu), dacă se dorește. O puteți explora pe CodeSchool, încercați curs jQuery.
Un curs de HTML similare CSS poate trece pe Codecademy, obține rezultate similare. Dacă sunteți gata pentru a trece la rata de apel de la Udacity Introducere în HTML și CSS. El mai greu.
Bonus: Ia cartea Dzhona Daketta (Jon Duckett) HTML si CSS: Proiectare si construi site-uri (HTML si CSS: Design si design-ul) - punct de pornire solid pentru învățarea HTML și CSS. Foarte evaluat pe Amazon (4.7 / 5). O introducere detaliată în lumea de dezvoltare web. O carte frumoasă, design curat, litere mari, pagini pline de culoare. De multe ori mă întorc la ea. Minunat.
Pentru cei nefamiliarizati, LessSass - l transpilyatory CSS. CSS vă permite să scrie mai elegant. Acestea vă permit să faci lucruri pe care în mod normal nu sunt acceptate, cum ar fi regulile CSS atașamente. Aceste trancpilyatory „compila“ codul și converti la un CSS regulat.
În prezent, există două principale CSS transpilyatora: Mai puțin și Sass. Sass populare. Am dat seama că primul este mai ușor de a studia mai puțin. Deoarece Sass necesită instalarea Ruby, pe care nu am fost fericit.
Rapidă și cuprinzătoare privire de ansamblu mai puțin, mostre de cod - winless.org/online-less-compiler. Încercați Sass online la sassmeister.com (nu include mostre de cod).
Indiferent de ceea ce studiezi sau mai puțin Sass. Ele sunt foarte asemănătoare. Dacă înveți una, știi și va însemna o alta. Excelent Compara mai puțin și Sass - Comparație între LESSSASS.
Despre receptiv Bootstrap design și am învățat de la curs Codeschool - HTML calea CSS. Recent, am găsit un curs pentru Udacity de la Google Web Design receptivă Fundamentals (Bazele receptiv web-design). Teribil acoperă elementele de bază și dincolo. Codeschool decât vaster.
Puteți crea un design receptiv, fără cadre suplimentare, dar este mult mai ușor cu ajutorul unui Bootstrap cadru receptiv. Documentația oficială Bootstrap bine scrise, începe cu ea.
Când am început, am avut nici o idee despre ce AngularJS. Mulți au spus că, dacă doriți să devină un dezvoltator-l exploreze.
În primul rând am decis să studieze AngularJS pe documentația oficială, dar a fost o idee groaznică. Documentația nu a fost ușor pentru începători, și un format neaglomerat a făcut dificil de citit și de înțeles.
Caută forumuri, am dat peste Egghead.io (gratuit / plătit), au fost mai norocoși. Materialul a fost desigur mai clare, mai scurte și mai pline. În plus față de cursuri oferite lecții de 2-5 minute, care acoperă subiecte importante. (De exemplu: Care este controlerul Ce este filtrul Ce este de $ domeniu de aplicare Această înțelegere simplificată a fundamentelor ???.
Design Patterns - o soluții software reutilizabile care pot fi refolosite pentru a rezolva problemele de software comune. Cunoașterea de bază va fi mai competitiv dezvoltator de software, în orice limbaj de programare. Facilita înțelegerea codului altora. Vei determina rapid ce model de design-au folosit în codul lor.
Una dintre cele mai puternice instrumente pentru dezvoltatori web. Cu cât mai repede le posedă, cu atât mai mult timp va salva mai târziu. curs gratuit pe Codeschool Exploreaza și Maestrul Chrome DevTools discuții mari despre cererea sa.
Ah, Git - un instrument care nu este cunoscută până când a deschis capacitățile sale. Git piese modificările pe care le-ați adus codului. Dacă ceva nu merge bine, va fi capabil să se întoarcă la momentul precedent. De asemenea, vă permite să vizualizați istoricul de cod.
Am găsit un curs gratuit pe Încercați Github CodeSchool. formare Git Atlassian luminează perfect comenzile disponibile. Calea Git de învățare Codeschool de asemenea, o mare pentru a explora elementele de bază GIT.
Am încercat cursuri Nod pe Codeschool, dar a dat seama că le lipsește de conținut. NodeSchool.io o mult mai bună fundații profesor, și nu plictisitor! Mi-a placut abordarea hands-on, similar cu Codeschool și Codecademy, dar cu o îmbunătățire suplimentară.
Sarcina Launcher (Grunt Gulp)
Grunt și Gulp vin ca o mare surpriză pentru că nu am știut despre aceste instrumente, dar am fost mulțumit de capacitățile lor! Practic, acestea vă permit să automatizeze sarcinile comune. Amintiți-vă mai puțin / Sass?
Există 2 principale: Grunt și Gulp. În ciuda identității, lucru diferit.
NodeJS Cunoștințe de ajutor a scrie mai bine Grunt și inghititura fișiere, deoarece atât de lucru pe NodeJS. Alegeți modul în care doriți, dar am dat seama că Gulp mult mai ușor. Totuși eu prefer datorită abordării sale minimalist.
Am găsit cursurile Grunt și înghițitură pe Scotch.io. Acestea sunt cele mai bune.
Dificultățile am întâlnit în primul loc de muncă
Cele doua greseli majore:
- Teama de eșec. Din moment ce am fost un student în anul întâi, am fost în mod constant teamă că codul meu este greșit sau prost scrise, astfel încât petrece o mulțime de timp pentru a verifica de două ori și să adere la cele mai bune reguli de cod scris. Din acest motiv rareori a încercat să adopte noi soluții de teama de a failibilității lor. Acest lucru a închis în mod eficient dorința mea de a cunoaște lucruri noi.
- Pentru a face acest lucru, pentru că un «X», știe mai bine decât mine. La început, am făcut-o. Deși nu este în întregime greșit, fac ceva un anume fel, doar pentru că un expert a spus atât de «X» pe această temă. Nu se stie de ce a insuflat așa- în mine faptul că eu chiar nu știu cum funcționează totul. în curând am realizat, peste tot există excepții. Trebuie întotdeauna să știe motivul din spatele practicii.
Din fericire, în timpul lucrărilor la primul proiect am avut o înțelegere lider de echipă, care ma ajutat să depășească aceste probleme. El mi-a motivat în mod constant să încerce lucruri noi, chiar dacă ceva a mers prost.
De-a lungul timpului, am învățat lecția. De atunci, aștept cu nerăbdare să lucruri noi. Întotdeauna încerc să înțeleg de ce sunt cele mai bune practici. atunci când acestea sunt adevărate, și atunci când nu se aplică într-o anumită situație.
AngularJS de aplicare a proiectului real, de asemenea, sa dovedit a avea o mare problemă. În principal pentru că eu nu înțeleg cum o mulțime de ceea ce făceam. Am crezut că a fost o „magie unghiulară».
De multe ori mi-am dorit el nu a știut cum să lucreze într-adevăr de unghi, dar a fost frică să se uite în documentație.
În final, am dat peste o carte minunată numită Construiți-vă propriul AngularJS. Tot nu a citit. Dupa ce a citit secțiunea privind Scopes și Watchers, și într-adevăr a deschis că magia unghiulară, nu într-adevăr magie. Și singurul mod rațional de a menține legare folosind datele de testare pentru a modifica datele. Vă recomandăm cu tărie cartea pentru oricine care vrea să înțeleagă AngularJS.
O altă problemă pe care am confruntat cu un an mai târziu - dezvoltarea rapidă a industriei. Odată stăpânită AngularJS și Grunt, simțit mândru și puternic. Curând a devenit clar că la orizont și Gulp ReactJS. Un an mai târziu, el a început să câștige impuls WebPACK. A trebuit să-l învețe. După cum ați înțeles, eu sunt cel mai dezamăgit de uzura morală rapidă a cunoștințelor mele. Dar, în curând unul dintre colegii mei mi-a luminat și a spus ceva care a schimbat viziunea mea de biblioteci și freyvorkov pentru totdeauna:
Bibliotecile și cadrele pot fi depășite, dar conceptele și soluțiile oferite de acestea pot rezista testului timpului.
El avea dreptate. Angularjs, probabil depășite, dar înțelegerea magiei în spatele ei a ajutat să înțeleagă mai bine componentele arhitectura Web REACT, care este îmbunătățită în conformitate cu directivele radiali lui. El a ajutat, de asemenea, să înțeleg cum ReactJS câștigat popularitate atât de mult, precum și viitorul acesteia.
Nu-mi amintesc cu care se confruntă alte probleme grave în proiectele ulterioare. Dar voi spune că în acești 2 ani. primul lucru care ma ajutat să reușească (în opinia colegilor mei) - aceasta este entuziasmul meu și angajamentul față de căutarea constantă pentru noi. Curând am dat seama că dezvoltarea web este o combinație câștigătoare, ca lucrurile se schimba, într-adevăr, foarte rapid: există întotdeauna noi modele și biblioteci.
Un alt lucru care ma ajutat foarte mult - o înțelegere a ceea ce nu a învățat Era important în procesul de a deveni un dezvoltator de web mai bună.
Minunată idee, face o simplă cerere de salut mondială pentru a determina capacitățile platformei. Apoi mergi mai departe. Dar este mai bine să se concentreze pe nevoile proiectului. La început, poate părea dificil, dar, din fericire, există resurse excelente ca Stack Overflow, mediu și Reddit. Acolo veți găsi cadre discuții utile și de a afla ce este potrivit pentru o anumită aplicație.
continuați
CSS poate fi un dezordonat si dezorganizat foarte, foarte repede. Acesta a sugerat o serie de metodologii diferite pentru scrierea unui CSS pur, dar stau 2, pe care il recomand cu tărie să citiți despre ASAP pentru competitivitate:
- SMACSS: Arhitectura scalabilă și modulară pentru CSS. Un ghid flexibil pentru dezvoltarea de site-uri mici și mari.
- BEM: o metodologie care va contribui la asigurarea utilizării componentelor reutilizabile și partajarea de cod în front-end.
Personal, prefer SMACSS din cauza aspectului său curat, dar unele companii și cadre CSS încă folosesc BEM, prin urmare, este necesar să se cunoască amândoi.
Există doi jucători majori:
- Browserify: vă permite să instalați module în browser-ul, reunind toate dependenta.
- WebPACK: în principal, Browserify pe steroizi. Este mai dificil de configurat și de implementat.
Mini-curs pe Scotch.io să începem cu Browserify ajuta să începeți Browserify.
Personal, am petrecut un pic de timp pentru a lucra cu WebPACK. Dar, în momentul în care am lucrat cu el și trebuie să spun: el este un teribil, în ciuda dificil setarea. Dacă sunteți doar la început, începe cu Browserify, este mai ușor de configurat. Rețineți că WebPACK - acesta este viitorul, ea începe să utilizeze proiecte la scară largă.
ReactJS rapid câștigă popularitate, și pare să nu se taie din nou.
Curs privind React.js de învățare Schech.io: Noțiuni de bază și concepte oferă o privire de ansamblu completă React. Cum să-l treacă, trece la React elementele fundamentale. pe aceeași resursă. Aceasta va ajuta la crearea unei aplicații ReactJS completă de lucru, și apoi să-l treacă la sintaxa ES6. Puteti vedea oficiale ReactJS documentare. Este bine scris, puteți învăța cu ușurință.
Deoarece React - este doar vedere, se recomandă insistent să studieze Redux. În opinia mea, cele mai multe cursuri de Redux un pic mai complicat, dar trucuri CSS nivelare cu React: Redux imbina perfect simplitatea si informativeness.
Este posibil să fi auzit despre Flux, dacă vă întrebați de ce ar trebui să utilizați Redux, mai degrabă decât Flux, uita-te la Stack Overflow. De ce să folosiți Redux peste Facebook Flux? Această întrebare a fost răspuns creatorul Redux!
Privind înapoi la greșelile: ceea ce am învățat?
Este ciudat că eu nu spun de multe ori acest lucru. Nu am avea întotdeauna grijă de a scrie cod curat, dar să fiu sincer, eu sunt mândru că l-au învățat. Acest lucru se datorează faptului că toată lumea iubește să se plângă că ultimul loc de muncă a avut una dintre cele mai grave și mai urate baze de cod din lume. Deci, de ce nimeni nu spune cat de bun a fost codul lor?
Vreau să schimbe această tendință. Straduiti pentru a da nume semnificative pentru variabile și funcții în limba engleză, chiar dacă doriți să scrie o mulțime. Imposibilitatea de a face acest lucru conduce la nevoia de documentare manuală în viitor, pentru o percepție mai clară. De asemenea, conduce la dificultăți în înțelegerea bazei de cod cu noi dezvoltatori și tine. Da, tu. De ce? Pentru că dacă nu scrie cod curat care va face colegii tăi o fac?
Poate unii au observat că nu am face un accent deosebit pe jQuery. Acest lucru se datorează experienței mele. Am realizat că jQuery fac mai mult rău pentru mine decât au beneficiat. Unii ar putea nu sunt de acord, dar vă rog să-mi explic. Când am aflat despre asta, am realizat că jQuery este folosit peste tot și pentru aproape orice. Asa ca am inceput sa folosesc jQuery pentru aproape orice, pentru orice problemă care stolkivaetsya. Caut o soluție pe baza jQuery.
Înțelege-mă în mod corect, jQuery a fost teribil când am folosit-o. Deci, uimitoare pe care am ignora orbește faptul că 90% făcută de mine pe jQuery, puteți face în browserele moderne nativ cu aceeași sintaxă simplă.
Ați putea întreba: „Deci, ce sa întâmplat? JQuery este ușor și reduce cantitatea de cod. Folosind jQuery, mai degrabă decât nativ API-interfață nu a fost o problemă. Problema era că întregul mod de gândire și toată soluția de problemele comune au nevoie de jQuery. Acest lucru a devenit o problemă uriașă când am primit primul meu proiect și mi sa spus că jQuery - nu creează dependență.
Utilizarea jQuery mi-a facut neajutorat. Am ignorat complet propriile metode și soluții. soluțiile mele au devenit mai puțin portabile.
De atunci am încercat să nu folosească jQuery, în cazul în care nu a fost absolut necesar, și a furnizat o creștere semnificativă a eficienței și lizibilitatea bazei noastre de cod (de exemplu, manipulare grea a DOM).
În ceea ce privește materialul. Multe cursuri CodeSchool minunat (in special HTML si CSS fi), fără a include cadrele eșuate de (AngularJS, BackboneJS și t.).
Am trecut printr-o mulțime de cursuri de Pluralsight. dintre ei nu am menționat, pentru că în cele din urmă a ajuns la concluzia că locul ideea lor săraci și nesigure. Cursuri concepute de profesori care nu fac acest lucru întotdeauna (în opinia mea) o explicație bună. calitatea cursurilor variaza salbatic, deoarece nu există standarde de calitate. Am luat cursuri, ceea ce explică sunat ca aici, aici doarme. Sincer, este imposibil să se păstreze atenția asupra cursului de 6-10 ore. Și mulți dintre ei durează atâta timp, dacă nu chiar mai mult.
Am petrecut 80-100 ore de formare Pluralsight, și vreau sincer pentru a obține un profit. Nu mă înțelegeți greșit, am trecut printr-o serie de cursuri excelente Pluralsight. Numărul predominante asupra calității ma făcut să-mi pierd timpul. Am putea învăța mai multe dacă au trecut cursuri în cele mai bune surse, cum ar fi Egghead.io și CodeSchool, în cazul în care apreciază mai mult calitatea decât cantitatea.
Singurul motiv pentru a lua cursuri pe Pluralsight, în cazul în care nu există alte surse (cum ar fi Installshield sau Xamarin), sau trec printr-o foarte specifice, cursuri care sunt bine preț (de exemplu, John Papa a lui radiali Fundamentals).
În general, dacă doriți să utilizați Pluralsight, asigurați-vă că pentru a trece cursurile deja a trecut de cineva, și care sunt considerate de înaltă calitate și utile.
Word privind ratele de taxare
Simt nevoia de a spune: mulți oameni cred că este posibil să învețe programare fără a plăti un ban, și de a concura cu cei care au trecut ratele de taxare. Asta e adevărat, dar eu subliniez că valoarea pentru cursul de drept este setat. Desigur, o mulțime de material valoros, pe care am scris, - sunt gratuite, dar multe dintre ele sunt plătite.
Dacă utilizați în mod corespunzător posibilitatea, plata pentru 1-2 luni pentru oricare dintre ele, puteți obține cu ușurință o cunoaștere care ar obține doar un an de lectură nenumărate articole și postări pe blog. Ele sunt destul de bune.
Deci, da, cursuri plătite nu sunt necesare, dar dacă vă puteți permite cel puțin o lună, pentru a fi sigur, acesta va vă oferi un avantaj puternic.
Sosul secret de succes
Timp de 2 ani am întâlnit mulți dezvoltatori. Pe drum, m-am întâlnit un dezvoltator care este foarte distins - au fost în mod clar în propria lor liga. Ele sunt egale pentru toată lumea, inclusiv eu. Am constatat că au o trăsătură comună. Oh, asta va spune acum. În opinia mea, sosul secret pentru dezvoltator web de succes:
Wow, a fost nevoie de cel puțin șase ore pentru a scrie acest articol. Aproape gata! Poate că ești, curios „Bine, poveste rece, dar în cazul în care este cel mai scurt drum?“ Iată-l.
Am aranjat pentru el ca și cum ar putea merge înapoi și să o folosească în mod corect. Bucurați-vă!