ProHoster > Блог > ayelujara iroyin > Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

Ifihan

Независимо от того, являетесь ли вы новичком в программировании или уже опытным разработчиком, в этой отрасли изучение новых концепций и языков/фреймворков является обязательно чтобы успевать за трендами.

Возьмем, к примеру, React — код которого, Facebook открыл всего четыре года назад, он уже стал выбором номер один для разработчиков JavaScript по всему миру.

Vue и Angular, конечно же, также имеют свою законную базу поклонников. И еще есть Svelte и другие универсальные фреймворки, такие как Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar… и многое другое.

Если вы хотите проявить себя как опытный разработчик JavaScript, у вас должен быть хотя бы некоторый опыт работы с различными фреймворками и библиотеками — помимо выполнения работы с хорошим старым JS.

Чтобы помочь вам стать мастером фронт-енда в 2020 году, я собрал девять различных проектов, каждый из которых был посвящен разным фреймворкам и библиотекам JavaScript в качестве технического стека, который вы можете создать и добавить в свое портфолио. Помните, что ничто не помогает вам больше, чем на практике создавать вещи, поэтому двигайтесь вперед, включите свой ум и сделайте это возможным

Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

A tumọ nkan naa pẹlu atilẹyin EDISON Software, eyiti ṣe awọn yara ibamu foju fun awọn ile itaja iyasọtọ pupọAti software igbeyewo.

Ohun elo wiwa fiimu nipa lilo React (pẹlu awọn iwọ)

Ohun akọkọ ti o le bẹrẹ pẹlu ni lati ṣẹda ohun elo wiwa fiimu kan nipa lilo React. Ni isalẹ jẹ aworan ti kini ohun elo ikẹhin yoo dabi:

Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

Kini iwọ yoo kọ
Nipa kikọ ohun elo yii, iwọ yoo mu awọn ọgbọn React rẹ pọ si nipa lilo API Hooks tuntun ti o jo. Ise agbese apẹẹrẹ nlo awọn paati React, ọpọlọpọ awọn kio, API ita, ati pe dajudaju diẹ ninu aṣa aṣa CSS.

Tech akopọ ati awọn ẹya ara ẹrọ

  • Fesi pẹlu ìkọ
  • ṣẹda-fesi-app
  • JSX
  • CSS

Laisi lilo awọn kilasi eyikeyi, awọn iṣẹ akanṣe wọnyi fun ọ ni aaye titẹsi pipe sinu React iṣẹ ati dajudaju yoo ṣe iranlọwọ fun ọ ni 2020. o le wa apẹẹrẹ ise agbese nibi. Tẹle awọn itọnisọna tabi jẹ ki o jẹ tirẹ.

Iwiregbe App pẹlu Vue

Ise agbese nla miiran fun ọ lati ṣe ni lati ṣẹda ohun elo iwiregbe ni lilo ile-ikawe JavaScript ayanfẹ mi: VueJS. Ohun elo naa yoo dabi iru eyi:

Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

Kini iwọ yoo kọ
Ninu ikẹkọ yii, iwọ yoo kọ bii o ṣe le ṣe ohun elo Vue kan lati ibere - ṣiṣẹda awọn paati, ipo mimu, ṣiṣẹda awọn ipa ọna, sisopọ si awọn iṣẹ ẹnikẹta, ati paapaa mimu ijẹrisi mu.

Tech akopọ ati awọn ẹya ara ẹrọ

  • Wo
  • vuex
  • Vue olulana
  • Vu CLI
  • Titari
  • CSS

Eyi jẹ iṣẹ akanṣe nla gaan lati bẹrẹ pẹlu Vue tabi mu ilọsiwaju awọn ọgbọn rẹ ti o wa tẹlẹ lati wọle si idagbasoke ni 2020. o le wa tutorial nibi.

Ohun elo oju ojo lẹwa pẹlu Angular 8

Apeere yii yoo ṣe iranlọwọ fun ọ lati ṣẹda ohun elo oju ojo ẹlẹwa nipa lilo Angular 8:

Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

Kini iwọ yoo kọ
Ise agbese yii yoo kọ ọ ni awọn ọgbọn ti o niyelori ni kikọ awọn ohun elo lati ibere - lati apẹrẹ nipasẹ idagbasoke, gbogbo ọna lati lọ si ohun elo imurasilẹ-imuṣiṣẹ.

