Front- end- kehittäjien kysyntä on kasvanut rajusti viime vuosina, yksinkertaisesti siksi, että niin monet haluavat verkkosivuston, mutta ammattitaitoisia tekijöitä, jotka voivat luoda verkkosivuston, ei ole tarpeeksi.
Mutta mitä tarkalleen on front- end- kehitys ja miksi meidän pitäisi kiinnittää siihen huomiota?
Mitä on front- end- kehitys?
Kun joku sanoo "front- end dev", se tarkoittaa yleensä Front- endin verkkokehitystä tai sovelluskehitystä, joka keskittyy pääasiassa siihen verkkosivuston/ sovelluksen osaan, jonka käyttäjät näkevät (tunnetaan myös asiakaspuolena).
Periaatteessa Front- endin verkkokehittäjä muuntaa taustakoodin graafiseksi front- end- ksi, jonka käyttäjät voivat nähdä, ja olla vuorovaikutuksessa rikkomatta sovelluksen tausta- arkkitehtuuria.
Saat tarkemman kuvauksen tutustumalla oppaaseemme Front- endin kehityskielistä ja niiden eroista.
Kuinka suosittua Front- end- kehitys on?
Kuten totesin, Front- end- kehityksestä on tulossa yhä suositumpaa viime vuosina kaikkialla maailmassa.
Ymmärtääksemme kuitenkin sen todellisen vaikutuksen ja merkityksen, meidän on tarkasteltava suosituimpia yksittäisiä kieliä ja kehyksiä, ja käsiteltävä niitä kuin elementtejä, jotka sisältyvät Front- end- ohjelmistokehitykseen.
JavaScript kulkee mukana
Huolimatta siitä, että JavaScript on suhteellisen vanha skriptikieli, sitä päivitetään (ja käytetään uudelleen) jatkuvasti uusien, nopeampien ja luotettavampien kehysten "purkaa" pois JavaScript-paradigmasta tahdilla, jota tuskin kukaan voi seurata viime aikoina.
Hämmästyttävää kyllä, JavaScript on yleisimmin käytetty ohjelmointikieli yhdeksän vuoden ajan peräkkäin. Huomioi kuitenkin, että useimmat kehittäjät pitävät ohjelmointia verkko-ohjelmointina ja päinvastoin.
Angular, React.js ja Vue.js ovat kolme parasta
JavaScriptillä on myös kohtuullisesti kehyksiä, joista valita. Angularin, Vue.js: n ja React.js: n kaltaiset raskaat sovellukset ovat kehittäjien vaativimpia kehyksiä maailmanlaajuisesti.
Loppu tulema JavaScript- trifectasta näyttää siltä, että React.js on noussut kärkeen voittamalla WhatsAppin, BBC: n, Pinterestin ja muiden monen miljardin dollarin yritysten kehitystiimien sydämet ja mielet.
"JavaScriptin D'Artagnan", Vue 3, on myös vauhdissa ja on myös yrittänyt taistella kolmen parhaan joukosta. Onnistuuko se, tämä jää vielä nähtäväksi.
TypeScript on tulevaisuus
JavaScriptiä ei tietenkään voi mainita ilman TypeScriptiä: siitä on tullut kuin maapähkinävoita ja hyytelöä tässä vaiheessa. Vuonna 2012 julkaisemisestaan lähtien TypeScript on nyt ykköskieli, jolla kehittäjät haluavat työskennellä eniten, jos he eivät jo käytä sitä.
Saman kyselyn mukaan TypeScript on myös seitsemänneksi suosituin kieli kaikkien vastaajien keskuudessa ja viidenneksi suosituin kieli ammattikehittäjien keskuudessa. Tässä valossa se on ansainnut huomattavan osan suosiosta, 30,19 % ja 36,42 % 83 052 ja 58 031 vastaajasta.
Svelte alkaa saada suosiota
Lopuksi myös Svelte- niminen komponenttipohjainen JS- kehys on saamassa vetovoimaa ja alkaa tehdä nimeään kaupungissa.
Sveltessä luotu koodi voi manipuloida DOM: ia, mikä parantaa suorituskykyä kaikilla rintamilla ja nostaa JavaScriptiä entisestään sen suosion suhteen ammattitason front- end- kehittäjien joukossa.
Pidä silmällä Svelte- kehittäjiä, jos et jo seuraa näitä nousevia front- end- trendejä.
Mistä löytää laadukkaita Front- end- kehittäjiä
Tässä on joitain luotettavimmista paikoista, joista voit löytää ja palkata freelance- Front- end- kehittäjän:
- Hired: Luotettava verkkosivusto, josta löydät front- end- n, taustajärjestelmän ja täyden pinon kehittäjät
- Upwork: Freelance- lahjakkuuksia erilaisista taustoista ja erilaisilla kokemuksilla
- Dice: Omistautunut tekninen sivusto, jossa on yli 3 miljoonaa ammattilaista
- Gun.io: Erittäin ainutlaatuinen ja omituinen resurssi kehittäjien löytämiseksi projekteihisi
- Proxify: Tämä on me! Tarjoamme valmiiksi tarkastettuja, huippuluokan ammattikehittäjiä saatavilla muutamassa päivässä
- X-team: Tarjoaa on- demand- kehittäjiä useisiin erilaisiin projekteihin
Muita verkkoresursseja, joista voit löytää laadukkaita kehittäjiä, ovat StackOverflow, GitHub, Reddit (jossain määrin) ja jopa työkalut, kuten Ahrefs ja SEMrush (avainsanatutkimuksen tekeminen, esimerkiksi "etsi Front- end- kehittäjät läheltäni"), jos olet tarpeeksi taitava SEO.
Kuinka haastatella Front- end- kehittäjiä
Kauan sitten Front- end- kehittäjien tehtävät ja vastuut olisivat näyttäneet suunnilleen tältä: kyetä kääntämään staattinen suunnittelu toimiviksi verkkosivustoiksi tai sovelluksiksi HTML/CSS: n, JavaScriptin ja muiden työkalujen ja puitteiden avulla.
Nykyään tuo määritelmä on kuitenkin selvästi laajentunut harvojen tyrmistykseksi ja monien iloksi. Nykyaikaisen taitavan web- insinöörin tehtävät, vastuut ja odotukset ovat seuraavat:
- Luoda, ylläpitää ja korjata verkkosivustoja ja verkkosovelluksia noudattamalla web-suunnittelun parhaita käytäntöjä
- Muuntaa suunnitelmat ja sovellussuunnitelmat front- end- koodiksi HTML5: n, CSS3: n, JavaScriptin ja sen monien kehysten ja kirjastojen (React.js, Angular, Vue.js) avulla
- Työskennellä yhdessä taustakehittäjien kanssa auttaaksesi integroimaan front- end- elementtejä tietokantoihin ja sovellusliittymiin
- Tuntea on se, että hakukoneoptimointi (SEO), mukaan lukien kyky optimoida verkkosivusto/sovellus suorituskykyä ja nopeutta varten
- Kirjoittaa laatukoodia, dokumentoida sen mukaisesti ja suorittaa rutiinitarkistuksia ja -testejä varmistaakseen sujuvan toiminnan verkkosivuston/sovelluksen sisällä
- Halu kehittää jatkuvasti olemassa olevia taitojaan (mukaan lukien pehmeät taidot) ja oppia uutta siinä samalla
Haastattelukysymykset + niihin odotetut vastaukset
Junior- tason kehittäjille
- Mitä taitoja Front- end- kehittäjä tarvitsee?
Odotettu vastaus: Front- end-, eli käyttöliittymä- kehittäjän on tunnettava HTML, CSS ja JavaScript. Heidän on myös tunnettava responsiivisen suunnittelun ja verkkokehityksen parhaat käytännöt.
- Määritä HTML- sisällönkuvauskentät.
Odotettu vastaus: Sisällönkuvauskentät ovat HTML- elementtejä, jotka sisältävät tietoa sivusta, kuten sivun nimen, kuvauksen, avainsanat, tekijän ja paljon muuta. Hakukoneet käyttävät niitä usein auttaakseen määrittelemään, miten sivustosi luokitellaan.
- Kuvaile REST- verkkopalveluiden etuja?
Odotettu vastaus: REST on lyhenne sanoista Representational State Transfer. Se on arkkitehtoninen tyyli Web- palvelujen rakentamiseen HTTP: n kautta. REST- verkkopalvelut helpottavat asiakkaiden pääsyä tietoihin useilla alustoilla ja laitteilla (esimerkiksi matkapuhelimilla).
- Mikä on Grid- järjestelmä CSS: ssä?
Odotettu vastaus: Ruudukkojärjestelmä on joukko työkaluja asettelujen luomiseen CSS: n avulla. Sitä käytetään usein luomaan johdonmukainen asettelu, jota voidaan käyttää uudelleen useilla sivuilla, mutta sitä voidaan käyttää myös yhden sivun näyttämiseen paremmalta.
- Selitä käyttäjälähtöinen suunnittelu?
Odotettu vastaus: Käyttäjäkeskeinen suunnittelu keskittyy käyttäjien tarpeisiin ja toiveisiin sen sijaan, että yrität vain tehdä tuotteestasi hyvännäköisen. Käyttäjäkeskeinen suunnittelu auttaa ymmärtämään, mitä käyttäjät haluavat ja tarvitsevat, jotta he voivat käyttää tuotettasi tehokkaammin ja nautinnollisemmin.
- Kerro minulle, milloin ja miksi minun pitäisi käyttää Webpackia?
Odotettu vastaus: Webpack on avoimen lähdekoodin moduulien niputtaja JavaScript-sovelluksille. Se niputtaa kaikki tiedostosi yhdeksi tiedostoksi, jota kutsutaan "nipuksi". Tämä tarkoittaa, että sen sijaan, että sinun tarvitsee ladata jokainen yksittäinen tiedosto erikseen (kuten CSS, HTML ja JavaScript), WebPack yhdistää ne yhdeksi tiedostoksi, joka latautuu nopeasti ja tehokkaasti – joten verkkosivustosi latautuu nopeammin!
Sinun tulee käyttää Webpackia, kun haluat niputtaa useita JavaScript- tiedostoja yhdeksi tiedostoksi ja ladata ne kaikki kerralla selaimeen.
- Mainitse kolme tapaa lyhentää sivun latausaikaa
Odotettu vastaus:
- Pidä HTTP- pyyntöjen määrä minimissä yhdistämällä useita tiedostoja yhdeksi.
- Pienennä kunkin sisällön kokoa pakkaamalla kuvia ja pienentämällä HTML-, CSS- ja JavaScript-tiedostoja.
- Minimoi palvelimen ja loppukäyttäjän välinen etäisyys CDN: n (Content Delivery Network) avulla.
Senior- tason kehittäjille
- Mikä on stringify?
Odotettu vastaus: Stringify on online- työkalu, jonka avulla voit muuntaa pelkkää tekstiä HTML- ja JSON- muodoissa oleviksi Rich Snippet- katkeiksi. Se toimii pelkillä tekstiasiakirjoilla, poimii niistä metatiedot ja muuntaa ne JSON- tai HTML- koodiksi muotoilu- ja tyylitiedoilla. Monet kehittäjät luovat Stringifyn avulla Rich Snippets- katkelmia verkkosivuilleen ja verkkosivustoilleen, jotta Google voi ymmärtää paremmin heidän verkkosivustonsa ja sijoittaa sen korkeammalle hakutulossivuilla.
- Ilmoita kaikki CSS- laatikkomallin elementit.
Odotettu vastaus: Laatikkomalli koostuu neljästä elementistä: marginaali, täyte, reunus ja sisällön leveys. Nämä kaikki muodostavat ruudun sisällön ympärille laatikon.
- Mitä hyötyä srcset- attribuutista on kuvatunnisteessa?
Odotettu vastaus: srcset- attribuutin avulla voit määrittää useita kuvia, jotka voidaan ladata laitteen ja näytön koon mukaan. Näin voit tarjota käyttäjille paremman käyttökokemuksen, kun he selaavat sivustoasi mobiililaitteilla.
- Selitä ero Git Pullin ja Git Fetchin välillä.
Odotettu vastaus: Git Pull ja Git Fetch ovat kaksi eri komentoa, jotka molemmat hakevat uuden koodin etävarastosta ja yhdistävät sen paikalliseen työkopioosi. Git Pull hakee uuden koodin etävarastosta, yhdistää sen paikalliseen työkopioosi ja pysähtyy sitten. Git Fetch on samanlainen kuin Git Pull, paitsi että se ei pysähdy yhdistämisen jälkeen; Sen sijaan se jatkaa antamillasi lisäkomennoilla (kuten git checkout).
- Mikä on semanttinen HTML? Kuinka se toimii?
Odotettu vastaus: Semanttinen HTML on se, kun käytät HTML- tageja, jotka liittyvät verkkosivustosi sisältöön, kuten tekstiä varten kappaleita ja luetteloita. Semanttinen HTML auttaa hakukoneita ymmärtämään, mistä verkkosivustollasi on kyse, jotta he voivat tarjota parempia tuloksia käyttäjille, jotka selaavat verkkoa kyseisillä hakukoneilla.
- Määritä Anonymous- funktio JS: ssä?
Odotettu vastaus: JavaScriptin anonyymiä funktiota käytetään, kun et halua määritellä funktion nimeä tarkasti, mutta haluat suorittaa jonkin koodin sen tilalle.
Huipputekniset taidot, joita Front- end- kehittäjillä tulee olla
Nopea sivuhuomautus, että jotkut yritykset vaativat tietojenkäsittelytieteen tai vastaavan alan kandidaatin tutkinnon kehittäjän työhön haettaessa (missä tahansa ominaisuudessa). Jotkut yritykset eivät vaadi mitään muuta kuin raakakoodaustaitoja ja ongelmanratkaisukykyjä, mutta jonkinlainen kehittäjäsertifiointi on aina plussaa.
Tässä on joitain tärkeimpiä pätevyyksiä, joita asiantuntevalta front- end- kehittäjältä odotetaan:
- Usean vuoden kokemus (2+) nykyaikaisten, nopeiden ja vastuullisten verkkosivustojen kehittämisestä HTML: llä, CSS: llä ja JavaScriptillä
- Syvällinen tuntemus suosituimmista JavaScript- kehyksistä, kuten React.js, Angular ja Vue.js
- Suuri ymmärrys ja laaja kokemus JavaScript- kirjastojen, kuten Bootstrapin ja jQueryn, kanssa työskentelystä
- Hyvä ymmärrys SEO- periaatteista ja paikan päällä toimivista käytännöistä
- Erinomainen semanttisten HTML5- elementtien, WAI- ARIAn ja mikromuotojen taito
- Erinomainen CSS- esiprosessorien (Sass, Less tai Stylus) taito
- Runsaat kokemukset selainten välisestä testauksesta ja yhteensopivuudesta
Halusin luonnollisesti oikaista joitain väärinkäsityksiä front- endin kehityspalvelusta (ja front- end-kehityksestä yleensä), joten otin yhteyttä Proxify- kehittäjien verkostoon parilla kysymyksellä, joihin he mielellään vastasivat.
Ensimmäinen kysymykseni oli enemmän jäänmurtaja kuin mikään muu, mutta mielestäni se auttoi asettamaan keskustelun sävyn mukavasti:
- Mikä on tärkein ero front- end- ja back-end- kehittäjän välillä?
Armen Nersisyan, HTML-, CSS- ja JavaScript- asiantuntija, keräsi nopeasti vastauksen:
"Frontend-kehittäjät ovat ihmisiä, jotka työskentelevät käyttäjäkohtaisten yksityiskohtien tai toisin sanoen kaiken näkemämme (asiakaspuolella), kuten sovellusvärien, animaatioiden ja monien muiden parissa. Kaiken tämän tekevät front- end- kehittäjät. Toisaalta back- end- insinöörit työskentelevät sellaisten asioiden parissa, jotka eivät näy käyttäjille, kuten autentikoinnin, tietokantojen kanssa työskentelyn ja muiden vastaavien asioiden parissa.”
Armen Nersisyan
Toinen kehittäjä, joka kuuluu Proxifyn eliitin kehittäjien tiimiin, tarjosi myös oman näkemyksensä. Ardit Malokulla on laaja kokemus erilaisista front- end- ja back- end- projekteista, ja pääpaino on PHP, Laravel ja JavaScript hänen ensisijaisina kielinä:
“Front- end- kehitys on ohjelmointia, joka keskittyy verkkosivuston tai sovelluksen visuaalisiin elementteihin, joiden kanssa käyttäjä on vuorovaikutuksessa. Samaan aikaan back-end- kehitys keskittyy sivuston puolelle, jota käyttäjät eivät näe."
Ardit Maloku
Toinen kysymykseni oli suunnattu enemmän esimiehille, asiakkaille ja muille työtovereille, joilla ei välttämättä ole omasta takaa teknistä taustaa.
- Mikä on se yksi asia, jota ei- tekniikan ihmiset usein hämmentyvät front- end- kehittäjistä?
Armen oli vastauksessaan suoraviivainen:
"Front end-kehitys sekoitetaan usein front- end- kehitykseen, ja joskus ihmiset ajattelevat, että front- end-kehittäjät tekevät vain maalauksia. Mutta nykyään front- end- n ja maalauksen lisäksi on myös paljon loogisia osia, jotka on saatava valmiiksi nimenomaan front- end- kehittäjien toimesta."
Armen Nersisyan
Ardit tuli hienolla analogialla:
”Kaikki pitävät autoista, tai ainakin osa meistä tykkää, haha. Jos katsomme verkkosivustoa samalla kun katsomme autoja, voimme nähdä kaikki ne asiat, jotka niillä on yhteistä. Joten front- end on auton sisä- ja ulkopuoli, kun taas back- end on sen moottori. Sivuston käyttäjä on auton kuljettaja, joten kuljettajan on silti painettava polkimia voidakseen ajaa autoa. Sitä front-end tekee verkkosivustolle, se saa sen moottorin (taustajärjestelmän) toimimaan ja nimeonmaan toimimaan loppukäyttäjän näkökulmasta."
Ardit Maloku
Hän jatkoi: "Kaiken tämän jälkeen front- end saa datan olemaan vuorovaikutuksessa käyttäjän kanssa; se luo automatisoituja toimintoja, jotka helpottavat verkkosivustoa käyttävän henkilön toimintaa. Lisäksi, jotta emme unohda, front- end- kehitys huolehtii siitä, miltä verkkosivusto (tai verkkosivu) näyttää."
Kolmas ja viimeinen kysymykseni oli seuraava:
- Mistä front- end- kehittäjät ovat päävastuussa (verkko) sovelluksen kehitysprosessissa?
Armen viimeinen vastaus oli lyhyt ja osuva:
"Kaksi pääasiaa, joista front- end- kehittäjät ovat vastuussa, ovat UI/UX ja sivun nopeus."
Armen Nersisyan
Ardit päätteli ytimekkäästi:
"Front- end-kehittäjien tulee olla vastuussa pikselitäydellisten verkkosivustojen rakentamisesta, pitää käyttäjät ajan tasalla kaikesta, mitä verkkosivustolla tapahtuu, ja antaa mielipiteitä siitä, kuinka käyttäjäkokemusta voidaan parantaa."
Ardit Maloku
Kuinka testata front- end- kehittäjän teknisiä taitoja ja suunnittelukykyä
Voit esittää front- end- kehittäjille useita teknisiä kysymyksiä varmistaaksesi, että he ovat ammattitaitoisia, asiantuntevia ja luotettavia kehittäjiä. Tässä on muutamia.
(1) Kuinka varmistat, että verkkosivustosi tai sovelluksesi on saavutettavissa, käyttäjäystävällinen ja uusimpien verkkokehitysstandardien ja parhaiden käytäntöjen mukainen?
Odotettu vastaus: "Varmistan aina, että testaan verkkosivustojani ja sovelluksiani kaikilla yleisimmillä selaimilla, laitteilla ja kokoonpanoilla varmistaakseni, että käyttökokemus on kaikissa niissä hyvällä tasolla. Käytän näytönlukuohjelmia ja muita ratkaisuja varmistaakseni, että sovellukseni ovat kaikkien käyttäjien saatavilla. Pysyn ajan tasalla kaikista verkkokehityksen parhaista käytännöistä, ja käytän uusimpia kieliversioita vähentääkseni ja lopulta poistaakseni virhetilanteita koodissani. Käytän testilähtöistä kehitystä säännöllisesti ja usein.”
(2) Mitkä ovat suosikki (ja/tai eniten käytetyt) HTML- ominaisuudet, ja miten olet käyttänyt niitä projekteissasi?
Odotettu vastaus: "Arvostan todella, kuinka HTML5 käsittelee multimediatukea aikaisempien iteraatioiden sijaan. Käytän tätä ominaisuutta usein luodakseni mielenkiintoisen, visuaalisesti houkuttelevan ja reagoivan suunnittelun, joka käyttää ääni- ja videoelementtejä olennaisena osana kattavaa verkkosivustokokemusta. Sen avulla voin rakentaa vapaasti ilman, että minun tarvitsee huolehtia virheistä latausajan aikana tai törmäämättä ristiriitaan muiden verkkosivun elementtien kanssa."
(3) Kuinka mukautat CSS: si niin, että muut kehittäjät voivat helposti käsitellä koodiasi?
Odotettu vastaus: "Järjestän tyylisivuni osioihin yhdistäen kunkin osion vastaavan komponentin sivustolla. Lisäksi jokaisessa osiossa on kommentteja, joten kun muut kehittäjät työskentelevät koodin parissa, he voivat helposti muuttaa sitä, lisätä siihen tai skaalata sitä."
(4) Mitkä ovat suosikkiresurssi sopeutuaksesi viimeisimpiin front- end-kehityksen ja -suunnittelun trendeihin?
Odotettu vastaus: Osallistun säännöllisesti keskusteluihin StackOverflow- foorumeilla. Nämä resurssit auttavat minua valtavasti oppimaan ja mukautumaan front- end- kehityksen ja suunnittelun uusimpiin trendeihin.
(5) Mikä on CSS float? Voitko antaa esimerkkejä sen käytöstä?
Odotettu vastaus: CSS: n float- ominaisuus asettaa elementin säilön oikealle tai vasemmalle puolelle, jolloin tekstin sisäisiä elementtejä (ja tekstiä) kääritään sen ympärille aiheuttamatta ristiriitoja sivun muiden elementtien kanssa. Käytän usein floateja, kun työskentelen sivulla, jonka koko muuttuu dynaamisesti käyttäjän laitteen resoluution perusteella."
Miksi sinun pitäisi palkata front- end- kehittäjä?
Front- end- kehityksessä on paljon muutakin kuin pelkkä HTML-, CSS- tai JavaScript-koodi. Front- end- insinöörit voivat auttaa tarjoamaan tehokkaita ratkaisuja seuraaviin haasteisiin:
Verkkosivustojen saavutettavuus: Front- end- haasteet ovat asioita, jotka front- end- kehittäjät ovat koulutettuja ratkaistaisemaan. On suhteellisen helppoa luoda verkkosivusto, jota useimmat käyttäjät voivat käyttää. Mutta entäpä sellaisen luominen, jota kaikki käyttäjät voivat käyttää heidän olosuhteistaan riippumatta? Front- end- kehittäjä on paras henkilö työhön, koska hän on suoraan vastuussa niiden verkkosivuston osien kirjoittamisesta, joita käyttäjät käyttävät, ja joiden kanssa he ovat vuorovaikutuksessa kaikissa mahdollisissa olosuhteissa.
Verkkosivuston suorituskyky: Verkkosivuston suorituskykyasiantuntijan Steve Souders in mukaan 80– 90 % käyttäjän vasteajasta on varattu front- endille. Tämä tarkoittaa, että vain 10- 20 % verkkosivuston suorituskyvystä on riippuvainen taustajärjestelmästä (palvelinpuolella). Jos verkon suorituskyky on hidasta ja epäluotettavaa, käyttäjät hylkäävät verkkosivuston nopeasti ja kokeilevat muita vaihtoehtoja. Tästä syystä on erittäin tärkeää, että sinulla on hyvä verkkosuorituskyky yhdistettynä loistavaan front- endiin (käyttäjäkokemus), mikä johtaa väistämättä liikenteen kasvuun ja viime kädessä parantuneisiin tuloihin pitkällä aikavälillä.
Verkkosuunnittelu: Laadukas front- end- kehittäjä on "hybridi" ohjelmistosuunnittelijan ja front- end- suunnittelijan välillä. He pystyvät ottamaan raakaa graafista suunnittelumallia ja muuttamaan sen visuaalisesti kiiltäväksi HTML- kokemukseksi, joka tarjoaa: saavutettavuuden, luotettavan web- suorituskyvyn, helpon ylläpidon, laitteiden välisen yhteensopivuuden ja reagoivan web- suunnittelun.
English
Svenska
Dansk
Dutch
Deutsch
Français
Norsk
