គ្រប់យ៉ាងជាចាវាស្ក្រីបត៍

គ្រប់យ៉ាងជាចាវាស្ក្រីបត៍!

ចាវ៉ាស្ក្រីបត៍

ក្នុងអត្ថបទនេះផងដែរ ខ្ញុំនឹងព្យាយាមលើកយកព័ត៌មាន ដំណើរដើមទងខ្លីៗ និងអ្វីដែលយើងអាចធ្វើបានជាមួយភាសានេះត្រួសៗមកនិយាយ ដោយសារពេលថ្មីៗនេះភាសានេះមានសន្ទុះពេញនិយមយ៉ាងខ្លាំង និងមានការវិវឌ្ឍន៍ជារៀងរាល់ឆ្នាំ។ ខ្ញុំអាចនិយាយបានថាភាសានេះជាភាសាដែលអាចជូនយើងបានទៅដល់គ្រប់ទីកន្លែង។

##សង្ខេបខ្លីៗពីកំណើតចាវ៉ាស្ក្រីប

បន្ទាប់ពីលោក Tim Berners-Lee បានបង្កើត World Wide Web នៅចុងទសវត្សរ៍ឆ្នាំ ៨០ និងដើមឆ្នាំ ៩០ ហើយក៏មានការបង្កើត Browser ឡើងមក។ តែ Browser ជំនាន់នោះជា Browser បែប Static ដែលគ្រាន់តែអាចបង្ហាញ Hypertext ធម្មតាប៉ុណ្ណោះ។ ហើយកាលដំបូងៗនោះ NCSA Mosiac ជាកម្មវិធីរុករកដែលពេញនិយមបំផុតដែលបង្កើតដោយ National Center for Supercomputing Applications(NCSA) របស់សហរដ្ឋអាមេរិកកាំង។ ដោយឃើញពីឱកាសក្រុមហ៊ុន Mosiac Communications Corporation (Netscape) ត្រូវបានបង្កើតឡើងហើយបានជួលបុគ្គលិកជាច្រើនដែលធ្លាប់ធ្វើការឲ្យ NCSA មកបង្កើត Mosiac Netscape (នៅក្នុងក្រុមហ៊ុនពួកគេបានហៅ វាថា Mozilla ដែលចង់សំដៅដល់ Mosiac Killer) ដែលរាល់ថ្ងៃនេះក្លាយជា Mozilla Firefox ដែលបានដណ្ដើមតំណែង NCSA Mosiac យ៉ាងឆាប់រហ័សត្រឹមរយះពេល ៤ ខែដោយក្តោបក្ដាប់ ៧៥% នៃទីផ្សារ Browser ទាំងមូល។ ក្នុងកំឡុងពេលនេះហើយ ដែលក្រុមហ៊ុន Netscape ចាប់ផ្ដើមគិតពីវេបសាយ Dynamic។

ក្នុងរយះពេល ១០ថ្ងៃ លោក Brendan Eich បានសរសេរភាសាស្រ្កីបត៍មួយឡើងដោយដាក់ឈ្មោះថា Mocha ក្រោយមកកែឈ្មោះជា LiveScript និងចុងក្រោយឈ្មោះត្រូវបានប្ដូរទៅជា JavaScript ដែលប្រើមកទល់សព្វថ្ងៃនេះ។ តែគេតែងតែយល់ច្រឡំថា JavaScript ជាផ្នែកមួយរបស់ Java ទាំងភាសាទាំងពីនេះមិនទាក់ទងគ្នាសោះ។ ការដាក់ឈ្មោះថា JavaScript នេះក៏ដោយសារតែក្រុមហ៊ុន Netscape បានចាប់ដៃគូរជាមួយ Sun Microsystems ដែលបង្កើតភាសា Java ដែលជាភាសាពេញនិយម ដើម្បីប្រគួតប្រជែងនឹង Microsoft ដែលបានចេញ Internet Explorer។ Netscape បានសម្រេចថារបៀបសរសេរ (Syntax) របស់ភាសា JavaScript គួរតែស្រដៀងនឹងភាសា C និងភាសា Java ដែលពេញនិយមស្រាប់ដើម្បីងាយស្រួលសរសេរ។

##ស្តង់ដារ ECMAScript

ដោយសារចាវ៉ាស្ក្រីបត៍ត្រូវបានសរសេរឡើងក្នុងរយះពេលខ្លីត្រឹមតែ ១០ថ្ងៃ អញ្ចឹងហើយបានជាវាមិនមែនជាភាសាដែលត្រូវបានឌីហ្សាញឲ្យល្អរៀបរយនោះទេ។ លើសនេះដោយ​សារតែមានការបង្កើត Browser កាន់តែច្រើនដែលមាន Browser Engine​ /​ JavaScript Implementation / JavaScript Interpreter ផ្សេងៗគ្នា ដែលនាំឲ្យមានភាសាស្រ្កីបត៍កំណែរផ្សេងៗគ្នាជាច្រើន ហើយជាពិសេសនោះគឺបញ្ហាស្ក្រីបត៍មិនត្រូវគ្នា(Incompatibilities across browsers)។ ក្រុមហ៊ុន Netscape បានស្នើរ JavaScript ទៅកាន់ Ecma International ដែលជាស្ថានប័នចុះស្តង់ដារមួយក្នុងទ្វិបអឺរ៉ុបឲ្យជួយចុះស្តង់ដារភាសានេះដើម្បីឲ្យក្រុមហ៊ុនបង្កើត Browser Engine ផ្សេងៗអាចយកមកប្រើបាន និងបំពេញចំណុចខ្វះខាតរបស់ភាសាស្ក្រីបត៍មួយនេះ។

អ៊ីកម៉ាស្ក្រីបត៍

អ៊ីកម៉ាស្ក្រីបត៍

Ecma International បានចុះស្តង់ដារ JavaScript ក្នុង ECMA-262 និង ISO/IEC 16262 ហើយគេបានហៅវាថា ECMAScript(ES)។ មកដល់ពេលនេះ Ecma International បានចេញដល់ ES2019 ហើយ។ ដោយឡែកកំណែរដែលធ្លាប់ចេញកន្លងមកមានដូចជា ES1(មិថុនា ១៩៩៧), ES2(មិថុនា ១៩៩៨), ES3(មិថុនា ១៩៩៩), ES4(ត្រូវបានបោះបង់ចោល), ES5(២០០៩ — ជិតដប់ឆ្នាំក្រោយពេលចេញកំណែរមុន), ES6/ES2015(មិថុនា ២០១៥), ES2016(មិថុនា ២០១៦), ES2017(មិថុនា ២០១៧), ES2018​(មិថុនា ២០១៨)។ រាល់ការចេញកំណែរ ES ម្ដងៗតែងតែនាំមកនៅរបៀបសរសេរកូដថ្មីនិង/ឫងាយស្រួលជាងមុន។ ឧទាហរណ៍៖ Arrow Function ធ្វើឲ្យការសរសេរ function ក្នុង JavaScript មានភាពងាយស្រួល និងខ្លីជាងមុន។ ការកំណត់អថេរដែលមាន Scope ថ្មីមានប្រសិទ្ធភាពជាង var ដោយប្រើ const សម្រាប់ constant និង let សម្រាប់ variable ជាដើម។ សរុបខ្លីៗទៅ ECMA បានធ្វើឲ្យភាសាចាវ៉ាស្ក្រីបត៍ប្រសើរឡើងជារឿយៗ រាល់ពេលចេញកំណែរថ្មីមកម្ដងៗ។

##AJAX — Asynchronous JavaScript and XML

AJAX ដែលមកពីពាក្យពេញ Asynchronous JavaScript and XML ជាបច្ចេកទេសក្នុងការសរសេរវេបសាយមួយដែលអនុញ្ញាត្តិឲ្យវេបសាយអាប់ដេតបានដោយមិនបាច់ឡូដវេបសាយសារជាថ្មី។ AJAX អនុញ្ញាត្តិឲ្យ Client-Side អាចផ្ញើរសំណើរទៅទទួលទិន្នន័យពី Server-Side បានតាមរយៈ XMLHttpRequest ដោយស្ងាត់ៗហើយអាប់ដេតផ្នែកដែលត្រូវការអាប់ដេតទៅតាមទិន្នន័យដែលទទួលបានមកពី Server។ នេះជាបច្ចេកទេសសំខាន់មួយក្នុងការអភិវឌ្ឍន៍វេបសាយ និងត្រូវបាន​យក​មក​ប្រើជាបន្តបន្ទាប់។ កាលពីមិនទាន់មានបច្ចេកទេសនេះ គេត្រូវរីឡូដវេបសាយរាល់ពេលដែល Client-Side ផ្ញើរសំណើរនិងទទួលទិន្នន័យត្រឡប់មកវិញពី Server-Side។

