ما هو مفهوم عملية Transpiling ؟

raheel · 01-04-2019, 04:47 PM

تطورت لغة البرمجة جافاسكريبت بشكل كبير في السنوات الأخيرة، وأضيفت إليها مزايا كثيرة بغرض جعلها لغة برمجة أكثر تطورا وحداثة.
هذا الإيقاع الجنوني في تحديث JavaScript صاحبه تباطؤ على مستوى دمج هذه التغييرات ودعمها من طرف متصفحات الويب الكبيرة وعلى رأسها كروم وفايرفوكس. وفي الحقيقة هذا التباطؤ منطقي ومفهوم، إذ ليس سهلا أن تقوم هذه المتصفحات بتحديث محركات الجافاسكريبت الخاصة بها دفعة واحدة بين عشية وضحاها لتلائم هذا الكم الهائل من المستجدات.
الحل من أجل تدارك هذا التأخر هو وضع آلية لتحويل أكواد جافاسكريبت الحديثة (مثلا أكواد جافاسكريبت ES6) إلى أكواد أقدم تدعمها المتصفحات بشكل تام.
هذه العملية تعرف ب Transpiling وهي تجميع للكلمتين Transforming و Compiling.
إذن ما ستكتبه أنت كمطور هو الشفرة البرمجية الحديثة لجافاسكريبت، بينما الشفرة التي سنقوم باستدعائها في المتصفح هي الشفرة القديمة التي تم توليدها بالإستعانة ب Transpiler أو المحول الذي نعتمد عليه في مرحلة بناء المشروع أو ما يعرف ب Build process.
ولكن لما كل هذا العناء إذا كنت في الأخير سأستخدم الشفرة القديمة ؟

قد يسأل أحدهم: لماذا كل هذه المشقة والعناء في إعداد عملية build process إذا كنا في الأخير سنعطي الشفرة البرمجية القديمة للمتصفح ؟
هذا سؤال مشروع ووجيه، ويمكن الرد عليه من خلال النقاط التالية:

الواجهات البرمجية والأكواد الحديثة في جافاسكريبت صممت لكي تجعل شفراتنا المصدرية أكثر قابلية للقراءة والصيانة. وعندما نتحدث عن هذا العاملين لا يجب أن نفكر في أنفسنا فقط، بل أيضا في الفريق أو الأشخاص الذين نعمل معهم، حيث أن كتابة أكواد نظيفة ومنظمة يساعد الجميع في الإنخراط بشكل جيد في العمل ومعرفة الغرض الأساسي من أي كود برمجي.
يمكن أن نوجه الأكواد المحولة (Transpiled code) فقط إلى المتصفحات القديمة التي لا تدعم التركيب الجديد، بينما نطلب من المتصفحات الحديثة مثل كروم أن تقوم باستخدام الأكواد الحديثة، حيث أن متصفح غوغل يدعم نسبة كبيرة جدا من جافاسكريبت ES6 ولو أنه في العادة لا يلجأ المطورون إلى هذا الخيار لأنه ينطوي على بعض الصعوبات في تنفيذه على أرض الواقع.
استخدام الأكواد الحديثة في مشاريع حقيقية وواقعية يعطي فرصة لأعضاء لجنة TC39 المكلفة بتطوير لغة البرمجة جافاسكريبت للحصول على آراء ودود فعل المطورين حول العالم من أجل تحسين ما يمكن تحسينه. وكلما جاءت ردود الفعل هذه في وقت مبكر كلما كان ذلك أحسن من أجل تحديث ما يمكن تحديثه وتحسين ما يمكن تحسينه.

مثال صغير

القيمة الإفتراضية للمعامل أو Default parameter value كانت إحدى المزايا التي جاء مع إصدار ES6 من جافاسكريبت، حيث أن هذه الميزة لم تكن موجودة في هذه اللغة من قبل كما هي موجودة في لغات أخرى معروفة مثل PHP على سبيل المثال.
بفضل جافاسكريبت ES6 أصبح بإمكاننا إعطاء قيمة افتراضية لمعاملات الدوال كما يلي:
function foo(a=2) { console.log(a); } foo(); // 2 foo(42); // 42
1
2
3
4
5
6

function foo(a=2) {
console.log(a);
}

foo(); // 2
foo(42); // 42

