هر آنچه در سال ۲۰۱۸ برای توسعه Front-End اتفاق افتاد

در این پست قصد داریم به برخی از اتفاقات مهمی که در سال ۲۰۱۸ برای توسعه Front-End رخ داده است بپردازیم.

نسخه‌های اساسی WebAssembly

  • The core specification released 1.0
  • WebAssembly JS Interface
  • WebAssembly Web API

محبوب‌ترین کتابخانه‌ها و فریم‌ورک‌های جاوا اسکریپت

بیشترین دانلودها در سال اخیر:

  • React
  • jQuery
  • Angular
  • Vue

نسخه V16 کتابخانه React

به عنوان محبوب‌ترین کتابخانه جاوا اسکریپت در سال اخیر (با بیشترین دانلود نسبت به رقبای خود) شناخته شده است. تیم React بطور مداوم این کتابخانه را با قابلیت‌های جدید به روز رسانی می‌کند و پیش‌بینی می‌شود در سال ۲۰۱۹ همچنین در صدر جدول باقی بماند. در این نسخه جدید شاهد موارد زیر بودیم.

  • Lifecycle methods
  • New context API
  • Pointer events
  • Lazy function
  • React.memo
  • React Hooks
  • Suspense API

نسخه ۳.۰ jQuery

با نسخه جدیدی که در ابتدای سال ۲۰۱۸ منتشر شد دیگر استفاده از نسخه‌های قدیمی‌تر معنایی ندارد. تغییرات اساسی در این نسخه ایجاد شده که در ادامه به برخی از آنها می‌پردازیم.

  • Old IE workarounds got removed
  • jQuery 3.0 runs in strict mode
  • For…of loops is introduced
  • Animations got a new API
  • Class manipulation methods support SVG
  • New Show/Hide Logic
  • Extra protection against XSS attacks

نسخه ۳.۰ Vue به زودی

این فریم‌ورک محبوب حتی تعداد ستاره‌هایی که در GitHub دریافت کرده از React بیشتر است. اخیرا در کنفرانسی که در تورنتو کانادا برگزار گردید، بناین‌گذار آن اعلام کرد که نسخه جدید این فریم‌ورک سریع‌تر، کوچک‌تر و نگهداری ساده‌تر نسبت به نسخه قبلی خود دارد. گرچه Vue در حال حاضر سریع است ولی تیم توسعه دهنده آن قصد دارد که آن را حتی سریع‌تر به بازار ارائه دهد. برخی از قابلیت‌های جدید Vue که آن را سریع‌تر می‌سازد در زیر آورده‌ایم.

  • Virtual DOM Rewrite
  • Optimized Slots Generation
  • Static Tree Hoisting
  • Static Props Hoisting
  • Proxy-based Observation

نسخه V7 فریم‌ورک Angular

فریم‌ورک جاوا اسکریپت گوگل که توسط تیم گوگل هم نگهداری میشه بسیار محبوبیت خاصی بین هوادارانش دارد و در این نسخه جدید (که اکتبر امسال منتشر شد) تغییرات اساسی صورت گرفته که برخی از آنها در زیر آورده شده است.

  • Virtual Scrolling
  • Drag and Drop
  • Support for Typescript 3.1
  • Support for RxJS 6.3
  • Support for Node 10
  • Angular Elements and Slots
  • Setting Bundle-Size Budgets
  • Removing reflect-metadata Polyfill in Production

نسخه Webpack 4

در ابتدای سال ۲۰۱۸ تنها ۸ ماه بعد از Webpack 3، نسخه چهارم آن منتشر شد و همچنان به دنبال سادگی و ساختار سریع‌تر است. Webpack الان WebAssembly را پشتیبانی می‌کند و شما قادر به import کردن مستقیم فایل‌های WebAssembly هستید. برخی از قابلیت‌های جدید این نسخه در زیر آورده شده است.

  • Support for various Module Types
  • Lighting the Fire with Mode
  • Zero Config Module Bundler #OCJS
  • Faster Build Times
  • Fresh Plugin System

نسخه Babel 7.0

پس از تقریبا ۳ سال از نسخه ۶، بابل ۷ در سال ۲۰۱۸ منتشر شد. بابل کتابخانه‌ای است که کد +ES6 را به ES5 انتقال می‌دهد و کد جاوا اسکریپت ما را با مرورگر سازگار می‌سازد. این نسخه از موارد زیر بهره می‌برد.

  • Upgrade tool
  • JS configs
  • config ‘overrides’
  • JSX Fragments
  • TypeScript
  • New Proposals

تایپ اسکریپت آینده جاوا اسکریپت

تایپ اسکریپت یک زبان برنامه‌نویسی متن باز است که توسط تیم مایکروسافت توسعه یافته و توسط همان تیم نگهداری می‌شود. در حقیقت همان جاوا اسکریپت است ولی به گونه‌ای نسخه توسعه داده شده‌ی آن می‌باشد. از ویژگی‌های خاصی برخوردار است که محبوبیت ویژه‌ای در میان توسعه دهندگان پیدا کرده است. به عنوان مثال strongly type یکی از ویژگی‌های بارز تایپ اسکریپت هست که در جاوا اسکریپت دیده نمی‌شود و آن تعریف مشخص و ثابت برای متغیرها می‌باشد و اگر بخواهیم متغیر را به صورت دیگری تعریف کنیم با اخطار مواجه می‌شوید. از دیگر خصوصیات آن وجود ترنسپایلر آن می‌باشد که به شما اجازه می‌دهد error کد خود را قبل از اجرای آن پیدا کنید و از صرف ساعت‌ها زمان برای debug کردن جلوگیری کنید. در ادامه برخی قابلیت‌های تایپ اسکریپت آورده شده است.

  • Type annotations & compile-time type checking
  • Type interface
  • Type erasure
  • Interfaces
  • Enumerated types
  • Generics
  • Namespaces
  • Tuples
  • Async/await

مسیر راه برای تبدیل شدن به یک توسعه دهنده وب

توسعه دهندگان وب معمولا به دو دسته Front-End (توسعه رابط کاربری و ظاهر سایت) و Back-End (هسته سایت یا بخش سمت سرور) تقسیم می‌شوند. شما چه به عنوان یک توسعه دهنده Front-End بخواهید شروع به کار کنید و یا توسعه دهنده Back-End، باید در موارد زیر تسلط کافی داشته باشید:

  • Git
  • SSH
  • HTTP/HTTPS
  • Terminal Usage
  • Data Structures and Algorithms
  • Character Encodings
  • GitHub

در ادامه مسیر راه برای تبدیل شدن به یک توسعه دهنده Front-End و Back-End با توضیحات آورده شده است.

مسیر راه برای یک توسعه دهنده Front-End

یادگیری اصول اولیه

  • درک اولیه از CSS، HTML و جاوا اسکریپت
  • طراحی Responsive
  • استفاده از ECMAScript 5

یادگیری عمیق‌تر

  • یادگیری Fonts، DOM و Maps در HTML و یادگیری CSS Icons
  • دسترسی به HTML DOM در جاوا اسکریپت و استفاده از AJAX و JSON برای درخواست داده از سرور

یادگیری فریم‌ورک

  • استفاده از فریم‌ورک‌های CSS مانند Bootstrap برای طراحی Responsive
  • استفاده از فریم‌وریک‌های جاوا اسکریپت مانند Vue ،Angular و کتابخانه React
  • کتابخانه jQuery شاید به محبوبیت فریم‌ورک‌های بالا نباشد ولی هنوز اکثر کاربران از آن بهره می‌برند.

جزییات بیشتر برای مسیر راه یک توسعه دهنده Front-End در شکل زیر آورده شده است.

مسیر راه برای یک توسعه دهنده Back-End

یادگیری زبان برنامه‌نویسی

  • اگر در برنامه‌نویسی Back-End اول راه هستید، بهتر است از زبان‌های Scripting شروع کنید بخاطر تقاضای بالای آنها.
  • اگر دانش کافی در بخش Front-End دارید، Node.js می‌تواند گزینه راحت‌تری برای یادگیری باشد.

یادگیری Package Manager

هر زبان برنامه‌نویسی Package Manager خاص خود را دارد:

  • استفاده از Composer برای PHP
  • استفاده از NPM و یا Yarn برای Node.js
  • استفاده از Pip برای Python
  • استفاده از RubyGems برای Ruby

یادگیری فریم‌ورک

  • اگر زبان انتخابی شما PHP بود از Laravel و یا Symfony استفاده کنید.
  • اگر زبان انتخابی شما Node.js باشد باز شما انتخابهای بسیاری دارید ولی بهترین آن Express.js می‌باشد.

جزییات بیشتر برای مسیر راه یک توسعه دهنده Back-End در شکل زیر آورده شده است.

