نوشته های Erfan Ansari

بهترین استراتژی برای گیت برنچینگ چیه؟

Erfan Ansari — Mon, 18 Oct 2021 13:41:21 +0330

گیت و بقیه ورژن سیستم کنترل ها به توسعه دهنده های نرم افزار قدرت مدیریت کردن، پیگیری کردن و سازماندهی کردن کد رو دادن.البته، هر توسعه دهنده و تیم توسعه متفاوتن و نیاز های منحصر به فردی دارن، اینجا هست که استراتژی گیت برنچینگ پا به میدون میذاره.اینجا میخوام درباره سه تا از محبوب ترین استراتژی های برنچینگ گیت صحبت کنم، هر کدوم با فواید خودش.بهترین قسمت؟ هیچ کدوم از این workflow ها حکم اسمونی نیستن و میتونن با توجه به نیاز های هر شخص یا تیم تغییر کنن که بهترین نتیجه رو ارائه بدن.نکته: در این مقاله به جای master از main استفاده شده.Git Flow Branch Strategyایده اصلی پشت Git flow branching strategy این هست که کار رو روی انواع مختلف برنچ ایزوله کرد.درکل پنج نوع برنچ مختلف وجود داره:MainDevelopFeatureReleaseHotfixدو تا برنچ اصلی داخل استراتژی Git flow، برنچ های main و develop هستن. سه نوع برنچ ساپورتینگ هم با اهداف مختلف وجود دارن : feature, release, and hotfix.مزایا و معایباستراتژی Git flow مزیت های زیادی داره اما با خودش یه سری چالش هم میاره.مزایای استفاده از Git flow:انواع مختلف برنچ، سازماندهی کردن کار رو راحت و شهودی میکنه.پروسه اصولی این نوع توسعه اجازه تست کردن کارامدی رو میده.استفاده از برنچ های release اجازه میده که راحت و به طور مدام از چند ورژن مختلف پروداکشن کد ساپورت کرد.چالش های استفاده از Git flow:بسته به پیچیدگی پروژه، استراتژی Git flow میتونه پروسه توسعه و انتشار رو بیش از حد پیچیده و کند بکنه.به خاطر چرخه توسعه طولانی، Git flow نمیتونه از CI/CD پشتیبانی کنه.GitHub Flow Branch Strategyاستراتژی GitHub flow نسبتا workflow ساده ای هست که اجازه میده تیم های کوچیک تر، یا وب اپلیکیشن/پروژه هایی که نیاز ندارن از چند ورژن مختلف ساپورت کنن، سرعت توسعه اشون رو تسریع کنن.در استراتژی GitHub flow، برنچ main همیشه شامل کد اماده production هست. بقیه برنچ ها یعنی فیچر برنچ ها باید شامل کار روی فیچر های جدید و فیکس کردن باگ ها باشن و وقتی کار روشون تموم شد و review شدن روی برنچ main مرج بشن.مواردی که باید هنگام کار با GitHub flow در نظر بگیرید:هنگام کار با استراتژی GitHub flow، شش تا اصل هستن که باید بهشون پایبند باشید تا مطمئن بشید کد خوبی رو maintain کرده اید.هر کدی که داخل برنچ main هست باید قابل دیپلوی باشه.۲. برای کار جدید روی پروژه یه برنچ با اسم گویا بسازید مثل new-oauth2-scopes.۳. کار جدیدتون رو روی برنچ لوکال commit کنید و به طور منظم روی برنچ ریموت پوش کنید.۴. برای کمک یا فیدبک، یا وقتی که فکر میکنید کدتون اماده مرج کردن با برنچ main هست،pull request باز کنید.۵. بعد از اینکه کارتون قبول و review شد، میتونه با برنچ main مرج بشه.۶. وقتی کارتون با برنچ main مرج شد باید بلافاصله دیپلوی بشه.مزایا و معایبمزایای استفاده از GitHub flow:از بین سه استراتژی که تو این مقاله بهش اشاره شد، GitHub flow از همه ساده تره.به خاطر ساده بودن workflow، این استراتژی اجازه CI/CD رو میده.این استراتژی برای تیم های کوچک و وب اپلیکیشن ها عالی کار میکنه.چالش های استفاده از GitHub flow:این استراتژی نمیتونه همزمان از چند ورژن مختلف کد production ساپورت کنه.نبود برنچ های اختصاصی توسعه این استراتژی رو بیشتر مستعد وجود باگ تو production میکنه.GitLab Flow Branch Strategyاستراتژی GitLab flow با استراتژی GitHub flow شباهت داره، متمایز کننده اصلی وجود environment برنچ هایی مثل pre-production، production یا برنچ های release هست بسته به شرایط.مثل دو استراتژی قبلی، GitLab flow هم یک برنچ main داره که شامل کدی هست که اماده دیپلوی شدنه، گرچه این برنچ کد اصلی برای انتشار رو شامل نمیشه.در این استراتژی، برنچ feature شامل کدی میشه که فیچر اضافه کرده یا باگی رو فیکس کرده و بعد از تموم شدن،‌ review شدن و قبول شدن با برنچ main مرج میشه.استفاده از GitLab flow برای چرخه انتشار:استراتژی GitLab flow با دو نوع مختلف برای چرخه انتشار کار میکنه:انتشار ورژن بندی شده(Versioned Release): هر انتشار یک برنچ release داره که بر پایه برنچ main هست.فیکس کردن باگ ها باید اول با برنچ main مرج بشن، قبل از cherry-picked(انتخاب یه کامیت از یه برنچ و اعمالش رو یه برنچ دیگه) شدن با برنچ release.انتشار مداوم(Continuous Release): برنچ های production برای شامل شدن کد اماده دیپلوی استفاده میشن.پس وقتی کد اماده انتشار هست با برنچ production مرج میشه.مزایای استفاده از GitLab flow:در مقایسه با استراتژی Git flow، استراتژی GitLab flow ساده تره.این استراتژی نسبت به استراتژی GitHub flow از ساختار بهتری برخورداره.بعد از انجام تغییرات جزئی، GitLab flow اجازه Continuous Delivery و انتشار ورژن بندی شده رو میده.چالش های استفاده از GitLab flow:این استراتژی ساده ترین استراتژی گیت برنچینگ نیست.این استراتژی سازمان یافته ترین استراتژی نیست که میتونه باعث شلوغ و به هم ریخته شدن collaborate کردن بشه.پس در کل بهترین استراتژی برای گیت برنچینگ چیه؟جواب سوال بهترین استراتژی برای گیت برنچینگ چیه بسته به شما و محیط تیمتون، پروژه و نیاز های خاص توسعه اتون داره.گزینه ای وجود نداره که بتونه واسه هر شرایطی بهترین انتخاب باشه و صرف نظر از اینکه از کدوم استفاده میکنید، احتمال اینکه بتونید با کمی تغییر بهینه اش کنید وجود داره.