Tech akopọ ati awọn ẹya ara ẹrọ

  • Agbo 8
  • Firebase
  • Rendering ẹgbẹ olupin
  • CSS pẹlu Grid ati Flexbox
  • Mobile ore ati adaptability
  • Ipo okunkun
  • Lẹwa ni wiwo

Ohun ti Mo nifẹ gaan nipa iṣẹ akanṣe gbogbo rẹ ni pe o ko ka awọn nkan ni ipinya. Dipo, o kọ gbogbo ilana idagbasoke, lati apẹrẹ si imuṣiṣẹ ikẹhin.

Lati-Ṣe ohun elo lilo Svelte

Svelte dabi ọmọ tuntun lori ọna ti o da lori paati - o kere ju iru si React, Vue ati Angular. Ati pe eyi jẹ ọkan ninu awọn ọja tuntun ti o gbona julọ fun 2020.

Awọn ohun elo Lati-ṣe kii ṣe dandan koko-ọrọ ti o gbona julọ, ṣugbọn yoo ṣe iranlọwọ gaan fun ọ lati mu awọn ọgbọn Svelte rẹ ṣiṣẹ gaan. Yoo dabi eyi:

Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

Kini iwọ yoo kọ
Ikẹkọ yii yoo fihan ọ bi o ṣe le ṣẹda ohun elo kan nipa lilo Svelte 3, lati ibẹrẹ lati pari. Iwọ yoo lo awọn paati, iselona, ​​ati awọn oluṣakoso iṣẹlẹ

Tech akopọ ati awọn ẹya ara ẹrọ

  • Svelte 3
  • Awọn ohun elo
  • Iselona pẹlu CSS
  • ES 6 sintasi

Nibẹ ni o wa ko ọpọlọpọ awọn ti o dara Svelte Starter ise agbese, ki ni mo ri eyi jẹ aṣayan ti o dara lati bẹrẹ pẹlu.

Ohun elo E-commerce nipa lilo Next.js

Next.js jẹ ilana ti o gbajumọ julọ fun kikọ awọn ohun elo React ti o ṣe atilẹyin jigbe ti ẹgbẹ olupin jade kuro ninu apoti.

Ise agbese yii yoo fihan ọ bi o ṣe le ṣẹda ohun elo e-commerce kan ti o dabi eyi:

Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

Kini iwọ yoo kọ
Ninu iṣẹ akanṣe yii, iwọ yoo kọ ẹkọ bii o ṣe le dagbasoke pẹlu Next.js — ṣẹda awọn oju-iwe tuntun ati awọn paati, jade data, ati ara ati mu ohun elo Next kan ṣiṣẹ.

Tech akopọ ati awọn ẹya ara ẹrọ

  • Nigbamii.js
  • Irinše ati Pages
  • Ayẹwo data
  • Iselona
  • Ifilọlẹ Project
  • SSR ati SPA

O jẹ ohun nla nigbagbogbo lati ni apẹẹrẹ gidi-aye bii ohun elo e-commerce lati kọ ẹkọ tuntun. O le ri Tutorial nibi.

Bulọọgi multilingual ni kikun-kikun pẹlu Nuxt.js

Nuxt.js jẹ fun Vue, kini Next.js jẹ fun React: ilana nla kan fun apapọ agbara ti ṣiṣe-ẹgbẹ olupin ati awọn ohun elo oju-iwe kan
Ohun elo ikẹhin ti o le ṣẹda yoo dabi eyi:

Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

Kini iwọ yoo kọ

Ninu iṣẹ akanṣe apẹẹrẹ yii, iwọ yoo kọ bii o ṣe le ṣẹda oju opo wẹẹbu pipe nipa lilo Nuxt.js, lati iṣeto akọkọ si imuṣiṣẹ ikẹhin.

O gba anfani ti ọpọlọpọ awọn ẹya itura ti Nuxt ni lati funni, gẹgẹbi awọn oju-iwe ati awọn paati, ati iselona pẹlu SCSS.

Tech akopọ ati awọn ẹya ara ẹrọ

  • Nuxt.js
  • Irinše ati Pages
  • Storyblock module
  • Hagfish
  • Vuex fun ipinle isakoso
  • SCSS fun iselona
  • Nuxt middlewares

