9 plis pwojè pou amelyore konpetans Front-End ou

Entwodiksyon

Kit ou se nouvo nan pwogramasyon oswa yon pwomotè expérimentés, aprann nouvo konsèp ak lang / kad se yon dwe nan endistri sa a pou kenbe ak tandans.

Pran React, pou egzanp, ki Facebook louvri-sous jis kat ane de sa e li te deja vin chwa nimewo en pou devlopè JavaScript atravè mond lan.

Vue ak Angular, nan kou, tou gen pwòp baz fanatik lejitim yo. Lè sa a, gen Svelte ak lòt kad inivèsèl tankou Next.js oswa Nuxt.js. Ak Gatsby, ak Gridsome, ak Quasar... ak plis ankò.

Si ou vle pwouve tèt ou kòm yon pwomotè JavaScript ki gen eksperyans, ou ta dwe gen omwen kèk eksperyans ak divès kad ak bibliyotèk - anplis fè travay ak bon ansyen JS.

Pou ede w vin yon mèt front-end nan 2020, mwen te mete ansanm nèf pwojè diferan, chak konsantre sou yon kad JavaScript diferan ak bibliyotèk kòm yon pil teknoloji ou ka bati ak ajoute nan pòtfolyo ou. Sonje ke pa gen anyen ki ede w plis pase aktyèlman kreye bagay sa yo, kidonk avanse, sèvi ak lide ou epi fè li rive

Atik la te tradui ak sipò EDISON Software, ki fè chanm vityèl ekipman pou magazen milti-makAk tès lojisyèl.

Aplikasyon rechèch fim lè l sèvi avèk React (ak zen)

Premye bagay ou ta ka kòmanse avèk yo se kreye yon aplikasyon rechèch fim lè l sèvi avèk React. Anba la a se yon imaj sou kisa aplikasyon final la pral sanble:

Kisa ou pral aprann
Lè w konstwi aplikasyon sa a, w ap amelyore konpetans React ou lè w itilize API Hooks ki relativman nouvo. Pwojè egzanp lan sèvi ak eleman React, anpil kwòk, yon API ekstèn, ak nan kou kèk manier CSS.

Pile teknoloji ak karakteristik

• Reyaji ak kwòk
• kreye-reyaji-app
• JSX
• CSS

San yo pa itilize okenn klas, pwojè sa yo ba ou pwen antre pafè nan React fonksyonèl epi yo pral definitivman ede ou nan 2020. ou ka jwenn egzanp pwojè isit la. Swiv enstriksyon yo oswa fè li pwòp ou a.

Chat App ak Vue

Yon lòt gwo pwojè pou ou fè se kreye yon app chat lè l sèvi avèk bibliyotèk JavaScript pi renmen mwen an: VueJS. Aplikasyon an pral gade yon bagay tankou sa a:

Kisa ou pral aprann
Nan leson patikilye sa a, ou pral aprann kijan pou fè yon app Vue nan grafouyen - kreye eleman, manyen eta, kreye wout, konekte ak sèvis twazyèm pati, e menm manyen otantifikasyon.

Pile teknoloji ak karakteristik

• Vue
• vuex
• Vue Routeur
• Vue CLI
• Pusher
• CSS

Sa a se yon pwojè vrèman gwo pou kòmanse ak Vue oswa amelyore konpetans ou ki egziste deja pou antre nan devlopman nan 2020. ou ka jwenn leson patikilye isit la.

Bèl aplikasyon move tan ak Angular 8

Egzanp sa a pral ede w kreye yon bèl aplikasyon metewolojik lè l sèvi avèk Angular 8:

Kisa ou pral aprann
Pwojè sa a pral anseye ou ladrès ki gen anpil valè nan bati aplikasyon depi nan grafouyen - soti nan konsepsyon jiska devlopman, jouk rive nan yon aplikasyon ki pare pou deplwaman.

Pile teknoloji ak karakteristik

• Angilè 8
• Firebase
• Rann bò sèvè
• CSS ak Grid ak Flexbox
• Mobil zanmitay ak adaptabilite
• Mòd nwa
• Bèl koòdone

Ki sa mwen vrèman renmen nan pwojè sa a tout antye se ke ou pa etidye bagay sa yo nan izolasyon. Olye de sa, ou aprann tout pwosesis devlopman an, depi nan konsepsyon rive nan deplwaman final la.

Aplikasyon pou fè lè l sèvi avèk Svelte

Svelte se tankou nouvo jenn ti kabrit la sou apwòch la ki baze sou eleman - omwen menm jan ak React, Vue ak Angular. Ak sa a se youn nan pi cho nouvo pwodwi yo pou 2020.

Aplikasyon pou fè yo pa nesesèman sijè ki pi cho a, men li pral reyèlman ede ou amelyore konpetans Svelte ou. Li pral sanble tankou sa a:

Kisa ou pral aprann
Tutorial sa a pral montre w kouman pou kreye yon aplikasyon lè l sèvi avèk Svelte 3, depi nan kòmansman rive nan fini. Ou pral sèvi ak konpozan, manier, ak moun kap okipe evènman yo

Pile teknoloji ak karakteristik

