Kas jums jāzina, ja gribat būt front end izstrādātājs?

Vai esi kādreiz apskatījis savu mīļāko mājaslapu un domājis, kā tā strādā? Vai jūs esat skatījušies uz tās izvietojumu, kā pogas rīkojās, kad uzklikšķinājāt uz tām, vai uz kādu citu daļu un nodomājāt: “Interesanti cik to sarežģīti ir izveidot?” vai, “Es gribētu to izdarīt”?

Visas šīs lietas ir front end izstrāde. Lai gan mājaslapu dizains ir tā, kā izskatās mājaslapa, front end izstrāde ir tieši kā šis dizains tiek īstenots tīmeklī.

Front end izstrādātāji izmanto HTML, CSS un JavaScript, lai kodētu tīmekļa dizaineru izveidotās mājas lapas un mājaslapu lietotņu noformējumus. Kods, ko viņi raksta tiek izmantots lietotāja pārlūkprogrammā (pretēji back end izstrādātājam, kura kods darbojas tīmekļa serverī). Domājiet par to šādi: back end izstrādātājs ir kā inženieris, kurš projektē un izveido sistēmas, kas veido pilsētas darbu (elektrība, ūdens un kanalizācija, zonējums utt.), savukārt front end izstrādātājs ir tas, kurš nosaka ielas un gādā par to, lai viss būtu pareizi savienots, lai cilvēki varētu dzīvot savu dzīvi (vienkāršota analoģija). Viņi ir atbildīgi arī par to, lai front end nebūtu kļūdas, kā arī pārliecinātos, vai dizains parādās, kā tas ir paredzēts dažādās platformās un pārlūkprogrammās.

Es esmu skatījies caur desmitiem front izstrādātāju darba sarakstu, lai redzētu, kuras prasmes šobrīd ir visvairāk pieprasītas. Šīs ir lietas, ko šodien meklē reāli darba devēji (un tuvākajā laikā tās arī vēl meklēs). Iemācies šīs lietas, un tu esi pārliecināts, ka jums būs lielisks front end izstrādātāja darbs!

HTML UN CSS

CSS HTML

HTML (Hyper Text Markup Language) un CSS (Cascading Style Sheets) ir galvenie tīmekļa kodēšanas veidošanas bloki. Bez šīm divām lietām nevar izveidot mājas lapas noformējumu, un viss ar ko jūs paliksiet ir ka ekrānā ir neformatēts vienkāršs teksts. Nevar pat pievienot attēlus lappusei bez HTML!

Pirms sākat darbu jebkurā tīmekļa izstrādātāja karjeras ceļā, jums ir jāmāk kodēt ar HTML un CSS. Labā ziņa ir tā, ka šīs zināšanas var apgūt tikai pāris nedēļu laikā.

Vislabākā daļa: HTML un CSS zināšanas vien ļaus jums veidot pamata vietnes.

JavaScript

JavaScript ļauj jūsu mājaslapām pievienot daudz vairāk funkcionalitātes. Varat pat izveidot daudzas pamata tīmekļa aplikācijas, izmantojot neko vairāk kā HTML, CSS un JavaScript (JS – saīsinājums). JS ļauj mājas lapām pievienot daudz interaktīvu elementu. Izmantojiet to, lai izveidotu tādas lietas kā kartes, kas tiek atjauninātas reāllaikā, interaktīvās filmas un tiešsaistes spēles. Vietnes, piemēram, Pinterest, lieto JavaScript, lai to lietotāja interfeisu varētu viegli izmantot (tas, ka lapa netiek ielādēta ikreiz, kad jūš pinojat kautko, ir pateicoties JavaScript!).

Tā arī ir vispopulārākā programmēšanas valoda pasaulē, tāpēc neatkarīgi no jūsu karjeras plāniem tā ir supervērtīga lieta, ko mācīties.

JQuery

Jquery

JQuery ir JavaScript bibliotēka: spraudņu un paplašinājumu kolekcija, kas palīdz ar JS izstrādāt ātrāk un vieglāk. Tā vietā, lai kodētu visu no sākuma, jQuery ļauj projektiem pievienot gatavus elementus, kurus pēc tam var pielāgot (viens iemesls, kāpēc zināt JavaScript ir tik svarīgs). Varat izmantot jQuery tādām lietām kā skaitīšanas taimeri, meklēšanas automātiskā pabeigšana un pat automātiska pārkārtošana un režģa izkārtojumu maiņa.

JavaScript Framework

