Энэхүү хошин элэглэлийг 2016 онд нэгэн програм хөгжүүлэгч бичсэн нь өдгөө ч үнэний хувьтай. Монгол хэл дээр иймэрхүү зүйл тун ховор тул сонирхол нэгтнүүддээ зориулан хөрвүүлэв.
Хоёр танил програм хөгжүүлэгч уулзаад ийн хөөрөлджээ.
- Хөөе сайн уу, хөгшин нь нэг шинэ вэбийн төсөл авсан юм. Гэхдээ үнэнээ хэлэхэд сүүлийн үед нэг их код бичээгүй. Чи нэлээд хэдэн жил вэб хөгжүүлж байгаа биз?
- Тийм ээ, гэхдээ одоо Фронт-энд хөгжүүлэгч гэдэг болсон. Visualisation, хөгжим тоглуулагч, нисдэг дрон гээд л цөмийг нь хийж байна. Найз нь сая JSConf, ReactConf хурлуудад суугаад ирлэээ.
- Өө ашгүй. Найз нь нэг хэрэглэгчийн сүүлд хийсэн үйлдлийг харуулдаг хуудас хийж байгаа юм. REST ашиглаж дата аваад, филтрлэж гаргана. Датагаа jQuery-гээр дүрсэлдэг юм билүү гэж бодож байгаа.
- Өө бурхан минь. Хэн ч одоо jQuery ашиглахаа больсон. Оронд нь React хэрэглэ.
- Аан за. React гэж ингэхэд юу билээ?
- Хамгийн сүүлийн үеийн лаг library байхгүй юу. Facebook-ийнхэн хийсэн юм. Энийг ашиглавал чи аппаа бүрэн удирдаж, view-г хүссэнээрээ харуулна.
- Янзтай сонсогдож байна. Тэгэхээр би React-аар сервертэй холбож тэндээс датагаа татаж авч харуулах нь ээ?
- Тийм ээ, гэхдээ чи эхлээд React, ReactDOM хоёрыг вэб хуудсандаа library хэлбэрээр нэмэх ёстой шүү.
- Тэгдэг нь яаж байгаан? Ганц library-гаар ажилладаггүй юм уу?
- Нэг нь жинхэнэ library нь. Нөгөөх нь DOM удирддаг байхгүй юу. DOM-ын кодоо чи JSX дээр бичнэ гэсэн үг?
- JSX юу гэнээ? Тэр нь юу ийн?
- JavaScript syntax extension. XML-тэй нилээн төстэй. ДОМ-ыг арай өөр хэлбэрээр дүрслэн харуулдаг зүйл. Сайжруулсан HTML гээд л төсөөлчих.
- Зүгээр HTML нь яасын?
- Одоо чинь 2020 он. Хэн ч HTML-ыг дангаар нь хэрэглэхээ больсон.
- За за. Тэгэхээр, би энэ хоёр library-г суулгаад, тэгээд React хэрэглэж болох нь ээ?
- Арай ч үгүй. Чи бас Babel суулгах хэрэгтэй. React Babel дээр ажилладаг юм.
- Бас дахиад нэг library юу? Тэрүүгээр яахын?
- Babel чинь транспайлер байхгүй юу. ЖаваСкриптийн хүссэн хувилбар руугаа кодоо хувиргана гэсэн үг. Babel-гүй React хэрэглэж болно л доо. Тэгэх юм бол чи ES5-ын горимоор л ажиллана. Одоо чи дор хаяж ES6 хэрэглэх хэрэгтэй. Хамгийн моодонд ороод байгаа хувилбар.
- ES5, ES6? Би бүр будилж гүйцлээ.
- Яах юу байхав дээ, ES5 гэдэг чинь EcmaScript 5 л байхгүй юу. Одоогийн бараг бүх вэб хөтчүүд энийг таньдаг нөгөөхийг нь таньдаггүй юм.
- ECMASCRIPT гэдэг нь?
- JavaScript чинь 1995 онд анх гарсан ч гэсэн 1999 оны дүрмээр явж байсан шүү дээ. Одоо энэний 7 дахь хувилбар нь гарсан гэсэн үг.
- Найз нь бүр будилж орхилоо. Ингэж толгойгоо эргүүлж байснаас зүгээр л jQuery-г CDN-ээр холбоод AJAX дуудаад хэдэн дата татаад авчихвал яасан юм бэ?
- Бурхан минь, хэн ч jQuery хэрэглэхээ больсон гээд байна ш дээ. Тэгэх юм бол чи бөөн орооцолдсон шпагетти кодтой болно л гэсэн үг.
- За яахав, тэгэхээр би гурван library дуудаад, тэгээд HTML хүснэгтэн дотор датагаа дүрсэлж харуулж болох юм байна тийм ээ?
- Тиймээ, гэхдээ чи bundle manager ашиглаж багцалж, нэг файл болгоно ш дээ.
- Модюл менежер гэдэг маань?
- Чи системийн ямар орчинд ажиллаж байгаагаас шалтгаална. Болохгүй бол Browserify ашиглаад багцалчихгүй юу.
- За за, ингэхэд Browserify чинь яадаг билээ?
- Кодыг чинь CommonJS гээд энгийн ЖаваСкрипт болгодог байхгүй юу. Энийг чинь npm-д кодоо тавьдаг ухаалаг хүмүүс зохиосон юм.
- NPM-ээр яадгийн.
- Кодны агуулах байхгүй юу.
- CDN шиг гэсэн үг үү?
- Яг ч тийм биш. Хүмүүс тийшээ кодоо шахаж, тэр олон код дундаас таалагдсан кодоо чи татаж авч хүссэнээрээ ашиглаж болдог юм.
- За тэгэхээр, би React ашиглахын тулд энэ npm гэдэг юмнаас чинь татаж аваад, дараа нь Browserify ашиглана гэсэн үг болох нь ээ?
- Яг тийм.
- Арай л төвөгтэй юм биш үү.
- Яг үнэн. Харин тийм болохоор чинь энэ процессыг автоматжуулахын тулд Grunt, Gulp юм уу Broccoli ашигладаг байхгүй юу?
- Грант, Галп, Броккколи байцаа? Чи чинь юугаа яриад байнаа?
- Таск менежерүүдээ. Гэхдээ одоо эд нарын оронд Webpack ашигладаг болсон.
- Үгүй ийм юмыг чинь би C, юм уу C++ төслүүд л ашигладаг гэж бодож байсан юм.
- Харин тийм ээ, вэбийн бид чинь юмыг илүү төвөгтэйгөөр нь хийх дуртай шүү дээ. Дахиад ганц хоёр жил хүлээчихвэл бид бүр Web Assembly гэдэг юмтай ч болох гэж байгаа.
- За тэр яахав. Тэгэхээр Реактаа суулгаад, тэгээд Реактаараа серверээс датагаа татаж харуулах уу?
- Үгүй, React дата татаж чадахгүй.
- За болиод өгөөрэй. Тэгээд юугаар татахын?
- Fetch ашиглах байхгүй юу.
- Юу гэнээ? Fetch ашиглаж дата фэч хийх юм уу? Хэн эд нарын нэрийг өгдөг юм бэ?
- Харин тиймээ хачин нэртэй. Тэгэхдээ Fetch ашиглаж XMLHttpRequests хийж серверээс дата уншина.
- Ajax л юм шив дээ.
- Төстэй. Гэхдээ Fetch промис хийдэг юм. Яагаав, өөрийгөө эргэж дууддаг callback-ын тамыг зайлуулдаг зүйл?
- Коллбак там аа?
- ….
- За болъё. JavaScript-ээс зайлах минь. Энэ олон фронтэнд фрэймворк, компайлер, транспайлерээс залхаж байна. JavaScript-ынхэн яаж галзуурахаараа ийм холион бантан хутгадаг байнаа? Болиод бакэнд рүү явах минь.
- Харин тийм ээ. Арай гайгүй нь гэвэл Python-ынхон байх шүү.
- Аанха.
- Гэхдээ чи аль хувилбарыг нь сонгох вэ гэдгээ сайн шийдээрэй.
- Бас хувилбартай юм уу?
- Python 2 -уу Python 3 -аар явах уу гэдгээ сайн шийдэхгүй бол кодууд чинь хоорондоо таарахгүй шүү...
Энэ нийтлэлийг бичих зуур хэдхэн л JavaScript library шинээр нэмж зохиогдсон гэдгийг амалъя.
