Esittely
Olitpa uusi ohjelmoinnin parissa tai jo kokenut kehittäjä, tällä alalla uusien käsitteiden ja kielten/kehysten oppiminen on välttämätöntä trendien tahdissa.
Otetaan esimerkiksi React, joka oli Facebookin avoimen lähdekoodin vasta neljä vuotta sitten ja josta on jo tullut JavaScript-kehittäjien ykkösvaihtoehto ympäri maailmaa.
Vuella ja Angularilla on tietysti myös laillinen fanikunta. Ja sitten on Svelte ja muut yleiskäyttöiset puitteet, kuten Next.js tai Nuxt.js. Ja Gatsby, ja Gridsome ja Quasar... ja paljon muuta.
Jos haluat todistaa itsesi kokeneena JavaScript-kehittäjänä, sinulla tulee olla ainakin jonkin verran kokemusta erilaisista puitteista ja kirjastoista - vanhan hyvän JS-työn lisäksi.
Auttaakseni sinua kehittymään käyttöliittymämestarina vuonna 2020, olen koonnut yhdeksän erilaista projektia, joista jokainen keskittyy erilaisiin JavaScript-kehyksiin ja kirjastoihin teknologiapinona, jonka voit rakentaa ja lisätä portfolioosi. Muista, että mikään ei auta sinua enemmän kuin asioiden toteuttaminen käytännössä, joten mene eteenpäin, käänny mielesi ja tee se mahdolliseksi.
Artikkeli on käännetty EDISON Softwaren tuella, joka Ja .
Elokuvahakusovellus Reactilla (koukuilla)
Ensimmäinen asia, josta voit aloittaa, on elokuvahakusovelluksen rakentaminen Reactin avulla. Alla on kuva siitä, miltä lopullinen sovellus näyttää:
Mitä opit
Rakentamalla tämän sovelluksen parannat React-taitojasi suhteellisen uuden Hooks API:n avulla. Esimerkkiprojektissa käytetään React-komponentteja, paljon koukkuja, ulkoista API:ta ja tietysti jonkin verran CSS-tyyliä.
Tekninen pino ja ominaisuudet
- Reagoi koukuilla
- luoda reagoivat-sovellus
- JSX
- CSS
Ilman luokkia nämä projektit antavat sinulle täydellisen sisääntulokohdan toimivaan Reactiin ja auttavat sinua varmasti vuonna 2020. voit löytää . Noudata ohjeita tai tee siitä omasi.
Chat-sovellus Vuen kanssa
Toinen hieno projekti sinulle on luoda chat-sovellus käyttämällä suosikki JavaScript-kirjastoani: VueJS. Sovellus näyttää suunnilleen tältä:
Mitä opit
Tässä opetusohjelmassa opit tekemään Vue-sovelluksen tyhjästä – luomaan komponentteja, käsittelemään tiloja, luomaan reittejä, muodostamaan yhteyden kolmannen osapuolen palveluihin ja jopa käsittelemään todennusta.
Tekninen pino ja ominaisuudet
- Näkymä
- vuex
- Vue-reititin
- Vue CLI
- Pusher
- CSS
Tämä on todella hieno projekti aloittaaksesi Vuen kanssa tai parantaaksesi olemassa olevia taitojasi päästäksesi kehitykseen vuonna 2020. voit löytää .
Kaunis sääsovellus Angular 8:lla
Tämä esimerkki auttaa sinua rakentamaan kauniin sääsovelluksen Angular 8:lla:
Mitä opit
Tämä projekti opettaa sinulle arvokkaita taitoja sovellusten rakentamisessa alusta alkaen - suunnittelusta kehitystyön, aina käyttöönottovalmiin sovelluksiin.
Tekninen pino ja ominaisuudet
- Kulma 8
- Firebase
- Palvelinpuolen renderöinti
- CSS gridillä ja Flexboxilla
- Mobiiliystävällinen ja mukautuva
- Tumma tila
- Kaunis käyttöliittymä
Tästä kokonaisvaltaisesta projektista pidän todella paljon, että asioita ei tutkita eristyksissä. Sen sijaan opit koko kehitysprosessin suunnittelusta lopulliseen käyttöönottoon.
To-Do-sovellus Svelten kanssa
Svelte on kuin uusi lapsi komponenttilähestymistapassa - ainakin samanlainen kuin React, Vue ja Angular. Ja tämä on yksi vuoden 2020 kuumimmista uusista tuotteista.
To-Do-sovellukset eivät välttämättä ole kuumin aihe, mutta ne todella auttavat sinua hiomaan Svelte-taitojasi. Se näyttää tältä:
Mitä opit
Tämä opetusohjelma näyttää, kuinka voit luoda sovelluksen Svelte 3:lla alusta loppuun. Käytät komponentteja, tyyliä ja tapahtumakäsittelijöitä
Tekninen pino ja ominaisuudet
- Siro 3
- Компоненты
- Muotoilu CSS:llä
- Syntaksi ES6
Hyviä Svelte-aloitusprojekteja ei ole montaa, joten löysin .
Verkkokauppasovellus Next.js:n kanssa
Next.js on suosituin kehys React-sovellusten rakentamiseen, jotka tukevat palvelinpuolen renderöintiä heti valmiina.
Tämä projekti näyttää, kuinka voit luoda verkkokauppasovelluksen, joka näyttää tältä:
Mitä opit
Tässä projektissa opit kehittämään Next.js:n avulla – luomaan uusia sivuja ja komponentteja, noutamaan tietoja sekä muotoilemaan ja ottamaan käyttöön Next-sovelluksen.
Tekninen pino ja ominaisuudet
- Next.js
- Komponentit ja sivut
- Datan otanta
- stilisointi
- Projektin käyttöönotto
- SSR ja SPA
On aina hienoa, että sinulla on tosielämän esimerkki, kuten verkkokauppasovellus, jossa voit oppia jotain uutta. Sinä pystyt .
Täysi monikielinen blogi Nuxt.js:llä
Nuxt.js on Vuelle, kuten Next.js on Reactille: loistava kehys palvelinpuolen renderöinnin ja yksisivuisten sovellusten yhdistämiseen
Viimeinen luotava sovellus näyttää tältä:
Mitä opit
Tässä esimerkkiprojektissa opit rakentamaan täydellisen verkkosivuston Nuxt.js:n avulla alkuasennuksesta lopulliseen käyttöönottoon.
Se hyödyntää monia Nuxtin hienoja ominaisuuksia, kuten sivuja ja komponentteja sekä muotoilua SCSS:n avulla.
Tekninen pino ja ominaisuudet
- Nuxt.js
- Komponentit ja sivut
- tarinalohkomoduuli
- Seokset
- Vuex valtionhallinnolle
- SCSS muotoiluun
- Nuxt väliohjelmistot
, joka sisältää monia Nuxt.js:n hienoja ominaisuuksia. Itse pidän Nuxtin kanssa työskentelystä, joten sinun pitäisi kokeilla sitä, koska se tekee sinusta myös loistavan Vue-kehittäjän.
Blogi Gatsbyn kanssa
Gatsby on loistava staattinen sivustogeneraattori, joka käyttää Reactia ja GraphQL:ää. Tämä on projektin tulos:
Mitä opit
Tässä opetusohjelmassa opit luomaan Gatsbyn avulla blogin, jonka avulla voit kirjoittaa omia artikkeleitasi Reactin ja GraphQL:n avulla.
Tekninen pino ja ominaisuudet
- gatsby
- suhtautua
- GraphQL
- Lisäosat ja teemat
- MDX/markdown
- Bootstrap CSS
- Mallit
Jos olet joskus halunnut perustaa blogin, miten se tehdään Reactin ja GraphQL:n avulla.
En sano, että WordPress on huono valinta, mutta Gatsbyn avulla voit rakentaa tehokkaita verkkosivustoja Reactin avulla - mikä on hämmästyttävä yhdistelmä.
Blogi Gridsomen kanssa
Gridsome for Vue… Okei, meillä oli se jo Next/Nuxtin kanssa.
Mutta sama pätee Gridsomeen ja Gatsbyyn. Molemmat käyttävät GraphQL:ää tietokerroksenaan, mutta Gridsome käyttää VueJS:ää. Se on myös mahtava staattinen sivustogeneraattori, jonka avulla voit luoda upeita blogeja:
Mitä opit
Tämä projekti opettaa sinulle, kuinka voit luoda yksinkertaisen blogin, jolla pääset alkuun Gridsomen, GraphQL:n ja Markdownin kanssa. Se selittää myös, kuinka sovellus otetaan käyttöön Netlifyn kautta.
Tekninen pino ja ominaisuudet
- Kauhea
- Näkymä
- GraphQL
- Hinnanalennus
- netlify
Tämä ei todellakaan ole täydellisin opetusohjelma, mutta se kattaa Gridsomen peruskäsitteet ja .
SoundCloudin kaltainen äänisoitin Quasarilla
Quasar on toinen Vue-kehys, jota voidaan käyttää mobiilisovellusten rakentamiseen. Tässä projektissa luot äänisoitinsovelluksen, esimerkiksi:
Mitä opit
Vaikka muut projektit keskittyvät enimmäkseen verkkosovelluksiin, tämä näyttää sinulle, kuinka voit rakentaa mobiilisovelluksen Vuen ja Quasar-kehyksen avulla.
Sinulla pitäisi olla jo toimiva Cordova, jossa on Android Studio/Xcode. Jos ei, ohjekirjassa on linkki Quasar-verkkosivustolle, jossa he osoittavat, kuinka kaikki asetetaan.
Tekninen pino ja ominaisuudet
- Kvasaari
- Näkymä
- Cordova
- aaltosurffaaja
- Käyttöliittymän komponentit
, joka osoittaa Quasarin kyvyt mobiilisovellusten rakentamiseen.
Lähde: will.com