##ម៉ាស៊ីនចាវ៉ាស្រ្កីបត៍ ឫ JavaScript Engine

JavaScript Engine ចង់សំដៅដល់កម្មវិធីដែលបម្លែងចាវ៉ាស្ក្រីបនឹងឯង។ Browser នីមួយៗមានម៉ាស៊ីនចាវ៉ាស្ក្រីបត៍ផ្សេងៗគ្នាដើម្បីអានចាវ៉ាស្ក្រីបត៍ ហើយបកប្រែជារូបរាងនៅក្នុង Browser។ ឧទាហរណ៍ Chrome, Brave, Microsoft Edge ប្រើ V8 Engine, Mozilla Firefox ប្រើ Spider​Monkey, Safari របស់ Apple ប្រើ Nitro Engine។ ដោយសារតែ Browser ប្រើមាស៊ីនចាវ៉ាស្ក្រីបត៍ផ្សេងៗគ្នានឹងហើយដែលនាំឲ្យមានបញ្ហា Cross-Browser Incompatibility (តាមពិត HTML និង CSS ក៏ចំណែកដែរ)។ បើនិយាយឲ្យស្រួលស្ដាប់ វាប្រៀបដូចអ្នករៀនភាសាអង់គ្លេសចឹងដែរ គឺមានអង់គ្លេសអាមេរិក អង់គ្លេស UK និង អង់គ្លេសអូស្រ្តាលីជាដើម។ ភាសាអង់គ្លេស​គឺភាសាអង់គ្លេស ប៉ុន្តែអ្នករៀនផ្សេងគ្នាប្រើនិងយល់តាមកំរិតផ្សេងៗគ្នា។ ម្យ៉ាងទៀត ECMAScript ចេញកំណែរថ្មីជារឿយៗ ដូច្នេះវាក៏ជាតួនាទីរបស់អ្នកសរសេរម៉ាស៊ីនចាវ៉ាស្ក្រីបត៍ដែលត្រូវអាប់ដេតទៅតាមនឹងដែរ។ តែក៏មិនមែនគ្រប់ម៉ាស៊ីនចាវ៉ាស្ក្រីបត៍ទាំងអស់ត្រូវបានអាប់ដេតទាន់កំណែរដែលចេញថ្មីរហូតទេ។ វានឹងមិនស្គាល់បើយើងសរសេរ ECMA Script ថ្មីទាំងដែលម៉ាស៊ីនចាវ៉ាស្រ្កីបត៍មិនទាន់ស្គាល់កំណែរថ្មី។ ចឹងហើយគេតែងតែត្រូវគិតពី Cross-Browser Compatibility ដោយកំណត់ពី Browser ដែលជាគោលដៅឲ្យបានច្បាស់ ហើយឆែកមើលថា Browser ដែលជាគោលដៅរបស់យើងស្គាល់កំណែរចាវ៉ាស្រ្កីបត៍ដែលយើងសរសេរដែរឫទេ។

វិធីឆែកមើល៖

  1. ឆែកមើលក្នុងឯកសារ៖ https://developer.mozilla.org
  2. ឆែកនៅវែបសាយ CanIUse៖ https://caniuse.com
  3. ឆែកនៅតារាង៖ https://kangax.github.io/compat-table/es6

##jQuery — ធ្វើឲ្យចាវ៉ាស្ក្រីបត៍សរសេរស្រួលជាងមុន

jQuery

jQuery

“Write less, do more.” — jQuery ចេញដំបូងនៅប្រហែលឆ្នាំ ២០០៦ ដោយលោក John Resig។ វាចូលខ្លួនមកដោះស្រាយបញ្ហាដំណើរការបកប្រែស្រ្កីបត៍ខុសគ្នានៃ Browser ទាំងឡាយ ហើយការព្យាយាមកូដឲ្យដើរដូចគ្នាទាំងអស់គ្រប់ Browser ជារឿងគួរឲ្យឈឺក្បាលខ្លាំងណាស់។ ដើម្បីដោះស្រាយបញ្ហាទាំងនេះនោះ jQuery បានព្យាយាមបង្កើតស្រទាប់អរូបី(Abstract Layer) មួយ ដូច្នេះពេលសរសរកូដគេមិនចាំបាច់ខ្វល់ពីថាវាអាចដំណើរការបាន​លើ Browser ណាខ្លះនោះទេ ដោយគ្រាន់តែសរសេរបែប jQuery ហើយរឿង Cross-Browser Compatibility ទុកឲ្យ jQuery ជាអ្នកទទួលខុសត្រូវ។ មួយទៀត jQuery បានធ្វើឲ្យការប្រើ DOM (Document Object Model), Event Handler ក៏ដូចជា AJAX និង Animation មានភាពងាយស្រួលជាងមុន។ jQuery Object អនុញ្ញាត្តឲ្យយើងអាចសរសេរ Plugin បានដោយខ្លួនឯង ហើយយើងអាចយកមកប្រើច្រើនដង បាន ហើយយើងក៏អាចចែករំលែកឲ្យអ្នកផ្សេងទៀតប្រើបានផងដែរ។ នេះហើយដែលនាំឲ្យមាន jQuery Plugin Registry ដែលជាកន្លែងបណ្ដុំ jQuery Plugins ផ្សេងៗដែលត្រូវបានសរសេរឡើងហើយចែករំលែកជាសាធារណៈ។ ឧទារហណ៍ Navigation Bar Dropdown មានគេសរសេរហើយត្រូវបានគេចែករំលែកលើ Registry ហើយយើងអាចយកមកប្រើបាន។ ដោយសារកត្តាទាំងនេះហើយ jQuery ត្រូវបានគេប្រើយ៉ាងទូលំទូលាយ។ នេះជារូបភាពធំមួយដែលបង្ហាញពីការវិវឌ្ឍន៍របស់ចាវ៉ាស្រ្កីបត៍យ៉ាងឆាប់រហ័ស។

##JSON — File Type ដ៏ពេញនិយមសម្រាប់បញ្ចូនទិន្នន័យ

JSON មកពីពាក្យពេញ JavaScript Object Notation។ វាត្រូវបានបង្កើតឡើងដោយលោក Douglas Crockford។ កាលបង្កើតដំបូងវាត្រូវបានបង្កើតសម្រាប់តែភាសាចាវ៉ាស្ក្រីបត៍តែប៉ុណ្ណោះ តែចុងក្រោយវាបានក្លាយជាទម្រង់បញ្ចូននិងផ្ទុកទិន្នន័យយ៉ាងពេញនិយមដែលប្រើបានសឹងតែគ្រប់ភាសា (Language Independent)។ JSON បានចូលខ្លួនមកជំនួស XML​(eXtended Markup Language) ដោយសារ JSON មានមាឌតូចជាង ងាយស្រួលអានសម្រាប់ទាំងមនុស្សនិងកុំព្យូទ័រ ហើយសរសេរវាក៏ស្រួលជាងដែរ។ រាល់ថ្ងៃ JSON ជាផ្នែកមួយដ៏សំខាន់របស់ RESTful API Architecture (Representational State Transfer) ដែលជា Web Service API Architecture ដែលពេញនិយមបំផុតក្នុងពេលបច្ចុប្បន្ននេះ។

##NodeJS — ចាវ៉ាស្រ្កីបត៍ក្រៅ Browser

Node.js

