Pages

قصة JavaScript و EcmaScript (الجزء الثاني)


أجيو نكملو لقصة ديال Javascript و ECMAScript...
في الصراحة غير طلقتها تسرح شوية (سلوڭية) ملي قلت ضربوها بنعسة ديال 10 سنوات، ولكن لكذبة ديالي كاتحمل بين طياتها بزاف ديال الحقيقة،
اجي نشرح ليك علاش!

في 2007 :
بصح مابين 1999 و 2007 ماكان والو، حتال 2007 بداو الأشغال على ECMAScript 4 (يعني تقريبا 8 سنوات و دابا شوية غاتفهم أش قصدت
ب 10سنوات) هاد ECMAScript 4 نتقدوها بزاف ديال الناس حيث بغات تغير من طبيعة اللغة.
بغاو من ل modèle de programmation basé sur les prototypes يدوزو لmodèle traditionnel fondé sur les classes بحال داكشي
ديال Java و #C و ++C ...
إلا معرفتيش شناهيا Prototype في ECMAScript، ماشي مشكل دير فبالك بلي واحد لعيبة مجهدة وبزاف ديال ناس كيعتابروها النموذج الأكثر نجاحا
في Développement orienté objet.
مهم هاد ECMAScript 4 تم التخلي عليها بمعنى أخر t'abandonnat هادشي علاش قلت 10سنوات يعني ف 2009 ...

في 2009 :
فهاد العام غتصدر ECMAScript 5 عندها إسم أخر هو ES5 وجابت معاها شي مميزات جداد و شي حاجة بعقلها و حافضات على  الطبيعة ديال
ECMAScript، ومن داك الوقت زادت دارت بلاصتها كثر وخدات ثقة المطورين كثر وهنا غايبدا المعقول.