إذا قمنا بعملية Transpiling على الدالة foo ـ باستخدام Babeljs مثلا ـ فسنحصل على الشفرة البرمجية التالية:
function foo() { var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2; console.log(a); }
1
2
3
4

function foo() {
var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2;
console.log(a);
}

تلاحظون أن الدالة هنا تتأكد من أن عدد العوامل المررة أكبر قطعا من صفر وأن العامل الأول يخالف undefined ، إذا تحقق هذا الشرط هذا يعني بأننا قمنا بتمرير بارامتر إلى الدالة، إذا نأخذ قيمة هذا البارامتر وفي حالة العكس نأخذ 2 كقيمة افتراضية.
بالنسبة لمطور مبتدئ وغير متمرس قد يكون هذا الكود صعبا قليلا وغير قابل للفهم من النظرة الأولى، بينما الميزة الجديدة في ES6 تمكننا من عمل ذلك ب Syntax واضح وسهل التذكر مهما كان مستوى المطور.
أشهر Transpilers

هناك عدد من المحولات التي تستخدم في بيئة جافاسكريبت، ولكن أشهرها على الإطلاق هو Babel.js الذي لا نكاد نجد أي مشروع ويب كبير ( مثال React.js و Vue.js) إلا ويعتمد عليه.
تقنية Transpiling تعتمد عليها كذلك بعض لغات البرمجة التي بنيت فوق جافاسكريبت مثل Typescript الذي يستخدم هو الآخر في مشاريع الويب إما منفردا أو مع أطر عمل أخرى (خاصة مع أنغولار)، حيث أن أكواد Typescript يتم تحويلها في مرحلة البناء إلى أكواد جافاسكريبت تفهمها المتصفحات.

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