Node.js ត្រូវបានសរសេរដោយលោក Ryan Dhal កាលពីឆ្នាំ ២០០៩។ លោកបាននិយាយថាអ្វីដែលជំរុញឲ្យគាត់សរសេរ Node.js ឡើងមកនោះគឺ I/O​(Input/Output) ដែលពិបាកក្នុងភាសាចាវ៉ាស្រ្កីបត៍។ គាត់មិនបានគិតថា Node.js នឹងពេញនិយមយ៉ាងខ្លាំងបែបនេះទេ។ បន្ទាប់ពី Node.js ដំណើរការបានល្អហើយរឿង I/O គាត់ថែមទាំងបានចាកចេញពីគម្រោងដោយគិត​ថា​អ្វីដែលគាត់ចង់ធ្វើបានសម្រេចហើយទៀតផងកាលពីឆ្នាំ ២០១២ ដោយផ្ទេរទំនួលខុសត្រូវទៅ​ឲ្យអ្នកផ្សេងវិញ។

Node.js ជា open-source, cross-platform JavaScript run-time environment ដែលអនុញ្ញាត្តិឲ្យកូដចាវ៉ាស្រ្កីបត៍អាចដំណើរការក្រៅ Browser បាន។ វាបានធ្វើឲ្យការប្រើភាសាចាវ៉ាស្រ្កីបត៍សរសេរ Server អាចទៅរួច។ មកដល់ពេលនេះ វាបានក្លាយជា Server-side-scripting ដ៏ពេញនិយមបំផុតមួយបាត់ទៅហើយ ដោយ​មានហ្រេមវើរ៍កដើម្បីសរសេរ Server ល្បីៗជាច្រើនដូចជា Express, Hapi.js, Meteor.js, Sails.js, Nest.js ជាដើម។

Node.js ប្រើម៉ាស៊ីនចាវ៉ាស្រ្កីបត៍ Google’s V8 Engine។ ហើយ Node.js ប្រើ Libuv សម្រាប់ការងារ File System, I/O និង Networking ជាដើម។ តាមពិតទៅ Node.js គ្រាន់តែជា Wrapper API មួយពីលើកូដ C++។ ខ្ញុំចង់មានន័យថាពេលដែលយើងសរសេរចាវ៉ាស្រ្កីបត៍ មិនមែនចាវ៉ាស្រ្កីបត៍ទេដែលត្រូវបានបម្លែងជាម៉ាស៊ីនកូដ(Machine Code)នោះ តែវាជាអ្នកដែលទៅ​ហៅ​កូដ C++ ឲ្យដំណើរការ។ បើយើងមើលលើ Repository យើងឃើញថាផ្នែករបស់ V8 ត្រូវបានសរសេរឡើងដោយ C++ ដល់ទៅជាង ៦៩% ហើយ Libuv វិញសរសេរដោយ C និង C++ ស្ទើរតែ ១០០% ទៅហើយ។ នេះក៏ជាមូលហេតុមួយដែលធ្វើឲ្យ Node.js ដំណើរការបានលឿន។ បើនិយាយពីមូលហេតុដែល Node.js អាចធ្វើរឿង I/O បានល្អវិញនោះគឺ Event Loop បើទោះជាចាវ៉ាស្រីបត៍ជាភាសា Single Threaded ក៏ដោយ។

Node.js Architecture

រឿងសំខាន់បំផុតមួយទៀតដែលជាផ្នែករបស់ Node.js គឺ NPM (Node Package Manager)។ NPM ជាផ្នែកដ៏សំខាន់ដែលដើរតួក្នុងដំណើរពេញនិយមរបស់ភាសាចាវ៉ាស្រី្កបត៍។ NPM ជា Registry ផ្ទុកកូដចាវ៉ាស្រ្កីបត៍ និងជា Manager គ្រប់គ្រង Package/Module កូដចាវ៉ាស្រ្កីបត៍។ មកដល់ពេលនេះ NPM ជា Registry ធំបំផុតក្នុងពិភពលោក(ប្រហែលក្នុងចក្រវាលទាំងមូលផងដែរព្រោះពេលនេះមិនទាន់មានការបញ្ចាក់ណាមួយពីវត្តមានរបស់មនុស្សក្រៅភពទេ ហើយបើមានមែនមិនប្រាកដថាសរសេរកូដដែរ 😂) ដែលផ្ទុក Package/Module ដែលអាចឲ្យគេអាចចែករំលែកកូដឲ្យប្រើបានយ៉ាង​ងាយបំផុត។

##Front-End

បច្ចេកវិទ្យាដែលប្រើសម្រាប់ Front-End តែងតែផ្លាស់ប្តូររហូត និងយ៉ាងឆាប់រហ័ស។ ដោយ​សារ​តែបែបនេះហើយបានជា Front-End មិនមែនជារឿងងាយស្រួលប៉ុន្មានទេ។ គេតែងតែត្រូវរៀនបន្តជាប់រហូតដើម្បីដើរទាន់សម័យកាល ក៏ដូចជាបច្ចេកវិទ្យាដែលមានប្រសិទ្ធភាព។ តែយ៉ាងណាវាក៏គួរឲ្យរំភើប និងរីករាយដែរព្រោះថាយើងនឹងបានរៀនរបស់ថ្មីជារឿយៗ និងប្រើសើរឡើងជាបន្តបន្ទាប់។

HTML (Hyper Text Markup Language) ដើរតួជាគ្រោង​សាងរបស់​វែបសាយ។ មក​ដល់​ពេលនេះ HTML ចេញដល់កំណែរ HTML5 ហើយដោយចេញមុខងារច្រើន និងដំណើរការបានរលូនជាងមុនជាង HTML4.1។ ខាងក្រោមនេះជាវែបសាយដំបូងគេបំផុតបង្អស់សរសេរ​​ដោយប្រើ HTML តែប៉ុណ្ណោះកាលពីឆ្នាំ ១៩៩២ ដោយ​​បីតា World Wide Web លោក Tim Berners-Lee និង HTML នៅផ្នែកខាងស្ដាំដៃ។

CSS (Cascading Style Sheets) ទទួលខុសត្រូវផ្នែកសម្រស់របស់វែបសាយ។ ដោយសារការសរសេរ Style ក្នុង Html ផ្ទាល់តែម្ដងមានភាពពិបាក និងមិនអាចប្រើឡើងវិញបាន គេក៏បានញែកស្ទាយ៍នេះចេញ។ Concept នេះគេបានហៅវាថា Separation of Concern (Presentation and Content) ដែលមានន័យថាគេត្រូវបែងចែកផ្នែកដែលមានទំនួលខុសត្រូវចេញពីគ្នា។ ការដែលធ្វើបែបនេះ វាពិតជាមានផលប្រយោជន៍ច្រើន។ ករណី HTML និង CSS នេះ ផលប្រយោជន៍ច្បាស់នោះគឺងាយស្រួសសរសេរ និងប្រើឡើងវិញបាន សរសេរស្ទាយ៍តែម្ដង់ប្រើបានគ្រប់ទំព័រ។

ចាវ៉ាស្រ្កីបត៍ (JavaScript) ជាអ្នកធ្វើឲ្យវែបសាយមានជីវិត។ រាល់សកម្មភាព មុខងារផ្សេងៗ លេងសំលេង && វីដេអូ Effect ​ផ្សេងៗដូចជា Dropdown ឫ Animation និងច្រើនទៀតត្រូវការចាវ៉ាស្ក្រីបត៍។ និយាយទៅចាវ៉ាស្រ្កីបត៍ជាបេះដូចនៃការអភិវឌ្ឍន៍វែបសាយសម័យថ្មីដែលមិនអាចខ្វះបាន។

CSS Frameworks

CSS Framework

យើងអាចសរសេរវែបសាយបានដោយប្រើបច្ចេកវិទ្យាទាំងបីខាងលើនេះ។ តែចង់មិនចង់ យើងជៀសមិនផុតពីត្រូវប្រើបណ្ណាល័យ ឫក៏ហ្រ្វេមវើរ៍កនោះទេ។ ប្រភេទហ្រ្វេមវើរ៍កដំបូងដែលគួរចាប់ផ្ដើមនោះគឺបណ្ណាល័យស្ទាយ៍ CSS។ ខ្ញុំចង់សំដៅដល់ហ្រ្វេមវើរ៍កដូចជាពពួក Twitter’s Bootstrap, Foundation, Bulma និង Tailwinds ជាដើម។ ជាទូទៅហ្រ្វេមវើរ៍កពពួកនេះយើងអាចបែងចែកជាពីរបានមាន Component-Based CSS និងមួយទៀតបែប Utility-First CSS។ ហេតុអីបានជាត្រូវប្រើហ្វ្រេមវើរ៍កពួកនេះ? ចម្លើយគឺ ភាពងាយស្រួល ចំណេញពេល​ ចំណេញកម្លាំង ស្អាត Responsive និងស្គាល់ Cross-Browser។ ភាគច្រើនជាហ្រេមវើរ៍កបែប Open Source នៅលើ Github។ ប្រសិនបើយើងត្រូវសរសេរវែបសាយដែលមានស្ទាយ៍បែប Customized ខ្លាំងនោះ យើងអាចក្លូន​ហ្រេ្វម​វើរ៍ក​ទាំងនេះមក ហើយកែស្ទាយ៍មុនយកមកប្រើបាន។