• Svelte 3
• Eleman
• Styling ak CSS
• ES 6 sentaks

Pa gen anpil bon pwojè starter Svelte, se konsa mwen te jwenn sa a se yon bon opsyon pou kòmanse.

E-commerce aplikasyon lè l sèvi avèk Next.js

Next.js se fondasyon ki pi popilè pou bati aplikasyon React ki sipòte rann bò sèvè soti nan bwat la.

Pwojè sa a pral montre w kijan pou kreye yon aplikasyon e-commerce ki sanble sa a:

Kisa ou pral aprann
Nan pwojè sa a, ou pral aprann kijan pou devlope ak Next.js—kreye nouvo paj ak konpozan, ekstrè done, ak style epi deplwaye yon aplikasyon Next.

Pile teknoloji ak karakteristik

• Next.js
• Eleman ak paj
• Done echantiyonaj
• Stilizasyon
• Deplwaman Pwojè
• SSR ak SPA

Li toujou bon pou gen yon egzanp nan mond reyèl la tankou yon app e-commerce pou aprann yon bagay nouvo. Ou kapab jwenn leson patikilye a isit la.

Blòg ki gen plizyè lang ak Nuxt.js

Nuxt.js se pou Vue, sa Next.js se pou React: yon gwo fondasyon pou konbine pouvwa rann bò sèvè ak aplikasyon pou yon sèl paj.
Aplikasyon final ou ka kreye pral sanble sa a:

Kisa ou pral aprann

Nan echantiyon pwojè sa a, ou pral aprann kijan pou kreye yon sit entènèt konplè lè l sèvi avèk Nuxt.js, soti nan premye konfigirasyon rive nan deplwaman final la.

Li pran avantaj de anpil nan karakteristik yo fre ke Nuxt te ofri, tankou paj ak konpozan, ak manier ak SCSS.

Pile teknoloji ak karakteristik

• Nuxt.js
• Eleman ak paj
• Storyblock modil
• Hagfish
• Vuex pou jesyon leta
• SCSS pou manier
• Nuxt middlewares

Sa a se yon pwojè vrèman fre, ki gen ladann anpil gwo karakteristik Nuxt.js. Mwen pèsonèlman renmen travay ak Nuxt kidonk ou ta dwe eseye li paske li pral fè ou tou yon gwo devlopè Vue.

Blog ak Gatsby

Gatsby se yon dèlko sit estatik ekselan lè l sèvi avèk React ak GraphQL. Sa a se rezilta pwojè a:

Kisa ou pral aprann

Nan leson patikilye sa a, ou pral aprann kijan pou itilize Gatsby pou kreye yon blog ou pral itilize pou ekri atik pwòp ou yo lè l sèvi avèk React ak GraphQL.

Pile teknoloji ak karakteristik

• gatsby
• Reyaji
• GraphQL
• Plugins ak tèm
• MDX/Markdown
• Bootstrap CSS
• Modèl

Si ou te janm vle kòmanse yon blog, sa a se yon gwo egzanp sou kijan pou fè li lè l sèvi avèk React ak GraphQL.

Mwen pa di WordPress se yon move chwa, men ak Gatsby ou ka bati sit entènèt wo-pèfòmans lè l sèvi avèk React - ki se yon konbinezon etonan.

Blog ak Gridsome

Gridsome pou Vue... Oke, nou te deja gen sa ak Next/Nuxt.
Men, menm bagay la tou pou Gridsome ak Gatsby. Tou de itilize GraphQL kòm kouch done yo, men Gridsome itilize VueJS. Sa a se tou yon dèlko sit estatik etonan ki pral ede w kreye gwo blogs:

Kisa ou pral aprann

Pwojè sa a pral moutre w ki jan yo kreye yon blog senp pou kòmanse ak Gridsome, GraphQL ak Markdown. Li kouvri tou kijan pou deplwaye yon aplikasyon atravè Netlify.

Pile teknoloji ak karakteristik

• Gridsome
• Vue
• GraphQL
• rediksyon
• Netlify

Sa a se sètènman pa leson patikilye ki pi konplè, men li kouvri konsèp debaz yo nan Gridsome ak Markdown ka yon bon pwen depa.

SoundCloud-tankou jwè odyo lè l sèvi avèk Quasar

Quasar se yon lòt kad Vue ki ka itilize pou kreye aplikasyon mobil. Nan pwojè sa a ou pral kreye yon aplikasyon jwè odyo, pou egzanp:

Kisa ou pral aprann

Pandan ke lòt pwojè konsantre sitou sou aplikasyon entènèt, yon sèl sa a pral montre w kouman yo kreye yon aplikasyon mobil lè l sèvi avèk Vue ak kad Quasar la.
Ou ta dwe deja gen Cordova kouri ak Android Studio/Xcode configuré. Si ou pa, manyèl la gen yon lyen ki mennen nan sit entènèt Quasar la kote yo montre w kouman yo mete tout bagay.

Pile teknoloji ak karakteristik

• Kwazar
• Vue
• Cordova
• wavesurfer
• Konpozan UI

Ti pwojè, demontre kapasite Quasar pou kreye aplikasyon mobil.

Sous: www.habr.com