JavaScript frameworki (ieskaitot AngularJS, Backbone, Embers un ReactJS) dod jūsu JavaScript kodam gatavu struktūru. Dažādām vajadzībām ir dažādi sistēmu veidi, lai gan minētie četri ir vispopulārākie darba sarakstos. Šīs sistēmas tiešām paātrina attīstību, dodot jums balvu, un to var izmantot ar tādām bibliotēkām kā jQuery, lai samazinātu to, cik daudz jums ir jākodē.

Front End Frameworks

Framework

CSS un front end frameworks (vispopulārākais front end framework ir Bootstrap) dara CSS, ko JS Frameworki dara priekš JavaScript: tie dod jums ātrāku un vieglāku kodēšanu. Tā kā tik daudz CSS sākas ar tieši tiem pašiem elementiem kas ir citos projektos, sistēma, kas definē visus no tiem, ir ļoti vērtīga. Lielākā daļa front end izstrādātāju darbu sarakstos sagaida, ka jums būs zināms, kā šie frameworki darbojas un kā tos izmantot.

Pieredze ar CSS Preprocessors

Preprocessors ir cits elements, kas var paātrināt jūsu CSS kodēšanu. CSS priekšskatītājs pievieno CSS papildu funkcionalitāti, lai saglabātu mūsu CSS mērogojamu un, lai ar to ir viegli strādāt. Pirms publicēšanas savā mājaslapā tas apstrādā jūsu kodu un pārvērš to labi formatētā un parlūkprogrammu draudzīgā CSS. SASS un LESS ir divi lielākie pieprasījuma preprocessors, to liecina reālie darba saraksti.

Pieredze ar RESTing Services un API

API

Nekļūstot pārāk tehniskam šajā jomā, REST nozīme Representational State Transfer. Pamatterminos tā ir viegla arhitektūra, kas vienkāršo tīkla saziņu tīmeklī, un RESTing pakalpojumi, un API ir tie tīmekļa pakalpojumi, kas ievēro REST arhitektūru. Vairāk par REST un RESTing pakalpojumiem.

Pieņemsim, ka vēlaties rakstīt programmu, kas parāda visus jūsu sociālo mediju draugus tādā secībā, kādā jūs kļuvāt par draugiem. Lai izlasītu draugu sarakstu un atgrieztu šos datus, varat izmantot Facebook RESTful API. Tas pats, arī ar Twitter (kas izmanto arī RESTing API). Vispārējais process ir tāds pats kā jebkuram pakalpojumam, kas izmanto RESTable API, tikai atgrieztie dati būs dažādi.

Lai gan viss izklausās patiešām sarežģīti un tehniski, tas ir vienkāršs pamatlikumu un prakses kopums, kas nosaka cerības, ka jūs sazināties ar tīmekļa pakalpojumu. Viņi arī padara tīmekļa pakalpojumu labāku, mērogu labāku, uzticamāku darbu un ir vieglāk modificēt vai pārvietot.

Adaptīvs mobilais dizains

ASV arvien vairāk cilvēku piekļūst internetam no savas mobilās ierīces nekā no darbvirsmas datora, tāpēc nav brīnums, ka atsaucīgas un mobilas dizaina prasmes darba devējiem ir ļoti svarīgas. Adaptīvs noformējums nozīmē, ka vietnes izkārtojums (un dažkārt funkcionalitāte un saturs) mainās atkarībā no ekrāna lieluma un ierīces, kas tiek izmantota.

Piemēram, ja mājaslapa tiek apmeklēta no darbvirsmas datora ar lielu monitoru, lietotājs iegūtu vairākas kolonnas, lielus grafikus un mijiedarbību, kas izveidota īpaši peles un tastatūras lietotājiem. Mobilajā ierīcē viena un tā pati mājas lapa tiktu parādīta kā viena kolonna, kas optimizēta pieskares saziņai, bet izmantojot tos pašus bāzes failus.

Mobilais dizains var ietvert adaptīvu dizainu, bet ietver arī atsevišķu mobilo ierīču dizainu izveidi. Dažkārt pieredze, ko lietotājam vēlaties veidot, apmeklējot jūsu vietni darbvirsmas datorā, ir pilnīgi atšķirīga nekā tā, ko vēlaties redzēt, apmeklējot savu viedtālruni, un šajos gadījumos mobilās vietnes jēga ir pilnīgi atšķirīga. Piemēram, bankas tīmekļa vietne ar internetbanku varētu gūt labumu no atsevišķas mobilās vietnes, kas ļautu lietotājiem skatīt lietas, piemēram, tuvāko bankas atrašanās vietu un vienkāršotu konta skatu (jo mobilie ekrāni ir mazāki).

Cross-Browser Development