قبل از شروع کردن ری اکت چیا باید بلد باشیم؟

Erfan Ansari — Sun, 09 May 2021 21:57:34 +0430

A declarative, efficient, and flexible JavaScript library for building user interfaces.یکی از سوال هایی که داخل گروه های برنامه نویسی خیلی زیاد میبینم بچه ها میپرسن همین سوال بالا هست. تو ذهنمه از جادی شنیدم هر چیزی رو سه بار تو گپ های برنامه نویسی پرسیدن مقاله کن. خلاصه تو این مقاله میخوایم در همین مورد حرف بزنیم که قبل از کارکردن با ری اکت باید چیا رو بلد باشیم که سریع تر ری اکت رو یادبگیریم، درکش کنیم و ازش استفاده کنیم.خب همین اول کار لیستشون رو اینجا میارم که جمع و جور یک جا داشته باشیدشون، واسه بقیه مقاله هم بررسیشون میکنم.Core ConceptsES6 classes (encapsulation , methods etc)Arrow functions (lexical this etc)Destructuring assignment (array destructuring, object destructuring)Array Methods (map, filter, reduce etc).Asynchronous javascript (Promises, async await etc)ES6 module system. (default exports, named exports)this keyword/variable behaviorSpread Operator / Rest ParameterTernary OperatorGood to knowFunctional Programming Concepts (immutable data and pure functions)Logical OperatorWeb APIsHIGHER-ORDER FUNCTIONSES6 Classesخب اولین چیزی که میریم سراغشون شی گرایی و کلس ها در جاوااسکریپت هستن ببینید در کل سه روش واسه پیاده کردن شی گرایی در جاوااسکریپت وجود داره1-Object.create()2-Constructor functions3-ES6 Classesخب اولی رو کاری باهاش نداریم چون خیلی کم استفاده میشه، میمونه Constructor functions, ES6 Classes.قبلا شی گرایی در جی اس با استفاده از Constructor functions انجام میشد ولی یکم بعد اومدن کلس هارو به جاوااسکریپت اضافه کردن واسه اینکه از نظر سینتکسی اسون تر بشه شی گرایی رو پیاده کرد. یک مثال ساده بخوام ازش بزنم و جز اولین چیز هایی هست که شما با یادگیری ری اکت میبینیدش کلس کامپوننت ها(اجزای صفحه مثل باتن هدر و...) هستن.import React from "react" class App extends React.Component { render() { return

Hello React

; } } export default App;این کد میاد یک کامپوننت به اسم App رو صفحه رندر میکنه که یک تگ h1 رو نمایش میده.داخل همین چند خط میبینیم که کلس App میاد خواص خودش رو از کلس Component از لایببری ری اکت به ارث میبره و از متود render هم استفاده میکنه پس مشخصه که باید کلس هارو بلد باشیم.نکتهشما ممکنه کاملا کد هارو متوجه نشید و طبیعی هم هست چون هنوز ری اکت کار نکردید، هدف مقاله هم صرفا اشنایی شما با این مفاهیم هست و اینکه بدونید این مفاهیم بسیار پر استفاده هستن و یادگیریشون قبل از شروع ری اکت لازمه. در هر صورت اگه میخواید که کد هارو خودتون اجرا کنید من لینک codesandbox رو این پایین میذارم.https://codesandbox.io/s/tender-williams-7mdl7Arrow functionsاز arrow function ها هم خیلی زیاد استفاده میشه داخل ری اکت و حتما باید بلدشون باشید.arrow function ها یک سری فانکشن اکسپرشن(هر واحد صحیحی از کد که به یک مقدار ختم شه رو اکسپرشن میگن) های جمع و جور هستن که مزایا و معایب خودشون رو دارن و باید در جای مناسبش استفاده بشن. بذارید مثالی که تو ری اکت ازشون استفاده میشه رو بزنم.import React from "react" const App = () => { const [value, setValue] = React.useState('React') return ( <>

