Imba هي لغة برمجة مفتوحة المصدر أنشأها Scrimba خصيصًا لتطوير تطبيقات الويب. يتم تجميعها في JavaScript وقادرة على العمل ضمن النظام البيئي الحالي JS. نحن نتحدث ، على سبيل المثال ، عن Node.js ، حول npm ، حول Webpack.
تتمثل القوة الرئيسية لبرنامج Imba في أن هذه اللغة سوف تتيح لك إنشاء تطبيقات أسرع بكثير من تلك التي تعتمد على المكتبات التي تستخدم تقنية Virtual DOM ، مثل React و Vue. يتم تحقيق مكاسب أداء التطبيق من خلال الطريقة التي يعمل بها Imba مع تحديثات DOM. تفاصيل حول هذا يمكن العثور عليها
هنا .
يقول مؤلف هذه المادة ، المؤسس المشارك لمشروع Scrimba ، إنه يستخدم Imba منذ عدة سنوات. ووفقا له ، فإن الكتابة بهذه اللغة هي متعة حقيقية ، لأنها ، بالمقارنة مع JavaScript ، تحتوي على صيغة أنظف ، مما يحسن من قراءة الكود.
هذه المادة عبارة عن دليل للإمبا للمبتدئين ، حيث سيسمح لك تطويرها بالبدء في إنشاء تطبيقات بسيطة. أولاً ، سيتم الكشف عن أساسيات اللغة هنا ، وسيتم النظر في تطوير واجهات المستخدم بمساعدتها. سيُظهر على الفور إعداد بيئة التطوير للبرمجة على Imba.
حول المشاريع التي تستخدم Imba
قبل الدخول في الشفرة ، أود أن ألفت انتباهكم إلى حقيقة أن Imba ليس مثل لغة غريبة أخرى تم تجميعها في JS وتستخدم حصريًا في مشاريع الهواة. كما أنها تستخدم في التطبيقات الخطيرة للشركات الكبيرة.
مثال على تطبيقه هو منصة دعم
مزاد الأسماك في أيسلندا. في هذا البلد ، تمثل تجارة الأسماك حوالي 1.6 ٪ من الناتج المحلي الإجمالي ، وهو ما يقرب من 390 مليون دولار.
مزاد الأسماك الأيسلنديةمثال آخر هو منصة التدريب
Scrimba.com ، حيث يتم استخدام
Imba على أجزاء العميل والخادم من المشروع. تعتمد قابلية استخدام هذا النظام الأساسي ، الذي يعتمد على تطبيق معقد ، اعتمادًا كبيرًا على قدرة Imba على مزامنة تغييرات DOM بسرعة.
منصة Scrimba.comنتيجة لذلك ، يمكننا القول أن اللغة التي ستلتقي بها اليوم مناسبة لتطوير مشاريع بمقاييس مختلفة.
بناء الجملة
يشبه بناء جملة Imba جافا سكريبت ، لكن لغات أخرى مثل Ruby و Python لها أيضًا تأثير. ربما سيتم اعتبار ميزات بناء جملة Imba ملائم كمثال. يوجد أدناه دالة JS بسيطة تقوم بإرجاع أكبر رقمين تم تمريرها إليها ، أو إذا كانت هذه الأرقام متساوية ،
false .
function findGreatest(num1, num2) { if (num1 > num2) { return num1 } else if (num2 > num1){ return num2 } else { return false } }
اكتب الآن نفس الشيء على Imba.
def findGreatest num1, num2 if num1 > num2 num1 elif num2 > num1 num2 else false
ربما مقارنة هذين المثالين ، يمكنك أن ترى على الفور الاختلافات بين Imba وجافا سكريبت. وهي ، على النحو التالي:
function يتحول إلى def . function استبدال function الكلمة المفتاحية def .- عدم وجود أقواس. معلمات الدالة غير محاطة بأقواس. في Imba ، في الواقع ، نادراً ما تكون هناك حاجة إلى أقواس ، على الرغم من أنه يمكنك استخدامها إذا أردت.
- المسافة البادئة. تلعب المسافة البادئة دورًا مهمًا للغاية في Imba. وهذا يعني أن ليست هناك حاجة الأقواس مجعد هنا.
- مفقود
return الكلمة. في Imba ، يتم تنفيذ القيم المرتجعة من الدوال بشكل ضمني ، أي ليست هناك حاجة للكلمة الرئيسية المرتجعة. إرجاع Imba تلقائيًا تعبير الوظيفة الأخير.
هذا لا يعني أن ميزات بناء الجملة الموضحة أعلاه هي أهم جانب في Imba ، ولكنها تجعل الكود أكثر إيجازًا من الكود المشابه المكتوب في JavaScript. ستصبح هذه الميزة أكثر وضوحًا أثناء تقدمنا عبر المواد.
تصميم واجهة المستخدم
دعونا نتحدث عن إنشاء واجهات المستخدم باستخدام Imba. في الواقع ، تم إنشاء هذه اللغة فقط لهذا الغرض. على وجه الخصوص ، هذا يعني أن العقد DOM مدمجة في اللغة في شكل ما يسمى "كائنات من الدرجة الأولى".
إذا كانت لديك خبرة في تطوير React ، فيمكنك مراعاة هذه الميزة من Imba كما لو أن Imba لديها نسختها الخاصة من JSX مدمجة في اللغة.
اطلع على التعليمة البرمجية التالية ، حيث يتم استخدام مكتبة React لعرض زر وعرض رسالة إلى وحدة التحكم عند النقر فوق هذا الزر.
class App extends React.Component { logOut() { console.log('button clicked!') } render() { return ( <div className="container"> <button onClick={this.logOut}>click me!</button> </div> ) } }
إذا قمت بإعادة كتابة هذا على Imba ، فستحصل على ما يلي.
tag App def logOut e log 'button clicked!' def render <self.container> <button :tap.logOut> 'Click me!' Imba.mount <App>
دعنا نقارن هاتين المقتطفات البرمجية. وهي ، نولي الاهتمام للميزات الثلاث التالية:
- العلامات المضمنة. لاحظ أن إنشاء
class App extends React.Component تم تحويل class App extends React.Component إلى نموذج أبسط بكثير - tag App . الكلمة الأساسية tag مضمنة في اللغة. علامات DOM مدمجة أيضًا. - عدم وجود علامات إغلاق. نظرًا لأن محاذاة الخط تحدد بنية البرنامج ، فلن تحتاج إلى إغلاق العلامات (على سبيل المثال ، استخدام
</button> ). هذا يسرع إدخال نص البرنامج ويقلل من حجمه. - بناء جملة فئة بسيطة. يبسط Imba العمل مع فئات HTML. وهي ، بدلاً من البناء المرهق لـ
className="container" يكفي إضافة .container إلى العلامة نفسها.
ربما لاحظت أيضًا ميزات معالجات الأحداث في Imba. وهي ، نربط المعالج المقابل بالزر باستخدام
:tap.logOut ، يُستخدم بدلاً من
onClick={this.logOut} . هذه مجرد واحدة من عدة طرق للتعامل مع الأحداث القادمة من المستخدم. تفاصيل حول هذا يمكن العثور عليها
هنا .
العمل مع البيانات
الآن دعونا نتحدث عن العمل مع البيانات في Imba. يوضح المثال التالي تطبيق React ، في حالة مكون
App الذي يوجد به متغير
count يساوي 0. تنخفض قيمة هذا المتغير أو تزيد عن طريق النقر فوق الأزرار المقابلة.
class App extends React.Component { state = { count: 0 } increase = () => { this.setState({ count: this.state.count + 1 }) } decrease = () => { this.setState({ count: this.state.count - 1 }) } render() { return ( <div className="container"> <button onClick={this.increase}>Increase!</button> <button onClick={this.decrease}>Decrease!</button> <p>{this.state.count}</p> </div> ) } }
إليك كيف سيبدو الأمر نفسه على Imba.
tag App prop count default: 0 def increase count += 1 def decrease count -= 1 def render <self.container> <button :tap.increase> 'Increase!' <button :tap.decrease> 'Decrease!' <p> count Imba.mount <App>
أول ما يلفت انتباهك عند مقارنة هذين المثالين هو الفرق في مقدار الكود.
مثال Imba أقصر مرتين تقريبًا - سواء من حيث عدد الأسطر ومقدار الشفرة.
على الرغم من أن مقارنة عدد أسطر التعليمات البرمجية عند مقارنة لغات البرمجة ليست مهمة للغاية ، إلا أنها تؤثر على قابلية قراءة التعليمات البرمجية ، والتي تلعب بالفعل دوراً ، على مقياس قاعدة شفرة معينة. أقل رمز على Imba يعني سهولة القراءة مقارنة React.
الوصول الذاتي الضمني
ربما لاحظت أنه في المثال أعلاه ، يمكننا الوصول إلى متغير مثيل الكائن مباشرةً ، مع الإشارة فقط إلى
count الاسم. في React ، يتم تنفيذ نفس الشيء باستخدام
this.state.count .
في مثالنا على Imba ، يمكن للمرء أيضًا استخدام بنية للنموذج
self.count . ومع ذلك ، يتم الوصول إلى
self هنا ضمنيًا ، لذلك تكون
self اختيارية. عند الإشارة إلى
count ، يكتشف Imba ما إذا كان هذا المتغير موجودًا إما في النطاق أو في مثيل التطبيق نفسه.
قابلية التبادل
هناك اختلاف رئيسي آخر بين المثالين السابقين وهو كيفية تطبيق تغيير الدولة. في مثال مكتوب في Imba ، الحالة قابلة للتغيير ، مما يسمح لك بتغيير قيمة متغير
count مباشرةً.
React يأخذ نهجا مختلفا ، حيث تعتبر قيمة
this.state قابلة للتغيير ، ونتيجة لذلك فإن الطريقة الوحيدة لتغييرها هي استخدام
this.setState .
إذا كنت تفضل العمل في حالة غير قابلة للتغيير ، يمكنك استخدام المكتبة المناسبة مع Imba. لغة Imba في هذا المعنى ليست مرتبطة بأي حل معين. في مشروع Scrimba ، نستخدم حالة قابلة للتغيير ، لأننا نعتقد أننا لسنا بحاجة إلى التكاليف الزائدة لموارد النظام اللازمة لضمان الحصانة.
إعداد بيئة التطوير
الآن وقد تعرفت على أساسيات Imba ، فقد حان الوقت للتجربة. للقيام بذلك ، سوف تحتاج إلى تكوين بيئة التطوير. للقيام بذلك ، فقط قم بتنفيذ الأوامر التالية.
git clone https:
بعد ذلك ، انتقل إلى المتصفح على
http://localhost:8080/ وستظهر لك الصفحة الرئيسية للمشروع. من أجل تعديل التطبيق - تحرير الملف ، والذي يمكن العثور عليه في
src/client.imba .
إذا لم يناسبك التثبيت المحلي لـ Imba ، فيمكنك استخدام
رمل الإنترنت التفاعلي لمشروع Scrimba.
إمبا الأداء
دعونا نتحدث عن أداء التطبيقات المكتوبة في إمبا. السبب في أن Imba يسمح لك بإنشاء تطبيقات ويب سريعة للغاية لأن هذه اللغة لا تستخدم مفهوم DOM الظاهري ، الذي أصبح شائعًا جدًا في React. يستخدم Imba تقنية DOM Memoized. إنه أبسط من DOM الظاهري ، ويستخدم آليات وسيطة أقل للعمل مع DOM.
في
هذا المعيار ، الذي يمكنك تشغيله في المنزل ببساطة عن طريق النقر على زر
RUN BENCHMARK على صفحتها ، نقارن عدد العمليات مع DOM التي يمكن إجراؤها في الثانية خلال تعديل قائمة TODO باستخدام Imba و React و Vue.
في الاختبار ، الذي يتم عرض نتائجه أدناه ، اتضح أن Imba أسرع 20-30 مرة من React و Vue. على أجهزة كمبيوتر مختلفة ، ستختلف نتائج الاختبار.
قياسات الأداء Imba ، React ، و Vueكما ترون ، فإن استخدام Imba يعني القدرة على العمل بسرعة كبيرة مع DOM.
ملخص
في هذه المقالة ، درسنا فقط أبسط من Imba. إذا كنت مهتمًا بهذه اللغة ، ألقِ نظرة على
وثائقها . على وجه الخصوص ، سيكون من المفيد إتقان مفهومه المتمثل في استخدام getters و setters وآلية المكالمات الضمنية.
فيما يلي قائمة بالموارد المفيدة المتعلقة بالإيمبا. تجدر الإشارة إلى أنه في البداية قد تبدو هذه اللغة صعبة ، سوف يستغرق الأمر بعض الوقت لإتقانها ، ولكن ، كما يعلم الجميع ، لا يمكنك بسهولة الحصول على سمكة من بركة.
أعزائي القراء! هل تخطط لاستخدام لغة Imba في مشاريعك؟