افرادی که مهارت‌های برنامه‌نویسی را هم در بخش Front-End و هم Back-End دارند معمولا به عنوان توسعه دهندگان Full-Stack شناخته می‌شوند. معمولا یک توسعه دهنده Full-Stack باید قادر به برنامه‌نویسی در سه بخش را داشته باشد:

  • برنامه‌نویسی Browser با استفاده از جاوا اسکریپت، Vue ،Angular ،jQuery و …
  • برنامه‌نویسی Server با استفاده از Node ،Python ،ASP ،PHP و …
  • برنامه‌نویسی Database با استفاده از MongoDB، SQLite، SQL و …

چهار عادت بد در برنامه‌نویسی

هر فردی از یک طریق خاص آموزشی به یک توسعه دهنده و یا برنامه‌نویس تبدیل می‌شود. این خوب است که افراد ترجیح به متدهای مختلف برای یادگیری دارند، اما همچنین ممکن است عادت‌های بدی را برای آنها ایجاد کند که خودشان از آن خبر نداشته باشند.
در این پست بیایید به چهار عادت بد برنامه‌نویسی که باید آنها را از روال کاری خود حذف کنید بپردازیم.

استفاده از کدی بدون درک صحیح از آن

همیشه انجام کارها از ابتدا شاید راه‌کاری سازنده نباشد و برای شما زمان‌بر باشد. گاهی اوقات شما شاید ساعت‌ها زمان بگذارید و آخر با استفاده از کدهایی که در یک انجمن یا فوروم مشاهده می‌کنید بتواند در عرض چند دقیقه (بجای صرف ساعت‌ها وقت) به دست‌آوردی که می‌خواهید برسید. این کاملا بلامانع است ولی این زمانی مشکل‌ساز می‌شود که شما درک درست از استفاده این کد را نداشته باشید. حتی به این نیست که کد استفاده شده عملکرد درستی دارد یا خیر، بلکه می‌تواند مسائل پیچیده‌تری با خود داشته باشد که در ادامه به چندی از این موارد می‌پردازیم.
  • گذاشتن بی‌مورد یک حجم زیادی از کد که باعث Code Bloat می‌شود.
  • نداشتن دقت کافی به صورت مسئله و قرار دادن کدهایی که ناکارآمد هستند.
  • متد مورد استفاده طیف وسیعی از آسیب‌پذیری‌های امنیتی را برای سیستم شما ایجاد می‌کند.

نامگذاری نادرست متغیرها و توابع

تصور کنید که شما یک تابع جاوا اسکریپت برای یک فروشگاه تجارت الکترونیک برای محاسبه مقدار متوسط سفارش مشتری ایجاد می‌کنید. در حالت ایده آل، شما باید آن را به عناون مثال ()calculateAverageOrderValue نام‌گذاری کنید، زیرا این چیزی است که خواننده به طور عام درک می‌کند. فقط یک نگاه باید به آنها اجازه دهد که بداند هدف این تابع چیست؟ اما شما مجبور نیستید اینطور نام‌گذاری کنید و می‌توانید آن را بصورت () function abc بنویسید. اما لازم است بدانید با این فرمت نام‌گذاری، فردی قادر به خواندن و درک کد شما نخواهد بود و همچنین شما اگر بخواهید چند ماه بعد برگردید و آن را مطالعه کنید شاید دیگر برای شما هم قابل فهم نباشد.
برای مشاهده نمونه نام‌گذاری‌های اصولی اینجا را کلیک کنید.

عدم رعایت استانداردهای برنامه‌نویسی