Hello {value}

setValue(e.target.value)}/> ); } export default App;تو کد بالا میبینید که دو بار از arrow function ها استفاده شده، یک بار واسه ساختن از یک کامپوننت و یک بار داخل ایونت واسه ریختن مقدار داخل اینپوت داخل تگ h1.یه کاربرد خیلی خوب دیگه هم دارن که جلوتر بهش میپردازیم.Destructuring assignmentیه ویژگی خیلی خفنی که مدتیه به زبان جاوااسکریپت اضافه شده همین چیزی هست که تیترش رو بالا نوشتم. destructuring رو به کرات داخل اکوسیستم جاوااسکریپت میبینید که استفاده میشه.این ویژگی به ما اجازه میده که مقدار هارو از ارایه unpack کنیم حالا یعنی چی بذارید مثال بزنمconst colors = ['red', 'green', 'blue']; // without using destructuring const red = colors[0] const green = colors[1] const blue = colors[2] // using destructuring const [red, green, blue] = colorsمی بینید که خیلی کوتاه تر و خواناتر تونستیم مقدار هارو از ارایه دربیاریم. خب این خیلی پر استفادست داخل ری اکت یک استفادش رو تو قسمت arrow functions دیدیم در واقع.// without using destructuring const useState = React.useState('React') const value = useState[0] const setValue = useState[1] // using destructuring const [value, setValue] = React.useState('React')میتونیم destructuring رو روی ابجکت ها هم پیاده کنیم، به این شکل:const info = { name: 'javascript', age: 26 } const {name, age} = info console.log(name, age) // javascript 26 function Log({name, age}) { console.log(`My name is ${name}, I am ${age} years old.`) } Log(info) // My name is javascript, I am 26 years old.Array Methodsیه مبحث دیگه که خیلی باهاش هم توی وانیلا جاوااسکریپت هم داخل فریمورک ها و لایبرری ها باهاش سر و کار داریم متود های ارایه هستن. توصیه میکنم حتما اکثرشون رو که استفاده میشن رو یاد بگیرید. سه تا از این ها که خیلی داخل ری اکت استفاده میشن map, reduce, filter هستن. من اینجا به map اشاره میکنم چون خیلی زیاد ازش استفاده میشه. متود map میاد به ازای هر المنت در ارایه یک فانکشنی رو روی المنت اجرا میکنه و مقدار رو map میکنه. اول یک مثال ساده ازش میزنم و بعد یک کاربردش که توی ری اکت خیلی ازش استفاده میشه.const arr = [1, 2, 3, 4, 5] const multipliedArr = arr.map(el => el * 2) console.log(multipliedArr) // [2, 4, 6, 8, 10]خب تو این مثال میبینید که به ازای هر عنصر ما اومدیم یک فانکشن اجرا کردیم که مقدار رو دو برابر کرد.حالا توی ری اکت چطور استفاده میشه؟ فرض کنید شما یک سری data دارید مثل کالا ها، کاربر ها یا هرچیز دیگه که با درخواست به یک API اون data رو میگیرید و میخواید اون رو صفحه نمایش بدید.خب روش کار اینجوریه که ما میایم data رو میگیریم و بعد به ازای هر المنت در data یک کامپوننت رندر میکنیم تو صفحه، به این شکل:import React, {useEffect, useState} from "react" const App = () => { const [posts, setPosts] = useState(null) useEffect(() => { const fetchData = async () => { const response = await fetch('https://jsonplaceholder.typicode.com/posts') const data = await response.json() setPosts(data) } fetchData() }, []) return (