បងធំទាំងបីសម្រាប់ Front-End Development គឺ Angular, React និង Vue។ តែថ្មីៗនេះមានកូនពៅទើបលេចមុខមកមួយទៀត Svelte។ ជៀសមិនផុតទេបើត្រូវប្រើ​​​ UI ហ្រេ្វមវើរ៍កទោះបីជាចាប់អារម្មណ៍អីក៏ដោយ ក៏ចុងក្រោយអ្នកប្រហែលជាត្រូវប្ដូរមកប្រើមួយក្នុងចំណោម 4 នេះ។ ហើយម្យ៉ាងទៀតបងធំទាំងបីនេះមានចំណុចល្អ និងចំណុចមិនល្អដូចតែគ្នាទេទៅតាមស្ថានភាព និងករណីប្រើបាស់រៀងៗខ្លួន។

React vs Vue vs Angular vs Svelte

UI Front-End Frameworks

អ៊ែងគ្យូឡឺ(Angular)៖ រឿងដំបូងដែលត្រូវបញ្ជាក់នោះគឺ Angular.js និង Angular ជាហ្រ្វេមរើរ៍កពីរខុសគ្នា។ គេតែងតែច្រឡំគ្នាបើមិនបានដឹងរឿងរ៉ាវរបស់ Angular។ Angular.js ជាហ្រ្វេមវើរ៍ក​កំណែទី ១។ បើសរសេរ Angular ដោយគ្មាន .js គេចង់សំដៅដល់ហ្រ្វេម​វើរ៍ក​ចាប់ពីកំណែទី ២ ឡើងទៅ។ Angular.js​ ចេញដំបូងនៅឆ្នាំ ២០១០ ដែលទទួលបានប្រជាប្រិយភាពយ៉ាងខ្លាំងដោយកាលនោះ React និង Vue មិនទាន់ចេញទេ។ ក្រោយមកបន្ទាប់ពីត្រូវបាន Google ទិញ ហើយក្រុមដដែលដែលសរសេរ Angular.js សរសេរវាឡើងវិញម្ដងទៀត (Re-write from scratch)​ ដោយកែចំណុចជាច្រើន និងជាពិសេសប្រើ TypeScript វិញដែលធ្វើឲ្យកំណែទី ១ និងកំណែចាប់ពីទី ២ មកខុសគ្នាដាច់ស្រឡាស់តែម្ដង។ មកដល់ពេលនេះ Angular ដែលបានចេញមានដូចជា Angular 2, Angular 4, Angular 5, Angular 6, Angular 7, Angular 8 និងថ្មីៗ Angular 9។ កាលដែលរំលងកំណែទី ៣ គឺដោយសារតែ Routing Module បានចេញលឿនមុនគេដែលកាលនោះ Module ផ្សេងៗទើបតែចេញដល់កំណែទី ២ តែ Router ចេញដល់កំណែទី​ ៣ ទៅហើយ ទើបគេគិតថាបើ Angular 3 ហើយ Router កំណែទី 4 អ៊ីចឹងវាអាចនាំឲ្យច្រឡំបាន។ ហេតុដូច្នេះហើយបានជាគេមិនដាក់ជាកំណែទី ៣ ហើយរំលងទៅកំណែ Angular 4 តែម្ដងទៅ។ ចំណុចសំខាន់ៗដែលធ្វើឲ្យគេចូលចិត្ត Angular រួមមាន៖

  • Angular មានគ្រប់យ៉ាងមកជាមួយជាស្រេច។ វាមានមកគ្រប់មួយកំផ្លេរតាំងពី Navigator ទៅ HttpClient និងជាច្រើនទៀត។ តែវាក៏ជាចំណុចខ្សោយរបស់វាដែរ ព្រោះថាវាបានធ្វើឲ្យ Angular រាងធំជាងគេបន្តិចហើយ ហើយមិនមែនរាល់អ្វីទាំងអស់សុទ្ធតែត្រូវបានប្រើនោះទេ។
  • CLI — Command-Line Interface​ ធ្វើការបានច្រើន។ ដោយសារតែ Angular តម្រូវឲ្យយើងរៀបចំ Structure Project របស់យើងតាមរបៀប Angular ធ្វើឲ្យ CLI របស់ Angular អាចមាន​មុខងារសំខាន់ៗជាច្រើនតាំងពីបង្កើត Project, បង្កើត Class, Component, Directive, បង្កើត Module, Service ទៅដល់ Build Project អីជាដើមដែលវាបានបង្ករភាពងាយស្រួលមួយផ្នែកធំដែរ។
  • SoC — Separation of Concerns។ ខ្ញុំចង់សំដៅដល់ថា Angular បែងចែកដាច់ស្រឡាស់ចេញពីគ្នារវាង Html Template, Style CSS និង Component ដែលធ្វើឲ្យងាយស្រួលគ្រប់គ្រង និងកែសម្រួលកូដ។
  • Directive លទ្ធភាពដែលយើងអាច Extend Html បានងាយស្រួលដែលធ្វើឲ្យការសរសេរ UI មានភាពងាយស្រួល។
  • ប្រើ Structure ច្បាស់លាស់។ Angular ចែកជា Module ផ្សេងៗច្បាស់លាស់ដែលប្រាកដណាស់ជារឿងល្អ។​
  • TypeScript! TypeScript និយាយស្រួលស្ដាប់ទៅវាជាចាវ៉ស្ក្រីបត៍ដែលមាន Type។ TypeScript ជា Open Source Project របស់ Microsoft។ គេប្រើវិធី Transpile ដោយ Transpiler ប្រែពី TypeScript ទៅចាវ៉ាស្ក្រីបត៍។ ការដែល Angular ប្រើ TypeScript នាំឲ្យវាមានភាពងាយស្រួល ជាពិសេសសម្រាប់អ្នកដែលមិនចូលចិត្តភាសាបែប Dynamic Type។
  • DI — Dependency Injection ជាមធ្យោបាយមួយដែលគេប្រើដើម្បីចាក់បញ្ជូលទិន្នន័យ ឫ Dependencies ផ្សេងៗដោយស្វ័យប្រវត្តិដើម្បីឲ្យ Component ងាយស្រួលតេស្ត និងងាយស្រួលប្រើឡើងវិញ។
  • អ្នកប្រើច្រើន។ វាមានន័យថារាល់ពេលជួបបញ្ហាអី យើងងាយស្រួលក្នុងការរកដំណោះស្រាយ (ច្រើនតែមានគេធ្លាប់ជួបមុនយើងហើយ)។

