يترك التطور الأمامي الحديث انطباعًا قطبيًا: بعض الناس يحبونه ، والبعض الآخر يحتقره.

أنا معجب كبير بتطوير الويب الحديث ، رغم أنه يذكرني بنوع من "السحر" ، مع إيجابيات وسلبيات:

• عندما تفهم كيفية استخدام الأدوات السحرية (babel! Bundlers! Watchers! وهكذا!) ، يصبح سير عملك سريعًا وقويًا ومذهلاً
  
• إذا كنت لا تفهم الأدوات السحرية ، فكل شيء مربك للغاية
  
• ... ومحاولات إتقان السحر غالبًا ما تنجح إذا لم يساعدك شخص ما في التغلب على غابة المصطلحات والمبالغة والمعلومات القديمة على الإنترنت

اضطررت مؤخرًا إلى شرح "سير عمل تطوير الويب الحديث" للأشخاص بعيدًا عن هذا ، و ...

كان عليّ أن أشرح الكثير!

حتى التفسير السطحي طويل جدًا. ولكن لا تزال تحاول تتبع تطور تطوير الويب:

الجزء 1: كيف وصلنا من المواقع الثابتة إلى بابل

---

أسهل موقع: ثابت

لنبدأ بتطوير الويب "الكلاسيكي" ، الذي يجب أن يفهمه الجميع.

في التطوير الكلاسيكي ، نقوم بتعديل ملفات HTML / CSS / JavaScript مباشرة. لعرض نتيجة التغييرات ، افتح ملف HTML محليًا في المتصفح ، ومع تقدم التطوير ، نقوم بتحديث الصفحة.

عملية العمل

سير العمل على النحو التالي:

1. نقوم بتحرير HTML / CSS / JavaScript في محرر نصي مثل Atom.
   
2. احفظ الملف في محرر نصوص.
   
3. افتح أو أعد تحميل الملف في المتصفح.

تحرير JavaScript ، حفظ الملف ، تحديث الصفحة

نشر

عندما تريد نشر موقعك على الإنترنت ، فنحن فقط نحمل ملفات HTML / CSS / JavaScript هذه في مكان ما.

مع خدمة مثل Netlify ، يمكنك ببساطة سحب وإسقاط مجلد ملف لنشر صفحة على الإنترنت. فيما يلي مثال لصفحة منشورة .

انه من السهل جدا! لماذا كل شيء معقد؟!

إذا فهمت كيف يعمل سير العمل "الكلاسيكي" ، فيمكنك القول: الجحيم ، إنه أمر بسيط ومريح حقًا. لماذا تحتاج لتغييره؟! لماذا تطوير الشبكة الحديثة معقدة للغاية؟

الإجابة المختصرة هي ... حسنًا ، إجابتين قصيرتين.

جوابان قصيران:

• ليس لديك لتعقيد الموقف. سير العمل "الكلاسيكي" تطوير الشبكة هو عظيم! هذا يكفي تماما للعديد من المهام! لا تضيف أدوات إضافية أو تلك التي لا تفهم الغرض منها.
  
• بالنسبة لبعض المشاريع ، ستستفيد من سير عمل أكثر تعقيدًا. تم تصميم كل أداة جديدة لحل مشكلة معينة.

لفهم الأدوات التي نحتاج إليها لفهم تحديات تطوير الشبكة الحديثة. في هذه المقالات ، سننظر في كل منها على حدة ، بدءًا بمشكلة تطوير الويب القديمة التي كانت قائمة منذ عقود:

المشكلة القديمة: قيود JavaScript

حتى وقت قريب ، كان هناك العديد من القيود على JavaScript و Web API (لأسباب متنوعة أغفلناها).

هؤلاء بعض منهم:

• لم تكن هناك وحدات
  
• لم تكن هناك ثوابت
  
• لم تكن هناك وعود / غير متزامن
  
• لم يكن هناك Array.includes () (!!)
  
• بناء جملة محرج / مفقود للعديد من الأوليات الشائعة (بدون حرف ، قالب حرفي ، بناء جملة دالة السهم ، تفريغ القالب ...)
  
• (Web API) كانت عمليات DOM لا حصر لها معقدة بلا فائدة (مثل إضافة / إزالة أسماء الفصول ، إخفاء العناصر ، تحديد العناصر ، حذف العناصر ...)

يمكن للمتصفحات تنفيذ جافا سكريبت فقط ، لذلك لا يمكنك التغلب على القيود باستخدام لغة أخرى.

بشكل منفصل: ما هو الفرق بين JavaScript وواجهة برمجة تطبيقات الويب؟

ربما لاحظت أنني قلت "JavaScript و Web API" أعلاه. هذان شيئان مختلفان!

عندما تكتب JavaScript لصفحة ويب ، فإن أي مكالمة API تتفاعل مع صفحة الويب نفسها تمثل واجهة برمجة تطبيقات الويب (والتي تمت كتابتها في JavaScript) ، ولكنها ليست جزءًا من لغة JavaScript.

الأمثلة على ذلك:

• Web API: document method document; window method window; Event, XMLHttpRequest, fetch . .
  
• JavaScript: , const/let/var, , Promise . .

, Node.js, JavaScript , , , document.querySelector ( ).

: jQuery

2006 jQuery, JavaScript Web API.

jQuery API, -, DOM, , - .

, : JavaScript Web API, , . , , JSON, jQuery jQuery API.

: JavaScript

2006 !

JavaScript Web API , jQuery , !

JavaScript — . , , JavaScript .

, “ES6”. “ECMAScript 6” 6- ECMAScript. ECMAScript — JavaScript. “ECMAScript” , “JavaScript” — .

(, : JavaScript / ECMAScript; “HTML” / « HTML». , ! , ! JavaScript ECMAScript — ).

ES6 ( 2015 ) , JavaScript, const, ( ES8 : async).

Web API 2006 , document.querySelector, fetch classList hidden.

jQuery 2019 , , JavaScript Web API.

… !

- :

JavaScript, ( Web API, JavaScript).

, 1)  ; 2)  ; 3)  ( ).


: JavaScript? ( )

. , JavaScript, . , - , , , .

Babel.

Babel — JavaScript, JavaScript … JavaScript! , JavaScript, JavaScript, , JavaScript, .


Babel JavaScript,

: Babel Web API

, fetch JavaScript, babel ( «»), fetch — Web API, JavaScript ( ).

, Web API! .

: + babel

, , babel. - ?

, ( Parcel webpack, ).

1. * Babel
   (* CLI, , npm. babel npm dev , )

1. -.
   
   
   : JavaScript src

, «» JavaScript, JavaScript, .

, :

1. JavaScript babel, :
   
   
   
   , JavaScript :
   
   
   : Babel “script.js”,
   
2. JavaScript HTML CSS:
   
   
   * , , , babel .
   
   
   • babel: / script.js
     
   • babel: / script.js
   
   (*! Debug Release, !)

, «» «» ():

• : , -.
  
• : , .

, :

• ,
  
• ,

- Babel.

! :

• , ,
  
• ,

, -.

( , Debug Release , - -. , , - - Debug/Release).

, :

• npm
  
• CSS
  
• React/Vue/Angular/ -

, !

: npm

npm ( ) ( ), .