|
1 | 1 |
|
2 |
| -# Polyfills and transpilers |
| 2 | +# پلیفیلها و ترنسپایلرها |
3 | 3 |
|
4 |
| -The JavaScript language steadily evolves. New proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended to the list at <https://tc39.github.io/ecma262/> and then progress to the [specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm). |
| 4 | +زبان جاوااسکریپت پیوسته در حال تکامل است. پیشنهادهایی برای بهتر شدن آن بهطور منظم صورت میگیرد، این پیشنهادها بررسی میشوند و اگر ارزشمند باشند، به لیست <https://tc39.github.io/ecma262/> اضافه میشوند و سپس برای [تشخیص](http://www.ecma-international.org/publications/standards/Ecma-262.htm) پیش میروند. |
5 | 5 |
|
6 |
| -Teams behind JavaScript engines have their own ideas about what to implement first. They may decide to implement proposals that are in draft and postpone things that are already in the spec, because they are less interesting or just harder to do. |
| 6 | +تیمهای مسئول موتورهای جاوااسکریپت تصمیم میگیرند کدام یک را اول پیادهسازی کنند. ممکن است تصمیم بگیرند پیشنهادهایی که هنوز بهصورت پیشنویس هستند را اول پیادهسازی کنند و پیشنهادهایی که در مرحلهٔ تشخیص هستند را به بعدتر موکول کنند، به دلیل اینکه کمتر جالب هستند و یا فقط سختتر هستند. |
7 | 7 |
|
8 |
| -So it's quite common for an engine to implement only the part of the standard. |
| 8 | +پس کاملا طبیعی است که یک موتور فقط بخشی از یک استاندارد را پیادهسازی کند. |
9 | 9 |
|
10 |
| -A good page to see the current state of support for language features is <https://kangax.github.io/compat-table/es6/> (it's big, we have a lot to study yet). |
| 10 | +یک صفحهی خوب برای این که ببینید در حال حاضر چه چیزهایی پشتیبانی میشود اینجاست <https://kangax.github.io/compat-table/es6/> (خیلی بزرگ است، ما چیزهای زیادی برای مطالعه داریم). |
11 | 11 |
|
12 |
| -As programmers, we'd like to use most recent features. The more good stuff - the better! |
| 12 | +به عنوان توسعهدهنده، ما همیشه دوست داریم از ویژگیها و امکانات جدید استفاده کنیم. هر چه جدیدتر، بهتر! |
13 | 13 |
|
14 |
| -On the other hand, how to make our modern code work on older engines that don't understand recent features yet? |
| 14 | +از طرف دیگر، دوست داریم کدهایمان روی مرورگرهای قدیمیتر که امکانات جدید را نمیفهمند هم کار کنند. اما چطور میشود این کار را انجام داد؟ |
15 | 15 |
|
16 |
| -There are two tools for that: |
| 16 | +دو ابزار برای این کار وجود دارد: |
17 | 17 |
|
18 |
| -1. Transpilers. |
19 |
| -2. Polyfills. |
| 18 | +1. ترنسپایلرها (Transpilers). |
| 19 | +2. پلیفیلها (Polyfills). |
20 | 20 |
|
21 |
| -Here, in this chapter, our purpose is to get the gist of how they work, and their place in web development. |
| 21 | +هدف ما در این فصل این است که درک کنیم این دو چگونه کار میکنند و جایگاه آنها در توسعه وب چیست. |
22 | 22 |
|
23 |
| -## Transpilers |
| 23 | +## ترنسپایلرها |
24 | 24 |
|
25 |
| -A [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler) is a special piece of software that can parse ("read and understand") modern code, and rewrite it using older syntax constructs, so that the result would be the same. |
| 25 | +یک [ترنسپایلر](https://en.wikipedia.org/wiki/Source-to-source_compiler) در واقع قطعهای نرمافزار است که میتواند کد مدرن و جدید را parse کند ("بخواند و بفهمد") و سپس همان کد را با syntax قدیمی بازنویسی کند بهطوری که خروجی کد یکسان باشد. |
26 | 26 |
|
27 |
| -E.g. JavaScript before year 2020 didn't have the "nullish coalescing operator" `??`. So, if a visitor uses an outdated browser, it may fail to understand the code like `height = height ?? 100`. |
| 27 | +برای مثال جاوااسکریپت تا سال ۲۰۲۰ "nullish coalescing عملگر" `??` را نداشت. و اگر کاربری از یک مرورگر منسوخشده استفاده کند، ممکن است کدی مانند `height = height ?? 100` را متوجه نشود. |
28 | 28 |
|
29 |
| -A transpiler would analyze our code and rewrite `height ?? 100` into `(height !== undefined && height !== null) ? height : 100`. |
| 29 | +یک ترنسپایلر این کد را آنالیز میکند و `height ?? 100` را بهصورت `(height !== undefined && height !== null) ? height : 100` بازنویسی میکند. |
30 | 30 |
|
31 | 31 | ```js
|
32 |
| -// before running the transpiler |
| 32 | +// قبل از اجرا شدن ترنسپایلر |
33 | 33 | height = height ?? 100;
|
34 | 34 |
|
35 |
| -// after running the transpiler |
36 |
| -height = (height !== undefined && height !== null) ? height : 100; |
| 35 | +// بعد از اجرا شدن ترنسپایلر |
| 36 | +height = height !== undefined && height !== null ? height : 100; |
37 | 37 | ```
|
38 | 38 |
|
39 |
| -Now the rewritten code is suitable for older JavaScript engines. |
| 39 | +کد بازنویسی شده مناسب موتورهای قدیمیتر جاوااسکریپت است. |
40 | 40 |
|
41 |
| -Usually, a developer runs the transpiler on their own computer, and then deploys the transpiled code to the server. |
| 41 | +معمولا توسعهدهنده ترنسپایلر را روی کامپیوتر خودش اجرا میکند و سپس کد transpileشده را روی سرور deploy میکند. |
42 | 42 |
|
43 |
| -Speaking of names, [Babel](https://babeljs.io) is one of the most prominent transpilers out there. |
| 43 | +حالا که صحبتش شد، بهتر است بدانید [Babel](http://babeljs.io/) یکی از برجستهترین ترنسپایلرها است. |
44 | 44 |
|
45 |
| -Modern project build systems, such as [webpack](http://webpack.github.io/), provide means to run transpiler automatically on every code change, so it's very easy to integrate into development process. |
| 45 | +سیستمهای build پروژه مدرن مثل [webpack](http://webpack.github.io/) این امکان را میدهند که بعد از هر بار تغییر کد، ترنسپایلر بهصورت اتوماتیک اجرا شود و برای همین ادغام کردن آن در روند توسعه کار بسیار سادهای است. |
46 | 46 |
|
47 |
| -## Polyfills |
| 47 | +## پلیفیلها |
48 | 48 |
|
49 |
| -New language features may include not only syntax constructs and operators, but also built-in functions. |
| 49 | +فیچرها و امکانات جدید یک زبان میتوانند علاوه بر syntax و عملگرهای جدید، تابعهای جدید نیز باشند. |
50 | 50 |
|
51 |
| -For example, `Math.trunc(n)` is a function that "cuts off" the decimal part of a number, e.g `Math.trunc(1.23) = 1`. |
| 51 | +برای مثال `Math.trunc(n)` یک تابع است که بخش دهدهی یک عدد را حذف میکند. مانند `Math.trunc(1.23) = 1`. |
52 | 52 |
|
53 |
| -In some (very outdated) JavaScript engines, there's no `Math.trunc`, so such code will fail. |
| 53 | +در برخی از موتورهای (خیلی قدیمی) جاوااسکریپت تابع `Math.trunc` وجود ندارد و چنین کدی اجرا نمیشود. |
54 | 54 |
|
55 |
| -As we're talking about new functions, not syntax changes, there's no need to transpile anything here. We just need to declare the missing function. |
| 55 | +از آنجایی که داریم راجعبه تابعهای جدید صحبت میکنیم و بحث تغییر syntax نیست، اینجا چیزی برای transpile وجود ندارد. فقط باید تابع ناموجود را تعریف کنیم. |
56 | 56 |
|
57 |
| -A script that updates/adds new functions is called "polyfill". It "fills in" the gap and adds missing implementations. |
| 57 | +اسکریپتی که تابعهای جدید آپدیت و یا اضافه میکند، «پلیفیل» نام دارد. در واقع جای خالی را پر میکند و پیادهسازیهای لازم را انجام میدهد. |
58 | 58 |
|
59 |
| -For this particular case, the polyfill for `Math.trunc` is a script that implements it, like this: |
| 59 | +در این مثال خاص، پلیفیلی که برای `Math.trunc` وجود دارد یک اسکریپت است که آن را پیادهسازی کرده است. مانند زیر: |
60 | 60 |
|
61 | 61 | ```js
|
62 |
| -if (!Math.trunc) { // if no such function |
63 |
| - // implement it |
64 |
| - Math.trunc = function(number) { |
65 |
| - // Math.ceil and Math.floor exist even in ancient JavaScript engines |
66 |
| - // they are covered later in the tutorial |
| 62 | +if (!Math.trunc) { // اگر چنین تابعی وجود ندارد |
| 63 | + // آن زا پیادهسازی کن |
| 64 | + Math.trunc = function (number) { |
| 65 | + // Math.ceil و Math.floor جتی در موتورهای قدیمی جاوااسکریپت هم حضور دارند |
| 66 | + // و در همین tutorial جلوتر آموزش داده میشوند |
67 | 67 | return number < 0 ? Math.ceil(number) : Math.floor(number);
|
68 | 68 | };
|
69 | 69 | }
|
70 | 70 | ```
|
71 | 71 |
|
72 |
| -JavaScript is a highly dynamic language, scripts may add/modify any functions, even including built-in ones. |
| 72 | +جاوااسکریپت یک زبان بهشدت داینامیک است. اسکریپتها میتوانند هر تابعی را تغییر دهند یا اضافه کنند. حتی تابعهای built-in. |
73 | 73 |
|
74 |
| -Two interesting libraries of polyfills are: |
75 |
| -- [core js](https://github.com/zloirock/core-js) that supports a lot, allows to include only needed features. |
76 |
| -- [polyfill.io](http://polyfill.io) service that provides a script with polyfills, depending on the features and user's browser. |
| 74 | +دو کتابخانه جالب پلیفیلها: |
| 75 | +- [core js](https://github.com/zloirock/core-js) که از چیزهای زیادی پشتیبانی میکند و اجازه میدهد فقط فیچرهای مورد نیاز خود را اضافه کنید. |
| 76 | +- [polyfill.io](http://polyfill.io) سرویسی که یک اسکریپت با پلیفیلها ارائه میدهد. بسته به فیچرها و مرورگر کاربر. |
77 | 77 |
|
78 | 78 |
|
79 |
| -## Summary |
| 79 | +## خلاصه |
80 | 80 |
|
81 |
| -In this chapter we'd like to motivate you to study modern and even "bleeding-edge" language features, even if they aren't yet well-supported by JavaScript engines. |
| 81 | +در این فصل ما میخواهیم به شما انگیزه بدهیم تا بروید و فیچرهای جدید زبان را یاد بگیرید. حتی اگر هنوز توسط موتورهای جاوااسکریپت بهخوبی پشتیبانی نمیشوند. |
82 | 82 |
|
83 |
| -Just don't forget to use transpiler (if using modern syntax or operators) and polyfills (to add functions that may be missing). And they'll ensure that the code works. |
| 83 | +فراموش نکنید که از یک ترنسپایلر (اگر از syntax یا عملگرهای مدرن استفاده میکنید) و پلیفیلها (برای اضافه کردن تابعهایی که ممکن است موجود نباشند) استفاده کنید. و با این کار مطمئن خواهید بود که کد شما کار میکند. |
84 | 84 |
|
85 |
| -For example, later when you're familiar with JavaScript, you can setup a code build system based on [webpack](http://webpack.github.io/) with [babel-loader](https://github.com/babel/babel-loader) plugin. |
| 85 | +برای مثال، بعدها که با جاوااسکریپت آشنایی بیشتری پیدا کنید، میتوانید یک سیستم build کد با [webpack](http://webpack.github.io/) و پلاگین [babel-loader](https://github.com/babel/babel-loader) راهاندازی کنید. |
86 | 86 |
|
87 |
| -Good resources that show the current state of support for various features: |
88 |
| -- <https://kangax.github.io/compat-table/es6/> - for pure JavaScript. |
89 |
| -- <https://caniuse.com/> - for browser-related functions. |
| 87 | +منابع خوبی که نشان میدهند فیچرهای مختلف در چه حالتی از پشتیبانی قرار دارند: |
| 88 | +- <https://kangax.github.io/compat-table/es6/> - برای جاوااسکریپت. |
| 89 | +- <https://caniuse.com/> - برای تابعهای مربوط به مرورگر. |
90 | 90 |
|
91 |
| -P.S. Google Chrome is usually the most up-to-date with language features, try it if a tutorial demo fails. Most tutorial demos work with any modern browser though. |
| 91 | +پانوشت گوگل کروم معمولا نسبت به فیچرهای زبان بهروزترین است. اگر دموی یک آموزش کار نکرد، آن را امتحان کنید. البته بیشتر دموهای آموزش با هر مرورگر مدرنی کار میکنند. |
92 | 92 |
|
0 commit comments