{post.title}

Loading

) } export default App;توی کد بالا یک سری post از API گرفته شدن و تیتر هاشون داخل یک تگ li قرار گرفت و رو صفحه نمایش داده شد.Asynchronous javascriptخب از دیگر کانسپت هایی که توی دنیای جاوااسکریپت نه تنها ری اکت وجود داره و جزو ضروریات هست Ajax یا Asynchronous javascript and xml هست. کل قضیه اش این هست که یک سری کارها مثل گرفتن data از API زمان میبره و sync (همگام) نیست یعنی همون موقع مثل خیلی دیگه از دستورها خط به خط اجرا نمیشه.ما تو این حالت میایم درخواست میزنیم به یک API و data رو میگیریم و رو صفحه نمایش میدیم. مثلا توی سایت یوتیوب وقتی چیزی رو سرچ میکنیم یک درخواست میره سمت بک اند و ویدیو هایی که با سرچ ما مرتبط هستن برمیگردن و رو صفحه نمایش داده میشن. یا مثلا وقتی تو یک سایت ثبت نام میکنیم data ای که داخل فرم ها پر کردیم فرستاده میشن.و همه این کار ها به صورت async (ناهمگام) رخ میده و یکمی زمان میبره حالا بستگی به حجم data و سرعت نت و... .واسه فرستادن درخواست سمت بک اند و گرفتن data یا فرستادن چند روش وجود داره قدیمی ترین روش استفاده از XMLHttpRequest هست که دیگه استفاده نمیکنیم ازش. بعد از اون Promise ها اومدن و بعدش هم async/await.دقت داشته باشید که async/await در نهایت به همون Promise ها تبدیل میشن ولی واسه راحتی کار به زبان اضافه شدن(چون Promise ها میتونن تو در تو بشن و از نظر خوانایی مشکل ایجاد کنن و به اصطلاح callback hell ایجاد کنن). واسه مثال هم در اصل تو مبحث قبلی شما یک مثال ازش دیدید:// using Promise const fetchData = () => { fetch('https://jsonplaceholder.typicode.com/posts').then(response => response.json()).then(data => console.log(data)) } fetchData() // using async await const fetchData = async () => { const response = await fetch('https://jsonplaceholder.typicode.com/posts') const data = await response.json() console.log(data) } fetchData()توی کد بالا ما اومدیم با درخواست به سایتی که بالا میبینید یک سری data رو گرفتیم و لاگشون کردیم. هر دو کد یک کار رو انجام میدن اما بالایی با Promise ها نوشته شده و پایینی با async await.راستی Extensible Markup Language/XML که بالاتر دیدید فرمت data ای بود که قبلا با API رد و بدل میشد. الان از javascript object notation/JSON استفاده میشه که احتمالا اسمش رو شنیدید.یک اسم اشنا هم که جلوتر خواهید شنید اگه تا حالا نشنیدید axios هست.یک لایببری هست که اجازه میده بهمون درخواست ajax بزنیم و یک سری مزیت در اختیارمون قرار میده.ES6 modulesخب این مبحث چیز خاصی نداره ولی خیلی مهمه و باید بلدش باشید. قضیه اینه که با بزرگ شدن پروژه حجم فایل ها خیلی زیاد میشه و مدیریتش سخت‌تر واسه همین با میایم کد هامون رو داخل فایل هم مختلف قرار میدیم و ازشون داخل هم دیگه استفاده میکنیم. مثلا تو کد های بالا دیدید که من اومدم کتابخونه react رو import (وارد) کردم داخل پروژه خودم و ازش استفاده کردم.چیز خاصی نداره میتونید با سرچ تو یوتیوب سریع یادش بگیرید چیزی که من اینجا اشاره میکنم بهش Named export, Default export هست.// Named export export const name = 'value' // Named import import {name} from '...' // Default export export default 'value' // Default import import anyName from '...'وقتی از Named export استفاده میکنیم باید اسم چیزی که import میکنیم دقیقا برابر با چیزی باشه که export کردیم و باید داخل {} بذاریمش.یک نکته دیگه هم اشاره کنم این هست که به ازای هر فایل فقط میتونیم یک Default export داشته باشیم.this keyword/variable behaviorwhat the hell is this? یک چیزی که خیلی خیلی مهمه شما بلدش باشید نحوه رفتار this در جاهای مختلف هست. this مقدارش static نیست شما باید بدونید هر موقع که ازش استفاده میکنید دقیقا مقدارش چی هست و به چی برمیگرده. باید بدونید نحوه رفتارش داخل arrow function ها یا class ها به چه شکل هست، در غیر این صورت به مشکل میخورید.یه مثال بزنم فرض کنید شما همچین کدی دارید:import React from "react" class App extends React.Component { state = { counter: 0 } increase() { this.setState((state) => ({ counter: ++state.counter })) } render() { return ( <>