រីអ៊ែក(React)៖ បង្កើតដោយ Facebook ហើយត្រូវបានប្រើដើម្បីសរសេរ Facebook និង Instagram ជាដើមតាំងតែឆ្នាំ ២០១១ និង ២០១២ មុននឹងបើកចេញឲ្យប្រើជាសាធារណៈនៅឆ្នាំ ២០១៣ មកម្ល៉េះ។ និយាយពីឥទ្ធិពលរបស់រីអ៊ែក អ្នកទាំងអស់គ្នាដឹងច្បាស់ហើយមើលតែ Facebook ទៅដឹងហើយ។ ដំបូងគេដែលត្រូវនិយាយនោះគឺរីអ៊ែកជាបណ្ណាល័យ មិនមែនជាហ្រ្វេមវើរ៍កទេ (គេបានលើកឡើងមកចឹង ញុំក៏មិនដឹងដែរដូចតែគ្នា​ 😂🤔)។ គេបានលើកឡើងថាគេចាត់ទុករីអ៊ែកជាបណ្ណាល័យព្រោះថារីអ៊ែកមិនមែនជាហ្រ្វេមវើរ៍ក MVC មិនបានរៀបចំ Structure របស់ Pr0ject របស់យើង ឫមានវេទមន្តអីទេ។ វាស្រដៀងនឹង jQuery ដែរ។ យើងប្រើវាដើម្បីតែជាជំនួយក្នុងការសរសេរ UI ប៉ុណ្ណោះ ដោយសរសេរជា Component​​ ដែលយើងអាចប្រើឡើងវិញច្រើនដងបាន។​ ចំណែកឯថាយើងរៀងចំគ្រោងកូដរបស់យើងយ៉ាងម៉េចនោះវាស្រេចតែយើងទេ។ រីអ៊ែកជម្រុញឲ្យយើងសរសេរផ្នែកផ្សេងផ្សេងៗជា Component។ រាល់រីអ៊ែក Component អាចជា Stateful Component(សរសេរជា Class) ឫក៏ Stateless Component(សរសរជា Function)។ ហើយបើនិយាយពីការគ្រប់គ្រងទិន្នន័យក្នុងរីអ៊ែកវិញ មានវិធីពីរគឺ State និង Props។ State សម្រាប់ផ្ទុកទិន្នន័យក្នុង Component ផ្ទាល់ឯ Props វិញសម្រាប់បញ្ចូនទិន្នន័យពី Component មួយទៅកាន់ Component មួយទៀត។ រីអ៊ែកសរសេរ Component ប្រើ JSX (JavaScript XML)​ តែប្រើតែ HTML ក៏បានដែរមិនចាំបាច់ទាល់ទេ JSX ទេ។ តែ JSX ជាវិធីដែលរីអ៊ែកប្រើដើម្បីសរសេរ XML បានក្នុងចាវ៉ាស្រ្កីបត៍។ ហើយមួយទៀតរីអ៊ែកប្រើ Virtual DOM ដើម្បីធ្វើឲ្យការប្រើប្រាស់ DOM មានភាពងាយស្រួល និងមានប្រសិទ្ធិភាពដោយអនុញ្ញាត្តិឲ្យយើងអាចរៀបចំ DOM ជា Tree បាន។ ចំណុចសំខាន់ៗដែលធ្វើឲ្យគេចូលចិត្តរីអ៊ែករួមមាន៖​

  • ត្រូវការអីប្រើនឹង មិនចាំបាច់ទាញមកទាំងអស់ដែលធ្វើឲ្យរីអ៊ែកមានទំហំមិនសូវធំ ឫមានកូដ​ដែលមិនត្រូវការដែលធ្វើឲ្យស្មុកស្មាញ។
  • មានបណ្ណាល័យជំនួយច្រើន និងសម្បូរបែបតាំងពីណាវីហ្គេហ្សិន (React Router) បណ្ណល័យជួយគ្រប់គ្រងទិន្នន័យ (Redux, Mobx, Alveron) បណ្ណាល័យជួយគ្រប់គ្រង Type (Flow-bin) និងបណ្ណាល័យផ្សេងៗជាច្រើន។
  • មិនសូវជាពីបាករៀនពេកដោយសាររីអ៊ែកសាមញ្ញ និងងាយស្រួលយល់។
  • សម្បូរ Tools និងរបស់ជំនួយច្រើន។ នេះក៏ដោយសារចំនួនអ្នកប្រើរីអ៊ែកមានច្រើនសន្ធឹកដែរដែលធ្វើឲ្យគេបង្កើតឡើងមកជារឿយៗ។
  • React Native អាចជាមូលហេតុចម្បងដែលធ្វើឲ្យគេជ្រើសរើសប្រើរីអ៊ែកជាជាងប្ដូរទៅវីយូ ឫហ្រ្វេមវើរ៍កផ្សេងទៀត។
  • ពេញនិយមខ្លាំង។ វាមានន័យថារាល់ពេលជួបបញ្ហាអី យើងងាយស្រួលក្នុងការរកដំណោះស្រាយ (ច្រើនតែមានគេធ្លាប់ជួបមុនយើងហើយ)។
  • សរសេរបែបចាវ៉ស្រ្កីបត៍សុទ្ធដោយប្រើ JSX តែបើចង់សរសេរជា TypeScript ក៏បាន។
  • សេរីភាពក្នុងការរៀបចំគ្រោងគម្រោងកូដរបស់យើង ដូច្នេះហើយវាមានភាពងាយស្រួលធ្វើតាមស្ទាយ៍ដែលយើងពេញចិត្ត មិនចាំបាច់ធ្វើតាមហ្រ្វេមវើរ៍ករហូត។
  • Create-React-App CLI ជួយឲ្យការបង្កើតប្រូជេកត៍ថ្មីមានភាពងាយស្រួល និងលឿន។

វីយូ(Vue)៖ សរសេរដោយលោក Evan You ដែលគាត់ធ្លាប់ធ្វើការនៅ​​ Google ហើយគាត់បានសរសេរគម្រោងជាច្រើនដោយប្រើ Angular.js។ ទោះបីជាចេញមករៀងក្រោយគេបន្តិចមែន(ចេញឆ្នាំ ២០១៤) តែវីយូទទួលបានចំណាប់អារម្មណ៍យ៉ាងឆាប់រហ័ស។ ផលចំនេញនៃការចេញក្រោយគេគឺ Good Parts of Angular + Good Parts of React​​ + Other good practices = Vue! និយាយស្រួលស្ដាប់គឺវីយូបានច្បិចយកផ្នែកល្អរបស់រីអ៊ែក និងអ៊ែងគ្យូឡឺក៏ដូចជាហ្រ្វេមវើរ៍កនិងបណ្ណាល័យផ្សេងៗទៀតមកច្របាច់បញ្ចូលក្នុងហ្វ្រេមវើរ៍ករបស់ខ្លួនដូចជា Directives (ប្តូរពី ng- ទៅ v- វិញ), Two-Way Data Binding ដែលពេញនិយមរបស់អ៊ែងគ្យូឡឺ និង Virtual DOM របស់រីអ៊ែក ប្រើ Templates ដូចអ៊ែងគ្យូឡឺ និងមាន Render Function ដូចរីអ៊ែក។ ចំណុចសំខាន់ៗដែលធ្វើឲ្យគេចូលចិត្តវីយូរួមមាន៖​

  • មិនពីបាករៀន​(Shallow learning curve) ដោយវាមិនមានអីច្រើនជាង Html និង ES5 ចាវ៉ាស្ក្រីបត៍ទេ មិនមាន Structure ស៊ាំញ៊ាំអីច្រើនទេ។
  • មានមាឌតូច ល្បឿនលឿន​ និងងាយស្រួល Scale-up
  • មាន Module សំខាន់ៗដូចជា វីយូរៅទ័រ(Vue Router) សម្រាប់ណាវីហ្គេហ្សិន, វីយូអ៊ែក្ស(Vuex) សម្រាប់គ្របគ្រង State ជាដើមមកជាស្រេចដោយ Vue.js ផ្ទាល់តែម្ដងដែលធ្វើឲ្យវាដំណើរការបានស្រួល និងមានប្រសិទ្ធិភាព។
  • ទទួលបានភាពពេញនិយមយ៉ាងឆាប់រហ័ស។ បើមើលទៅលើចំនួនផ្កាយនៅលើ Github វិញ វាបានវ៉ាដាច់រីអ៊ែកតាំងពីយូរមកហើយ ហើយវ៉ាដាច់អ៊ែងគ្យូឡឺយ៉ាងឆ្ងាយ (ដោយសារអ្នកអភិវឌ្ឍន៍ចិនចុចឲ្យច្រើន​ 😂)។
  • CLI របស់វីយូជួយធ្វើការបានច្រើនតាំងពីបង្កើតគម្រោងដល់បង្កើត Component, ដំណើរការ និង Build ជាដើម។

##ការអភិវឌ្ឍន៍ Back-End ដោយប្រើចាវ៉ាស្ក្រីបត៍