01-04-2019, 04:47 PM	#1
raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10	raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10 ما هو مفهوم عملية Transpiling ؟ ما هو مفهوم عملية Transpiling ؟ تطورت لغة البرمجة جافاسكريبت بشكل كبير في السنوات الأخيرة، وأضيفت إليها مزايا كثيرة بغرض جعلها لغة برمجة أكثر تطورا وحداثة. هذا الإيقاع الجنوني في تحديث JavaScript صاحبه تباطؤ على مستوى دمج هذه التغييرات ودعمها من طرف متصفحات الويب الكبيرة وعلى رأسها كروم وفايرفوكس. وفي الحقيقة هذا التباطؤ منطقي ومفهوم، إذ ليس سهلا أن تقوم هذه المتصفحات بتحديث محركات الجافاسكريبت الخاصة بها دفعة واحدة بين عشية وضحاها لتلائم هذا الكم الهائل من المستجدات. الحل من أجل تدارك هذا التأخر هو وضع آلية لتحويل أكواد جافاسكريبت الحديثة (مثلا أكواد جافاسكريبت ES6) إلى أكواد أقدم تدعمها المتصفحات بشكل تام. هذه العملية تعرف ب Transpiling وهي تجميع للكلمتين Transforming و Compiling. إذن ما ستكتبه أنت كمطور هو الشفرة البرمجية الحديثة لجافاسكريبت، بينما الشفرة التي سنقوم باستدعائها في المتصفح هي الشفرة القديمة التي تم توليدها بالإستعانة ب Transpiler أو المحول الذي نعتمد عليه في مرحلة بناء المشروع أو ما يعرف ب Build process. ولكن لما كل هذا العناء إذا كنت في الأخير سأستخدم الشفرة القديمة ؟ قد يسأل أحدهم: لماذا كل هذه المشقة والعناء في إعداد عملية build process إذا كنا في الأخير سنعطي الشفرة البرمجية القديمة للمتصفح ؟ هذا سؤال مشروع ووجيه، ويمكن الرد عليه من خلال النقاط التالية: الواجهات البرمجية والأكواد الحديثة في جافاسكريبت صممت لكي تجعل شفراتنا المصدرية أكثر قابلية للقراءة والصيانة. وعندما نتحدث عن هذا العاملين لا يجب أن نفكر في أنفسنا فقط، بل أيضا في الفريق أو الأشخاص الذين نعمل معهم، حيث أن كتابة أكواد نظيفة ومنظمة يساعد الجميع في الإنخراط بشكل جيد في العمل ومعرفة الغرض الأساسي من أي كود برمجي. يمكن أن نوجه الأكواد المحولة (Transpiled code) فقط إلى المتصفحات القديمة التي لا تدعم التركيب الجديد، بينما نطلب من المتصفحات الحديثة مثل كروم أن تقوم باستخدام الأكواد الحديثة، حيث أن متصفح غوغل يدعم نسبة كبيرة جدا من جافاسكريبت ES6 ولو أنه في العادة لا يلجأ المطورون إلى هذا الخيار لأنه ينطوي على بعض الصعوبات في تنفيذه على أرض الواقع. استخدام الأكواد الحديثة في مشاريع حقيقية وواقعية يعطي فرصة لأعضاء لجنة TC39 المكلفة بتطوير لغة البرمجة جافاسكريبت للحصول على آراء ودود فعل المطورين حول العالم من أجل تحسين ما يمكن تحسينه. وكلما جاءت ردود الفعل هذه في وقت مبكر كلما كان ذلك أحسن من أجل تحديث ما يمكن تحديثه وتحسين ما يمكن تحسينه. مثال صغير القيمة الإفتراضية للمعامل أو Default parameter value كانت إحدى المزايا التي جاء مع إصدار ES6 من جافاسكريبت، حيث أن هذه الميزة لم تكن موجودة في هذه اللغة من قبل كما هي موجودة في لغات أخرى معروفة مثل PHP على سبيل المثال. بفضل جافاسكريبت ES6 أصبح بإمكاننا إعطاء قيمة افتراضية لمعاملات الدوال كما يلي: function foo(a=2) { console.log(a); } foo(); // 2 foo(42); // 42 1 2 3 4 5 6 function foo(a=2) { console.log(a); } foo(); // 2 foo(42); // 42 إذا قمنا بعملية Transpiling على الدالة foo ـ باستخدام Babeljs مثلا ـ فسنحصل على الشفرة البرمجية التالية: function foo() { var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2; console.log(a); } 1 2 3 4 function foo() { var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2; console.log(a); } تلاحظون أن الدالة هنا تتأكد من أن عدد العوامل المررة أكبر قطعا من صفر وأن العامل الأول يخالف undefined ، إذا تحقق هذا الشرط هذا يعني بأننا قمنا بتمرير بارامتر إلى الدالة، إذا نأخذ قيمة هذا البارامتر وفي حالة العكس نأخذ 2 كقيمة افتراضية. بالنسبة لمطور مبتدئ وغير متمرس قد يكون هذا الكود صعبا قليلا وغير قابل للفهم من النظرة الأولى، بينما الميزة الجديدة في ES6 تمكننا من عمل ذلك ب Syntax واضح وسهل التذكر مهما كان مستوى المطور. أشهر Transpilers هناك عدد من المحولات التي تستخدم في بيئة جافاسكريبت، ولكن أشهرها على الإطلاق هو Babel.js الذي لا نكاد نجد أي مشروع ويب كبير ( مثال React.js و Vue.js) إلا ويعتمد عليه. تقنية Transpiling تعتمد عليها كذلك بعض لغات البرمجة التي بنيت فوق جافاسكريبت مثل Typescript الذي يستخدم هو الآخر في مشاريع الويب إما منفردا أو مع أطر عمل أخرى (خاصة مع أنغولار)، حيث أن أكواد Typescript يتم تحويلها في مرحلة البناء إلى أكواد جافاسكريبت تفهمها المتصفحات. المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
مفهوم القيم الإسلامية الوطنية و الإنسانية , المجتمعات الناجحة	مهرة النجدية	المواضيع العامة	1	08-06-2022 05:49 PM
كيفية إجراء عملية إعادة توجيه في ووردبريس – تمهيد	مهرة النجدية	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	1	26-07-2019 03:11 PM
كيفية إجراء عملية إعادة توجيه في ووردبريس – الأدوات والتقنيات	مهرة النجدية	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	1	22-07-2019 07:11 PM
مفهوم الامراض الاجتماعية , الأمراض الإجتماعية الاكثر خطورة	مهرة النجدية	المواضيع العامة	1	09-07-2019 12:57 PM
ما هي وظيفة عملية منع الفهرسة No index	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	13-03-2019 02:46 PM

اسم العضو		حفظ البيانات؟
كلمة المرور

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)