គម្រោង 9 បន្ថែមទៀតដើម្បីពង្រឹងជំនាញ Front-End របស់អ្នក។

សេចក្តីណែនាំ

មិនថាអ្នកថ្មីស្រឡាងក្នុងការសរសេរកម្មវិធី ឬអ្នកអភិវឌ្ឍន៍តាមរដូវកាលនោះទេ ការរៀនគោលគំនិតថ្មីៗ និងភាសា/ក្របខ័ណ្ឌ គឺជាកត្តាចាំបាច់ក្នុងឧស្សាហកម្មនេះ ដើម្បីរក្សានិន្នាការ។

ជាឧទាហរណ៍ សូមយក React ដែល Facebook បានបើកដំណើរការកាលពី XNUMX ឆ្នាំមុន ហើយបានក្លាយជាជម្រើសទី XNUMX សម្រាប់អ្នកអភិវឌ្ឍន៍ JavaScript ជុំវិញពិភពលោក។

ជាការពិតណាស់ Vue និង Angular ក៏មានអ្នកគាំទ្រស្របច្បាប់របស់ពួកគេផងដែរ។ ហើយបន្ទាប់មកមាន Svelte និងក្របខ័ណ្ឌសកលផ្សេងទៀតដូចជា Next.js ឬ Nuxt.js ។ និង Gatsby, និង Gridsome, និង Quasar ... និងច្រើនទៀត។

ប្រសិនបើអ្នកចង់បង្ហាញខ្លួនឯងថាជាអ្នកបង្កើត JavaScript ដែលមានបទពិសោធន៍ យ៉ាងហោចណាស់អ្នកគួរតែមានបទពិសោធន៍ខ្លះជាមួយក្របខ័ណ្ឌ និងបណ្ណាល័យផ្សេងៗ - បន្ថែមពីលើការធ្វើការងារជាមួយ JS ចាស់ល្អ។

ដើម្បីជួយអ្នកឱ្យក្លាយជាមេផ្នែកខាងមុខនៅឆ្នាំ 2020 ខ្ញុំបានប្រមូលផ្តុំគម្រោងចំនួន XNUMX ផ្សេងៗគ្នា ដែលនីមួយៗផ្តោតលើក្របខ័ណ្ឌ JavaScript និងបណ្ណាល័យផ្សេងៗគ្នាជាបណ្តុំបច្ចេកវិទ្យាដែលអ្នកអាចបង្កើត និងបន្ថែមទៅក្នុងផលប័ត្ររបស់អ្នក។ សូមចងចាំថា គ្មានអ្វីជួយអ្នកបានច្រើនជាងការបង្កើតរឿងនោះទេ ដូច្នេះចូរឆ្ពោះទៅមុខ ប្រើគំនិតរបស់អ្នក ហើយធ្វើវាឱ្យកើតឡើង

អត្ថបទនេះត្រូវបានបកប្រែដោយមានការគាំទ្រពីកម្មវិធី EDISON ដែល ធ្វើឱ្យបន្ទប់សមនិម្មិតសម្រាប់ហាងពហុម៉ាក, ក៏ដូចជា កម្មវិធីសាកល្បង.

កម្មវិធីស្វែងរកភាពយន្តដោយប្រើ React (ជាមួយទំពក់)

រឿងដំបូងដែលអ្នកអាចចាប់ផ្តើមជាមួយគឺបង្កើតកម្មវិធីស្វែងរកភាពយន្តដោយប្រើ React ។ ខាងក្រោម​នេះ​ជា​រូបភាព​នៃ​កម្មវិធី​ចុងក្រោយ​នឹង​មើលទៅ​ដូច​ជា៖

តើអ្នកនឹងរៀនអ្វីខ្លះ
តាមរយៈការបង្កើតកម្មវិធីនេះ អ្នកនឹងធ្វើឱ្យប្រសើរឡើងនូវជំនាញ React របស់អ្នកដោយប្រើ Hooks API ថ្មី។ គម្រោងឧទាហរណ៍នេះប្រើសមាសធាតុប្រតិកម្ម ទំពក់ជាច្រើន API ខាងក្រៅ ហើយពិតណាស់រចនាប័ទ្ម CSS មួយចំនួន។

ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស

• ប្រតិកម្មជាមួយទំពក់
• បង្កើត - ប្រតិកម្ម - កម្មវិធី
• JSX
• ជា CSS

ដោយមិនប្រើថ្នាក់ណាមួយ គម្រោងទាំងនេះផ្តល់ឱ្យអ្នកនូវចំណុចចូលដ៏ល្អឥតខ្ចោះទៅក្នុងមុខងារ React ហើយពិតជានឹងជួយអ្នកនៅឆ្នាំ 2020។ អ្នក​អាច​រក​ឃើញ គម្រោងឧទាហរណ៍នៅទីនេះ. ធ្វើតាមការណែនាំ ឬធ្វើវាដោយខ្លួនឯង។

