محتوا
- 01. زاویه دار
- 02. واکنش نشان دهید
- 03. Vue
- نحو چارچوب ها چگونه مقایسه می شود؟
- محبوبیت و بازار
- توسعه برنامه موبایل
- چارچوب های دیگری که باید در سال 2020 مورد توجه قرار گیرد
- نتیجه
در سال 2020 ، تعدادی از چارچوب ها و کتابخانه ها به ما کمک می کنند تا در زمینه توسعه وب به ما کمک کنند. اما تنوع همیشه زیاد نبود. در سال 2005 ، زبان اسکریپت نویسی جدیدی به نام Mocha توسط شخصی به نام Brendan Eich ایجاد شد. ماه ها پس از تغییر نام به LiveScript ، نام دوباره به JavaScript تغییر یافت. از آن زمان ، جاوا اسکریپت راه طولانی را طی کرده است.
در سال 2010 ، ما شاهد معرفی Backbone و Angular به عنوان اولین چارچوب های JavaScript بودیم و تا سال 2016 ، 92 درصد از کل وب سایت ها از JavaScript استفاده می کردند. در این مقاله ، می خواهیم نگاهی به سه چارچوب اصلی JavaScript (Angular ، React و Vue) و وضعیت آنها در دهه آینده داشته باشیم. می خواهید سایت خود را بسازید؟ این لیست از سازندگان وب سایت را امتحان کنید.
برای برخی از منابع درخشان ، لیست ابزارهای برتر طراحی وب ، خلاصه خدمات میزبانی وب و این لیست از نرم افزارهای عالی تست کاربر را نیز بررسی کنید.
01. زاویه دار
AngularJS در سال 2010 منتشر شد اما تا سال 2016 به طور کامل بازنویسی و به عنوان Angular 2 منتشر شد. Angular یک چارچوب وب تمام عیار است که توسط Google ساخته شده است و توسط Wix ، Upwork ، Guardian ، HBO و موارد دیگر استفاده می شود.
طرفداران:
- پشتیبانی استثنایی از TypeScript
- MVVM توسعه دهندگان را قادر می سازد تا با استفاده از مجموعه داده های مشابه ، کار در همان بخش برنامه را جدا کنند
- مستندات عالی
موارد منفی:
- کمی منحنی یادگیری دارد
- مهاجرت از نسخه قدیمی ممکن است دشوار باشد.
- به روزرسانی ها به طور منظم ارائه می شوند ، به این معنی که توسعه دهندگان باید با آنها سازگار شوند
بعدی چیست؟
در Angular 9 ، Ivy کامپایلر پیش فرض است. برای حل بسیاری از مشکلات مربوط به عملکرد و اندازه پرونده به کار گرفته شده است. باید برنامه ها را کوچکتر ، سریعتر و ساده تر کند.
وقتی نسخه های قبلی Angular را با React و Vue مقایسه می کنید ،
اندازه بسته نرم افزاری نهایی در هنگام استفاده از Angular بسیار بزرگتر بود. Ivy همچنین Progressive Hydration را ممکن می کند ، چیزی که تیم Angular در I / O 2019 به نمایش گذاشت. Progressive Hydration از Ivy برای بارگیری تدریجی روی سرور و سرویس گیرنده استفاده می کند. به عنوان مثال ، هنگامی که کاربر شروع به تعامل با یک صفحه می کند ، کد م componentsلفه ها به همراه هر زمان اجرا قطعه قطعه می شود.
پیچک به نظر می رسد تمرکز زیادی برای Angular باشد و امید آن است که آن را برای همه برنامه ها در دسترس قرار دهیم. یک گزینه انصراف در نسخه 9 وجود دارد ، تا Angular 10.
02. واکنش نشان دهید
React در ابتدا در سال 2013 توسط فیس بوک منتشر شد و برای ساخت رابط های وب تعاملی مورد استفاده قرار می گیرد. توسط Netflix ، Dropbox ، PayPal و Uber استفاده می شود تا چند مورد را نام برد.
طرفداران:
- React از DOM مجازی استفاده می کند که تأثیر مثبتی بر عملکرد دارد
- نوشتن JSX آسان است
- به روزرسانی ها ثبات را به خطر نمی اندازند
موارد منفی:
- یکی از اصلی ترین مشکلات ، نیاز به کتابخانه های شخص ثالث برای ایجاد برنامه های پیچیده تر است
- توسعه دهندگان در بهترین روش برای توسعه در تاریکی قرار می گیرند
بعدی چیست؟
در React Conf 2019 ، تیم React مواردی را که در مورد آنها کار کرده اند را لمس کرد. اولین مورد Hydration Selective است ، که در آن React برای کار در اولویت قرار دادن م componentsلفه هایی که کاربر با آنها تعامل دارد ، هر کاری را که کار می کند مکث می کند. وقتی کاربر قصد دارد با یک بخش خاص ارتباط برقرار کند ، آن منطقه هیدراته می شود. این تیم همچنین در حال کار بر روی Suspense ، سیستم React برای تنظیم بارگذاری کد ، داده ها و تصاویر است. این ویژگی را قادر می سازد تا قبل از ارائه ، منتظر چیزی بمانند.
هیدراتاسیون و تعلیق Selective توسط حالت همزمانی امکان پذیر شده است ، که به برنامه ها امکان می دهد با دادن واکنش به React توانایی ورود به بلوک های بزرگ با اولویت کمتر را داشته باشند تا بتوانند روی چیزی که دارای اولویت بالاتری است مانند پاسخ به ورودی کاربر ، پاسخگو باشند. این تیم همچنین با تمرکز بر دو موضوع خاص - مدیریت تمرکز و رابط های ورودی ، از قابلیت دسترسی به عنوان یکی دیگر از مواردی که مورد بررسی قرار گرفته اند نام برد.
03. Vue
Vue در سال 2014 توسط Evan You ، کارمند سابق Google توسعه داده شد. این توسط Xiaomi ، Alibaba و GitLab استفاده می شود. Vue موفق شد در مدت زمان کوتاهی و بدون حمایت از یک برند بزرگ محبوبیت و حمایت توسعه دهندگان را بدست آورد.
طرفداران:
- اندازه بسیار سبک
- مبتدی دوستانه - یادگیری آن آسان است
- جامعه بزرگ
موارد منفی:
- توسط یک کمپانی بزرگ پشتیبانی نمی شود ، مانند React with Facebook و Angular با Google
- بدون ساختار واقعی
بعدی چیست؟
Vue هدف خود را سریع تر ، کوچکتر ، قابل نگه داشتن و هدف قرار دادن هدف بومی برای توسعه دهندگان قرار داده است (اگر در نگهداری مشکلی ندارید ، سرویس میزبانی وب را در نظر بگیرید). نسخه بعدی (3.0) در Q1 2020 منتشر می شود ، که شامل بازنویسی مجازی DOM برای عملکرد بهتر همراه با پشتیبانی بهتر TypeScript است. همچنین Composition API اضافه شده است که به توسعه دهندگان روشی جدید برای ایجاد م componentsلفه ها و سازماندهی آنها از طریق ویژگی به جای کار ، ارائه می دهد.
کسانی که Vue را توسعه می دهند نیز مشغول کار بر روی Suspense بوده اند ، که ارائه م componentلفه شما را به حالت تعلیق درآورد و تا زمان تحقق شرطی ، م componentلفه بازگشتی ارائه دهد.
یکی از نکات مهم در به روزرسانی Vue این است که سازگاری عقب مانده را حفظ می کنند. آنها نمی خواهند شما پروژه های قدیمی Vue خود را بشکنید. ما این امر را در انتقال از 1.0 به 2.0 مشاهده کردیم که در آن 90 درصد API یکسان بود.
نحو چارچوب ها چگونه مقایسه می شود؟
هر سه چارچوب از زمان انتشار تاکنون دچار تغییراتی شده اند اما نکته قابل فهم برای نحو و تفاوت آن است. بیایید نگاهی به چگونگی مقایسه نحو در هنگام اتصال ساده رویداد بیندازیم:
Vue: v-on از دستورالعمل برای پیوستن شنوندگان رویدادهایی که روشها را در موارد Vue فراخوانی می کنند استفاده می شود. دستورالعمل ها با پیشوند با v- به منظور نشان دادن اینکه آنها ویژگیهای خاصی هستند که توسط Vue ارائه شده اند و رفتار واکنشی خاصی را برای DOM ارائه شده اعمال می کنند. گردانندگان رویدادها می توانند بصورت درون خطی یا به عنوان نام روش ارائه شوند.
template> button v-on: click = "clickHandler"> کلیک من / دکمه> / template> اسکریپت> صادرات پیش فرض {نام: "HelloWorld" ، روش ها: {clickHandler: function () {console.log ("من کلیک شدم! ”)؛ }}}؛ / اسکریپت>
واکنش نشان دهید: React در JS و JSX ، پسوند نحوی JavaScript ، علامت گذاری و منطق قرار می دهد. با استفاده از JSX ، عملکرد به عنوان کنترل کننده رویداد منتقل می شود. مدیریت رویدادها با عناصر React بسیار شبیه به مدیریت رویدادها در عناصر DOM است. اما تفاوتهای نحوی وجود دارد. به عنوان مثال ، رویدادهای React به جای کوچک ، با استفاده از camelCase نامگذاری می شوند.
function Button () {function clickHandler (e) {console.log ("من کلیک شد")؛ } دکمه بازگشت onClick = {clickHandler}> روی من کلیک کنید! / دکمه>؛ }
زاویه ای: نحو اتصال رویداد از یک نام رویداد هدف در داخل پرانتز در سمت چپ یک علامت برابر و یک عبارت الگوی نقل شده در سمت راست تشکیل شده است. متناوباً ، می توانید از بر- پیشوند ، که به عنوان شکل متعارف شناخته می شود.
Component ({selector: “app-click-me”، الگو: `button (click) =” onClickMe () ”> روی من کلیک کن! / دکمه>”}) کلاس صادرات ClickMeComponent {onClickMe () {console.log (“ شما روی من کلیک کردید! ")؛ }}
محبوبیت و بازار
بیایید با بررسی یک آمار کلی از W3Techs ، به یک تصویر کلی از سه چارچوب مربوط به بقیه وب شروع کنیم. Angular در حال حاضر توسط 0.4 درصد از کل وب سایت ها استفاده می شود ، و سهم بازار کتابخانه جاوا اسکریپت 0.5 درصد است. React توسط 0.3 درصد از کل وب سایت ها و 0.4 درصد از سهم بازار کتابخانه جاوا اسکریپت استفاده می شود و Vue برای هر دو 0.3 درصد است. این کاملاً یکنواخت به نظر می رسد و انتظار می رود شاهد افزایش تعداد باشید.
روندهای Google: در طول 12 ماه گذشته ، React محبوب ترین در اصطلاحات جستجو است و پس از آن Angular دنبال می شود. Vue.js کاملاً عقب است. با این حال ، یک چیز به یاد داشته باشید این است که Vue در مقایسه با دو مورد دیگر هنوز جوان است.
جستجوهای شغلی: در زمان نوشتن مقاله ، React و Angular از لحاظ لیست شغلی در واقعا با Vue بسیار فاصله دارند و Vue فاصله زیادی دارد. با این حال ، به نظر می رسد تقاضای بیشتری برای توسعه دهندگان Vue در LinkedIn وجود دارد.
سرریز پشته: اگر به نتایج نظرسنجی توسعه دهندگان Stack Overflow برای سال 2019 نگاه کنید ، React و Vue.j هر دو محبوب ترین و موردعلاقه ترین چارچوب های وب هستند. انگولار برای بیشتر دوست داشتنی ها اما سومین افراد تحت تعقیب در جایگاه نهم قرار می گیرد.
GitHub: Vue با 153k بیشترین تعداد ستاره را دارد اما کمترین میزان همکاری را دارد (283). از طرف دیگر 140،000 ستاره React و 1334 مشارکت کننده دارند. Angular فقط 59.6k ستاره دارد اما از بین این سه ستاره با 1،579 بیشترین تعداد را دارد.
روندهای NPM: تصویر بالا آمار 12 ماه گذشته را نشان می دهد ، جایی که می توانید ببینید React در هر ماه نسبت به Angular و Vue تعداد بیشتری بارگیری دارد.
توسعه برنامه موبایل
یک تمرکز اصلی برای این سه بزرگ استقرار موبایل است. React دارای React Native است که نه تنها برای کاربران React بلکه برای جامعه توسعه برنامه های گسترده تر ، به گزینه ای محبوب برای ساخت برنامه های iOS و Android تبدیل شده است. توسعه دهندگان Angular می توانند از NativeScript برای برنامه های بومی یا Ionic برای برنامه های تلفن همراه ترکیبی استفاده کنند ، در حالی که توسعه دهندگان Vue گزینه NativeScript یا Vue Native را دارند. به دلیل محبوبیت برنامه های تلفن همراه ، این یک قسمت کلیدی برای سرمایه گذاری است.
چارچوب های دیگری که باید در سال 2020 مورد توجه قرار گیرد
اگر می خواهید در سال 2020 چیز جدیدی امتحان کنید ، این چارچوب های JavaScript را بررسی کنید.
عنبر: یک چارچوب منبع باز برای ساخت برنامه های وب که بر اساس الگوی MVVM کار می کند. توسط چندین شرکت بزرگ مانند Microsoft ، Netflix و LinkedIn استفاده می شود.
شهاب سنگ: یک پلت فرم کامل جاوا اسکریپت برای توسعه برنامه های مدرن وب و تلفن همراه. یادگیری آن آسان است و جامعه ای کاملاً پشتیبانی کننده دارد.
نتیجه
هر سه چارچوب به طور مداوم در حال بهبود است ، که نشانه دلگرم کننده ای است. هر کس دیدگاه و راه حل ترجیحی خاص خود را دارد که باید از آن استفاده کند اما واقعاً به اندازه پروژه برمی گردد و باعث می شود احساس راحتی بیشتری داشته باشید.
مهمترین جنبه پشتیبانی مداوم از جوامع آنها است ، بنابراین اگر قصد دارید پروژه جدیدی را شروع کنید و قبلاً از هر سه مورد استفاده نکرده اید ، پس معتقدم که با همه آنها در امان هستید. اگر هنوز فرصتی برای یادگیری هیچ یک از این سه چارچوب پیدا نکرده اید ، بنابراین پیشنهاد می کنم برای شروع یادگیری آن را به وضوح سال نو خود تبدیل کنید. آینده حول این سه خواهد چرخید.
این محتوا در ابتدا در مجله نت ظاهر شد.