បន្ទាប់ពីការបញ្ចេញ Node.js ជាសាធារណៈកាលពីឆ្នាំ 2009 មក ការសរសេរចាវ៉ាស្ក្រីបត៍ក្រៅ Browser អាចទៅរួចបាន។ ការសរសេរ Server ដោយប្រើចាវ៉ាស្ក្រីបត៍​បានទទួលភាពពេញនិយមយ៉ាងឆាប់រហ័សអាចចាត់ទុកបានថាជាចំណុចសំខាន់ថ្មីមួយក្នុង Web Development។ គេអាចប្រើ Node.js សរសេរ Server ទទេៗក៏បានដែរតែប្រាកដណាស់ត្រូវធ្វើការច្រើននិងត្រូវមានចំណេះដឹងច្រើន។ និយាយស្រួលស្ដាប់បើធៀបនឹងចាវ៉ា គឺដូចសរសេរ Back-End ចាវ៉ាដោយមិនប្រើហ្វ្រេមវើរ៍កអញ្ចឹងដែរ។ អញ្ចឹងហើយគេតែងតែប្រើ​ហ្វ្រេមវើរ៍កមកជំនួយ។ បើមើលទៅមានហ្វ្រេមវើរ៍កច្រើនណាស់ដែលយើងអាចប្រើបានដើម្បីសរសេរ Node.js Server បាន។ ខាងក្រោមនេះជាហ្វ្រេមវើរ៍កមួយចំនួនដែលពេញនិយម៖

អីក្សផ្រេស (Express.js)៖ ចេញកាលពីឆ្នាំ ២០១០ វាជាហ្វ្រេមវើរ៍កដែលមានភាពពេញនិយមជាងគេមួយសម្រាប់ Node.js។ “Fast, unopinionated, minimalist web framework for Node.js” នេះជា Slogan របស់ Express.js។ វាពិតជាត្រឹមត្រូវណាស់។ អុីចផ្រេសពិតជាមានលក្ខណៈបែបនេះមែន។ គ្រប់យ៉ាងងាយស្រួល និងមិនរញ៉េរញ៉ៃច្រើនទេ។ វាមានលក្ខណៈស្រដៀង​នឹង React ដែរ។ ខ្ញុំចង់សំដៅដល់ការដែលយើងត្រូវរក Middleware មកប្រើតាមតែយើងត្រូវការ ហើយខ្ញុំប្រាប់ទៅចុះថាសម្បូរណ៍ច្រើនណាស់។ ហើយបើនិយាយពីពេលរៀនសរសេរវិញក៏មិនប្រើពេលយូរដែរ។

ហាបភី (Hapi.js)៖ ហាប់ភីត្រូវបានបង្កើតដោយក្រុមវិស្វរកររបស់ Walmart ដោយដើម្បីដោះស្រាយបញ្ហាដែលមានអ្នកមកទិញរបស់នៅ Walmart ច្រើនៗដូច​ជា​ថ្ងៃ Black Friday ជាដើមដែលបានបង្ករជាបញ្ហាដល់ Server របស់ Walmart។ មានគេបានលើកឡើងមកថា វាស្រដៀងនឹង Expess.js ដែរដោយមានប្រព័ន្ធ Plugin Middleware ខ្លាំង តែគ្រាន់តែវាងាយស្រួល Scale ជាង Express.js និងល្អសម្រាប់សរសេរ Server App បែប Enterprise។ បើមើលពី Slogan របស់ហាប់ភី “hapi enables developers to focus on writing reusable application logic instead of spending time building infrastructure.”។

សែល្ស៍ (Sails.js)៖ ជាប្រភេទ Server Side ហ្វ្រេមវើរ៍កបែប MVC (Model-View-Controller) ស្រដៀងទៅនឹង Ruby on Rails និង Laravel។ វាត្រូវបានបង្កើតដោយក្រុមដែលបានបង្កើត Express.js ដោយប្រើ Express.js នៅពីក្រោយ។ វាមកជាមួយ ORM​ (Object-Relational-Mapping) ដែលផ្ដល់ភាពងាយស្រួលដល់ការប្រើដេតាបេស និង WebSocket ​(Socket.IO) មកជាមួយស្រេច។ ដោយសារ Sails.js ប្រើ ORM និង Socket.IO ចឹងហើយ​វា​មានសម្ថតភាពអាចបង្កើត REST APIs ដោយអត្តនោមតតែម្ដងទៅតាម Model របស់ Object និងគាំទ្រ Realtime Communication (តែពីរខាងលើក៏អាចធ្វើបានដូចគ្នា តែត្រូវតម្លើងខ្លួនឯង)។

នែស្ស (Nest.js)៖ មកក្រោយគេតែទទួលបានភាពពេញនិយមខ្លាំងដែរជាពិសេសសម្រាប់អ្នកដែលប្រើ​អ៊ែងគ្យូឡឺ។ វាក៏ផ្ដោតសំខាន់លើរឿងគ្រោងរបស់ Project ដូចនឹង Hapi.js ដែរ។ បើមើលទៅគ្រោងសាងរបស់វាទៅ វាពិតជាស្រដៀងទៅនឹងអ៊ែងគ្យូឡឺខ្លាំងណាស់។ បើមើលចំនួនផ្កាយនៅលើ Github ទៅមានចំនួនច្រើនជាង Hapi និង Sails ច្រើនហើយទាំងដែលមកក្រោយផង។

##ការអភិវឌ្ឍន៍ Mobile Hybrid/Hybrid Native Cross-Platform Application

មុននឹងនិយាយចូលដល់រឿងនេះ សុំនិយាយពីពាក្យដែលត្រូវប្រើបន្តិច។ Native App ជាកម្មវិធីដែលបង្កើតដោយប្រើហ្រ្វេមវើរ៍កដើមរបស់ iOS ឫ Android ផ្ទាល់។ Hybrid App សំដៅដល់កម្មវិធីដែលបង្កើតដោយប្រើ WebView ដូចជា​អាយអូនិក ​(Ionic) ជាដើម ចំណែកឯ​កម្មវិធី​ដែលបង្កើតដោយរីអ៊ែកណេទីហ្វ (React Native) និង​ណេទីហ្វស្រ្កីបត៍ ​(NativeScript) ​វិញ គេហៅវាថា Hybrid Native App។ មួយទៀតដែលត្រូវនិយាយដល់នោះគឺប្រព័ន្ធប្រតិបត្តិការ។ មកទល់ពេលនេះ វាច្បាស់ហើយថាប្រព័ន្ធប្រតិបត្តិការសម្រាប់ទូរស័ទ្ទមានតែពីរធំៗទេគឺ អាយអូអែស(iOS) និងអ៊ែនដ្រយដ៍ (Android)។ រាល់ពេលដែលខ្ញុំនិយាយដល់ Cross-Platform ខ្ញុំចង់សំដៅដល់កម្មវិធីដែលអាចដំណើរការបានលើប្រព័ន្ធប្រតិបត្តិការទាំងពីរនេះ។ ចំណែកឯវីនដូស៍(Windows) ក្រុមហ៊ុន Microsoft ផ្ទាល់បានទទួលស្គាល់ហើយថាមិនអាចទៅរួចជាមួយប្រព័ន្ធប្រតិបត្តិការទាំងពីរខាងលើ និងបានស្លាប់បាត់ហើយសម្រាប់ប្រព័ន្ធប្រតិបត្តិការទូរស័ព្ទ។

Ionic-vs-React-Native-vs-NativeScript.png

Cross Platform Mobile Frameworks

អាយអូនិក(Ionic)៖ ចេញតាំងពីឆ្នាំ 2013 ចេញមកមុនរីអ៊ែកណេទីហ្វ(React Native) និងណេទីហ្វស្ក្រីបត៍(NativeScript)។ មកដល់ពេលនេះចេញដល់កំណែរទី 4 ហើយ។ ដោយនៅកំណែរថ្មីនេះមានការផ្លាស់ប្ដូរធំមួយនោះគឺប្រើ Web Components ហើយក្រុម Ionic ថែមទាំងបានបង្កើត Stencil ផងដែរដើម្បីសម្រួលដល់ការចាប់យក Web Components នេះឯង។ ចឹងវាមានន័យថាយើងនឹងអាចប្រើហ្វ្រេមវើរ៍កផ្សេងក្រៅពី Angular មកសរសេរ Ionic ក៏បានដែរ។