កម្មវិធីជជែកជាមួយ Vue

គម្រោងដ៏អស្ចារ្យមួយទៀតដែលអ្នកត្រូវធ្វើគឺបង្កើតកម្មវិធីជជែកដោយប្រើបណ្ណាល័យ JavaScript ដែលខ្ញុំចូលចិត្ត៖ VueJS។ កម្មវិធីនឹងមើលទៅដូចនេះ៖

តើអ្នកនឹងរៀនអ្វីខ្លះ
នៅក្នុងមេរៀននេះ អ្នកនឹងរៀនពីរបៀបបង្កើតកម្មវិធី Vue ពីដំបូង - ការបង្កើតសមាសធាតុ ការគ្រប់គ្រងស្ថានភាព បង្កើតផ្លូវ ភ្ជាប់ទៅសេវាកម្មភាគីទីបី និងសូម្បីតែការគ្រប់គ្រងការផ្ទៀងផ្ទាត់។

ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស

• មើល
• វុច
• រ៉ោតទ័រ Vue
• វៃក្លី
• អ្នករុញ
• ជា CSS

នេះគឺជាគម្រោងដ៏អស្ចារ្យមួយដើម្បីចាប់ផ្តើមជាមួយ Vue ឬកែលម្អជំនាញដែលមានស្រាប់របស់អ្នក ដើម្បីឈានទៅរកការអភិវឌ្ឍន៍នៅឆ្នាំ 2020។ អ្នក​អាច​រក​ឃើញ ការបង្រៀននៅទីនេះ.

កម្មវិធីអាកាសធាតុដ៏ស្រស់ស្អាតជាមួយ Angular 8

ឧទាហរណ៍នេះនឹងជួយអ្នកបង្កើតកម្មវិធីអាកាសធាតុដ៏ស្រស់ស្អាតដោយប្រើ Angular 8៖

តើអ្នកនឹងរៀនអ្វីខ្លះ
គម្រោងនេះនឹងបង្រៀនអ្នកនូវជំនាញដ៏មានតម្លៃក្នុងការបង្កើតកម្មវិធីតាំងពីដំបូង - ពីការរចនារហូតដល់ការអភិវឌ្ឍន៍ គ្រប់មធ្យោបាយរហូតដល់កម្មវិធីដែលត្រៀមរួចជាស្រេច។

ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស

• មុំ ២
• Firebase
• ការបង្ហាញផ្នែកខាងម៉ាស៊ីនមេ
• CSS ជាមួយ Grid និង Flexbox
• ងាយស្រួលចល័ត និងអាចបត់បែនបាន។
• របៀបងងឹត
• ចំណុចប្រទាក់ដ៏ស្រស់ស្អាត

អ្វី​ដែល​ខ្ញុំ​ពិត​ជា​ស្រឡាញ់​ចំពោះ​គម្រោង​គ្រប់​ជ្រុងជ្រោយ​នេះ​គឺ​ថា​អ្នក​មិន​សិក្សា​អ្វី​ៗ​ដោយ​ឯកោ។ ផ្ទុយទៅវិញ អ្នករៀនពីដំណើរការអភិវឌ្ឍន៍ទាំងមូល ចាប់ពីការរចនារហូតដល់ការដាក់ពង្រាយចុងក្រោយ។

កម្មវិធីត្រូវធ្វើដោយប្រើ Svelte

Svelte គឺដូចជាក្មេងថ្មីនៅលើវិធីសាស្រ្តផ្អែកលើសមាសធាតុ - យ៉ាងហោចណាស់ស្រដៀងទៅនឹង React, Vue និង Angular ។ ហើយនេះគឺជាផលិតផលថ្មីដ៏ពេញនិយមបំផុតមួយសម្រាប់ឆ្នាំ 2020។

កម្មវិធីដែលត្រូវធ្វើគឺមិនចាំបាច់ជាប្រធានបទក្តៅបំផុតនោះទេ ប៉ុន្តែវានឹងជួយអ្នកឱ្យពង្រឹងជំនាញ Svelte របស់អ្នក។ វានឹងមើលទៅដូចនេះ៖

តើអ្នកនឹងរៀនអ្វីខ្លះ
ការបង្រៀននេះនឹងបង្ហាញអ្នកពីរបៀបបង្កើតកម្មវិធីដោយប្រើ Svelte 3 ពីដើមដល់ចប់។ អ្នកនឹងប្រើសមាសធាតុ រចនាប័ទ្ម និងឧបករណ៍ដោះស្រាយព្រឹត្តិការណ៍

ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស

• ស្វេលតេ ៣
• សមាសភាគ
• រចនាប័ទ្មជាមួយ CSS
• វាក្យសម្ព័ន្ធ ES 6

មិនមានគម្រោងចាប់ផ្តើម Svelte ល្អច្រើនទេ ដូច្នេះខ្ញុំបានរកឃើញ នេះគឺជាជម្រើសដ៏ល្អមួយដើម្បីចាប់ផ្តើមជាមួយ.

កម្មវិធី E-commerce ដោយប្រើ Next.js

Next.js គឺជាក្របខ័ណ្ឌដ៏ពេញនិយមបំផុតសម្រាប់បង្កើតកម្មវិធី React ដែលគាំទ្រការបង្ហាញផ្នែកខាងម៉ាស៊ីនមេចេញពីប្រអប់។

គម្រោងនេះនឹងបង្ហាញអ្នកពីរបៀបបង្កើតកម្មវិធី e-commerce ដែលមើលទៅដូចនេះ៖

តើអ្នកនឹងរៀនអ្វីខ្លះ
នៅក្នុងគម្រោងនេះ អ្នកនឹងរៀនពីរបៀបអភិវឌ្ឍជាមួយ Next.js—បង្កើតទំព័រ និងសមាសធាតុថ្មី ស្រង់ទិន្នន័យ និងរចនាប័ទ្ម ហើយដាក់ឱ្យប្រើប្រាស់កម្មវិធីបន្ទាប់។

ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស

• Next.js ។
• សមាសភាគ និងទំព័រ
• គំរូទិន្នន័យ
• ការធ្វើឱ្យមានស្ថេរភាព
• ការដាក់ពង្រាយគម្រោង
• SSR និង SPA

វាតែងតែល្អណាស់ក្នុងការមានឧទាហរណ៍ជាក់ស្តែងដូចជាកម្មវិធី e-commerce ដើម្បីរៀនអ្វីថ្មី។ អ្នក​អាច ស្វែងរកការបង្រៀននៅទីនេះ.

ប្លុកពហុភាសាពេញលេញជាមួយ Nuxt.js

Nuxt.js គឺសម្រាប់ Vue អ្វីដែល Next.js គឺសម្រាប់ React៖ ក្របខ័ណ្ឌដ៏ល្អសម្រាប់ការរួមបញ្ចូលគ្នានូវថាមពលនៃការបង្ហាញផ្នែកខាងម៉ាស៊ីនមេ និងកម្មវិធីទំព័រតែមួយ
កម្មវិធីចុងក្រោយដែលអ្នកអាចបង្កើតនឹងមើលទៅដូចនេះ៖

តើអ្នកនឹងរៀនអ្វីខ្លះ

នៅក្នុងគម្រោងគំរូនេះ អ្នកនឹងរៀនពីរបៀបបង្កើតគេហទំព័រពេញលេញដោយប្រើ Nuxt.js ចាប់ពីការដំឡើងដំបូងរហូតដល់ការដាក់ឱ្យប្រើប្រាស់ចុងក្រោយ។

វាទាញយកអត្ថប្រយោជន៍ពីលក្ខណៈពិសេសល្អៗជាច្រើនដែល Nuxt មានផ្តល់ជូន ដូចជាទំព័រ និងសមាសធាតុ និងការកំណត់រចនាប័ទ្មជាមួយ SCSS ។

ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស

• Nuxt.js
• សមាសភាគ និងទំព័រ
• ម៉ូឌុល Storyblock
• ត្រីឆ្លាម
• Vuex សម្រាប់ការគ្រប់គ្រងរដ្ឋ
• SCSS សម្រាប់រចនាប័ទ្ម
• ឧបករណ៍កណ្តាលបន្ទាប់

នេះ​គឺ​ជា​គម្រោង​ដ៏​អស្ចារ្យ​មួយ​ដែលរួមបញ្ចូលលក្ខណៈពិសេស Nuxt.js ដ៏អស្ចារ្យជាច្រើន។ ខ្ញុំផ្ទាល់ចូលចិត្តធ្វើការជាមួយ Nuxt ដូច្នេះអ្នកគួរតែសាកល្បងវាព្រោះវានឹងធ្វើឱ្យអ្នកក្លាយជាអ្នកអភិវឌ្ឍន៍ Vue ដ៏អស្ចារ្យផងដែរ។

ប្លុកជាមួយ Gatsby

Gatsby គឺជាម៉ាស៊ីនបង្កើតគេហទំព័រឋិតិវន្តដ៏ល្អមួយដោយប្រើ React និង GraphQL ។ នេះជាលទ្ធផលនៃគម្រោង៖

តើអ្នកនឹងរៀនអ្វីខ្លះ

នៅក្នុងមេរៀននេះ អ្នកនឹងរៀនពីរបៀបប្រើ Gatsby ដើម្បីបង្កើតប្លក់ដែលអ្នកនឹងប្រើដើម្បីសរសេរអត្ថបទរបស់អ្នកដោយប្រើ React និង GraphQL។

ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស

• ហ្គេតប៊ី
• ប្រតិកម្ម
• ក្រាហ្វិច។
• កម្មវិធីជំនួយ និងស្បែក
• MDX/Markdown
• Bootstrap CSS
• ពុម្ព

ប្រសិនបើអ្នកធ្លាប់ចង់ចាប់ផ្តើមប្លុក, នេះគឺជាឧទាហរណ៍ដ៏អស្ចារ្យមួយ។ អំពីរបៀបបង្កើតវាដោយប្រើ React និង GraphQL។

ខ្ញុំមិននិយាយថា WordPress គឺជាជម្រើសមិនល្អទេ ប៉ុន្តែជាមួយ Gatsby អ្នកអាចបង្កើតគេហទំព័រដែលមានប្រសិទ្ធភាពខ្ពស់ដោយប្រើ React - ដែលជាការរួមបញ្ចូលគ្នាដ៏អស្ចារ្យ។

ប្លុកជាមួយ Gridsome

Gridsome សម្រាប់ Vue... អូខេ យើងមានវារួចហើយជាមួយ Next/Nuxt។
ប៉ុន្តែសម្រាប់ Gridsome និង Gatsby ក៏ដូចគ្នាដែរ។ ទាំងពីរប្រើ GraphQL ជាស្រទាប់ទិន្នន័យរបស់ពួកគេ ប៉ុន្តែ Gridsome ប្រើ VueJS ។ នេះក៏ជាកម្មវិធីបង្កើតគេហទំព័រឋិតិវន្តដ៏អស្ចារ្យ ដែលនឹងជួយអ្នកបង្កើតប្លុកដ៏អស្ចារ្យ៖

តើអ្នកនឹងរៀនអ្វីខ្លះ

គម្រោងនេះនឹងបង្រៀនអ្នកពីរបៀបបង្កើតប្លក់សាមញ្ញ ដើម្បីចាប់ផ្តើមជាមួយ Gridsome, GraphQL និង Markdown ។ វាក៏គ្របដណ្តប់ផងដែរអំពីរបៀបដាក់ឱ្យប្រើប្រាស់កម្មវិធីតាមរយៈ Netlify ។

ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស

• ក្រឡាចត្រង្គ
• មើល
• ក្រាហ្វិច។
• Markdown
• Netlify

នេះមិនមែនជាការបង្រៀនដ៏ទូលំទូលាយបំផុតនោះទេ ប៉ុន្តែវាគ្របដណ្តប់គោលគំនិតជាមូលដ្ឋាននៃ Gridsome និង Markdown អាចជាចំណុចចាប់ផ្តើមដ៏ល្អ.

កម្មវិធីចាក់សំឡេងដូច SoundCloud ដោយប្រើ Quasar

Quasar គឺជាក្របខ័ណ្ឌ Vue មួយផ្សេងទៀតដែលអាចត្រូវបានប្រើដើម្បីបង្កើតកម្មវិធីទូរស័ព្ទ។ នៅក្នុងគម្រោងនេះ អ្នកនឹងបង្កើតកម្មវិធីចាក់អូឌីយ៉ូ ឧទាហរណ៍៖

តើអ្នកនឹងរៀនអ្វីខ្លះ

ខណៈពេលដែលគម្រោងផ្សេងទៀតផ្តោតជាសំខាន់លើកម្មវិធីបណ្តាញ គម្រោងនេះនឹងបង្ហាញអ្នកពីរបៀបបង្កើតកម្មវិធីទូរស័ព្ទដោយប្រើ Vue និង Quasar framework ។
អ្នកគួរតែមាន Cordova ដំណើរការជាមួយ Android Studio/Xcode ដែលបានកំណត់រចនាសម្ព័ន្ធរួចហើយ។ បើមិនដូច្នោះទេ សៀវភៅដៃមានតំណភ្ជាប់ទៅកាន់គេហទំព័រ Quasar ដែលពួកគេបង្ហាញអ្នកពីរបៀបរៀបចំអ្វីៗគ្រប់យ៉ាង។

ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស

• quasar
• មើល
• Cordova
• WaveSurfer
• សមាសធាតុ UI

គម្រោងតូចដោយបង្ហាញពីសមត្ថភាពរបស់ Quasar សម្រាប់ការបង្កើតកម្មវិធីទូរស័ព្ទ។

ប្រភព: www.habr.com