{this.state.counter}

) } } export default App;خب تو کد بالا چیزی که انتظار داریم اینه که this داخل متود increase به کلس App برگرده و متود setState رو فراخوانی کنه اما چیزی که اتفاق میفته اینه که this اینجا به Window اشاره میکنه و چون متود setState داخلش وجود نداره ارور برمیگردونه. این یک ارور رایجه بین کسایی که تازه ری اکت رو شروع میکنن، دو تا راه حل براش هست یکی اینکه بیایم this رو bind (متصل) کنیم به کلس App یعنی: // wrong❌ // correct✅و یک روش دیگه که روش بهتری هم هست بیایم از arrow functions ها واسه تعریف متود استفاده کنیم که خودش اتوماتیک this رو bind میکنه یعنی :increase(){ this.setState((state) => ({ counter: ++state.counter })) } // fine? increase = () => { this.setState((state) => ({ counter: ++state.counter })) } // best practice✅این همون ویژگی بود که گفتم درباره arrow functions بعدا بهش اشاره میکنم. این فانکشن ها this خودشون رو نمیگیرن و وقتی از this داخلشون استفاده میکنیم به scope بالاتر از خودشون اشاره میکنن(به این میگن lexical this) مثلا اگه داخل global scope از this استفاده کنیم به Window برمیگرده.Spread Operator / Rest Parameterخب این دوتا فیچر هم که به زبان اضافه شدن خیلی فیچر های خفنی هستن Spread Operator بهمون اجازه میده که مقادیر یک iterable (ارایه برای مثال) رو بگیریم و به المنت های مجزا تبدیلش کنیم.Rest Parameter هم اجازه میده که یک سری المنت های نامعین رو بریزیم داخل یک ارایه و بهشون دسترسی داشته باشیم. بهش میگن Rest(باقی مانده) چون مثل مثال بالا باقی مانده المنت هارو جمع میکنه داخل یک ارایه. با کد نشون بدم بهتر متوجه میشید:// in spread we expand in rest we compress // Spread , becuase on RIGHT side of = const arr = [1, 2, ...[3, 4]]; console.log(arr); (4) [1, 2, 3, 4] // the rest syntax takes multiple values and pack them into one array // Rest, becuase on LEFT side of = const [a, b, ...others] = [1, 2, 3, 4, 5]; console.log(a, b, others); // 1 2 (3) [3, 4, 5]از ES2018 به بعد هم میتونیم از Spread Operator داخل ابجکت ها هم استفاده کنیم با اینکه iterable نیستن. راستی یک استفاده رایجی از Spread Operator اینه که یک ارایه رو کپی کنیم( به اصطلاح shallow copy)const arr = ['red', 'green', 'blue']; const newArr = [...arr] console.log(newArr) // ['red', 'green', 'blue']این دو فیچر زیاد استفاده میشن ولی یک جا که خیلی زیاد ازشون استفاده میشه مثلا داخل کتابخونه های فرم ولیدیشن مثل react hook form یا redux form هست.Ternary Operatorخب مبحث الان Ternary Operator یا The Conditional هست. فرم کلیش به صورت زیر هست:condition ? exprIfTrue : exprIfFalseبرخلاف Ternary Operator ،if statement یک expression هست، این باعث میشه هرجا که مجبوریم از expression استفاده کنیم بتونیم به صورت شرطی یک مقداری رو نشون بدیم مثلا داخل JSX/javascript XML که ما باهاش با جاوااسکریپت المنت میسازیم اما شبیه html هست اونجا میشه فقط از expression استفاده کرد برای مثال.یه دلیل دیگه واسه استفاده ازش اینه که خیلی جمع و جور هست و واسه جاهایی که نیاز داریم به صورت شرطی یک کار کوچیکی رو انجام بدیم خیلی تمیز انجامش میدیم.تو قسمت Asynchronous javascript در واقع یک کاربردش رو دیدیمreturn ( <> {posts ? posts.map(post =>