رعایت استانداردهای برنامه‌نویسی برای تجزیه و تحلیل کدهای نوشته شده بسیار حائز اهمیت است. پیروی از استانداردهای کد‌نویسی کار خیلی آسانی هم نیست و گاهی اوقات خیلی خسته کننده می‌شود اما واقعیت امر این است که در پروژه‌های نسبتا بزرگ اعضای تیم نیاز دارند تا از یکسری قوانین تبعیت کنند. توجه داشته باشیم زمانی که یکسری قوانین کدنویسی مثلا تعداد اسپیس‌هایی که می‌بایست در کدها استفاده کرد را وضع می‌کنیم، تمامی اعضای تیم می‌بایست قبول کنند که از آن قوانین تبعیت کنند که در غیر این صورت، یک برنامه‌نویس خاطی می‌تواند هر چه سایر برنامه‌نویسان رشته کرده‌اند را پنبه کند! برای اعمال استانداردهای کدنویسی می‌توان از یکسری ابزارها هم استفاده کرد که فرآیند استاندارد‌سازی را تا حد قابل توجهی برای برنامه‌نویس سهل و آسان می‌سازند که این ابزارها بسته به IDEایی که استفاده می‌کنیم می‌توانند از خصوصیات مختلفی برخوردار باشند. بطور مثال، کدی که در زیر مشاهده می‌کنید بر اساس استانداردی به نام (PSR (PHP Standard Recommendation نوشته شده است:
در واقع در کد بالا پس از namespace و دستورات use یک اینتر قرار گرفته است و یا این که علامت } مرتبط با کلاس Foo در خط بعد نوشته شده است. به عنوان مثالی دیگر، آرگومان‌های متد sampleFunction با یک کاما و اسپیس از یکدیگر مجزا شده‌اند و این در حالی است که کاما به آرگومان اول چسبیده، سپس یک فاصله قرار گرفته و در نهایت آرگومان دوم نوشته شده است.
منبع: سکان آکادمی – https://bit.ly/2EHeYqS

استفاده از کدهای تکراری

در حوزه‌ی توسعه‌ی نرم افزار، اصول و قواعد بسیاری وجود دارد که گاها یکی از دیگری مهم‌تر جلوه می‌کند اما یکی از اساسی‌ترین قواعد برنامه‌نویسی، قانون DRY است که مخفف واژگان Don`t Repeat Yourself به معنی”دوباره کاری نکن” است!
این قانون توسط دو توسعه‌دهنده به نام های Andy Hunt و Dave Thomas ابداع شد که بسیاری از دیزاین پترن‌های معروف برنامه‌نویسی، ریشه در این قانون دارند.
برنامه‌نویسی که بتواند تشخیص دهد کدام بخش‌های کد اصطلاحاً Duplicate یا «مشابه» هستند و تمام تلاش خود را به کار بندد تا با استفاده از کلاس‌ها و فانکشن‌های مختلف، میزان استفاده از کدهای تکراری در سراسر برنامه را به حداقل برساند، در نهایت Source Code تمیز‌تری تحویل خواهد داد که در آینده نگهداری چنین پروژه‌یی به مراتب راحت‌تر از Source Codeای است که پر است از کدهای مشابه!
هرچه میزان کدهای دوپلیکیت در Source Code شما بیشتر باشد، احتمال ایجاد باگ در آینده به مراتب بیشتر خواهد شد؛ علاوه بر این، اگر روزی بخواهید بخشی از کد خود را ریفکتور کنید یا تغییر دهید، به جای یک بخش، می‌بایست چندین بخش را ریفکتور کنید که این کاری بس زمان‌گیر است.
در فرایند توسعه‌ی نرم افزار، بخش‌های بسیاری از کد را می‌توان دید که تکراری هستند و قانون DRY دقیقاً برای چنین موقعیت‌هایی است. شما به عنوان یک توسعه‌دهنده‌ی حرفه‌یی ، همواره باید این ذهنیت را داشته باشید که در نرم افزاری که می‌نویسید، خواه یک اپ موبایل باشد و خواه یک سایت، صرفاً از یک راه باید بتوان کار خاصی را انجام داد و این راه‌کار باید تا حد ممکن ساده، ایمن و اثربخش باشد.
دوپلیکیت شدن در منطق نرم‌افزار می‌تواند به اشکال مختلفی جلوه کند که از جمله‌ی رایج‌ترین آن‌ها می‌توان به آبجکت‌هایی که از روی کلاس خاصی ساخته می‌شوند اشاره کرد و اینجا است که بسیاری از دیزاین‌پترن‌ها به داد توسعه دهندگان می‌آیند. در واقع، ابداع دیزاین‌پترن‌ها یا «الگوهای طراحی» جلوگیری از استفاده از کدهای مشابه است.
منبع: سکان آکادمی – https://bit.ly/2CtVnbR

نتیجه‌گیری

داشتن سبک و استایل خاص خود در برنامه‌نویسی بسیار خوب است ولی همیشه مد نظر داشته باشید که عادتهای بد برنامه‌نویسی را از ذهن خود دور کنید تا بتوانید کدی بنویسید که برای سایر توسعه دهندگان قابل درک و فهم باشد. رعایت اصول برنامه‌نویسی از الزامات کاری شما خواهد بود و این چیزی است که کارفرمایان به دنبال آن هستند.

Create A product first!

Create a product first please!