Eleyi jẹ kan gan itura ise agbese, ti o ba pẹlu ọpọlọpọ awọn nla Nuxt.js awọn ẹya ara ẹrọ. Mo nifẹ tikalararẹ ṣiṣẹ pẹlu Nuxt nitorinaa o yẹ ki o gbiyanju bi yoo tun jẹ ki o jẹ olupilẹṣẹ Vue nla kan.

Buloogi pẹlu Gatsby

Gatsby jẹ olupilẹṣẹ aaye aimi ti o tayọ ni lilo React ati GraphQL. Eyi ni abajade ise agbese na:

Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

Kini iwọ yoo kọ

Ninu ikẹkọ yii, iwọ yoo kọ bii o ṣe le lo Gatsby lati ṣẹda bulọọgi kan ti iwọ yoo lo lati kọ awọn nkan tirẹ nipa lilo React ati GraphQL.

Tech akopọ ati awọn ẹya ara ẹrọ

  • Gatsby
  • Idahun
  • Àwòrán QL
  • Awọn afikun ati awọn akori
  • MDX / Isamisi
  • Bootstrap CSS
  • Awọn awoṣe

Ti o ba ti fẹ lati bẹrẹ bulọọgi kan, apẹẹrẹ nla ni eyi lori bi o ṣe le ṣe ni lilo React ati GraphQL.

Emi ko sọ pe Wodupiresi jẹ yiyan buburu, ṣugbọn pẹlu Gatsby o le kọ awọn oju opo wẹẹbu iṣẹ ṣiṣe giga ni lilo React - eyiti o jẹ akojọpọ iyalẹnu.

Bulọọgi pẹlu Gridsome

Gridsome fun Vue... O dara, a ti ni eyi tẹlẹ pẹlu Next/Nuxt.
Ṣugbọn kanna jẹ otitọ fun Gridsome ati Gatsby. Mejeeji lo GraphQL bi ipele data wọn, ṣugbọn Gridsome nlo VueJS. Eyi tun jẹ olupilẹṣẹ aaye aimi iyalẹnu ti yoo ṣe iranlọwọ fun ọ lati ṣẹda awọn bulọọgi nla:

Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

Kini iwọ yoo kọ

Ise agbese yii yoo kọ ọ bi o ṣe le ṣẹda bulọọgi ti o rọrun lati bẹrẹ pẹlu Gridsome, GraphQL ati Markdown. O tun ni wiwa bi o ṣe le fi ohun elo ranṣẹ nipasẹ Netlify.

Tech akopọ ati awọn ẹya ara ẹrọ

  • Gridsome
  • Wo
  • Àwòrán QL
  • Samisi
  • Netlify

Eleyi jẹ esan ko awọn julọ okeerẹ Tutorial, sugbon o ni wiwa awọn ipilẹ agbekale ti Gridsome ati Markdown le jẹ ibẹrẹ ti o dara.

Ẹrọ ohun afetigbọ bi SoundCloud nipa lilo Quasar

Quasar jẹ ilana Vue miiran ti o le ṣee lo lati ṣẹda awọn ohun elo alagbeka. Ninu iṣẹ akanṣe yii iwọ yoo ṣẹda ohun elo ẹrọ orin, fun apẹẹrẹ:

Awọn iṣẹ akanṣe 9 diẹ sii lati mu awọn ọgbọn Iwaju-Ipari rẹ ṣiṣẹ

Kini iwọ yoo kọ

Lakoko ti awọn iṣẹ akanṣe miiran fojusi awọn ohun elo wẹẹbu, eyi yoo fihan ọ bi o ṣe le ṣẹda ohun elo alagbeka kan nipa lilo Vue ati ilana Quasar.
O yẹ ki o ti ni Cordova ti nṣiṣẹ pẹlu Android Studio/Xcode tunto. Ti kii ba ṣe bẹ, itọnisọna naa ni ọna asopọ si oju opo wẹẹbu Quasar nibiti wọn ti fihan ọ bi o ṣe le ṣeto ohun gbogbo.

Tech akopọ ati awọn ẹya ara ẹrọ

  • quasar
  • Wo
  • Cordova
  • WaveSurfer
  • UI irinše

Kekere ise agbese, ṣe afihan awọn agbara Quasar fun ṣiṣẹda awọn ohun elo alagbeka.

orisun: www.habr.com

Fi ọrọìwòye kun