Mūsdienu pārlūkprogrammas ir diezgan labas,lai rādītu mājaslapas, bet joprojām pastāv atšķirības, kā tās interpretē kodu aizkulisēs. Līdz brīdim, kad visas modernās pārlūkprogrammas lieliski darbojas ar tīmekļa standartiem, zinot, kā likt katram no viņiem strādāt tā, kā jūs vēlaties – ir svarīgi zināt kā likt tiem strādāt kā jūs vēlaties. Lūk, tas ir Cross-Browser Development

Satura pārvaldības sistēmas un E-komercijas platformas

Gandrīz katrā mājas lapā ir iebūvēta satura pārvaldības sistēma (CMS). (E-komercijas platformas ir īpašs CMS veids.) Vispopulārākais CMS visā pasaulē ir WordPress, kas ir aiz kadriem no miljoniem mājaslapu (ieskaitot BlackMedia!) — gandrīz 60% mājas lapu, kurās izmanto CMS lieto WordPress.

Pārējie populārākie CMS ietver Joomla, Drupal un Magento. Kaut gan arī jūs zināt, ka viņām nav tik liels pieprasījums kā WordPress, viņi var piedāvāt jums nišu, kas būs vēlama starp uzņēmumiem, kuri izmanto šīs sistēmas (un tur ir pietiekami daudz).

 

Testēšana un atkļūdošana

debugging

 

Tas ir dzīves fakts mājaslapu izstrādē: notiek kļūdas. Ir svarīgi iepazīties ar testēšanas un atkļūdošanas procesiem.

Vienības testēšana ir avota koda atsevišķu bloku testēšanas process (instrukcijas, kas norāda ko mājas lapai jādara), un vienības testēšanas sistēmas nodrošina konkrētu metodi un struktūru, lai to darītu (katrai programmēšanas valodai ir atšķirīgi varianti).

Cita veida testēšana ir UI testēšana (saukta arī par acceptance testing, pārlūkprogrammas testēšanu vai funkcionālo testēšanu), kur pārbaudāt, vai tīmekļa vietne darbojas tā, kā tai vajadzētu darboties, ja lietotājs faktiski veic darbības vietnē. Varat rakstīt testus, kas pēc darbības veikšanas meklēs tādas lietas kā konkrētu HTML lapā (piemēram, pārliecinieties, vai lietotājs aizmirst aizpildīt nepieciešamo veidlapas lauku, ka veidlapas kļūdu lodziņš tiek parādīts).

Atkļūdošana nozīmē novērst visas kļūdas , kas tiek atklātas (vai lietotāji atklāj pēc jūsu vietnes palaišanas), lai noskaidrotu, kāpēc un kā kļūdas notiek, un nosakot problēmu. Dažādi uzņēmumi šim nolūkam izmanto nedaudz atšķirīgus procesus, bet, ja esat izmantojis vienu, varat pielāgoties citiem visai viegli.

Git un versiju kontroles sistēmas

Versiju kontroles sistēmas ļauj izsekot izmaiņām, kas laika gaitā veiktas kodā. Izmantojot VCS ir viegli atgriezties pie vecākas versijas, ja kaut ko salaiž grīstē. Piemēram, pievienojat pielāgotu jQuery spraudni un pēkšņi pārējais puss kods nestrādā. Tā vietā, lai mēģinātu to manuāli atsaukt un novērstu visas kļūdas, varat pārslēgties atpakaļ uz iepriekšējo versiju un pēc tam mēģināt vēlreiz ar citu risinājumu.

Git ir visplašāk izmantotā no šīm versiju kontroles vadības sistēmām. Zinot, kā izmantot Git, ir jābūt prasībai praktiski jebkurā izstrādes darbā. Šī ir viena no tām svarīgajām darba iemaņām, kas izstrādātājiem ir vajadzīga, bet daži tikai par to runā.

Problēmu atrisināšanas prasmes

Problem Solving

Viena lieta, ko visiem gront end izstrādātājiem ir jāmāk, neatkarīgi no darba apraksta vai oficiālā nosaukuma, ir jābūt lieliskām problēmu risināšanas prasmēm. Lai izdomātu, kā vislabāk ieviest dizainu, kā novērst problēmu, lai noskaidrotu, kā savienot savu front end kodu ar ieviesto back end kodu, izstrādē ir saistīta ar radošu problēmu atrisināšanu.

Pieņemsim, ka esat izveidojis lieliski funkcionējošu mājas lapas front end un nododat to back end izstrādātājiem, lai tos integrētu satura pārvaldības sistēmā. Pēkšņi, puse no jūsu lieliskajām funkcijām pārstāj darboties. Labs front end izstrādātājs to uzskatīs par mīklu, kas jāatrisina, nevis par katastrofu. Protams, izcils, augstākā līmeņa front end izstrādātājs šīs problēmas sagaidīs un centīsies tos novērst pirmajā vietā!