{post.title}

) :

Loading

} )اینجا من اومدم چک کردم اگه متغیر posts فالسی ولیو نبود(null, undefined, "", NaN, false, 0) بیا روش از متود map استفاده کن و واسه هر المنت داخلش یک تگ li رو صفحه رندر کن اگه نبود هم یک تگ h1 که داخلش نوشته Loading خب همونطور که میدونیم چون گرفتن data از API، به صورت async هست و یکم زمان میبره در ابتدا چیزی نشون داده نمیشه(یه مدت زمان خیلی خیلی کمی) ولی بعد که data گرفته شد کامپوننت ها رو صفحه رندر میشن.نتیجه گیریخب امیدوارم تا اینجا یه درک کلی داشته باشید که چیا رو باید بلد باشید. خیلی ها رو میبینم که سریع میخوان ری اکت رو شروع کنن و چون هنوز زبان رو خوب یاد نگرفتن با یادگیری ری اکت مشکل دارن. شما اگه زبان رو خوب یادبگیرید یادگیری ری اکت خیلی ساده میشه براتون. از طرفی هم افرادی رو میبینم که دانش خوبی دارن ولی انگار میترسن از شروع کردن ری اکت، برای اون دسته هم باید بگم که اگه مفاهیم بالارو درک کنید مشکلی واسه درک ری اکت نخواهید داشت.یه سری مباحث دیگه هم هستن که باید بلد باشید ولی اون هارو اشاره نکردم به دلیل اینکه پایه مباحث این مقاله هستن و یا اینکه معمولا تو دوره ها یادشون میدن. مباحثی مثل let, const, npm و... . سعی کردم به مباحث مهم تر بپردازم. اگه سوالی هم دارید تو بخش کامنت ها بپرسید.