في 2015 :
هنا غاتخرج ECMAScript 6 عندها إسم أخر هو ES6 و فبعض الأحيان كاتلقى ES2015 نسبتا للسنة وجابت معاها روينة ديال المميزات شي حاجة
صداع الراس، داكشي زوين صراحة،
مثلا من المميزات ديالها Les classes ولكن ماشي داكشي بحال لي بغاو يديرو ف  ECMAScript 4، لا لا لا.. Les classes ولكن وراء الستار كيعتامدو
على Les prototypes، من الجديد عاوتاني كاين
(Les fonctions fléchées (Arrow functions، شوف هاد جوج أمثلة التحت، بجوج كايعنيو نفس الحجة:

أكيد إلا ماكنتيش كتعرف شنو هوما Les fonctions fléchées و مخدمتيش شوية ب ES5 غادي تبان ليك غير Syntaxe لي تبدلات و صغارت
ولكن ثق بيا (عارف راسي شلاهبي و كذبت عليك فاش قلت 10سنوات ولكن دابا غانبداو صفحة جديدة مبنية على الثقة) لقضية هنا ماشي غير زواق ولكن
عندها تبعات على Scope ولا كيفما كنعرفو حنا THIS و غير هاد THIS لابغينا ندويو فيه على حقو وطريقو والله حتا خصنا مقال بوحدو، باش مانطولوش
و نبقاو عزاز نكملو لقصة ديالنا ولا غنوليو فساميحيني و أش جاب مايخرجنا…

لاحظ معايا ديك <= هيا منين جات سمية ديال Arrow functions.
لاحظ معايا هاد النقط :

  • بفضل Arrow functions قدرت نقص ديك function و حتى return و {} لي دايرين بيه.

  • إلا شفتي في المثال ديال ES6 غادي يبان ليك  {}= params في les arguments و كتسمى هاد القضية في ES6 ب
Default Parameter Values، أما في ES5 خاصك تزيد سطر على قدو و لي هو {} : params = params ? params و لمعنى ديالها إلا عيطتي
ل getUsers بلا arguments خود params كاتساوي {} إلا مدرتيش هكدا غادي تكون params كاتسوي undefined.
  • شفتي ديك في  ;{ const config = { params في ES6، كنا حنا في ES5 كانديرو ;{ var config = { params: params
كاتسمى هاد القضية Object literal shorthand.
  • بانت ليك ديك var في ES5 دابا في ES6 ولينا نقدرو نديرو const على قبل Les constantes ولا let لشي حاجة كاتبدل وهنا عاوتاني داخل
    فيها Scope و THIS نخليك تقلب ف Google.
  • أخر حاجة هيا (Destructuring (Affecter par décomposition نتا عارف جايك واحد Object نفترضو سميتو response
و فيه واحد proprieté سميتها data وأنا محتاج نيشان data إذا بلا مانزيد عليا داك سطر ديال ;var data = response.data نيشان وليت
نقدر ندير{ data }.

إلا كملتي معايا حتال هنا سمح ليا نقول ليك برافو عليك، يعني راك مهتم، نفترضو أنك أول مرة تسمع بES6 ياك؟
هانتا عرفتي وخا بشكل سطحي Arrow functions وDefault parameter values و Object literal shorthand وDestructuring
ولكن غانكونو دوينا غير على شي %10 ديال الجديد في ES6  وملي كانغولو بلي خرجات version جديدة ديال ECMAScript كانقصدو بلي جابت
معاها واحد البركة ديال les fonctionnalités جداد، إوا دير فبالك بلي Navigateur حتا هو بحالك محتاج وقت باش يفهم ويسيبورتيsupporter هاد
les fonctionnalités جداد، يقدر ياخد عام، عامين على حساب Navigateur و على حساب مجهودات الناس لي قايمين عليه.
نعطي أمثلة، فهاد لوقت لي كانكتب فيه هاد المقال، كانلقاو اخير version ديال chrome قادرة تستوعب % 97 من ES6، نفس الشئ بنسبة ل Firefox،
ولكن Safari وصلات ل %99، أجيو نشوفو Internet Explorer … هههههه ERROR 404 (غاتعرف دابا علاش هاد Internet Explorer منبوذة
وماكيحملها حتى واحد) لمهم كاتستوعب يالاه %11 …
و مازال عندهم لوجه يقولو ليك ديك : Définir Internet Explorer comme votre navigateur par défaut
غانخلي ليكم مع المقال Lien باش تشوفو هاد les pourcentages.
ولكن خاصني نكون منصف،Internet Explorer راه صافي مات وMicrosoft عرفات لغلط ديالها و فهمات بلي إلا بقات بديك لعقلية غاتزيد تقفر سوايع كثر،
داكشي علاش خرجو Microsoft Edge حنا متافقين بلي هادا راه projet ديال Microsoft ولكن Microsoft ماشي ديال زمان Bille Gates
وSteve Ballmer، لا ثم لا هاذي را Microsoft ديال زمان Satya Nadella لي كاينفاتح علىCommunauté، على L'open-source وعلى الابداع...
وهاد Microsoft Edge أسيدي راه أخر version  ديالو قادرة تفهم %96 (صافا عليهوم واخا هكاك ياك؟)
ولكن هادشي لي دوينا عليه راه فالعالم المثالي أو إن جاز التعبير : المدينة الفاضلة ديال أفلاطون.
لمهم نهضرو معقول، واش دابا نتا ملي غاتقاد Application Web باش عرفتي أصلا Client عندو أخر version  ديال navigateur،
واخا نفترضو عندو يالاه، تخيل ملي يالاه كاتخرج version ديال ECMAScript قلنا Les navigateurs خاصهوم لوقت، ولكن حنا ك Développeurs
عجبونا و بغينا من دابا نبداو نخدمو بيهوم فCode ديالنا، طلبتي غير لموجود والله ههههه (عرفت ماكانتقاداش)، هنا غانبداو نهضرو على مايسمى
Transcompilateurs، لي معروفين بزاف و كايهمونا هوما جوج :
  • Traceur: هادا واحد Projet ديال Google.

  • Babel: هادا واحد Projet بداه واحد سيد سميتو Sebastian McKenzie وcontribua فيه  بنادم بزاف، غير سمح ليا نقول ليك بلي ملي
بداه كان فعمرو 17سنة و نتا يا بوركابي مازال كادخل لڭروبات كاتكتب فيهوم : أخوكم حميدة من سبت ڭزولة هل من ترحيب و نتي يا وجه
بطاطة قصبية مزال كاتقلبي على لوصفات لبشرة ناضرة، غير كانضحك ههههه ،حتا أنا تصدمت ملي عرفتها أول مرة صراحة !!!


بإختصارTranscompilateur أشنو كيدير؟ كيحول ليك Code ES6 ل Code ES5 حيث كايفهموها Les navgitateurs واخا يكونو قدام شويا،
 نتا كاتcoder بES6 و بفضل Babel مثلا كيتحول لES5 و ل Application Web ديالك كاتبقا خدامة مزيان.

في 2016 :
فهاد العام غاتخرج ECMASCript7 وعندها إسم أخر لي هوES2016 أوES7 وغاتجيب معاها غير شي بركة قليلة ديال الجديد حيت ولات الفكرة دابا هيا
كل عام يخرجو version باش يتجنبو يديرو كيفما دارو معES6 لي جابت بزآآآآآف ديال الجديد (بين ES5 في 2009 و ES6 في 2015  تقريبا 6 سنوات).

في 2017 :
فهاد العام غاتخرج ECMASCript8 لمهم فنفس المنهج ديال لعام لي قبل لفكرة كانت انهوم يزيدو des améliorations و des fonctionnalités
لECMAScript، ماطلعا ماطلعا اجي نعطيكم مثال: فهاد لversion غايتزادو Les décorateurs إيه اسيدي بحال Les annotations
ديال Java وSpring ههه، نيت راه كيقولو ليها : Spring like هاك شوف هاد لمثال:


houdass

Développeur depuis quelques années, j'ai une connaissance approfondie de nombreux langages et frameworks. Curieux de comprendre le "comment ça fonctionne" plutôt que de simplement "utiliser", c'est avec cet état d'esprit que j'évolue depuis plusieurs années et que j'élargie mes horizons.

Related Posts:

1 commentaire: