Вэб хөгжүүлэлтийн салбар нь хүмүүсийн хэрэглээний талаарх ойлголт, хэрэглээний программууд, вэбсайтууд, бараа бүтээгдэхүүн болон бусад олон зүйлийг өдөр бүр өөрчилж байна.
Хэрэглэгчийн гайхалтай туршлагыг бий болгохын зэрэгцээ дараагийн үеийн вэб хөгжүүлэлтийн стандартуудаар корпорацийн хэрэгцээг хангадаг олон тооны шилдэг урд талын хүрээний ачаар.
Нөгөө талаас програм хангамжаа хөгжүүлэх хамгийн сайн хүрээг сонгох нь хэцүү ажил юм. Та зах зээлийн нарийн судалгаа хийж, давуу болон сул талуудыг ойлгох ёстой.
Гэхдээ бүү сандар; Бид танд тунгалаг зөвлөгөөгөөр цаг хугацаа, эрч хүчээ хэмнэхэд тань туслахаар ирлээ.
Энэхүү блог нь таныг дээд талын фронтын хүрээгээр удирдан чиглүүлэх бөгөөд таны дараагийн вэб хөгжүүлэлтийн төсөлд аль нь тохиромжтой болохыг шийдэхэд тань туслах болно.
Frontend framework гэж юу вэ?
Вэб хөгжүүлэгчдэд өөрсдийн ажлыг хөнгөвчлөхийн тулд урд талын хүрээ хэрэгтэй: эдгээр програм хангамжийн багцууд нь ихэвчлэн урьдчилан бичсэн/дахин ашиглах боломжтой кодын модулиуд, стандартчилсан урд талын технологи, бэлэн интерфэйсийн блокуудыг агуулж байдаг нь хөгжүүлэгчид урт хугацааны вэб үүсгэхэд илүү хурдан бөгөөд хялбар болгодог. функц, объект бүрийг эхнээс нь кодлох шаардлагагүйгээр програмууд болон UI.
UI дизайны бүрэлдэхүүн хэсгүүд, урьдчилан тодорхойлсон фонтын тохиргоо, вэбсайтын стандарт барилгын блок (жишээ нь: хажуугийн самбар, товчлуур, навигацийн самбар гэх мэт) зэрэг зарим хөгжүүлэлтийн хэрэгслүүд урд талын хүрээнүүдэд багтсан болно. .).
Энэ нь таныг төсөл бүрийн дугуйг дахин зохион бүтээхээс аварна.
Хэрэглэгчийн гайхалтай интерфэйсийг бий болгох шилдэг Frameworks
Тиймээс, хамгийн алдартай урд талын хүрээ, тэдгээрийн давуу болон сул талууд, хүрээг хэзээ ашиглах болон эсрэгээр нь ертөнцийг илүү гүнзгий судалж үзье.
1. урвалд
React бол маш сайн мэдрэмжтэй вэб төслүүдийг хөгжүүлэхэд тусалдаг алдартай нээлттэй эхийн JavaScript номын сан юм. Үүний гол зорилго нь таны програм хангамжийн хурдыг нэмэгдүүлэх интерактив хэрэглэгчийн интерфэйс (UI) зохион бүтээх явдал юм.
Facebook-ийн боловсруулсан React framework богино хугацаанд олны танил болсон. Энэ нь ирж буй траффик ихтэй вэбсайтуудын динамик хэрэглэгчийн интерфэйсийг үүсгэх, удирдахад ашиглагддаг.
Энэ нь виртуал DOM ашигладаг бөгөөд энэ нь аливаа програмтай нэгтгэхийг хялбаршуулдаг. React-ийн дүрслэх логик нь бусад UI логиктой нягт холбоотой.
Frontend framework нь үйл явдлыг жигд зохицуулах, төлөвт шилжих, дэлгэцийн өгөгдлийг бэлтгэх боломжийг олгодог. Энэ нь тэмдэглэгээ болон логикийг тусдаа файлд хадгалах стандарт практикт үл хамаарах зүйл юм.
Давуу тал
- Бүрэлдэхүүн хэсгүүдийн зориулалтыг өөрчлөхөд цаг хэмнэнэ
- Өргөн хүрээний хэрэгслийг багтаасан нээлттэй эхийн номын сан
- Нэг талын өгөгдлийн хөдөлгөөн нь тогтвортой кодоор хангадаг.
- Virtual DOM нь хэрэглэгчийн туршлага болон хөгжүүлэгчийн хөдөлмөрийг хоёуланг нь сайжруулдаг.
- Дахин ашиглах боломжтой бүрэлдэхүүн хэсгүүд нь програм боловсруулах, засвар үйлчилгээ хийхэд хялбар болгодог.
- Энэ нь хүрээний шинэ хувилбаруудыг тогтмол сайжруулж, гаргадаг. Та алдааны засварууд болон импровизуудыг цаг тухайд нь авах болно.
Байг
- Сурах муруй нь нэлээд эгц юм.
- JSX-ийн нарийн төвөгтэй байдлыг хөгжүүлэгчид ойлгоход хэцүү байдаг.
- Хөгжлийн хурдацтай байгаа учраас бичиг баримт дутмаг байна.
- Төсөл өргөжин тэлэх тусам та "урсгал ба өгөгдлийн бүрэлдэхүүн хэсгүүдийг" алдаж магадгүй юм.
Та үүнийг хэзээ хэрэглэх ёстой вэ?
Урвал бол a програмчлалын хэл Энэ нь боловсронгуй хэрэглэгчийн интерфэйс, ялангуяа нэг хуудасны програмуудыг бий болгоход ашиглагддаг. Энэ нь дахин ашиглах боломжтой бүрэлдэхүүн хэсгүүдийг зөвшөөрдөг тул богино хугацаанд интерактив интерфэйс үүсгэх шаардлагатай үед энэ нь хамгийн бат бөх урд талын хүрээ юм.
Хэзээ хэрэглэхээс зайлсхийх вэ:
Хэрэв та JavaScript-ийн туршлагагүй бол React нь хамгийн сайн сонголт биш юм. Үүний нэгэн адил JSX сургалтын муруй нь шинэ хөгжүүлэгчдэд маш өндөр байдаг.
2. өнцгийн
Google 2010 онд Angular-ийг техникийн шинэчлэл болон уламжлалт ойлголтуудын хоорондын ялгааг арилгахын тулд хүчирхэг хэрэглэгчийн интерфэйсүүдийн нэг болгон зохион бүтээсэн. Энэ нь танд өргөтгөх боломжтой програмуудыг бүтээх боломжийг олгодог, сайн нэгдсэн номын сангууд бүхий бичгийн скрипт дээр суурилсан хөгжүүлэлтийн платформ бөгөөд энэ нь вэб UI-ийн гайхалтай хүрээ юм.
Энэ бол нээлттэй эхийн урд талын хүрээ Энэ нь JavaScript экосистемийн нэг хэсэг бөгөөд гайхалтай хэрэглэгчийн интерфэйсийг бий болгоход ашиглаж болно. React-ээс ялгаатай нь Angular-ийн хоёр талын өгөгдөл холбох онцлог нь онцгой юм.
Энэ нь харагдац болон загвар нь цаг хугацааны хувьд синхрончлогдсон гэдгийг харуулж байгаа бөгөөд энэ нь загварт гарсан аливаа өөрчлөлтийг дэлгэцэн дээр шууд харуулах ба эсрэгээр нь харуулж байна. Хэрэв таны төлөвлөгөө багтсан бол өнцөг нь маш сайн сонголт юм онлайн эсвэл гар утасны програм үүсгэх.
Давуу тал
- Өндөр үр ашигтай
- Том хэмжээтэй экосистем
- Материалын дизайны интерфейсийн үйлдвэрлэлийг Angular Material-ээр дахин зохион байгуулав.
- Angular sanctions-ийн бүрэлдэхүүн хэсэгт суурилсан арга нь нэг бүрэлдэхүүн хэсэгтэй хэрэглэгчийн интерфэйсийг бий болгодог.
- Энэ нь рефакторинг үйлчилгээ болон сайжруулсан навигацийн ачаар кодчилолд хялбар болгодог.
- Хамааралтай тарилга нь бүрэлдэхүүн хэсгүүдийг дахин ашиглах, туршиж үзэх, удирдах боломжтой болгодог.
Байг
- Angular бол дэлгэрэнгүй бөгөөд боловсронгуй хэл юм.
- Зарим хэрэглэгчид Angular-ийн давхаргат дизайныг ойлгоход бэрхшээлтэй байж болох бөгөөд энэ нь урд талын хүрээг дибаг хийхэд хүндрэл учруулж болзошгүй юм.
- Динамик програмууд болон нэг хуудасны програмууд (SPAs) нь тохиромжгүй байх болно.
- Хуучин системийг AngularJS-ээс Angular руу шилжүүлэхэд илүү их цаг зарцуулдаг.
- Өнцгийн вэб програмууд нь хамгийн бага SEO сонголттой тул хайлтын системийн мөлхөгчдийг олоход хэцүү болгодог.
Үүнийг хэзээ хэрэглэх вэ?
Хоёр талын өгөгдөл холбох аргыг ашигладаг тул Angular нь агуулгыг хурдан шинэчлэх замаар хөтөч дээр суурилсан програмуудын гүйцэтгэлийг сайжруулдаг. Angular бол аж ахуйн нэгжид чиглэсэн, идэвхтэй вэб төслийн хувьд сайн сонголт юм.
Хэзээ хэрэглэхээс зайлсхийх вэ?
Урд талын хүрээний хувьд Angular нь бүх зүйлийг хамарсан шийдэл юм. Хэрэв та хязгаарлагдмал хамрах хүрээтэй програм бүтээх шаардлагатай бол Angular-аас өгсөн нөөцийг ашиглах боломжгүй болно. Цөөн бүлэгтэй байхдаа энгийн синтакс, хүндрэл багатай жижиг хүрээг сонго.
3. Vue.js байна
Энэ нь нэг төрлийн вэб хэрэглэгчийн интерфэйсийн хүрээ юм Урвал ба өнцөг. Vue.js нь гар утас болон ширээний компьютерт зориулсан нэг хуудасны програм, дэвшилтэт вэб интерфэйсийг бий болгох хүрээ юм. Энэ нь 2019 онд хэрэглэгчийн туршлагыг сайжруулах хоёр дахь хамгийн алдартай фронтын хүрээ байв.
Энэ нь вэб болон мобайл программуудыг бүтээхээс эхлээд дэвшилтэт вэб программ хүртэл динамик болон үндсэн төслүүдийг хялбархан зохицуулж чадна. Vue болон React нь өөр өөр байдаг тул Vue нь JS хүрээ, харин React нь JS номын сан юм. Энэ нь том ажилд илүү тохиромжтой.
Vue нь нарийн төвөгтэй байдлыг арилгах, програмын хурдыг сайжруулах зорилгоор бүтээгдсэн хэдий ч энэ салбарын хүчирхэг хүмүүсийн анхаарлыг татаж чадаагүй юм. Angular ба VueJS-ийг харьцуулахдаа Vue нь Angular-ийн хурд болон ашиглах чадварыг нэмэгдүүлдэг.
Давуу тал
- Энэ нь нэгж тест хийхэд тохиромжтой бөгөөд унших, ойлгоход хялбар.
- Суралцагчид нарийн бичиг баримттай танилцах боломжтой.
- Энэ нь хүчирхэг хэрэгслийн систем, олон тооны шинэ боломжуудтай.
- Энэ нь хөтч дээрх хөгжүүлэлтийн хэрэгслүүдийн өргөтгөлүүдийг санал болгодог.
- Кодыг дахин ашиглах, нэгтгэхэд хялбар байдал
- Нарийвчилсан динамик програмууд болон жижиг, энгийн програмуудыг бий болгохыг дэмждэг.
- Энэ хүрээний синтакс нь харьцангуй энгийн тул ажиллахад хялбар болгодог.
Байг
- Vue.js нь алдаршаагүйн улмаас хязгаарлагдмал нийгэмлэгтэй. Үүний үр дүнд үе тэнгийнхнийхээ дэмжлэгийг олоход бэрхшээлтэй байж магадгүй юм.
- Өгөгдлийг уншиж байх үед заримдаа реактив систем нь алдаа гаргадаг.
- Томоохон санаачилгыг шийдвэрлэхэд шаардлагатай нөөц хомс байна.
- Vue.js-ийг чадварлаг хөгжүүлэгчид дутмаг, олон нийтийн дэмжлэг, бүрэлдэхүүн хэсгийн тогтвортой байдлын асуудлаас шалтгаалан том төслүүдэд ашиглахад аюултай.
Үүнийг хэзээ хэрэглэх вэ?
Энгийн бөгөөд олон талт байдлын үүднээс Vue.js нь өнөө үед хамгийн алдартай урд талын хүрээнүүдийн нэг юм. Энэ нь төслийг бүхэлд нь эхнээс нь төлөвлөх боломжийг олгодог бөгөөд томоохон төслүүдийг зохицуулах чадвартай. Өргөтгөх боломжтой, үр ашигтай дизайн шаарддаг дэвшилтэт вэб програмууд, динамик вэб програмууд болон том төслүүдэд тохиромжтой.
Хэзээ хэрэглэхээс зайлсхийх вэ?
Хэрэв та тусламжийн нийгэмлэг нь хүндрэлтэй асуудлуудад хариу өгөх боломжтой гэж үзвэл Vue.js нь явах зөв зам биш юм. Үүний нэгэн адил, байнгын бүрэлдэхүүн хэсгүүдийг шаарддаг програмууд нь Vue ашиглан үйлдвэрлэхэд тохиромжгүй, учир нь уг бүтэц нь эд ангиудын хатуулагтай холбоотой асуудал үүсгэдэг.
4. jQuery
Энэ бол вэбэд зориулсан хуучин фреймворк юм. Энэ нь анх 2006 онд танилцуулагдсан бөгөөд хамааралтай, хэрэглэхэд хялбар, энгийн байдлаараа өрсөлдөгчдөөсөө ялгардаг.
Хэдийгээр энэ салбарын жинхэнэ ахмад зүтгэлтэн хэдий ч үүнийг 2022 оны хамгийн шилдэг фронтын хүрээнүүдийн нэг гэж үзэж болно, учир нь цөөн хэдэн үл хамаарах зүйл нь өнөөгийн хөгжлийн нөхцөл байдалд бараг хэрэгжих боломжтой юм.
Ялангуяа jQuery нь JavaScript-г хөгжүүлэхэд зарцуулдаг цагийг багасгах, энгийн байдлыг хангахын зэрэгцээ олон жилийн туршлагаар хуримтлуулсан том, туршлагатай нийгэмлэгийнхээ хүчтэй дэмжлэгийг үзүүлэх зорилготой юм.
Энэ нь ялгаатай хөдөлгөөнт дүрс, асуулгын сонголт, API сонгох чадварыг санал болгодог. Энэ нь Cascading Style Sheets (CSS) болон JavaScript-ийн хэрэгцээг арилгадаг.
Давуу тал
- Хэрэгслийг ашиглахад хялбар, бүтэц нь ойлгоход хялбар байдаг.
- Илүү хурдан үр дүнг өгч, зардал багатай.
- Та үүнийг хялбархан татаж аваад судлах боломжтой.
- Энэ нь шилдэг UI хүрээнүүдийн нэг учраас платформ хоорондын нийцтэй.
- Энэ нь сүүлийн үеийн дэвшилтүүдийн үр дүнд хариу үйлдэл үзүүлэх вэб шийдэлд хамгийн тохиромжтой байж болох юм.
Байг
- Энэ бол хуучирсан платформ бөгөөд өнөө үед зах зээл дээр олон шинэ, илүү сайн хүрээнүүд байдаг.
- Энэ нь бага хурдтай ч динамик програмуудыг үүсгэх боломжийг олгодог.
- JQuery-ийн хөнгөн интерфэйс нь урт хугацаанд асуудал үүсгэж болзошгүй.
- CSS-тэй харьцуулахад jQuery илүү удаан байдаг.
Үүнийг хэзээ хэрэглэх вэ?
Энэхүү вэб хөгжүүлэлтийн хүрээ нь ширээний компьютерт зориулсан JavaScript программ үүсгэхэд хэрэглэгддэг. Энэхүү хүрээ нь кодыг цэвэр, ойлгомжтой байлгадаг. Энэ нь үйл явдлыг удирдах, хөдөлгөөнт дүрсийг гүйцэтгэхэд ашиглагддаг.
Хэзээ хэрэглэхээс зайлсхийх вэ?
Том хэмжээний программыг хөгжүүлэх явцад jQuery ашиглах боломжгүй, учир нь энэ нь таны төсөлд илүү олон JavaScript код нэмж, илүү хүнд болгодог. Энэ хүрээ нь дэвшилтэт JavaScript идэвхжүүлэлт, цөөн тооны кодын мөр, элементийг дахин ашиглах боломжоор орчин үеийн хүрээтэй өрсөлдөх чадваргүй юм.
5. Ember.js
Энэ нь нээлттэй эхийн JavaScript вэб UI хүрээ бөгөөд амбицтай хөгжүүлэгчдэд өргөжүүлэх боломжтой платформ хоорондын програмуудыг бий болгоход тусалдаг. Ember.js нь өргөн хүрээний онлайн болон гар утасны апп-ууд, мөн түүний үр ашигтай загвар нь үүссэн аливаа асуудлыг шийдвэрлэх болно.
Гэсэн хэдий ч Эмберийн жижиг дутагдалтай талуудын нэг нь сургалтын огцом муруй юм. Уламжлалт бөгөөд хатуу бүтэцтэй учраас энэ нь вэб UI хүрээг эзэмшихэд хамгийн хэцүү байдаг. Жишээлбэл, LinkedIn болон Apple үүнийг эзэмшихэд хамгийн хэцүү Framework-ийн нэг байсан ч үүнийг ашигладаг.
Энэ нь Model-View-ViewModel (MVVM) ба архитектурын загварт суурилсан нэг хуудастай вэб програм бүтээхэд зориулагдсан хүрээ юм.
Давуу тал
- Түүний багцын экосистем нь маш том бөгөөд сайн хөгжсөн.
- Энэ нь буцаад нийцтэй бөгөөд програмыг гэмтээхээс сэргийлдэг.
- Энэ нь хоёр талын өгөгдлийг холбох боломжийг олгодог.
- Таны бүх шаардлагыг хангахуйц сайн боловсруулсан, бүрэн ачаалагдсан багцын орчин.
- Богино хугацаанд та зөвхөн нэг командыг ашиглан бүрэн програмыг хялбархан үүсгэж болно.
Байг
- EmberJs маш өндөр сурах муруйтай.
- Энэ нь хязгаарлагдмал хэмжээний уян хатан байдал, тохиргоотой.
- Энэ нь удаан, таны төсөл зогсох магадлалтай.
- Энэ нь ойлгоход хэцүү бөгөөд жижиг хэмжээний хэрэглээнд хэтэрхий том юм.
- Энэ нь ээдрээтэй синтакстай тул үүн дээр ажиллахыг заримдаа уйтгартай болгодог.
Үүнийг хэзээ хэрэглэх вэ?
Ember.js нь LinkedIn гэх мэт хэрэглэгчийн мэдрэмжтэй орчин үеийн программ үүсгэх шаардлагатай бол ашиглах урд талын хүрээ юм. Энэ нь Ember.js-ийн маш сайн чиглүүлэлтийн ачаар илүү өргөн хүрээний програмуудыг ажиглах чадвар гэх мэт бүх механик функцуудтай ирдэг. Энэ нь шаардлагатай бол хуудсыг хангахын тулд хүчирхэг өгөгдөл холбох, тоноглогдсон тохиргоо, захиалгат шинж чанаруудаар хангадаг тул энэ хүрээ нь том төслийн бүхэл бүтэн нүүрэн талын шийдэл болж өгдөг.
Хэзээ хэрэглэхээс зайлсхийх вэ?
Ember.js нь ерөнхийдөө жижиг хөгжүүлэлтийн багт тохиромжгүй байдаг, учир нь энэ нь асуудлыг шийдвэрлэхэд бизнесийн логик, туршлага шаарддаг. Ember.js-ийн тусламжтайгаар анхны хөрөнгө оруулалт илүү их байж болно. Үүний нэгэн адил, уг хүрээ нь энгийн Ajax функцийг скрипт бичих эсвэл хэрэглэгчийн интерфейс үүсгэхэд тохиромжгүй байж магадгүй юм.
6. Нуруу.js
Энэ бол JavaScript-н хамгийн алдартай фреймворкуудын нэг юм. Үүнийг ойлгох, эзэмшихэд хялбар. Үүний тусламжтайгаар нэг хуудастай програмуудыг үүсгэж болно. Энэхүү хүрээг бий болгохын цаад санаа нь серверийн талын бүх ажлыг API-ээр дамжуулан чиглүүлэх ёстой бөгөөд энэ нь хөгжүүлэгчдэд илүү төвөгтэй функцийг хэрэгжүүлэхийн зэрэгцээ бага код бичих боломжийг олгоно.
Энэ нь таны JS кодыг зохион байгуулахдаа Model View Controller (MVC) дизайныг ашиглахад зориулагдсан хамгийн шилдэг фреймворкуудын нэг юм. Баримт бичгийн объектын загвар (DOM) нь цуглуулах, дахин зурах гайхалтай чадвартай. Үүний үр дүнд та Backbone.js-г арын болон урд хэсэгт ашиглахыг хүсч байгаа эсэхээс үл хамааран REST API-ийн нийцтэй байдал нь хоёуланг нь синхрончлох боломжийг олгодог тул энэ нь маш сайн шийдэл юм.
Давуу тал
- Энэ бол 100 гаруй өргөтгөлтэй, үнэгүй, нээлттэй эхийн номын сан юм.
- Ойлгох нь хамаагүй бага.
- Хүрээ нь танд гүйцэтгэлийг маш ихээр хянах боломжийг олгодог.
- Энэ нь бидэнд сайн бүтэцтэй, зохион байгуулалттай үйлчлүүлэгчийн вэб програмууд эсвэл гар утасны програмуудыг бүтээх боломжийг олгодог.
- Өгөгдөл хадгалахын тулд DOM гэхээсээ илүү загваруудыг ашиглаж болно.
Байг
- Хүрээ нь ашигтай бүтцийг өгдөггүй.
- Апп хөгжүүлэлтийг бий болгоход ашиглахад хялбар хэрэгслүүдийг хүргэж байна.
- Энэ хүрээ нь таныг илүү бүтээмжтэй байлгахыг зөвшөөрөхгүй.
- Зарим үндсэн хэрэгслийг нийлүүлснээр архитектур нь тодорхойгүй байна.
Үүнийг хэзээ хэрэглэх вэ?
Жишээлбэл, Trello нь динамик програм үүсгэхийн тулд Backbone.js-г ашигладаг. Энэ нь хөгжүүлэгчдэд үйлчлүүлэгч талын загвар үүсгэх, илүү хурдан өөрчлөлт хийх, кодыг дахин ашиглах боломжийг олгодог. Энэ нь одоо үйлчлүүлэгчийг маш сайн арчлах, шинэчлэлт хийх, сервертэй тогтмол синхрончлол хийх чадвартай болсон.
Хэзээ хэрэглэхээс зайлсхийх вэ?
Бусад MVC клиент талын хүрээтэй харьцуулахад Backbone.js нь вэб төсөл бүтээхэд тавигдах хамгийн бага багц шаардлагуудтай. Гэсэн хэдий ч өргөтгөл болон залгаасуудыг функцийг өргөтгөхөд ашиглаж болно. Үүний үр дүнд нэг хүрээн дэх бүрэн шийдлийг хайж буй багууд Backbone.js-ээс зайлсхийх хэрэгтэй.
7. Семаль UI
Энэ нь CSS-д суурилсан хэрэглэгчийн интерфэйсийн хөгжүүлэлтийн хүрээ бөгөөд GitHub дээрх хамгийн алдартай JavaScript төслүүдийн нэг болсон. Тус нийгэмлэг нь уг хүрээний 3000 гаруй сэдэв, 50 гаруй бүрэлдэхүүн хэсгийг амжилттай бүтээсэн.
Үүний үндсэн функц, хэрэгсэл, түүнчлэн хялбар хэрэглэгчийн интерфэйс нь үүнийг бусдаас ялгаж өгдөг. Энэ нь өдөр тутмын хэллэг ашиглан кодуудыг тайлбарлах боломжтой болгодог. Семантикийн зорилго нь хэрэглэгчийн интерфэйсийг солилцох хэлийг санал болгосноор дизайнерууд болон хөгжүүлэгчдийг чадваржуулах явдал юм. Энэ нь энгийн хэлийг ашигладаг бөгөөд кодыг өөрөө тайлбарлах боломжийг олгодог.
Экологийн нийгэмлэг энэ хүрээнд дассаар л байна. Гэсэн хэдий ч, энэ нь анхаарал татахуйц хэрэглэгчийн интерфэйс, энгийн үйлдлүүд, онцлог шинж чанаруудын улмаас зах зээл дээрх хамгийн алдартай урд талын хүрээний нэг болсон.
Давуу тал
- Семантик UI нь хэрэглэхэд хялбар бөгөөд ойлгомжтой.
- Хүлээн авах чадвар ба UI бүрэлдэхүүн хэсгүүд
- Хүрээ нь сонгох боломжтой олон тооны сэдэвтэй.
- Энэ нь бусад хүрээтэй адил төвөгтэй биш юм.
Байг
- Бүх хөдөлгөөнт төхөөрөмжийг дэмжихийн тулд хариу үйлдэл багассан.
- Энэ нь хөтөчийн нийцтэй байдал муутай.
- JavaScript-г шинээр ашиглаж байгаа хүмүүсийн хувьд энэ нь тохиромжгүй сонголт юм.
Үүнийг хэзээ хэрэглэх вэ?
Semantic-UI нь интерактив хэрэглэгчийн интерфэйсийг саадгүй үүсгэх боломжийг олгодог хөнгөн аргачлал юм.
Хэзээ хэрэглэхээс зайлсхийх вэ?
JavaScript-ийг сайн мэдэхгүй шинэхэн хэсэг хүмүүстэй ажиллахдаа Semantic-UI хүрээг ашиглахыг зөвлөдөггүй, учир нь энэ нь суулгасан чадамжид найдахгүйгээр програмыг өөрчлөх чадварыг шаарддаг.
8. сан
2021 онд Foundation нь JS, HTML, CSS-д зориулсан хамгийн шилдэг фреймворкуудын нэг байсан. Энэ нь одоогоор бэлэн байгаа захиалгат вэб сайт болон апп-уудыг бий болгох хамгийн алдартай хүрээнүүдийн нэг юм.
Энэ нь үндсэндээ байгууллагын түвшинд уян хатан, хариу үйлдэл үзүүлэх чадвартай вэбсайтуудыг бүтээхэд зориулагдсан. Foundation ашиглан frontend програмуудыг бүтээж эхлэх нь вэб хөгжүүлэгчдийн хувьд төвөгтэй төдийгүй хэцүү байдаг.
Энэ нь хурдан хөдөлгөөнт дүрслэл, шингэн хөдөлгөөнт дүрс, өгөгдөл дамжуулах чадвартай, тухайлбал хүнд төхөөрөмжүүдэд хөнгөн эд анги, том төхөөрөмжүүдэд хөдөлгөөнт хэсгүүдийг ачаалах зэрэг GPU хурдатгалтай.
Давуу тал
- Төрөл бүрийн хэмжээтэй дэлгэцийн дизайн хийхэд хялбар болгох боломжийг олгодог.
- Энэ нь танд гайхалтай вэбсайт үүсгэх боломжийг олгодог.
- Хэрэглэгчийн туршлагыг өөр өөр төхөөрөмж, хэвлэл мэдээллийн хэрэгсэлд тохируулсан.
- Нэмэлтүүдийн тухайд гэвэл тэдгээр нь амархан дасан зохицож, өргөтгөх боломжтой.
- HTML5-д зориулсан маягтын баталгаажуулалтын сан
- Блок сүлжээний функц нь зохион байгуулалтгүй жагсаалтыг сүлжээний хэв маяг болгон хувиргадаг.
Байг
- Эхлэгчдэд үүнийг сурахад хэцүү байх болно.
- Олон нийтийн форум, дэмжлэг үзүүлэх газрууд цөөн байна.
- Энэ нь цөөн тооны хэсгүүдээс бүрдэнэ.
- Томоохон аж ахуйн нэгжүүдийн хувьд уг тогтолцоо нь асуудал үүсгэж болзошгүй.
Үүнийг хэзээ хэрэглэх вэ?
Хэрэв та загварлаг нээлттэй эх сурвалж, CSS бүрэлдэхүүн хэсэг, гар утсанд ээлтэй урд талын хүрээтэй байхыг хүсвэл Foundation нь бусад шийдлүүдээс илүү дээр юм.
Хэзээ хэрэглэхээс зайлсхийх вэ?
Шинэхэн хүмүүст үүнийг хэрэглэхийг зөвлөдөггүй, учир нь энэ нь кодыг өөрчлөхөд хэцүү бөгөөд тохируулах чадвараас шалтгаалан нарийн төвөгтэй байдлыг нэмэгдүүлдэг.
9. Свелте
Svelte бол хамгийн сүүлийн үеийн урд талын хөгжүүлэлтийн хүрээ юм. Vue болон React гэх мэт фреймворкуудаас ялгаатай нь энэ хүрээ нь хөтөч дээр дарахаас илүүтэйгээр ажлыг үе шат болгон хуримтлуулах замаар өөрчлөлт хийсэн.
Svelte нь нээлттэй эхийн бүрэлдэхүүн хэсэг дээр суурилсан Typescript дээр бичигдсэн JavaScript-ийн хүрээ нь хөнгөн хэлбэрийн програм хангамжийн сонголт бөгөөд хөгжүүлэгчдэд бусад хүрээтэй харьцуулахад хамаагүй бага кодчилолтой төслүүдийг дуусгах боломжийг олгодог гэдгээрээ алдартай.
Энэ нь бас боломжтой хамгийн хурдан урд талын хүрээнүүдийн нэг гэж тооцогддог. Урд талын хөгжүүлэгчид үүнд их дуртай байдаг бөгөөд өнөөг хүртэл 3000 гаруй вэбсайт бүтээхэд ашиглагдаж байна.
Давуу тал
- Энэ нь жижиг бөгөөд энгийн бөгөөд одоогийн JS номын сангуудтай ажилладаг.
- Энэ нь жижиг хэмжээтэй, хэрэглэхэд хялбар бөгөөд алдартай JavaScript номын сангууд дээр бүтээгдсэн.
- Хамгийн бага кодчилол ба бүрэлдэхүүн хэсэгт суурилсан архитектур
- Энэ нь React болон Angular гэх мэт бусад хүрээнээс хурдан юм.
- Хамгийн мэдрэмтгий урд талын хүрээнүүдийн нэг.
Байг
- Экологи хязгаарлагдмал, нийгэм төлөвшөөгүй байна.
- Хязгаарлагдмал багаж хэрэгсэл, туслах материалын дутагдал
- Тодорхой хэмжээний өргөтгөх чадвар болон кодчилолын онцлог
- Өрсөлдөгчидтэйгээ харьцуулахад нэлээд цөөн тооны багцтай.
Үүнийг хэзээ хэрэглэх вэ?
Энэ хүрээ нь жижиг багтай жижиг програм хөгжүүлэх төслүүдэд маш тохиромжтой. Томоохон дэмжлэгийн бүлэг байхгүй тул үүнийг өргөн хүрээний ажилд ашиглахгүй байх нь дээр.
Хэзээ хэрэглэхээс зайлсхийх вэ?
Одоогийн байдлаар олон нийт, багаж хэрэгсэл дутмаг байгаа тул томоохон төслүүдэд Svelte хүрээг ашиглахгүй байхыг зөвлөж байна. Цөөн бүлэг учраас хөгжүүлэлтийн явцад хожим гарч болзошгүй асуудал эсвэл алдааны шийдлийг олоход хэцүү байдаг.
10. Preact.js
React-тэй ижил ES6 API ашигладаг Preact нь илүү хурдан бөгөөд илүү үр дүнтэй хувилбар юм. Энэ нь React-тэй ижил API функцийг хангадаг энгийн JavaScript хүрээ ашиглан бүтээгдсэн.
Энэ нь динамик вэб програм үүсгэх боломжийг олгодог хамгийн хурдан виртуал DOM хүрээнүүдийн нэг юм. Энэ нь платформын тогтвортой шинж чанарууд дээр суурилдаг бөгөөд янз бүрийн боломжтой frontend болон UI номын сангуудтай сайн ажилладаг.
Preact нь жижиг хэмжээтэй боловч хурдтай биш бөгөөд төвөгтэй динамик вэб програмуудыг хөгжүүлэх боломжийг олгодог.
Давуу тал
- Энэ нь React API-тай ажилладаг.
- Энэ нь авсаархан, хөнгөн.
- Энэ нь програмыг боловсруулахад ерөнхий гүйцэтгэлийг сайжруулдаг.
- Энэ нь нэлээд үр дүнтэй байдаг.
- Энэ нь React API-тай ажилладаг.
- Preact нь програмыг хөгжүүлэх явцад гүйцэтгэлийг сайжруулдаг.
Байг
- Энэ нь React propTypes-ийг дэмждэггүй.
- Контекстийг дэмждэггүй.
- React-тай харьцуулахад энэ нь жижиг нийгэмлэгтэй.
Үүнийг хэзээ хэрэглэх вэ?
Preact бол React-ийн хөнгөн хувилбар юм. Тиймээс, хэрэв та хөнгөн хүрээ ашиглахыг хүсвэл React гэхээсээ илүү Preact-ийг сонгоорой.
Хэзээ хэрэглэхээс зайлсхийх вэ?
Preact нь нүүлгэн шилжүүлсэн функциональ бүрэлдэхүүн хэсгүүдэд тусламж үзүүлэхгүй. Тиймээс, хэрэв танд ийм хэрэгцээ байгаа бол Preact-ийг ашиглах ёсгүй.
Дүгнэлт
Одоогоор бид хамгийн алдартай урд талын хүрээнүүдийн заримыг авч үзсэн. Гэсэн хэдий ч технологи нь үргэлж өөрчлөгдөж байдаг бөгөөд бид удахгүй бүр илүү сайн Framework-тэй болох байсан гэдгийг хэн мэдэх билээ. Шинэ Framework-уудыг бий болгохоос гадна одоо байгаа нь байнга шинэчлэгдэж, шинэ функцуудыг нэмснээр зах зээлд үндэс сууриа гүнзгийрүүлж байна.
Үүний үр дүнд, урд талын хөгжүүлэгчид үргэлж суралцах, ажиллах олон төрлийн Framework-тэй байх болно. Ийм ухаалаг жагсаалтаас нэгийг нь сонгох нь хэцүү ажил гэдгийг хэлэх нь зүйтэй. Гэсэн хэдий ч, энэ нийтлэл нь дээр дурдсан болон зах зээл дээр санал болгож буй хэд хэдэн frontend вэб хөгжүүлэлтийн хүрээний аль нь танд хамгийн тохиромжтой болохыг шийдэхэд тань туслах нь дамжиггүй.
хариу үлдээх