Мазмун
- 01. бурчтук
- 02. React
- 03. Vue
- Фреймворктардын синтаксиси кандай салыштырылат?
- Популярдуулук жана базар
- Мобилдик колдонмону иштеп чыгуу
- 2020-жылы күтүлө турган башка алкактар
- Корутунду
2020-жылы бизде веб иштеп чыгууга жардам берүү үчүн бир катар алкактар жана китепканалар бар. Бирок ар дайым эле ар кандай болгон эмес. Дагы 2005-жылы Брендан Эйх аттуу жигит тарабынан Моча деп аталган жаңы сценарий тили түзүлгөн. LiveScript болуп өзгөргөндөн бир нече ай өткөндөн кийин, аталыш кайрадан JavaScript болуп өзгөрүлдү. Андан бери JavaScript узак жолду басып өттү.
2010-жылы биз биринчи JavaScript алкагы катары Backbone жана Angular киргизилгенин көрдүк жана 2016-жылга чейин бардык веб-сайттардын 92 пайызы JavaScript колдонгон. Бул макалада биз JavaScript алкагынын үч негизги бөлүгүн (Angular, React жана Vue) жана алардын кийинки он жылдыкка карата статусун карап чыгабыз. Өзүңүздүн сайтыңызды түзгүңүз келеби? Вебсайт куруучулардын бул тизмесин байкап көрүңүз.
Айрым мыкты ресурстар үчүн, биздин веб-дизайн куралдарынын тизмесин, веб-хостинг кызматтарынын жыйындысын жана колдонуучуну тестирлөөнүн мыкты программаларынын тизмесин карап чыгыңыз.
01. бурчтук
AngularJS 2010-жылы чыккан, бирок 2016-жылга чейин ал толугу менен кайра жазылып, бурчтук 2 болуп чыккан. Angular бул Google тарабынан иштелип чыккан, Wix, Upwork, The Guardian, HBO жана башкалар колдонгон толук веб-фреймворк.
Pros:
- TypeScript үчүн өзгөчө колдоо
- MVVM иштеп чыгуучуларга бир эле маалымат топтомун колдонуп, бир эле колдонмо бөлүмүндө өзүнчө иштөөгө мүмкүндүк берет
- Мыкты документтер
Cons:
- Бир аз үйрөнүү кыйшыгы бар
- Эски версиядан көчүү кыйынга турушу мүмкүн.
- Жаңыртуулар дайыма иштелип чыгып, ага ылайыкташуу керектигин билдирет
Кийинкиси эмне?
Angular 9до Ivy демейки түзүүчү болуп саналат. Бул иштөө жана файлдын көлөмү боюнча көптөгөн маселелерди чечүү үчүн коюлган. Ал тиркемелерди кичирээк, тез жана жөнөкөй кылышы керек.
Бурчтуктун мурунку версияларын React жана Vue менен салыштырганда,
Бурчтукту колдонгондо, боонун акыркы өлчөмдөрү бир топ чоңураак болгон. Ivy ошондой эле прогрессивдүү гидратацияны ишке ашырат, бул I / O 2019 бурчтук командасы көрсөткөн нерсе. Progressive Hydration Ivy колдонмосун серверге жана кардарга акырындык менен жүктөө үчүн колдонот. Мисалы, колдонуучу баракча менен иштеше баштаганда, компоненттердин коду жана ар кандай иштөө убактысы бөлүк-бөлүк алынат.
Ivy бурчтукка чоң көңүл бургандай сезилет жана аны бардык колдонмолор үчүн жеткиликтүү кылуу үмүтү. 9-версияда баш тартуу варианты болот, бурчтук 10го чейин.
02. React
React алгач 2013-жылы Facebook тарабынан чыгарылып, интерактивдүү веб интерфейстерди курууда колдонулат. Аны бир нече аталыш үчүн Netflix, Dropbox, PayPal жана Uber колдонот.
Pros:
- React виртуалдык DOMду колдонот, натыйжалуулугуна оң таасирин тийгизет
- JSX жазуу оңой
- Жаңыртуулар туруктуулукка шек келтирбейт
Cons:
- Бир топ татаал колдонмолорду түзүү үчүн, үчүнчү тараптын китепканаларына муктаждык эң чоң кемчиликтердин бири
- Иштеп чыгуучулар караңгыда өнүгүүнүн мыкты жолу боюнча калышат
Кийинкиси эмне?
React Conf 2019до, React командасы иштеп жаткан бир катар нерселерге токтолушту. Биринчиси, тандалма гидратация, анда колдонуучу өз ара аракеттенип жаткан компоненттерге артыкчылык берүү үчүн, React үстүнөн иштеп жаткан нерсенин бардыгын тындырат. Колдонуучу белгилүү бир бөлүм менен өз ара аракеттенүүгө барганда, ал жер суудандырылат. Команда ошондой эле кодду, маалыматтарды жана сүрөттөрдү жүктөөнү уюштуруу үчүн React системасы болгон Suspenseдин үстүнөн иштеп келген. Бул компоненттерди көрсөтүүдөн мурун бир нерсени күтүүгө мүмкүнчүлүк берет.
Selective Hydration жана Suspense экөө тең, React колдонуучунун киришине жооп берүү сыяктуу артыкчылыктуу нерсеге көңүл буруу үчүн, төмөнкү артыкчылыктуу иштин чоң блокторуна кирүү мүмкүнчүлүгүн берүү менен, колдонмолордун сезимтал болушун камсыз кылат. Команда ошондой эле жеткиликтүүлүктү эки темага - фокусту жана киргизүү интерфейстерин башкарууга - көңүл буруп, дагы бир багыт катары атады.
03. Vue
Vue 2014-жылы Google компаниясынын экс-кызматкери Эван Ю тарабынан иштелип чыккан. Аны Xiaomi, Alibaba жана GitLab колдонот. Vue кыска убакыттын ичинде жана ири бренддин колдоосусуз популярдуулукка жана иштеп чыгуучулардын колдоосуна ээ болду.
Pros:
- Өлчөмү өтө жеңил
- Башталгыч достук - үйрөнүү жеңил
- Улуу жамаат
Cons:
- Фейсбук менен реакция жана Google менен Angular сыяктуу ири компания тарабынан колдоого алынган эмес
- Чыныгы түзүм жок
Кийинкиси эмне?
Vue тезирээк, кичирээк, сакталуучу жана иштеп чыгуучуларга түпнускага багыт алууну жеңилдетүүнү максат кылды (эгерде сизге кыйынчылык жаралса, веб-хостинг кызматын карап көрүңүз). Кийинки чыгарылыш (3.0) 2020-жылдын биринчи чейрегинде аяктайт, анда жакшыртылган TypeScript колдоосу менен бирге жакшыраак иштөө үчүн виртуалдык DOM кайра жазууну камтыйт. Ошондой эле, иштеп чыгуучуларга иштөөнүн ордуна компоненттерди түзүүнүн жана аларды өзгөчөлүктөрү боюнча уюштуруунун жаңы ыкмасын сунуш кылган Composition API кошумчасы бар.
Vue иштеп жаткандар, ошондой эле сиздин компонентиңиздин көрсөтүлүшүн токтотуп, шарт аткарылганга чейин кошумча компонент түзүп берген Suspenseдин үстүндө иштеп келишкен.
Vue жаңыртуулары менен эң сонун нерселердин бири - бул артка шайкештикти колдоо. Эски Vue долбоорлоруңузду бузушуңузду каалашпайт. Биз муну APIнин 90 пайызы бирдей болгон 1.0дан 2.0га чейинки миграциядан көрдүк.
Фреймворктардын синтаксиси кандай салыштырылат?
Үч алкактын тең чыгарылышынан бери өзгөрүүлөр болду, бирок синтаксис жана анын кандай айырмаланарын түшүнүү маанилүү. Келгиле, жөнөкөй окуяларды милдеттендирүүгө келгенде синтаксистин салыштыруусун карап көрөлү:
Үн: The v-on директивасы Vue инстанцияларында ыкмаларды колдонуучу окуяны угармандарды тиркөө үчүн колдонулат. Директивалар префикстен турат v- алар Vue тарабынан берилген өзгөчө атрибуттар экендигин көрсөтүү үчүн жана көрсөтүлгөн DOMго өзгөчө реактивдүү жүрүм-турумду колдонушат. Окуя иштетүүчүлөр сапта же ыкманын аталышы катары берилиши мүмкүн.
шаблон> баскыч v-on: click = "clickHandler"> мени чыкылдатыңыз / баскыч>> шаблон> скрипт> демейки экспорттоо {аты: "HelloWorld", ыкмалары: {clickHandler: function () {console.log ("Мен чыкылдадым! ”); }}}; / скрипт>
Реакция: React JS жана JSX белгилерин жана логикасын, JavaScriptке синтаксистик кеңейтүүнү коёт. JSX менен, иш-чара иштетүүчү катары өткөрүлүп берилет. Окуяларды React элементтери менен иштетүү DOM элементтериндеги окуяларды иштетүүгө абдан окшош. Бирок айрым синтаксистик айырмачылыктар бар; мисалы, React окуялары кичинекей тамга эмес, camelCase аркылуу аталышат.
function Button () {function clickHandler (e) {console.log ("Мен чыкылдатып койдум"); } return button onClick = {clickHandler}> Мени чыкылдатыңыз! / button>; }
Бурчтук: Окуяларды милдеттендирүүчү синтаксис бирдей белгинин сол жагындагы кашаанын ичиндеги максаттуу окуя аталышынан жана оң жагында келтирилген шаблон билдирүүсүнөн турат. Же болбосо, сиз колдоно аласыз күнү- каноникалык форма деп аталган префикс.
@Component ({selector: "app-click-me", шаблон: `button (чыкылдатуу) =" onClickMe () "> Мени чыкылдатыңыз! / Баскыч>`})) экспорттук класс ClickMeComponent {onClickMe () {console.log (" Сиз мени чыкылдадыңыз! ”); }}
Популярдуулук жана базар
Келгиле, W3Techs статистикасын карап чыгып, Интернеттин калган бөлүгүнө байланыштуу үч алкактын жалпы сүрөтүн карап чыгалы. Учурда бурчтукту бардык веб-сайттардын 0,4 пайызы колдонот, ал эми JavaScript китепкана базарындагы үлүш 0,5 пайызды түзөт. React бардык веб-сайттардын 0,3 пайызы жана JavaScript китепкана базарынын 0,4 пайызы, Vue экөө тең 0,3 пайыз колдонот. Бул таптакыр бирдей сезилет жана сандардын өсүшүн күтсөңүз болот.
Google тенденциялары: Акыркы 12 ай ичинде React издөө жагынан эң популярдуу болуп, аны Angular тыкыр ээрчип жүрөт. Vue.js бир топ артта калган; бирок, бир нерсени унутпаш керек: Вуэ экөөнө салыштырмалуу али жаш.
Жумуш издөө: Макала жазылып жатканда, React жана Angular жумуш тизмеси боюнча Vue менен алда канча артта калды. LinkedInде болсо Vue иштеп чыгуучуларына көбүрөөк суроо-талап бар окшойт.
Stack Overflow: Эгер сиз 2019-жылга Stack Overflow Developer Survey жыйынтыктарын карасаңыз, React жана Vue.js экөө тең эң сүйүктүү жана эң керектүү желе алкактары болуп саналат. Бурчтуу адамдар эң жакшы көргөн, бирок үчүнчү орунда тургандар үчүн тогузунчу орунга отурушат.
GitHub: Вуэ 153 миң жылдыздын саны эң көп, бирок салым кошкон адамдардын саны эң аз (283). Башка жагынан алганда, реакциянын 140 миң жылдызы жана 1341 салымы бар. Бурчтук 59,6 миң гана жылдызга ээ, бирок 1579 менен үчөөнүн ичинен эң көп салым кошкон адам бар.
КЭУП Тренддери: Жогорудагы сүрөттө акыркы 12 айдагы статистика көрсөтүлгөн, анда React бурчтук жана Vueге салыштырмалуу айына көп жүктөлгөнүн көрө аласыз.
Мобилдик колдонмону иштеп чыгуу
Чоң үчөөнүн бирден бир негизги максаты - мобилдик жайылтуу. React React Native ээ, ал iOS жана Android тиркемелерин түзүү үчүн React колдонуучулары үчүн гана эмес, ошондой эле колдонмолорду иштеп чыгуунун кеңири чөйрөсү үчүн популярдуу чечим болуп калды. Бурчтуу иштеп чыгуучулар NativeScriptти жергиликтүү колдонмолор үчүн же Ionic гибриддик мобилдик колдонмолор үчүн колдоно алышат, ал эми Vue иштеп чыгуучулары NativeScript же Vue Native тандап алышат. Мобилдик тиркемелер популярдуу болгондуктан, бул инвестициялоонун негизги багыты бойдон калууда.
2020-жылы күтүлө турган башка алкактар
Эгер 2020-жылы жаңы нерсени байкап көргүңүз келсе, анда ушул JavaScript алкактарын карап чыгыңыз.
Эмбер: MVVM үлгүсүнүн негизинде иштеген веб тиркемелерди курууга арналган ачык булактуу алкак. Аны Microsoft, Netflix жана LinkedIn сыяктуу бир нече ири компаниялар колдонушат.
Метеор: Заманбап веб жана мобилдик тиркемелерди иштеп чыгуу үчүн толук стек JavaScript платформасы. Бул үйрөнүү оңой жана колдоо коомчулугу бар.
Корутунду
Үч алкактын тең үзгүлтүксүз өркүндөтүлүп турушу кубандыруучу белги. Ар кимдин кайсынысын колдонушу керектиги жөнүндө өзүнүн көз-карашы жана артыкчылыктуу чечими бар, бирок бул чындыгында эле долбоордун көлөмүнө келип такалат жана сизди ыңгайлуураак кылат.
Эң маанилүү аспектиси - бул алардын жамааттарынын туруктуу колдоосу, ошондуктан сиз жаңы долбоорду баштоону пландап жатсаңыз жана буга чейин үчөөнүн бирин дагы колдонбосоңуз, анда мен алардын бардыгы менен ишенимдүү колуңузда деп ишенем. Эгерде сизде үч алкактын бирөөсүн дагы үйрөнүү мүмкүнчүлүгү боло элек болсо, анда мен аны жаңы жылдык резолюция кылып үйрөнүүнү баштоону сунуш кылам. Келечек ушул үчөөнүн тегерегинде болот.
Бул мазмун алгач net журналында пайда болгон.
