https://virgool.ir/feed/@mr.snarosی برنامه نویس فرانت که خیلی تباه میباشد :))fa2026-11-11 01:34:57https://files.virgool.ir/upload/users/1264140/avatar/B3vZcg.jpghttps://virgool.ir/@mr.snaroshttps://virgool.ir/@mr.snaros/تست-برای-همه-lgzhwpeysbjvدر این مقاله سعی کردم که یه دید کلی از روش های تست به همه توسعه دهندگان یا کارشناس های تست نرم افزار بدم.محتوای این مقاله رو بر اساس مقالاتی هستش که خودم خوندم یا تجربه های خودم درمدت زمانی هستش که به عنوان توسعه دهنده وب فعالیت کردمقطعا همه مطالب دنیای تست رو پوشش نمیدیم و فقط یه بحث کوچیک درباره کلمات کلیدی دنیای تست هستش که برای تکمیل کردن مطالب باید حتما سرچ کنید :)))اگه نکته ی دارید حتما کامنت کنید یا لایک کنید و به بقیه هم معرفی کنید تا همدیگه رو کامل و کامل تر کنیم :))) مرسییدر این صفحه درباره چیا صحبت میکنیم* مدل های تست- Black-Box Testing.- White-Box Testing* هرم تست-unit test- integration test-E2Eتست نرم افزار با روش های مختلفی انجام میشه ولی بطور کلی میتوان آن ها را به دو بخش تقسیم کرد1: White-Box Testing2:Black-Box Testing.What is Black Box Testing?تست های جعبه سیاه بطور کامل ساختار , دیزاین و نوع پیاده سازی را در نظر نمیگیرد و شامل تست های میشود که از عملکرد داخلی یک سیستم ناآگاه است (نیازی هم نداره)در این نوع تست های , تستر ها ورودی های برای سیستم در نظر میگیرند منتظر پاسخ خواهند بود و باتوجه با پاسخ دریافت شده به موضوعاتی از قبیل : نوع پاسخ , زمان پاسخ و مسائل مربوط به قابلیت استفاده و قابلیت اطمینان بودن یک سیستم میتوانند نتیجه گیری کنند.این نوع روش تکنیک قوی و پر استفاده ی هستش و درجهان توسعه نرم افزار قطعا بیشترین استفاده را ازاین نوع تست میکنند بخاطر اینکه یک سیستم رو تا انتهای یک روند تست خواهد شد(end-to-end) و دقیقا ماننده یک یوزر (که به نحوه پیاده سازی شده سیستم اهمیت نمیدهد) و انتظار دارد که پاسخ درستی به درخواستش داده شود.تستر دقیقا میتواند یک یوزر را شبیه سازی کند و در طول مسیر میتواند UI/UX , دیتابیس و سرور و انواع وابستگی ها را تست کند.پس بسیار کاربردی و قدرتمند است.Black Box Testing Pros and Cons:- فواید : ۱) نیازی به دانش تکنیکال و برنامه نویسی ندارد ۲) تستر نیازی به یادگیری نحوه پیاده سازی سیستم ندارد ۳) تست ها را میتواند به شرکت ثالث (برون سپاری) یا به جمعی از استفاده کننده ها(درون سپاری) سپرد 4) تست ها پیچیدگی کمتری دارند - معایب: 1) سخت برای اتوماتیک کردن تست ها 2) اولویت بندی کردن که معمولا برای همه تست ها غیرممکن است 3) اگر آزمایشی با شکست مواجه شود, درک علت اصلی مشکل می تولند دشوار باشدTypes Of Black Box Testing: انواع تست های جعبه سیاه1) Functional Testing : در تست های جعبه سیاه میتوانیم یک فیچر یا فانکشن خاصی رو تست کنیم برای مثال تست ثبت سفارش یا ورود به سیستم یا ثبت نام 2) Non-Function Testing: تست جعبه سیاه میتوانن جنبه های یک سیستم رو که فراتر عمکلرد سیستم یا فیچر هست رو هم بررسی کنه.درواقع تست جعبه سیاه , آیا یک سیستم میتواند یک عمل خاص را اجرا کند را بررسی نمیکند بلکه قابل درستی بودن و یا به راحتی برای کاربران قابل استفاده است را نیز بررسی میکندبه عنوان مثال: - ایا سیستم یا فیچر برای کاربر قابل فهم و راحت هستش؟ - میزان لود سیستم - تست روی سیستم عامل ها و سایز های مختلف - در معرض آسیب‌پذیری‌های امنیتی یا تهدیدات امنیتی رایجBlack Box Testing TechniquesEquivalence Partitioningآزمایش‌کنندگان می‌توانند ورودی‌های ممکن را به گروه‌ها یا «پارتیشن‌ها» تقسیم کنند و تنها یک نمونه ورودی را از هر گروه آزمایش کنند. به عنوان مثال، اگر سیستمی به تاریخ تولد کاربر نیاز داشته باشد و برای همه کاربران زیر 18 سال پاسخ یکسانی ارائه دهد و برای کاربران بالای 18 سال پاسخ متفاوتی ارائه دهد، کافی است آزمایش‌کنندگان یک تاریخ تولد را در «زیر 18» بررسی کنند. گروه و یک تاریخ در گروه «بیش از 18 سال».Boundary Value Analysisآزمایش‌کنندگان می‌توانند تشخیص دهند که یک سیستم پاسخ خاصی حول یک مقدار مرزی خاص دارد. برای مثال، یک فیلد خاص ممکن است فقط مقادیر بین 0 و 99 را بپذیرد. آزمایش‌کنندگان می‌توانند روی مقادیر مرزی (1-، 0، 99 و 100) تمرکز کنند تا ببینند آیا سیستم ورودی‌ها را به درستی می‌پذیرد یا رد می‌کند.Decision Table Testingبسیاری از سیستم ها بر اساس مجموعه ای از شرایط خروجی ارائه می کنند. سپس تسترها می‌توانند «قوانین» را که ترکیبی از شرایط هستند و نتیجه هر قانون را شناسایی کنند، و یک مورد آزمایشی برای هر قانون طراحی کنند.به عنوان مثال، یک شرکت بیمه سلامت ممکن است بر اساس سن بیمه شده (زیر 40 سال یا بالای 40 سال) و سیگاری بودن یا نبودن آنها، حق بیمه متفاوتی را ارائه دهد. این یک جدول تصمیم گیری با چهار قانون و حداکثر چهار نتیجه ایجاد می کندWhat is White Box Testingتست جعبه سفید رویکردی است که به آزمایش‌کنندگان اجازه می‌دهد تا عملکرد داخلی یک سیستم نرم‌افزاری - کد، زیرساخت و ادغام آن با سیستم‌های خارجی را بررسی و تأیید کنند. تست جعبه سفید بخشی ضروری از فرآیندهای CI/CD هستشWhite Box Testing Pros and Consفواید : -پوشش کامل کد -اسان برای CI/CD و خودکار کردن تست ها -موجب بهبود کدنویسی و تمیز تر شدن سورس کدمعایب:- زحمت زیادی برای اتومیت کردن تست - به تغییرات کد حساس است و هزینه زیادی برای نگهداری و تغییرات داردTypes of White Box TestingUnit testingتست Unit Testing یک مرحله از تست نرم افزار است که در آن بخش‌های کوچک از یک برنامه (Units) یا کامپوننت‌های مختلف یک نرم افزار تست می‌شوند. برنامه نویسان از Unit Test استفاده می‌کنند تا ببیند بازدهی برنامه آنها چیزی است که انتظارش را داشتند یا خیر. به عبارتی Unit Testing به برنامه نویس نشان می‌دهد که چقدر به طراحی اولیه نزدیک شده و برنامه او مطابق استانداردهای طراحی اولیه نرم افزار عمل می‌کند یا خیر . منظور از Unit کوچک‌ترین بخش از برنامه است که قابل تست بوده و به طور معمول شامل چند ورودی و نهایت یک خروجی می‌شود. برای توضیح بیشتر سرچ کنید مطالب زیادی در ای باره نوشته شده است.Mutation testingدراین نوع تست ها درواقع برای تست ,تست های نوشته شده است.درواقع بطور مستقیم تغییر های در کد ایجاد میکند و سپس بلافاصله تست ها رو اجرا میکند.اگر تست ها شکست نخورد به این نتیجه میتوان رسید که تست های نوشته شده کل کد ها رو پوشش نداده است.Integration testingتست های integration ماژول های نرم افزار رو باهم ترکیب میکنه و ان ها رو به عنوان یک گروه تست میکند.بررسی میکند که ایا ماژول ها و سرویس های که نرم افزار شما را تشکیل میدهند به خوبی باهم کار میکنند یا نه.به عنوان مثال در توسعه نرم افزار های تحت وب کد ها , دیتابیس , سرویس های api تست میشود و به عنوان یک گروه در نظر گرفته میشودWhite box penetration testingخیلی مشخصه :) تست نفوذهStatic code analysisشناسایی خودکار آسیب‌پذیری‌ها یا خطاهای کدگذاری در کد استاتیک، با استفاده از الگوهای از پیش تعریف شده یا تجزیه و تحلیل یادگیری ماشین.حالا که دید کلی داریم , بهتره یه نگاه به هرم تست بندازیمWhat is the Testing Pyramid?هرم توسط مایک کوهن در کتاب موفق با چابکSucceeding with Agile (2009) استعاره ای از تفکر درمورد آ زمایش نرم افزار است و خیلی پر طرفدارا هستش و تا الان مورد استقبال قرار گرفتهاین هرم تلاش میکند تا به صورت بصری یک لاجیک (منطق) سازماندهی شده از استانداردهای آزمایش را نشان میدهد و سه لایه مجزا داردپایه این هرم یونیت تست ها هستند بالا تر توسعه کامل دادیم و نوعی از تست جعبه سیاه هستش که بخش های از کد رو ارزیابی میکندیک سطح بالاتر، در وسط هرم، integration tests را پیدا می‌کنیم که در کتاب مایک به آن‌ها «service tests » می‌گویند. Integration در این زمینه به آزمایش نحوه کار اجزای مختلف سیستم با هم اشاره دارد. به عنوان مثال، اگر یک مدل در کد می تواند به درستی داده ها را با پایگاه داده مبادله کند یا اگر یک روش بتواند اطلاعات را از یک API بازیابی کند. هیچ تعامل UI مورد نیاز نیست، زیرا تست های یکپارچه سازی می توانند به طور مستقیم کد را در رابط ها فراخوانی کنند.در بالای هرم ما تست های سرتاسری (E2E) را پیدا می کنیم. E2E که به عنوان تست‌های رابط کاربری نیز شناخته می‌شود، از برنامه استفاده کنید و ببینید آیا کار می‌کند یا خیر. اما به جای اینکه یک انسان آزمایش‌ها را انجام دهد، آزمایش‌های E2E کاملاً خودکار هستند. هر تعامل کاربر تقلید می شود. یک تست E2E می‌تواند روی دکمه‌ها کلیک کند، مقادیر را تایپ کند و آنچه را که UI نشان می‌دهد ارزیابی کند.همانطور که می بینید، سه نوع تست دامنه بسیار متفاوتی دارند: خب حالا سوال میشه که حالا چرا هرم ؟برای درک چگونگی شکل گیری هرم، باید پیچیدگی های هر نوع آزمایش را درک کنیم.تست های واحد کوچک هستند و بنابراین نوشتن و نگهداری آسان است. از آنجا که آنها بخش های بسیار باریک کد را آزمایش می کنند، ما به تعداد زیادی از آنها نیاز داریم. این معمولاً مشکلی نیست زیرا تست های واحد به اندازه کافی سبک هستند که می توانیم هزاران مورد را در چند ثانیه اجرا کنیم.تست های E2E در انتهای طیف قرار دارند. نوشتن آنها پیچیده است، نگهداری آنها دشوار است، به منابع زیادی نیاز دارند و به کندی اجرا می شوند. اما از آنجایی که می‌توانیم بسیاری از برنامه‌ها را با چند تست E2E پوشش دهیم، به تعداد کمتری از آنها نیاز داریم.در وسط، integration tests. را پیدا می کنیم. از نظر پیچیدگی، آنها در همان صفحه آزمون های واحد هستند. اما ما به تعداد زیادی از آنها نیاز نداریم زیرا فقط به آزمایش "لبه های" برنامه علاقه مندیم. در مقایسه با آزمون‌های واحد، integration tests به منابع بیشتری برای اجرا نیاز دارند اما از نظر بزرگی یکسان هستند.امیدواریم اکنون متوجه شده باشید که چرا هرم شکل خود را دارد: عرض هر لایه نشان دهنده کمیت نسبی ایده آل برای هر نوع آزمایش است. به عبارت دیگر، هرم می گوید ما باید چندE2E ، مقدار مناسبی از integration tests ، و گروهی از تست های واحد داشته باشیم.ماهیت توسعه نرم‌افزار اغلب می‌تواند باعث شود که هرم به طور خود به خود ظاهر شود - حتی زمانی که توسعه‌دهندگان آگاهانه قصد انجام آن را نداشته‌اند. چرا این اتفاق می افتد؟نوشتن تست های E2E زمانی که پروژه تازه شروع شده است چالش برانگیز است. مگر اینکه تیم توسعه چارچوبی مانند BDD را بپذیرد و از همان ابتدا acceptance test را بنویسد، اکثر تست های E2E فقط زمانی نوشته می شوند که یک نمونه اولیه یا حداقل محصول قابل اجرا وجود داشته باشد. تا آن زمان، توسعه دهندگان فرصت های زیادی برای نوشتن تست های واحد و integration خواهند داشت.عامل دومی که هرم را شکل می دهد سرعت است. هرچه مجموعه آزمایشی سریعتر باشد، توسعه دهندگان بیشتر آن را اجرا می کنند. تست های آهسته به حلقه بازخورد حیاتی مورد نیاز برای یک محیط مولد آسیب می زند.تست های پایین هرم سریع ترین هستند. بنابراین توسعه دهندگان تمایل دارند بیشتر از آنها بنویسند. برعکس، تست‌های E2E کند هستند و در نتیجه کمتر مورد استفاده قرار می‌گیرند. در نتیجه، یک برنامه وب بزرگ می تواند هزاران تست واحد، صدها تست یکپارچه سازی و چند ده تست E2E داشته باشد.هرم تست معروف ترین فرمت طراحی تست های خودکار است. فقط همین فرمت رو داریم؟ قطعا نه.Ali SarmadiAli SarmadiTue, 28 Nov 2023 02:37:08 +0330https://virgool.ir/@mr.snaros/ساختار-های-پوشه-بندی-در-react-qqnr37gg2q2yمسائلی که قرار درباره ش صبحت کنم مقدمهیه flow کلی از برنامه ساختار flat چیه و چه معایب و مزایایی دارهساختار Domain Driven Design(DDD) و معایب و مزایا و در اخر هم درباره ساختار view-state صحبت خواهیم کردمقدمه خب فرانت نسبت به سال های گذشته پیشرفت های عظیمی داشته و نسبت به الان از پیچیدگی کمتری برخوردار بوده.اما امروزه با پیدایش فریم ورک ها و کتابخونه های فرانت , زمین بازی و تاکتیک بازی کردن برای توسعه دهندگان متفاوت شده که حتی قابلیت رندر سمت کلاینت هم جزو این پیشرفت ها بوده است که تقریبا همه چیز باید توسط فرانت پردازش بشه.این رویکرد توسعه دهندگان فرانت را مجبور به دقت پیاده سازی و برنامه ریزی در پروژه ها کرده است تا به بهترین شکل ممکن سازماندهی انجام شود تا به مقیاس پذیریی و به راحتی قابل استفاده مجدد باشد مقیاس‌پذیری را به معنی کارآمدی و توانایی یک سازمان، سیستم، مدل یا عملگر زیر فشار گسترش یا افزایش حجم کاری توصیف می‌کنندوقتی یک اپلیکشین جدید شروع به توسعه میشود ممکن است به مرور زمان رشد کند و شروع به کد زدن بدون درنظر گرفتن یک سازماندهی و ساختار مناسب منجر به مشکلات متعددی میشود از جمله افزودن فیچر جدید و همینطور نگهداری کد های قدیمی بسیار سخت خواهد شد.قبل از سازماندهی ساختار پوشه های برنامه, درک flow برنامه ی که درحال ساخت هست بسیار مهم هستشمن در این مقاله از react استفاده میکنم و flow مورد نظرمون رو ریکت تمرکز داره اما باطن و تئوری ساختار پروژه تقریبا تفاوتی در تکنولوژی های دیگه ندارد.یک نمای کلی از flow برنامه فرانت در ریکتبرای پلن و سازماندهی کردن اپلیکشین فرانتمون قبلش باید بدونیم که چطور کار میکنه و یا اینکه بقیه اجزا چطور باهمدیگه درارتباط هستند همونطور که عکس بالا رو مشاهده میکنید : کاربر با برنامه تعامل برقرار میکنید و روتر , veiw خاصی از کامپونتهانمایش خواهد داد.هر veiw میتواند یک یا چند کامپونت داشته باشد.درمرحله بعدی ریداکس و اکشن های ریداکس رو داریم و ممکن است که API فراخوانی کند که در اخرین لایه وجود دارد.ساختار flat چیست؟ساختار falt یکی از معروفت ترین و پرکاربردترین ساختاری های شناخته شده فرانت هستش که logic برنامه رو از veiw ها و redux جدا میکند.یه مثال ساده بزنیم از یه پلفترم وبلاگ نویسی که چطور پوشه بندی و ساختار دهی شده است└── src ├── api │ ├── api.js │ ├── posts.js │ ├── comments.js ├── components │ ├── PostComponent.js │ ├── CommentComponent.js ├── shared │ ├── ButtonComponent.js │ ├── ModalComponent.js ├── containers │ ├── PostListContainer.js │ ├── CommentListContainer.js |── actions │ ├── PostActions.js │ ├── CommentActions.js ├── reducers │ ├── PostReducers.js │ ├── CommentReducers.js |── App.js |── store.jsمزایایی این نوع ساختار به راحتی و سادگی میتوان اشاره کرد که onbord توسعه دهنده ها روی این ساختار سریع و ساده استاما نقاط ضعف رو میتوان در مثال بالا به نبودن فایل مجزا برای ریداکس اشاره کرد که انگار ریداکس در کل برنامه وجود داره که اگر پروژه بزرگتر بشه برای اضافه کردن فیچر دردسر های زیادی خواهند داشت که باید خیلی از فایل ها رو در قسمت های مختلف تغییر داد.خلاصه تر بگم برا زمانی این ساختار خوبه که یک پروژه جمع و جور داشته باشیمساختار Domain Driven Design چیست (DDD) ?قبل اینکه درباره ساختار کلی این روش صحبت کنم , بهتر که درباره Domain صحبت کنیم و بدونیم که اصلا در اپلیکشین ها به چه معناست.دامین به حدود دانش و فعالیتی که منطق برنامه حول اون میچرخه گفته میشه که خلاصه ترینش همون بیزینس لاجیک هستش اگر مه بخواهیم ساختار پروژه رو بر اساس دامین ها جلو بریم باید که دامین ها متمایزی بسازیم که همانند مثال قبلی از مثال یک وبلاگ استفاده خواهیم که در این جا app , posy ,comment کاملا متمایز خواهد بود└── src ├── app │ ├── App.js │ ├── reducers.js ├── post │ ├── PostComponent.js │ ├── PostContainer.js │ ├── PostReducer.js │ ├── PostActions.js │ ├── PostsListComponent.js ├── comment │ ├── CommentComponent.js │ ├── CommentContainer.js │ ├── CommentReducer.js │ ├── CommentActions.js │ ├── CommentsListComponent.jsا.برای نوشتن هم میتوان دو روش رو پیش برد که یکی قراردادن ان ها در دامین خودشونو دومی هم یه پوشه کاملا جدا برای تست ها در نظر گرفتاز مزایای این ساختار میتونیم به مقیاس پذیری بالا و هچنین تمیز بودن کد ها اشاره کرد که رسیدن به هر قسمت از پروژه بر اساس لاجیک رو خیلی ساده میکنه همچین اوردن نیرو های جدید رو پروژه رو سریع تر میکنه چون ساختار واضح و قابل درکی میکنهیکی از مشکلات اساسیی توسعه نرم افزار رو حل میکنه اقای scott millett در کتابی که برای معماری DDD نوشتن اشاره میکنه :کدی که کار مفیدی انجام میده اما بدون توضیح چگونه !!!از معایب این معماری میتوان به هزینه اولیه برای توسعه اشاره کرد که ابتدای کار نیاز به زمان زیادی برای توسعه و فهمیدن منطق نرم افزار صرف خواهد شد اما در اینده بسیار سومند خواهد بودساختار view-state چیست؟این روش خیلی به روش flat شباهت دارد اما بهبود یافته تر که همه پوش های فایل redux در یک فهرست و فایل جمع اوری شده و پوشه های view and logic ب همان روش قبلی در پوشه اصلی باقی موندن.این معماری ساختار بسیار بهتری برای برنامه هایی است که بزرگ هستند و به نگهداری تعداد زیادی فایل مرتبط به Redux نیاز دارند.└── src ├── api │ ├── api.js │ ├── posts.js │ ├── comments.js ├── components │ ├── PostComponent.js │ ├── CommentComponent.js ├── shared │ ├── ButtonComponent.js │ ├── ModalComponent.js ├── containers │ ├── PostListContainer.js │ ├── CommentListContainer.js |── redux | |── store.js | |── middleware.js │ ├── post │ │ ├── PostActions.js │ │ ├── PostReducers.js │ ├── comment │ │ ├── CommentActions.js │ │ ├── CommentReducers.js |── App.jsاز مزایای این موضوع میتوان به ساختارمندی فایل های ریداکس اشاره کرد که نسبت به ساختار flat بسیار ساده و منظم تر خواهند بود و همچنین اضافه کردن فیچر ها به سادگی انجام خواهد شداز معایت این ساختار میتوان به پیچیدگی بخش logic , view زمانی که پروژه بزرگتر خواهد شد اشاره کرد که توسعه و اموزش پروژه رو سخت تر میکنهAli SarmadiAli SarmadiMon, 31 Oct 2022 05:41:07 +0330https://virgool.ir/@mr.snaros/داکر-در-فرانت-nxesqfufr9caداکر چیست ؟داکر یک پلتفرم نرم افزاری برای ساخت اپلیکیشن‌های مبتنی بر Container است. محیط‌های اجرایی کوچک و سبک که به طور مشترک از هسته سیستم عامل استفاده می‌کنند اما در عین حال در یک محیط ایزوله و کاملا جدا از هم قرار دارند.معماری داکر ( Docker architecure) داکر از معماری کلاینت - سرور استفاده میکند.داکر کلاینت با دکر دیمون( docer daemon) در ارتباط هست که کار های سنگین ساخت , اجرا و توزیع کانتینر های داکر شما را انجام می دهد.کلاینت داکر و دیمون می توانند بر روی یک سیستم اجرا شوند، یا می توانید یک کلاینت داکر را به یک داکر دیمون ریموت وصل کردداکر کلاینت و داکر ریمون با استفاده از یک REST API از طریق سوکت های یونیکس یا یک network باهم ارتباط برقرار میکنندیکی دیگه از داکر کلاینت ها داکر compose هستش که این امکان رو میده با برنامه هایی که از مجموعه ای از کانتینر ها تشکیل شده اند کار کنید.داکر دیمون (The Docker daemon) :داکر دیمون (dockerd) به ریکوست های داکر کلاینت گوش میکنه و اشیا داکر مانند image , کانتینرها , شبکه ها و volumes ها رو مدیریت میکنه.یک دیمون همچنین می تواند برای مدیریت سرویس های داکر با دیمون های دیگه ارتباط برقرار کنه.داکر کلاینت (The Docker client) :داکر کلاینت (docker) راه اصلی تعامل بسیاری از کاربران داکر با خود داکر هستش.وقتی دستوراتی مثل docker run استفاده میکنیم, داکر کلاینت این دستورات رو به داکر دیمون می فرستد که انها را اجرا می کند. داکر کلاینت می تواند با بیش از یک ریمون ارتباط برقرار کنه. ایمیج (Images) :یک image یک الگوی read-only با دستورالعمل هایی برای ایجاد یک container است.اغلب این images ها بر اساس یک image دیگر با برخی سفارش سازی ها ساخته شده است.ممکن است که image را خودمان بسازیم یا از image های که بقیه ساختن استفاده کنیم.برای ساخت image های خودمان یک Dockerfile بهمراه دستور ساده برای تعریف مراحل موردنیاز برای ایجاد image و اجرای آن ایجاد میکنیم.هر دستورالعمل در Dockerfile یک لایه در image ایجاد میکند.وقتی Dockerfile تغییر میدهیم و image را rebuild میکنیم , تنها لایه هایی که تغییر کرده اند بازسازی می شوند.این موضوع باعث میشود که imageهای داکر با فناوری های شبیه سازی دیگری که موجود هست , سریع تر و کوچیک تر باشند.کانتینر ها(Containers) :کانتینر یک نمونه قابل اجرا از یک image است. می توانید با استفاده از Docker API یا CLI یک کانتینر ایجاد , شروع , توقف , حرکت یا حذف کنید.می توانیم یک کانتینر رو به یک یا چند نتورک , فضای ذخیره سازی را به آن متصل کنید یا حتی یک image جدید رو بر اساس state فعل آن ایجاد کنید.بطور پیش فرض,یک کانتینر به خوبی از سایر کانتینرها و ماشین میزبان ان جدا شده است.می توانیم کنترل کنیم که شبکه یک کانتینر , ذخیره سازی یا سایر زیر سیستم های زیربنایی چقدر از کانتینر های دیگر یا از ماشین میزبان جدا هستند.حالا برای بهتر فهمیدن موضوعاتی که صحبتش شد, بهتره که بصورت عملی وارد کار بشیم.قدم اول اینکه داکر رو روی سیستم خودتون نصب کنید.برای نصب به صفحه رسمی داکر مراجعه کنید.بعد از نصب داکر , ترمینال خودتونو باز کنید و دستور docker run hello-world را اجرا کنید.شما باید پیام زیر را ببنید :➜ ~ docker run hello-world Unable to find image 'hello-world:latest' locally latest: Pulling from library/hello-world 1b930d010525: Pull complete Digest: sha256:6540fc08ee6e6b7b63468dc3317e3303aae178cb8a45ed3123180328bcc1d20f Status: Downloaded newer image for hello-world:latest Hello from Docker! This message shows that your installation appears to be working correctly.بیاید عمیق تر باشیم که چیکار کردیم :-- کامنت docker دستوری هست برای ارتباط و کار با داکر کلاینت-- زمانی که شما دستور docker run [name of image] را اجرا میکنید,داکر دیمون ابتدا چک میکند که یک کپی لوکالی از image فراخونده شده دارید یا نه.درصورتی که وجود نداشته باشد از docker hub دانلود خواهد کرد.-- درمرحله بعدی داکر دیمون یک کانتینر ایجاد میکند که پیام Hello form Docker! را تولید میکند-- سپس داکر ریمون خروجی را به داکر کلاینت ارسال میکند و ان را به ترمینال شما می فرستدداکر برای ریکت خب حالا میرسیم به قسمت هیجان انگیز ماجرا که قراره Docker file خودمونو بسازیم که یه image کاستوم شده بهمون بده.برای شروع دستورات زیر را اجرا کنید➜ ~ npx create-react-app react-test ➜ ~ cd react-test ➜ ~ yarn startشما باید صفحه اصلی ریکت رو ببینیدبرای ساخت داکرفایل خودمون باید در روت پروژه فایلی با نام Dockerfile ساخته شود همراه با محتوایی که زیر همین جمله براتون گذاشتم# Select the image to use FROM node ## Install dependencies in the root of the Container COPY package.json yarn.lock ./ ENV NODE_PATH=/node_modules ENV PATH=$PATH:/node_modules/.bin RUN yarn # Add project files to /app route in Container ADD . /app # Set working dir to /app WORKDIR /app # expose port 3000 EXPOSE 3000 CMD npm startدر ابتدا FROM : مشخص کردن image مورد استفاده در ContainerCOPY : اضافه یا کپی فایل یا دایرکتوری به Container بدون لینک کردنENV: ا ضافه کردن متغییرهای محلی به ContainerRUN : اجرا کردن دستور هنگام ساخته شدن ContainerADD:اضافه یا کپی یا لینک کردن فایل یا دایرکتوری به ContainerWORKDIR : ست کردن دایرکتوری اجرایی در ContainerEXPOSE : مشخص کردن پورت هایی که Container بعد بالا آمدن اجازه دسترسی به آن را می دهدCMD : اجرا کردن یک دستور بعد از ساخته شدن Containerحالا زمان این رسیده که با کمک داکر فایلی که نوشته شده image خودمونو بسازیم :docker image build -t react:test .دستور وارد شده image شما رو میسازه و با اپشن t , شما به image خودتون یه تگ انتخاب میکنید تا استفاده ازش راحت تر باشه.سپس با دستور زیر image ساخته شده رو روی پورتی که مشخص میکنید اجرا میکنیدdocker run -it -p 3000:3000 react:testدستور بالا image شما رو اجرا میکنه و درحال اجرا نگهش میداره با اپشن it . اپشن -p درواقع پورت 3000 کانیتنر شما رو به پورت 3000 سیستم محلی متصل میشه.شما بعد از زدن دستور روی پورت 3000 پروژه خودتونو دارید که رو حالت دولوپ دیپلوی شده و حالا شما یه داکر برای پروژه خودتون ساختید.برای تمرین داکرفایلی ک نوشتید رو تغییر بدید به طوری که درحالت پروداکشن پروژه ریکتی را run کرده باشید!!البته که مسله داکر خیلی گسترده و عظیمه که من اینجا خواستم یه دید مقدماتی از داکر داده باشم و یه پروژه خیلی ساده از داکر ساخته باشیم.امیدوارم مفید واقع شده باشه.اگه سوالی داشتید حتما این زیر کامنت برام بزارید..علی سرمدی :)))Ali SarmadiAli SarmadiFri, 02 Sep 2022 02:40:13 +0430https://virgool.ir/Rocket/بررسی-تفاوتهای-redux-flux-mvc-و-اشنایی-باهشون-u4hnpfhdmtj1این پست درواقع برداشت و ترجمه خودم از چندین منبع هستش که فکر کردم به درد بقیه هم بخوره:))))ما توسعه دهنده ها , در طول توسعه نرم افزار همیشه به دنبال برطرف کردن نیاز های مشتری و مشکلات کسب و کار و کاربران هستیم لذا برای رسیدن به این هدف از الگو ها و تکنولوژی های متفاوتی استفاده میکنیمطی سال های زیادی , طراحی اپلیکیشن ها حول الگوی MVC (Modal-View-Controller) می چرخید که یه سری کتابخونه ها و معماری های خفنی مثل Flux و Redux در همین راستا به وجود اومدن که به شما کمک میکند تا با برنامه های پیچیده مقابله کنید.در اینجا سعی کردیم که یه مقایسه کوچیکی از این ابزار ها داشته باشیم که اگر قسمتی از این متن از نظر فنی مشکلاتی داشت , خیلی خوشحال میشم که مطرح کنید و یا نظراتت خودتونو برام بنویسید :)))1) Architecturemvc : الگوی معماری توسعه رابط کاربری این الگو با سه لایه توسعه که میسازد , شناخته میشه و کامپونت ها رو به جزء تقسیم میکند :model : با دیتا ها و رفتار های اون دیتا سروکار دارهview : وظیفه نمایش دیتا ها در رابطه کاربری رو داره contoller : اینترفیس بین دوتا لایه دیگه که توضیح دادیم عمل میکنهزمانی که کنترلر درخواستی رو از سمت کاربر دریافت میکنه , از veiw و model مناسبی استفاده میکند تا پاسخی برای جواب دادن به درخواست کاربر ایجاد کنهflux : معماری اپلیکشین که برای ساخت وب سایت های سمت کلاینت طراحی شدهبعد از مدتی تیم توسعه فیسبوک متوجه بی ثباتی و پیچیدگی معماری mvc شدن , شروع به تغییرات اساسی در سیسم کردن که موجب ایجاد flux شده و جایگزینی برای mvc معرفی کردن. معماری flux بر اساس موارد زیر میباشد :استور (store/stores) : مثل ظرف (container) برای state ها و logic نرم افزار هستش.ویو(view) : مثل v در mvc که در ریکت به کامپونت ها اشاره میکنه .اکشن (Actions) : دیتا ها رو از veiw میگیره و به dispacher انتقال میده.دیسپچر(Dispatcher): اقدامات و اپدیت کردن store ها مدیریت میکنهدر فلاکس , زمانی که کاربر رو یه چیزی کلیک میکند , view اکشن ها رو میسازه.اکشن ها میتوانند که دیتاجدید درست کنند و به سمت dispatcher بفرسته که این dispatcher دیتا و نتیحه مناسب رو در store اعمال کند/اپدیت کند.استور ها هم دیتا به روزرسانی شده را به veiw منتقل میکندredux : یه کتابخونه رایگان و متن باز برای ساختن رابط کاربری که معمولا با ریکت و انگولار توسعه داده میشهبا این حال دن ابراموف Dan Abramov احساس کرد که این معماری می تواند ساده تر باشه و درنتیجه همرا با اندرو کلاک Andrew clark در سال ۲۰۱۵ ریداکس را ساختنریداکس یه کتابخانه جاوا اسکریپتی هستش که ایده فلاکس رو پیدا سازی میکنه اما با روشی کاملا متفاوت و اجزای این معماری عبارتنداز :Reducer : لاجیکی (Logic)که تصمیم چگونه تغییر کردن اطلاعات شما رو در pure fun تغییر کندCentralized store: یک شی هستش که استیت کل نرم افزار شما رو نگه میدارهدر ریداکس هر event همانند اکشن هستند که به pure fun در reducer ارسال می شوند که store رو اپدیت میکنند بر اساس داده های جدیدی که از اکشن ها میاد.استور یه state جدید میسازه و برای اپدیت کردن veiw فرستاده میشه.در این زمانه که view برای نمایش تغییرات دوباره رندر میشود.2. Data Flow Directionپیاده سازی mvc درواقع جریان های داده دو طرفه رو اعمل میکنه که با جریان داده های یک طرفه ریداکس و فلاکس متفاوت است.در mvc هیچ کانال واحد یا مسیر واحدی برای داده های که در ان جریان دارد , وجود ندارد.در اینجا بخش های مختلف نرم افزار دارای اختیاراتی برای تغییر در state سیستم هستند و همچنین state در سراسر برنامه غیرمتمرکز است.3. Single or Multiple Storesفلاکس از " stores " برای ذخیره هر چیزی که مرتبط با دیتا یا state استفاده میکند.درحالی که در mvc سعی میکند یک شی واحد را modelکند.در mvc مفهوم store معنی ندارد و store بیشتر شبیه یک مدل در mvc است اما به جای اینکه فقط یک رکورد پایگاه داده را نشان دهد , state چندینobject رو کنترل میکنهتفاوت اصلی ریداکس و فلاکس در این است که فلاکس چندین store میتواند داشته باشداما redux تنها یک store دارد.4. Where Business Logic resides?در دنیای ما توسعه دهنده ها, بخش بیزینس و منطق نرم افزار از مهمترین بخش های توسعه هستد که باید توجه زیادی بهش کرد.ما در mvc این قسمت(logic) توسط کنترلر ها مدیریت میشه و دراین بخش تعریف شدهدر flux تمام منطق (logic) توسط store کنترل میشوددر redux توسط reducer تمام منطق مدیریت میشود .Ali SarmadiAli SarmadiFri, 26 Aug 2022 23:34:49 +0430https://virgool.ir/@mr.snaros/موتور-جاوا-اسکریپت-یا-همون-v8-چطور-کار-میکنهقسمت-اول-vcumvveqn8g8اگر تخصصی به قضیه نگاه کنیم , جاوا اسکریپت ۵ مرحله برای اجرا دارد.۱) اماده شدن مروگر۲) کامپایل کد جاوا اسکریپت۳) تولید بایت کد ها۴) تفسیر و اجرای بایت کد های مرحله قبل۵) یه مقدار بهینه سازی بایت۱) اماده شدن مرورگربخواهیم فنی به این موضوع نگاه کنیم درواقع این موضوع قسمتی از کاری که v8 میکنه نیست.درواقع رندر شدن مرورگر برای سرویس میزبان و v8 هستش که اماده اجراشون میکنه.یه مرورگر چندین فرایند رندر کردن رو داره که معمولا هر تب مرورگر یک فرایند رندر شدن و ساختن یه نمونه از v8رو برعهده داره.حالا سوال پیش میاد ک این سرویس میزبان (host environment ) چیه که ما تکرارش میکنیم؟مرورگره !!! تو این مقاله هرجا که گفتیم سرویس میزبان درمواقع به مرورگر اشاره میکنیممرورگر یکی از سرویس های میزبان جاوا اسکریپته مثل نود جی اس سوال بعدی که پیش میاد اینکه حالا تو این سرویس میزبان یا مرورگر دقیقا چی هستش؟این محیط یا سرویس میزبان , هرچیزی که موتور جاوا اسکریپت برای کار نیاز داره رو فراهم میکنه , درواقع عین این هستش ک بنزین این موتورو فراهم میکنه تا کار کنه :)))) حالا این مواردی ک فراهم میکنه چی هستش؟(به عکس بالا توجه شود)1) Call Stack2) Heap3) Callback queue4) Event loop5) Web API and Web DOMکاربر عزیز ما , وقتی تو صفحه ی درحال انجام مجموعه از کار هاست که موجب ایجاد رویداد ها و توابعی میشود.مرورگر اون ها رو با توابع مربوطه به صف ( Callback queue) اضافه میکنه.ما یه حلقه رویداد ها داریم (event loop) که عین یه حلقه بی نهایت به گرفتن اطلاعات از صف ( Callback queue) ادامه میده بعدش جاوا اسکریپت تو همین callback کامپایل و اجرا میشه.بعضی از دیتا ها رو قسمت call stack و بعضی دیگه رو تو heap ذخیره میکنه.مثل ارایه یا یه ابجکتحالا چرا مرورگر دیتا رو در دو قسمت متفاوت ذخیره میکنه؟-** فضا رو خرج کنی برای سرعت :یه call stack به یک فضای پیوسته(پشت سرهم) تو حافظه رم نیاز داره که این موضوع پردازش رو خیلی سریع میکنه.این فضا رو خیلی کم و سخت میتونی پیدا کنی تو حافظه.برای حل این موضوع ,طراحان مرورگر اومدن با بیشترین فضای ممکن نگه داشتن.اینحا همون جایی که بعضی وقتا بهت میگن داداچ زیادی مصرف کردی و من سریز شدم(stack-overflow).حالا مرورگر ها معمولا دیتا ها و اطلاعاتی که سایز کمی دارن تو این call stack ذخیره میکنن مثل اعداد صبح یا هر primary data types.-** معامله سرعت برای فضا تو heap نیازی به یه فضای پیوسته نداری تا اطلاعات و دیتا های ک ممکنه گسترده باشند مثل ابجت ها رو ذخیره کنی.این مبادله برای اینکه ک heap کلا برای پردازش داده ها نسبا کندهV8 engine relies on and empowers the host environmentاین جمله یه خلاصه ی از کل این مقاله س.موتور عزیز و محبوب جاوا اسکریپت به محیط میزبان ما وابسته س و اونو قوی و قدرتمندش میکنه رابطه مرورگر یا محیط میزبان با موتور v8 عین رابطه سیستم عامل ها با نرم افزار هستش.اگر سیستم عامل نباشه قطعا این نرم افزار ها کار نمیکنند و از طرفی هم این نرم افزار ها موجب قوی تر شدن سیستم عامل ما میشه.نمونه ش هم نرم افزار فتوشاپه که اگه ویندوز یا مک وجود نداشته باشند اصلا کار نمیکنن ولی اگر فتوشاپ نباشه ما روی ویندوز و مک , نمیتونیم طرح های خوشکل طراحی کنیم.همونطور که گفتیم پس این موتور v8 باید مرورگر مارو قوی تر کنه و قابلیت های جالبی داشته باشه که چندتاشو مثال میزنیم براتونJavaScript core features based on the ECMAScript standard, such as the creation of Object and FunctionGarbage collection mechanismCoroutine featuresAnd more…بعد از اینکه جفتشون اماده شدن و کار های مربوط به خودشونو انجام دادن تا به نقطه برسند که قابلیت اجرا شدن داشته باشند , انوقت که این موتور v8 میره مرحله بعد ...Ali SarmadiAli SarmadiSun, 10 Apr 2022 22:28:20 +0430