គិនិតពីក្រោយ Hybrid App នោះគឺបង្កើតវែបសាយដែលមានរូបរាងដូចកម្មវិធីហើយញ៉ាត់បញ្ចូល WebView របស់ Native App​ ដើម្បីអាចឲ្យវែបសាយក្លាយជាកម្មវិធីបាន។ តាមពិតទៅត្រូវនិយាយចេញពី PhoneGap បានត្រូវ។ ហ្រ្វេមវើរ៍ក Open Source PhoneGap បង្កើតដោយក្រុមហ៊ុន Nitobi ដោយមើលឃើញថាប្រសិនបើបង្កើត Template WebView ក្នុង Native App ដែលអាចដំណើរការបាន នោះនឹងអាចធ្វើឲ្យដំណើរបង្កើត Hybrid App មានភាពងាយស្រួលឡើង។ PhoneGap ទទួលបានប្រជាប្រិយភាពយ៉ាងឆាប់រហ័ស។ ក្រោយមកទៀត Adobe មើលឃើញពីសារប្រយោជន៍របស់ PhoneGap ដែលអាចយកមកប្រើជួយធ្វើឲ្យ DreamWeaver អាចបង្កើតកម្មវិធីបានទើប Adobe បានទិញយកក្រុមហ៊ុន Nitobi ហើយបានយក PhoneGap មកកាន់ Apache Foundation។ Apache បានប្ដូរវាទៅជា Apache Cordova។ Cordova ត្រូវបានគេយកទៅប្រើ ហើយគេអាចប្រើ Web Technology ផ្សេងៗដើម្បីសរសេរ Hybrid App បាន។ Ionic ត្រូវបានបង្កើតឡើងដោយយកមធ្យោបាយសរសេរ Hybrid App ល្អៗមករួមគ្នា។ Ionic ប្រើ Cordova សម្រាប់ជា Native App Template ដដែលដោយគ្រាន់តែធ្វើឲ្យប្រសើរឡើង និងប្រើ Capacitor ដើម្បីអាចប្រើមុខងាររបស់ Native​(Native Bridge) បានដូចជា Sensor, Camera ជាដើម។ Ionic បានបង្កើត UI Component ដែលមានលក្ខណៈជា Cross-Platform ដូចជា Tab, Form, Button ជាដើម។ Ionic បាន​រើស​យក​ Angular ជាហ្វ្រេមវើរ៍កសម្រាប់សរសេរវែបសាយ។ Ionic បានសម្រួលការបង្កើតមុខងារផ្សេងៗបន្ថែមទៀតដូចជា Push Notification ជាដើមដែលត្រូវ Ionic ហៅថា Ionic Platform។ ចំណុចល្អរបស់ Ionic៖

  • ចំណាយពេលតិចក្នុងការអភិវឌ្ឍន៍ និងចំណាយធនធានតិចជាង។
  • បើសិនជាអ្នកចង់បានកម្មវិធីដែលមិនទាមទារល្បឿនដំណើរការលឿនពេក និងត្រូវមានជាវែបសាយផងនោះ Ionic ជាជម្រើសមួយល្អ។
  • អាចសរសេរជា Progressive Web App បាន។
  • អាចបង្កើនបទពីសោធន៍ប្រើប្រាស់កម្មវិធីគ្រប់ប្រព័ន្ធប្រតិបត្តិការបាន ត្រង់នេះមានន័យថាគ្រប់ប្រតិបត្តិការទាំងអស់អាចមានស្ទាយ៍ដូចគ្នាបានដែលមិនបង្កើតជាចម្ងល់ដល់អ្នកប្រើប្រាស់។
  • មាន UI Component សម្បូរណ៍បែបដែលអនុញ្ញាត្តិឲ្យយើងអាចបង្កើតកម្មវិធីបានលឿន។

រីអ៊ែកណេទីហ្វ(React Native)៖ រីអ៊ែកណែទីហ្វ!!! បន្ទាប់ពីចេញរីអ៊ែកជាសាធារណៈ​រួចមក ក្រុម Developer នៅហ្វេសប៊ុកបានបន្តស្រាវជ្រាវរកវិធីដែលអាចបង្កើតកម្មវិធិដោយប្រើបច្ចេក​វិទ្យាវែបមកសរសេរ។ ពីរឆ្នាំបន្ទាប់មកនៅឆ្នាំ ២០១៥ នៅក្នុងសន្និសិទ្ធ​រីអ៊ែក​២០១៥​(React.js Conf 2015) ហ្វេសប៊ុកបានប្រកាសរីអ៊ែកណេទីហ្វ។

React Native ដូចគ្នាទៅនឹង React ដែរគ្រាន់តែ React Native បង្កើត View របស់ Native App ដោយប្រើចាវ៉ាស្ក្រីបត៍។ កម្មវិធិ Hybrid Native ដែលបង្កើតដោយរីអ៊ែកណេទីហ្វមានលក្ខណៈដូចទៅនឹង Native App ច្រើនទាំងបទពិសោធន៍ប្រើប្រាស់ ល្បឿនដំណើរការអាចទទួលយកបាន(មិនអាចប្រៀបនឹង Native App បានតែក៏ប្រសើរជាង Hybrid ច្រើន)។ របៀបសរសេរគ្រប់យ៉ាងគឺដូចគ្នាទៅនឹង React.js ច្រើន គ្រាប់យ៉ាងជា Component ប្រើ JSX មាន State && Props អាចប្រើ Redux, Mobx ជាដើមសម្រាប់ State Management បាន ហើយត្រូវការអីប្រើនឹង។ តែបើ Navigation វិញខុសគ្នាបន្តិច គឺថាកម្មវិធីមិនអាចធ្វើដូចវែបបានទេ ក៏ព្រោះតែ​ថា​បទពិសោធន៍​វែប និងកម្មវិធីវាខុសគ្នា។ ហើយរីអ៊ែកណែទីហ្វមាន UI Component មកជា​មួយ​ផងដែរដែលយើងអាចយកមកសរសេរ និងកែស្ទាយ៍ថែមថយតាមដែលយើងត្រូវការ។ ចំណុចល្អរបស់រីអ៊ែកណេទីហ្វ៖

  • Hybrid Native App ដំណើរការបានល្អជាង Hybrid App ហើយក៏អាចទទួលយកបានបើធៀបទៅនឹង Native App។
  • Code Base តែមួយគឺថាស្ទើរតែដូចគ្នាទាំងស្រុងហើយសម្រាប់ iOS និង Android ហើយអនុញ្ញាត្តិឲ្យយើងអាចសរសេរកូដដើមផ្ទាល់របស់ iOS និង Android បាន។
  • React.js ជាមូលហេតុមួយផងដែរដែលធ្វើឲ្យគេជ្រើសរើសយក React Native។ វាមានន័យថារៀនតែម្ដងអាចយកចំណេះដឹងមកសរសេរទាំង Hybrid Native App ផង និងវែបផង។
  • សម្បូរណ៍បណ្ណាល័យជំនួយ និងមានវិធីប្រើច្រើនពាសពេញអុីនធឺណិត (ច្រើនមែនទែន)។
  • មានហ្វេសប៊ុកជាអ្នកនៅពីក្រោយ និងតែងតែមានដំណើរវិវត្តនីទៅមុខជានិច្ច។
  • មានប្រជាប្រិយភាពខ្ពស់សម្រាប់ Cross-Platform Application Development។ វាមានន័យថារាល់ពេលជួបបញ្ហាអី យើងងាយស្រួលក្នុងការរកដំណោះស្រាយ(ច្រើនតែមានគេធ្លាប់ជួបមុនយើងហើយ)។

ណេទីហ្វស្ក្រីបត៍​(NativeScript)៖ កម្មវិធីដែលសរសេរដោយប្រើ NativeScript ជាកម្មវិធីបែប Hybrid Native ដូច React Native ដែរ។ ចាំបានថាមុនពេលខ្ញុំចាប់ផ្ដើមសរសេរ​ React Native ខ្ញុំបានសាកលេងជាមួយ NativeScript បានខ្លះដែរកាលពីពេលនោះព្រោះថាខ្ញុំត្រូវការសរសេរ Hybrid Native App ហើយខ្ញុំកាលនោះសរសេរ Angular 2 បានមួយរយះដែរ។ ខ្ញុំបានគិតថាវាប្រហែលជាស្រួលជាងមិនចាំបាច់រៀន React.js ទេ ហើយសរសេរ NativeScript ជាមួយ Angular តែម្ដងទៅ។ តែចុងក្រោយខ្ញុំត្រូវប្ដូរមក React និង React Native វិញដោយសារកាលនោះ NativeScript នៅក្មេងពេក និងមិនទាន់មានអ្នកប្រើច្រើននៅឡើយ។ ចឹងហើយខ្ញុំត្រូវប្ដូរទៅ React Native ដែលមានអ្នកប្រើច្រើន និងសម្បូរធនធាន។ តែយ៉ាងណាក៏ដោយមួយរយៈចុងក្រោយនេះ NativeScript ដូចមានសន្ទុះគួរសមដែរ និងមានអ្នកប្រើច្រើនគ្រាន់បើដែរ។ ដូច React Native ដែរ វាមិនបានប្រើ Web View ដូច Hybrid App ទេ។

ចំណុចល្អរបស់ NativeScript ៖

  • Hybrid Native App ដំណើរការបានល្អជាង Hybrid App ហើយក៏អាចទទួលយកបានបើធៀបទៅនឹង Native App
  • Code Base តែមួយគឺថាស្ទើរតែដូចគ្នាទាំងស្រុងហើយសម្រាប់ iOS និង Android ហើយអនុញ្ញាត្តិឲ្យយើងអាចសរសេរកូដផ្ទាល់របស់ iOS និង Android បាន
  • អាចប្រើ Angular ក៏បាន ឫក៏ប្រើ Vue.js ក៏បានដែរ។ ដឹងស្រាប់ហើយ Vue.js ពេញនិយមខ្លាំង ហើយអ្នកដែលសរសេរ Vue.js ប្រហែលជាចាប់អារម្មណ៍ NativeScript ច្រើន។
  • មាន UI Component មកជាមួយស្រាប់ដែរ។

ការប្រៀបធៀបគ្នា React Native vs. Flutter vs. Ionic vs. NativeScript vs PWA ដោយលោក Maximilian Schwarzmüller៖ https://academind.com/learn/flutter/react-native-vs-flutter-vs-ionic-vs-nativescript-vs-pwa

##ការអភិវឌ្ឍន៍កម្មវិធី Desktop ដោយប្រើចាវ៉ាស្រ្កីបត៍

កម្មវិធីកុំព្យូទ័រប្រហែលជាមិនមែនជាចំណាប់អារម្មណ៍របស់មនុស្សភាគច្រើនប៉ុន្មាននោះទេនៅពេលបច្ចុប្បន្ននេះ តែចូរកុំភ្លេចថាមនុស្សគ្រប់គ្នាសុទ្ធសឹងតែមានកុំព្យូទ័រប្រើទៅហើយសព្វថ្ងៃនេះ។ វានៅតែជាផ្នែកសំខាន់មួយ និងមានចំនែកទីផ្សារធំដដែល។ ហើយបើនិយាយដល់ការអភិវឌ្ឍន៍​កម្មវិធី​កុំព្យូទ័រ​វិញ គេប្រហែលនឹកដល់ស៊ីនិងស៊ីផ្លាស់ៗ(Qt, JUCE ជាដើម) ចាវ៉ា​(Swing, JavaFX ជាដើម) ឫ​ផៃថុន​(PyGUI, PyQt ជាដើម) ឫវីហ្សួលបេស៊ីកច្រើនជាងមើលទៅ។ ទទួលស្គាល់ វាជាការពិត។ តែបើមើលពីចាវ៉ាស្រ្កីបត៍វិញក៏មិនណយដែរ។

ដូចខ្ញុំបានលើកឡើងខាងលើម្ដងហើយ ភាសាចាវាស្រ្កីបត៍អាចជូនយើងបានទៅដល់គ្រប់កន្លែងរួមទាំងការសរសេរកម្មវិធីកុំព្យូទ័រផងដែរ។ សម្រាប់ការអភិវឌ្ឍន៍កម្មវិធីកុំព្យូទ័រ ខ្ញុំសុំនិយាយដល់ហ្រ្វេមវើរ៍កពីរដែលធ្លាប់បានលេងមកបានខ្លះគឺអេឡិចត្រុង(Electron.js)។ តាមពិតទៅមានហ្រ្វេមវើរ៍កច្រើនទៀត តែបើនិយាយជាទូទៅទៅវាមានតែអេឡិចត្រុងនឹងទេ។

អេឡិចត្រុង(Electron.js)៖ ដំបូងមានឈ្មោះថា AtomShell តែក្រោយមកប្ដូរជាអេឡិចត្រុងវិញ។ សរសេរដោយ Github និងបញ្ចេញឲ្យប្រើប្រាស់ជាសាធារណៈកាលពីឆ្នាំ២០១៣។ វាត្រូវបានគេប្រើប្រាស់យ៉ាងច្រើនណាស់ដែរ។ អេឡិចត្រុងប្រើក្រូមៀមវី 8​(Chromium ​​V8) និង​ប្រើ​ណូដ​(Node.js) មករួមគ្នាដើម្បីបង្កើតជាកម្មវិធីកុំព្យូទ័រដែលអាចដំណើរការគ្រប់ផ្លេតហ្វរ៍មបាន ទាំងវីនដូស៍(Windows) ម៉េកអូអេស(MacOS) និងលីនុក្ស(Linux)។ ចំណេះដឹងដែលទាមទារសម្រាប់សរសេរអេឡិចត្រុងបានមិនមានអីច្រើនទេក្រៅពី Html, CSS និងចាវ៉ាស្រ្កីបត៍ ហើយយើងអាចប្រើហ្វ្រេមវើរ៍ក Front-End មកជួយសរសេរបាន។ កម្មវិធីមួយចំនួនដែលប្រើអេឡិចត្រុង៖ Visual Studio Code, Atom,​ Slack, Postman ជាដើមនឹងសុទ្ធតែប្រើ​អេឡិចត្រុង​(Electron.js)។ ញាក់សាច់!!

##សរុបសេចក្ដី ចាវ៉ាស្ក្រីបត៍ ចាវ៉ាស្ក្រីបត៍! សម្រេចសម្រួចទៅចូលចិត្តឫមិនចូលចិត្តក្ដី យើងត្រូវទទួលស្គាល់ថា វាពិតជានៅគ្រប់ទីកន្លែងគ្រប់ Stack តាំងពី Front-End, Back-End, Mobile Application, Desktop Application និងច្រើនទៀត។ បើចង់មានលទ្ធភាពអាចធ្វើបានច្រើនគ្រប់ផ្នែក ចាវ៉ាស្ក្រីបត៍ជាជម្រើសល្អ។ សម្រាប់ខ្ញុំដំបូងឡើយគិតថាពេលចេះចាវ៉ាស្ក្រីបត៍ហើយនឹងបន្តទៅភាសាផ្សេងៗតទៀតដូចជា C++, Go, Rust, Elixir ជាដើមតែមកទល់ថ្ងៃនេះនៅបន្តរៀនចាវ៉ាស្ក្រីបត៍នៅឡើយទេ 😅😅។

ចំនួនអាន៖ 119
ចែករំលែក៖
រូបភាពជ្រើសរើស
កំពុងឡូដ...
អត្ថបទ​ពេញនិយម
Article's thumbnail

ការប្រើប្រាស់ Dependency ក្នុងការ​សរសេរសូហ្វវែរ៍

Article's thumbnail

ដំណើរកម្សាន្តបោះតង់ និងឡើងជួរភ្នំឱរ៉ាល់របស់ខ្ញុំ

Article's thumbnail

ពេលធ្វើ Software Project មិនគួររំលងរបស់ទាំងអស់នេះ

Article's thumbnail

មានអ្វីកើតឡើងពេល Apple ប្ដូរមក ARM?

Article's thumbnail

អ្វីទៅ UX/UI?

អត្ថបទ​ថ្មីៗ
Article's thumbnail

ការប្រើប្រាស់ Dependency ក្នុងការ​សរសេរសូហ្វវែរ៍

Article's thumbnail

លាហើយបណ្ដាញសង្គម

Article's thumbnail

រឿងដែលកំពុងតែកើតឡើងមកលើ Intel

Article's thumbnail

ចាវ៉ាស្ក្រីបត៍ក្នុងប្រៅស៍ស័រ

Article's thumbnail

គួរប្រើ Storage មួយណាសម្រាប់វែបសាយ?

You've reached singularity, the beginning of time!