۱۵ ابزار برتر برای توسعه اپلیکیشن های React

React یک کتابخانه ی جاوا اسکریپتی سبک است که توسط فیس بوک ایجاد شده و در سال های اخیر بسیار محبوب شده است. این کتابخانه به شما اجازه میدهد رابط های کاربری زیبایی را برای برنامه های وب بسازید. این کار با استفاده از بلوک های سازنده مستقل و چند منظوره به نام component انجام میشود.

React همچنین دارای یک اکوسیستم بزرگ است که عمدتا توسط توسعه دهندگان ثالث ایجاد شده است، این اکوسیسیتم شامل ابزارهای مختلف، کتابخانه های کامپوننت، IDE ها، افزونه هایی برای ویرایشگر کد و مرورگرهای وب و .... است. در این مقاله، ما به معرفی 20 ابزار و منبع برتر برای توسعه دهندگان مبتدی و متخصص React خواهیم پرداخت. پس در این مقاله با ما همراه باشید.

1.REACTIDE

Reactide یک IDE اختصاصی (محیط توسعه مجتمع) برای توسعه برنامه های کاربردی ری اکت است. این ابزار cross-platform بوده و به شما اجازه می دهد تا کامپوننت های React را بدون هیچگونه پیکربندی ساخت و یا سرور ارائه دهید. Reactide یک Node server یکپارچه و همین طور یک شبیه ساز مرورگر سفارشی را نیز اجرا می کند.

2.REACT STUDIO

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

3. پروژه ی CREATE REACT APP فیسبوک

ایجاد و راه اندازی محیطی برای توسعه یک پروژه ی React با تمام الزامات کاری زمان بر است. برای کمک به توسعه دهندگان، فیس بوک پروژه Create React App خود را در Github منتشر کرد. این پروژه یک ابزار خط فرمان است که با آن میتوانید به سرعت یک برنامه React جدید را راه اندازی کنید. این ابزار یک خط لوله طراحی و ساخت داخلی را فراهم کرده و همین طور یک محیط توسعه دهنده را ایجاد می کند و در نهایت برنامه شما را برای تولید بهینه سازی می کند. این پروژه بدون نیاز به هیچ پیکربندی کار می کند و می توانید آن را با هر زبان backend ایی استفاده کنید.

4.STORYBOOK

Storybook یک محیط توسعه رابط کاربری برای کامپوننت های React است که در تولید برنامه توسط شرکت هایی مانند Coursera، Squarespace و Lonely Planet استفاده می شود. این محیط به شما اجازه می دهد تا به طور تعاملی کامپوننت های خود را توسعه داده و آزمایش کنید و همچنین می توانید کتابخانه ای از کامپوننت ها را برای خود ایجاد کنید. با Storybook، شما می توانید حالت های مختلف هر کامپوننت را مشاهده و آن را جدا از برنامه خود توسعه دهید،این کار منجر به بهره بردن بهتر از قابلیت استفاده مجدد میشود.

5.REACT STYLEGUIDIST

React Styleguidist یک محیط تعاملی دیگر برای توسعه ی  کامپوننت های React است. این محیط به شما اجازه می دهد بر روی ساخت هر کدام از کامپوننت ها در یک زمان تمرکز کنید. اما همچنین دارای یک سرور مجازی است که به شما امکان می دهد تمام کامپوننت های خود را در یک مکان ببینید. این محیط فراتر از قابلیت های فوق نیز عمل کرده و همچنین از ES6 و TypeScript نیز پشتیبانی می کند.

6.ابزار توسعه دهنده React برای مرورگر کروم

ابزار توسعه دهنده React یک افزونه Google Chrome است که توسط تیم فیس بوک ایجاد شده است. این ابزار به شما اجازه بازرسی سلسله مراتب درختی از کامپوننت های React را  درست در داخل مرورگر میدهد، این بررسی شامل prop ها و  state ها در کامپوننت ها نیز میشود. این افزونه یک سربرگ جدید به نام React را به Chrome DevTools شما می افزاید. با استفاده از این سربرگ می توانید چگونگی تاثیرگذاری تغییرات یک کامپوننت بر سایر کامپوننت ها را مشاهده کنید. این افزونه به شما کمک میکند یک ساختار مناسبی را برای کامپوننت خود طراحی کنید.

7.ابزار توسعه دهنده React برای مرورگر فایرفاکس

فیس بوک همچنینابزار توسعه دهنده React برای مرورگر فایرفاکس را به عنوان یک افزونه برای فایرفاکس منتشر کرده است. این افزونه دارای همان ویژگی هایی است که قبلا در افزونه Chrome توسعه داده شده است. پس از نصب، شما می توانید به ابزار React در ابزار توسعه دهنده Firefox در زبانه React  دسترسی داشته باشید.

8.REACT SIGHT

React Sight یک ابزار تجسم برای React است که برای شما نمایش بصری ساختار برنامه React را فراهم می آورد. این ابزار به ابزار توسعه دهنده React برای مرورگر کروم نیاز دارد. شما باید React Sight را به عنوان یک افزونه برای Chrome نصب کنید. این ابزار پنل جدید "React Sight" را به Chrome DevTools اضافه می کند. React Sight ازReact Router و Redux نیز پشتیبانی می کند.

9.REACT COSMOS

React Cosmos یک ابزار توسعه دهنده است که به شما کمک می کند کامپوننت هایی را در ری اکت ایجاد کنید که قابلیت استفاده مجدد دارند. این ابزار کامپوننت های پروژه های React شما را اسکن می کند و به شما امکان می دهد تا آنها را با هر ترکیبی از prop ها و state ها رندر کنید. با استفاده از React Cosmos می توانید وضعیت برنامه خود  به صورت real-time مشاهده کنید.

CODESANDBOX.10 برای ری اکت

CodeSandbox یک ویرایشگر کد آنلاین و محیطی پویا و زنده است که به طور خاص برای توسعه برنامه های وب ایجاد شده است. هدف این ابزار این است که توسعه دهندگان را قادر سازد تا برنامه های کاربردی React را در مرورگرهای خود در یک بسته که از طریق  یک URL واحد  در دسترس قرار میگیرد ،ایجاد کنند. CodeSandbox تنها برای React استفاده نمی شود، شما می توانید از این ویرایشگر آنلاین برای Angular، Vue و Preact نیز استفاده کنید.

11.REACT BITS

اگر می خواهید یک مجموعه آسان برای استفاده از الگوها، تکنیک ها، راهنمایی ها و ترفندهای React را داشته باشید، نیازی به نگاه کردن بیشتر نیست. React Bits مجموعه کاملی از تمام اطلاعاتی است که شما ممکن است نیاز داشته باشید. این مجموعه مستنداتی آنلاین است که در آن به سرعت می توانید به الگوهای طراحی ، تکنیک های طراحی، antipattern ها، تغییرات UX و دیگر نکات مربوط به React دسترسی داشته باشید.

12.REILER BOILERPLATE

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

13.REACT SLINGSHOT

Reings Slingshot یکی دیگر از مواردی است که به شما امکان استفاده از React را به همراه Redux را میدهد . این ابزاربه شما امکان دسترسی به ویژگی هایی مانند hot reloading، تست خودکار، linting ، ساخت تولید خودکار و ... را می دهد. Reings Slingshot از کتابخانه ها و ابزارهای محبوب مانند بابل، Webpack، ESLint، Sass و PostCSS استفاده می کند.

14.REACT STYLE GUIDE GENERATOR

با React Style Guide Generator ، شما می توانید یک راهنمای ساده و سازمان یافته برای پروژه های React خود تولید کنید. شما باید یک فایل جداگانه برای راهنمای خود ایجاد کنید، سپس برخی از مستندات را در جاوا اسکریپت با استفاده از برخی از قوانین از پیش تعریف شده اضافه کنید. . React Style Guide Generator به خوبی مستند شده است و شما می توانید از نحو ES6 نیز استفاده کنید.

15. REACT EXTENSION PACK برای ویژوال استادیو کد

اگر ویرایشگر کد شما ویژوال استودیو کد است ، می توانید از Packet Extension Pack استفاده کنید تا سرعت پردازش React خود را سریعتر کنید. این تنها یک افزونه نیست بلکه هفت بسته است که به عنوان یک افزونه بسته بندی شده است. این افزونه دارای امکانات خوبی است و اگر شما این افزونه را به VS Code اضافه کرده باشید،  حتما احساس فوق العاده ای را تجربه کرده اید.

 

منبع: لرن سورس

ساخت یک صفحه فرود با استفاده از Bootstrap ۴

بوت استرپ 4 در حال حاضر محبوب ترین فریمورک front-end در جهان است. شما می توانید از این فریمورک برای ایجاد هر نوع رابط کاربری، از قالب های مدیریتی تا وب سایت های کامل و پر از امکانات استفاده کنید. دراین آموزش گام به گام ، به چگونگی ایجاد یک صفحه فرود واکنش گرا با استفاده از Bootstrap 4 نگاهی خواهیم کرد. شما حتی می توانید از این صفحه طراحی شده به عنوان یک صفحه اصلی استفاده کنید و یا آن را به یک کمپین بازاریابی مشخص متصل کنید.

صفحه  فرودی که خواهیم ساخت پنج بخش دارد:

• بخش نوار ناوبری ثابت
• بخش hero
• بخشی سه ستونه برای نمایش خدمات
• بخشی تمام عرض برای مشاهده تماس ها
• بخش فوتر

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

پس بیایید شروع کنیم.

1. راه اندازی بوت استرپ 4

چند روش برای راه اندازی اولیه Bootstrap 4 وجود دارد. شما می توانید:

• فایل کامپایل شده CSS و جاوا اسکریپت بوت استرپ را دانلود کرده و سپس آن را به صفحه HTML خود اضافه کنید.
• بوت استرپ 4 با استفاده از سورس اصلی آن راه اندازی کنید (اگر می خواهید فایل های Sass را ویرایش کنید، این روش را انتخاب کنید)
• از نسخه های کامپایل شده بوت استرپ CDN استفاده کنید.

در این مقاله ما از اولین روش استفاده خواهیم کرد. فایل کوچک شده ی CSS را به قسمت <head> صفحه HTML خود و فایل جاوا اسکریپت را درست قبل از تگ بسته ی <body> قرار دهید. از آنجایی که همه پلاگین های Bootstrap 4 به jQuery نیاز دارند ، شما همچنین باید قبل از فایل جاوا اسکریپت بوت استرپ ، کتابخانه جی کوئری را قرار دهید.

در اینجا فایل HTML  صفحه مورد نظر نشان داده شده است. همانطور که میبینید فایل های CSS و جاوا اسکریپت مورد نیاز به صفحه اضافه شده اند. فایلی نیز با نام style.css برای سفارشی سازی استایل صفحه به سند ما افزوده شده است :

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap Landing Page by Developer Drive</title>
   
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/style.css" rel="stylesheet">
   
   </head>
   
   <body>
   
       <!-- Here comes the rest of the code -->

       <script src="scripts/jquery.min.js"></script>
       <script src="scripts/bootstrap.bundle.min.js"></script>
   </body>
</html>

2. نوار ناوبری را ایجاد کنید

بوت استرپ 4 شامل کامپوننت فوق العاده عالی و از پیش طراحی شده ای برای نوار ناوبری است که به شما اجازه می دهد یک منوی واکنش گرا را فقط با چند خط کد HTML به صفحه فرود خود اضافه کنید. کد زیر را در بخش <body> از فایل HTML خود قرار دهید:

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">Hello Consultancy</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
        aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
            
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home 
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

مهمترین چیزی در مورد Bootstrap 4 باید بدانید این است که این فریمورک برای هر چیزی تقریبا دارای کلاس های مفید است. به عنوان مثال، دارای کلاس bg-light. ( به مثال بالا نگاه کنید) برای افزودن یک پس زمینه روشن و کلاس bg-dark. برای افزودن یک پس زمینه تیره است که میتوان آنها را به هر عنصری در HTML اضافه کرد. با Bootstrap 4 شما می توانید طرح های خود را با کمترین کد نویسی در CSS ایجاد کنید.

با این حال، اگرچه کلاس fixed-top ، نوار ناوبری را به سمت بالا fix می کند، اما شما باید فضای بیشتری برای آن ایجاد کنید. بنابراین، قانون زیر را به فایل style.css سفارشی خود اضافه کنید. اگر نمیخواهید یک نوار ناوبری ثابت در بالای صفحه داشته باشید به سادگی کلاس fixed-top را از صفحه خود حذف کنید :

body {
    padding-top: 56px;
}

3. بخش hero را بسازید

بخش hero بخشی جدایی ناپذیر از بیشتر صفحات فرود است. در این بخش معمولا یک عکس پس زمینه کامل، یک عنوان، یک توصیف کوتاه و یک دکمه تماس وجود دارد. خوشبختانه، Bootstrap 4 دارای یک قسمت از پیش طراحی شده به نام Jumbotron است که به شما اجازه می دهد به راحتی یک بخش hero را به صفحه خود اضافه کنید. برای این کار نیاز است به عنصری است که بخش hero را نگه می دارد کلاس jumbotron. را اضافه کرد :

<header class="jumbotron jumbotron-fluid">
    <div class="container-fluid text-center"> 
       <h1 class="display-3">The Best Solution for Your Business</h1>
       <p class="lead pb-4">We help you maximize performance and build a healthy organization.</p>
       <p><a href="#" class="btn btn-primary btn-lg" role="button">Learn More</a></p>
    </div>
</header>

اگر بخواهید یک بخش hero تمام عرض داشته باشید، از کلاسهای Container-fluid. و jumbotron-fluid. استفاده کنید . اگر نمیخواهید تمام عرض صفحه با آنها پوشیده شود کافی است ، از container. و jumbotron. استفاده کنید (برای توضیحات بیشتر بهاسناد Jumbotron نگاهی بیندازید).

کد بالا همچنین از کلاسهای display-3. و text. (کلاس های تایپیوگرافی بوت استرپ 4)و  کلاس text-center. (کلاس ترازبندی در بوت استرپ 4)  استفاده میکند. شما همچنین باید یک تصویر پس زمینه را به بخش Jumbotron در فایل style.css سفارشی خود اضافه کنید. اگر میخواهید میتوانید رنگ پیشفرض پس زمینه دکمه های primary را نیز تغییر دهید:

.jumbotron {
    background: url("image.jpg") no-repeat center;
}
.btn-primary {
    background-color: #c60063;
    border-color: #c60063;
}

همانطور که در شکل زیر نشان داده شده است تاکنون بخش های مربوط به نوار ناوبری و Hero را ایجاد کرده ایم :

4. بخش سه ستونه را برای ارائه سرویس ها ایجاد کنید

برای ایجاد بخش خدمات میخواهیم سه ستون را ایجاد کنیم، برای این کار از سیستم grid واکنش گرا در بوت استرپ 4 استفاده میکنیم. این شبکه grid  شامل ردیف ها و ستون هایی است که صفحه را تقسیم بندی می کنند. به طور پیش فرض، هر ردیف شامل 12 ستون (با این حال، شما می توانید این مورد را در تنظیمات Sass خود تغییر دهید) است. می توانید تعداد ستون هایی را که می خواهید با استفاده از کلاس های ستون مشخص کنید. به عنوان مثال کلاس col-4 4 ستون از 12 ستون پیشفرض را به خود اختصاص میدهد.

بوت استرپ 4 دارای پنج نقطه واکنش گرا است که برای grid تعریف میشوند: خیلی کوچک (پیش فرض)، کوچک، متوسط، بزرگ و فوق العاده بزرگ. بر اساس اندازه صفحه نمایشی که وب سایت شما در آن نمایش می یاد میتوان نحوه ی نمایش ستون ها را مشخص کرد.

به عنوان مثال، در کد زیر، .col-md-4 بر روی grid های متوسط، بزرگ و خیلی بزرگ اعمال می شود. این بدان معنی است که تبلت ها و دسکتاپ ها بخش خدمات را در 3 ستون برابر در کنار یکدیگر نشان می دهند. و گوشی های هوشمند با نمایشگرهای کوچک و یا حتی خیلی کوچک، آنها را زیر یکدیگر به شکل یک ستون (یک ستون در هر ردیف) نمایش می دهند.

<section id="services" class="container">
   <h2 class="display-4 text-center mt-5 mb-3">Our Services</h2>
   
   <div class="row text-center">
      <div class="col-md-4 mb-4">
         <div class="card h-100">
            <img class="card-img-top" src="design.jpg" alt="Design">
            <div class="card-body">
               <h4 class="card-title">Design</h4>
               <p class="card-text">Deliver the best user experience 
               with our carefully designed responsive websites and applications!</p>
            </div>
            <div class="card-footer py-4">
               <a href="#" class="btn btn-secondary">See portfolio &raquo;</a>
            </div>
         </div>
      </div>
      
      <div class="col-md-4 mb-4">
         <div class="card h-100">
            <img class="card-img-top" src="development.jpg" alt="Development">
            <div class="card-body">
               <h4 class="card-title">Development</h4>
                  <p class="card-text">You need software that works on every device. 
                  Leverage the latest technologies and the most powerful tools!</p>
            </div>
            <div class="card-footer py-4">
               <a href="#" class="btn btn-secondary">See projects &raquo;</a>
            </div>
         </div>
      </div>
      
      <div class="col-md-4 mb-4">
         <div class="card h-100">
            <img class="card-img-top" src="analytics.jpg" alt="Analytics">
            <div class="card-body">
               <h4 class="card-title">Analytics</h4>
               <p class="card-text">Consult our experts to set up proper goals and 
               find the best stack for your next application!</p>
            </div>
            <div class="card-footer py-4">
               <a href="#" class="btn btn-secondary">See testimonials &raquo;</a>
            </div>
         </div>
      </div>
   </div>
</section>

کد های بالا همچنین از کامپوننت های Card در بوت استرپ 4 استفاده می کنند که دارای پنج کلاس از قبل ساخته شده است: .card ، .card-img-top ، .card-body، .card-title. و .card-text . کلاس h-100. یکی از کلاسهای ابزار اندازه گیری بوت استرپ 4 است که شما می توانید بر روی هر عنصری که می خواهید استفاده کنید. این کلاس ارتفاع هر کارت را با مقدار 100٪ تنظیم می کند.

شما همچنین می توانید دکمه های secondary را در فایل style.css خود تغییر دهید و آن را با بقیه صفحه اصلی خود مطابقت دهید، به عنوان مثال:

btn-secondary {
    background-color: transparent;
    border-color: #c60063;
    color: #c60063;
}

و اکنون به همین سادگی بخش خدمات ما در سه ستون به شکل زیر ایجاد شد :

5. بخشی تمام عرض را برای مشاهده مشخصات تماس ایجاد کنید

با استفاده از کلاس های ابزار بوت استرپ 4 می توانید بخشی تمام عرض را برای تماس در صفحه فرود خود به وجود آورید:

<section class="container-fluid text-center py-4 mt-4" id="contact">
   <h2 class="display-4 pb-4 my-4">Get in touch with us today!</h2>
   <p class="lead pb-3">Send us a message and we will get back to 
   you as soon as possible.</p>
   <a href="#" class="btn btn-primary btn-lg mb-4" role="button">Contact us</a>
</section>

همانند بخش Jumbotron، شما همچنین باید یک تصویر پس زمینه را به قسمت تماس در فایل style.css خود اضافه کنید:

#contact {
    background: url("contact.jpg") no-repeat center;
}

در اینجا نحوه نمایش بخش تماس به شرح زیر است:

6. بخش فوتر را ایجاد کنید

صفحات فرود معمولا فوتر های ساده ای دارند، بنابراین کد زیر به سادگی یک پیام کپی رایت به پایین صفحه شما اضافه می کند:

<footer class="py-3 bg-light">
   <div class="container">
      <p class="text-center">Copyright &copy; Hello Consultancy 2019</p>
   </div>
</footer>

و اکنون صفحه ما به طور کامل طراحی شد! در شکل زیر دوباره کل صفحه فرود را مشاهده میکنید :

نتیجه

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

دوره های آموزشی

جدیدترین و بروز ترین دوره های آموزش برنامه نویسی را میتوانید در این بخش دنبال کنید

بحث و گفتگو

سوالات خود در زمینه برنامه نویسی و طراحی سایت را در این بخش مطرح کنید

مقالات آموزشی لرن سورس

• طراحی وب
• تجربه کاربری
• جی کوئری
•  رسپانسیو
• کتابخانه
• ابزار طراحی
• گرافیک
•  css
• html
• فریلنسر
• انگولار
• برنامه نویسی
•  سئو
• جاوا اسکریپت
• اندروید
• پی اچ پی
• پایتون
• نود جی اس
• vuejs
• react
• ios
• تکنولوژی
• رابط کاربری
• امنیت
• کسب و کار
• لینوکس
• موبایل
• پایگاه داده

منبع: لرن سورس

۱۲ منبع عالی برای انیمیشن ها در CSS

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

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

1.Animista

Animista نوعی محیط است که میتوانید در آن مجموعه ای از انیمیشن های پیش ساخته شده CSS را ویرایش و اجرا کنید. سپس کد مورد نظر خود را برای استفاده در پروژه هایتان کپی کنید. Animista کار خود را به عنوان یک پروژه جانبی برای توسعه یکپارچه Ana Travas آغاز کرد، که هنوز در حال توسعه آن است.

2.CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet پروژه ای مفید است و مجموعه ای از انیمیشن های از پیش تنظیم شده را برای استفاده در پروژه های وب فراهم می آورد. برای شروع، و به منظور کمک به شما دستورالعمل های مشخصی  وجود دارد، اما اساسا، شما فقط باید  فایل استایل مورد نظر را به وب سایت خود اضافه کرده و کلاس های CSS از پیش ساخته شده را برای متحرک سازی بر روی عناصر مورد نظر خود اعمال کنید.

این پروژه از keyframe های CSS3 استفاده میکند و این بدان معناست که شما نیاز ندارید در مورد موقعیت عناصری که متحرک سازی میشوند نگرانی داشته باشید.

3.Animate.css

این کتابخانه شامل حدودا 77 انیمیشن است که همه آنها در CSS ایجاد شده و آماده استفاده هستند. به سادگی فایل CSS این کتابخانه را به پروژه خود اضافه کنید. در این صورت هنگامی که کلاس ها را به یک عنصر اضافه می کنید، انیمیشن اتفاق می افتد.

این کار برای زمانی که کلاس ها را با استفاده از جاوا اسکریپت به عناصر اضافه میکنید نیز به خوبی کار میکند. حجم فایل این کتابخانه زمانی که فشرده سازی میشود بسیار کوچک است. اما اگر شما نمی خواهید همه چیز را در سایت خود بارگذاری کنید، این پروژه همچنان یک منبع عالی الهام بخش و مفید باشد. Animate.css توسط  Dan Eden کامپایل شده است.

 این کتابخانه تقریبا هر انیمیشنی از CSS که شما می توانید به آن نیاز داشته باشید، از اصول (bounce, fade in) تا چیز های هیجان انگیر تر (Jack in the Box, Jello) را شامل میشود. از منوی کشویی در صفحه اصلی سایت این کتابخانه برای دیدن عناوین هر یک از سبک های مختلف استفاده کنید.

4.Hover.css

همانند Animate.css کتابخانه ی Hover.css نیز دارای مجموعه ای از افکت های CSS است که می توانید در پروژه های خود استفاده کنید. این کتابخانه به طور خاص برای متحرک سازی های دکمه های موجود در صفحه ایجاد شده است. این کتابخانه تقریبا میتواند برای هر پروژه ای سازگار شود. کتابخانه Hover.css دارای تقریبا هر انیمیشنی است که ممکن است برای تعامل با یک عنصر نیاز داشته باشد.

5.CSShake

CSShake کتابخانه ای از انیمیشن های CSS است که برای تکان دادن عناصر اختصاص یافته است. این کتابخانه دارای تعدادی کلاس است که می توانید برای تکان خوردن های مختلف به عناصر اضافه کنید. این کتابخانه از keyframe ها و مشخصه transform برای ایجاد انیمیشن هایی که گاهی اوقات دیوانه کننده به نظر می رسند استفاده می میکند.

با این حال نمیتوان این کتابخانه را نادیده گرفت. در حال حاضر نیز کتابخانه Reshake  وجود آمده است که برای اعمال انیمیشن بر روی کامپوننت های ری اکت استفاده میشود.

6.Obnoxious.css

Obnoxious.css دقیقا همانطور که از نام آن پیداست توسط Tim Holman ساخته شده است . این کتابخانه آنچه را که ممکن است با انیمیشن های CSS امکان پذیر باشد،اما بیشتر آنچه را که شما نباید با انیمیشن های CSS انجام دهید را بررسی میکند. در حالی که به عنوان یک کتابخانه انیمیشن ارائه شده است، اما بیشتر به منظور نمایش انیمیشن ها طراحی شده است.

7.Replainless.CSS

Replainless.css یک کتابخانه متحرک کوچک و سبک وزن CSS است که بر روی ایجاد انیمیشن هایی که باعث تغییر رنگ از طرف مرورگر های مختلف نمیشوند تمرکز دارد (تا زمانی که به درستی مورد استفاده قرار بگیرند). این انیمیشن هه فوق العاده سریع و کاربردی هستند!

8.Animate Plus

این کتابخانه برای سایت های موبایلی بسیار مناسب است. Animate Plus به خاطر زیبایی و جذابیتش محوبیت زیادی را بدست آورده است . یکی از متفکران پشت این کتابخانه یعنی، بنجامین دکک، یک کتابخانه متحرک CSS و SVG ایجاد کرده است که عملکردی عالی دارد و این امر به ویژه برای تلفن همراه مناسب است.

9.Motion UI

انیمیشن ساز های قدرتمندی مانند Move UI ابزار های مفید در CSS محسوب میشوند. این ابزار که شکل فایل Sass است باعث می شود که انیمیشن های سفارشی را به سادگی بر روی رابط کاربری خود اعمال کنید. این ابزار بسیار قدرتمند است. شما می توانید انیمیشن ها را برای برآورده ساختن نیازهای خود ایجاد و تنظیم کنید، سپس آنها را با استفاده از جاوا اسکریپت فراخوانی کنید.

10.BounceJS

اگر می خواهید کتابخانه ای از انیمیشن ها برای خود ایجاد کنید، BounceJS یک ابزار مفید برای شما است. این سایت دارای مجموعه ای از قالب های از پیش ساخته شده است که میتواند براش ما بسیار کاربری باشد

11.GreenSock Animation Platform

GSAP یک فریمورک انیمیشن در جاوا اسکریپت است. اگر شما نیاز به ایجاد انیمیشن های پیچیده تر (مانند تبلیغات بنر و یا تصاویر قهرمانانه) دارید، GSAP دارای مجموعه ای از ابزارهاست که کار شما را ساده میکند. اگر میخواهید فراتر از انیمیشن های موجود در CSS حرکت کنید این فریمورک برای شما ساخته شده است.

12.Easing functions cheatsheet

توابع زمان بندی میزان تغییرات را در طول زمان مشخص می کنند که در دنیای انیمیشن ها هم نقشی تعیین کننده دارند. این سایت به شما کمک می کند که یک گزینه مناسب برای انیمیشن خود را انتخاب کنید.

 

منبع: لرن سورس

مقایسه جامع بین فریمورک های React ، Angular و Vue.js (قسمت ۱)

مقایسه فریمورک های React ، Angular و Vue.js و اینکه کدام یک برای توسعه وب مناسب تر هستند، موضوعی است که بحث کردن در مورد آن بی پایان است . آمار رضایتمندی، ویژگی ها، روند ها، توسعه دهندگان، تعداد دانلود ها، و ستاره های Github همه و همه معیار هایی هستند که برای مقایسه این سه فریمورک استفاده میشوند. انتخاب یک تکنولوژی و یا حتی یک زبان برای توسعه وب گاهی اوقات کاری خسته کننده می شود، زیرا شما باید همه ی فاکتور ها اعم از بودجه، زمان، اندازه برنامه، کاربران نهایی، اهداف پروژه و منابع  را در نظر بگیرید.

چه شما یک مبتدی، یک توسعه دهنده، یک فریلنسر آزاد و یا یک مهندس معمار برای تعیین استراتژی پروژه هستید، آگاهی از مزایا و معایب هرکدام از فریمورک ها برای شما کاری ضروری است. بنابراین، این مقاله به شما کمک نمیکند که از بین این سه فریمورک یکی را انتخاب کنید زیرا تصمیم گیری عمده در این زمینه بستگی به پروژه ای دارد که شما در کار بر روی آن هستید. این مقاله به شما کمک میکند دانش کاملی از هر کدام از این فرمورک ها بدست آورید.

در اینجا با توجه به روند های گوگل نگاهی به مقایسه سه فریمورک React ، Angular و Vue.js خواهیم انداخت. اگر ما یک سال گذشته را در نظر بگیریم، به نظر می رسد Angular برنده این مقایسه است، React در جایگاه دوم قرار دارد است،  و تقریبا Vue.js را میتوان نادیده گرفت.

مطمئنا، تفاوت هایی وجود دارد که بدون آنها این فاصله ها وجود نخواهد داشت. فرض میکنیم که شما از جاوا اسکریپت آگاهی کاملی داشته و تفاوت بین کتاب خانه های جاوا اسکریپت و فریمورک های آن را میدانید.

مقایسه React ، Angular و Vue.js

در اینجا سوالات و پاسخ هایی وجود دارد که می تواند به شما کمک کند تا نتیجه گیری کنید :

• آیا آنها به اندازه کافی بالغ شده اند تا برنامه های مقیاس پذیر را ایجاد کنند؟
• آیا پیدا کردن توسعه دهندگانی که با هر کدام از این فریموک ها کار میکنند آسان است؟
• آیا شما مفاهیم اصلی در پشت هر یک از فریمورک های ذکر شده می دانید؟
• آیا عملکرد، سرعت و منحنی یادگیری هر فریمورک را تحلیل کرده اید؟
• آیا ابزارهایی برای ایجاد یک برنامه با استفاده از این کتابخانه ها وجود دارد؟

بیایید پاسخ هر یک از سوالات بالا را یکی یکی بررسی کنیم.

تاریخچه هر یک از فریمورک ها

React یک کتابخانه جاوا اسکریپتی برای ساخت کامپوننت های رابط کاربری برای برنامه های وب است. React توسط فیس بوک نگهداری می شود و بسیاری از برندهای فناوری های پیشرو از React در محیط توسعه خود استفاده می کنند. React توسط Facebook، Uber، Netflix، twitter، Udemy، Paypal، Reddit، Tumblr، Walmart و بسیاری دیگر استفاده می شود.

React Native، یکی دیگر از سرمایه گذاری های مهم فیس بوک برای ساخت برنامه های بومی تلفن همراه با استفاده از جاوا اسکریپت و ری اکت است. بسیاری از شرکت های شناخته شده، به دلیل ویژگی های برجسته و عملکرد این فریمروک، به سمت آن تغییر مسیر داده اند . موضوع مقایسه React و Vue.js نیز در وب داغ شده و راهکار های زیادی را برای انتخاب بهترین فریمورک ارائه می دهد.

Angular هم به عنوان فریمورکی در جاوا اسکریپت که مبتنی بر TypeScript است و به وسیله گوگل پشتیبانی میشود شناخته شده است. Angular فریمورکی فوق العاده محبوب است که برای توسعه برنامه های front-end این دوره طراحی شده است. چندی بعد از انتشار فریمورک آنگولار نسخه دوم آن (Angular 2) که از اول بازنویسی شده بود منتشر شد.توسعه برنامه های آنگولار در بین توسعه دهندگان در سراسر جهان بسیار محبوب است و توسط شرکت های غول پیکری مانند Google، Forbes، WhatsApp، Instagram و healthcare.gov استفاده می شود.

اکنون به سراغ Vue بیاییم. در حال حاضر، Vue.js به یکی از پر بحث ترین مباحث وب تبدیل شده و محبوبیتش به سرعت در حال رشد است. این فریمورک توسط کارمند سابق گوگل ایجاد شد - ایوان  زمانی که یک کارمند Google بود بر روی Angular کار میکرد.توانایی این فریمورک برای ساخت رابط های کاربری جذاب با استفاده از HTML، CSS و جاوا اسکریپت عالی است. Vue توسط Alibaba، GitLab، Baidu استفاده شده است 

محبوبیت و روند بازار

با توجه به نظرسنجی سایت Stackoverflow در سال 2017 فریمورک آنگولار مورد علاقه ی 51.7٪ از توسعه دهندگان وب بوده است و فریمورک React توسط 66.9٪ از توسعه دهندگانی که آن را بررسی کرده اند، پذیرفته شده است. البته این نتیجه قابل پیش بینی بود زیرا جاوا اسکریپت محبوب ترین زبان دنیا برای وب است که 81.7٪ از کل فضای وب را به خود اختصاص داده است.

نسبت کاربران React و Angular تقریبا یکسان است و آنها در دسته ی فریورک های محبوب وب جای گرفته اند. Vue هیچ مکانی را در هر یک از جایگاه های بالا به خود اختصاص نداده است اما توانایی شرکت در این نبرد را دارد.

اکنون بیایید به آمار های دیگری از این سه فریمورک بر اساس گیت هاب نگاهی بیندازیم :

در نمودار بالا میزان ستاره های گیت هاب برای این سه فریمورک در زمان های مختلف نشان داده شده است. این ستاره ها میزان توجه و محبوبیتی که این سه فریمورک در بین توسعه دهندگان بدست آورده اند را نشان میدهد.

با توجه به سناریوی کنونی، Vue دارای 108,086 ستاره ، React دارای 106,807 ستاره و آنگولار دارای 38،654 ستاره است. با توجه به آمار بالا به نظر میرسد Vue.js محبوبیت بیشتری پیدا کرده است و این توانایی در جلب توجه توسعه دهندگان به دلیل معماری خوب و آسان این فریمورک بوده است.

با این حال، نباید فراموش کنید که Angular و React توسط نام های بزرگی در صنعت وب استفاده می شوند. گوگل از پروژه Angular در پروژه های خود و برند هایی مانند فیس بوک، Airbnb، Dropbox، WhatsApp، Netflix از React در محیط توسعه خود استفاده می کنند.

پشتیبانی جامعه و رشد

همانطور که React توسط فیس بوک و Angular  توسط گوگل طراحی و نگهداری می شوند، هیچ شکی در رشد هر دو آنها وجود ندارد. در هر دو چارچوب، به روزرسانی ها و قابلیت های جدید را مرتبا منتشر میکنند اما ملاحظاتی در هنگام مهاجرت برای این دو فریمورک وجود دارد. به روز رسانی ها با توجه به نظر توسعه دهندگان React و Angular  مشکلی به وجود نمی آورند، این بروزرسانی ها هر شش ماه یک بار انجام خواهد شد.

اگر Vue.js را در این سناریو در نظر بگیریم، یک ابزار کمک رسانی مهاجرتی وجود دارد که مهاجرت را راحت تر می کند. اما در برنامه های بزرگ، ممکن است مشکل ایجاد کند، زیرا هیچ نقشه راه مناسب وجود ندارد که بر روی نسخه بندی و برنامه های آن متمرکز باشد. React بیشتر از Angular انعطاف پذیر است زیرا Angular یک فریمورک کامل است اما React مجموعه ای از کتابخانه های مستقل، سریع و در حال رشد است و برای همین باید به هر ماژول کوچکی که دیگر پشتیبانی و یا نگهداری نمی شود، توجه داشته باشید.

پایان قسمت اول - این مقاله ادامه دارد ...

منبع: لرن سورس

مقایسه جامع بین فریمورک های React ، Angular و Vue.js (قسمت ۲)

در مقاله قبلی این سه فریمورک را از جهاتی مورد بررسی قرار دادیم اکنون به ادامه این مقایسه توجه کنید.

آیا پیدا کردن توسعه دهندگان هر کدام از این فریموک ها آسان است؟

واضح است که توسعه دهندگانی که با زبان HTML کار میکنند بیشتر از توسعه دهندگانی هستند که با جاوا اسکریپت کار میکنند .  React پر از کد های جاوااسکریپت است و گاهی اوقات به این دلیل است که افراد به سمت Angular یا Vue حرکت می کنند.

کار با HTML حس بهتری دارد اما React دارای قاعده نوشتاری متفاوت(JSX) از زبان HTML است. اگر چه این فریمورک نیازی به استفاده  از JSX در برنامه شما ندارد، اما آشنایی با راه اندازی، محیط و معماری React کمی دشوار است. Angular گزینه ای بسیار خوب در این مورد است. شما به راحتی می توانید توسعه دهندگان Angular  را بیابید.

این فریمورک دارای یک جامعه عالی و رو به رشد است که شامل پروژه های زیاد، به روز رسانی ها متعدد و منابع در دسترس است. همه ی اینها نشان دهنده ی یک آینده پایدار برای این فریمورک است.

JSX یا HTML؟ - کدام را ترجیح میدهید؟

این مورد یک بحث بی پایان است. Angular بیشتر از HTML  استفاده میکند، در حالیکه React بیشتر درباره جاوا اسکریپت است. در نظر داشته باشید که همه این 3 فریمورک بر اساس کامپوننت هستند. شما می توانید هر زمان که لازم است از این کامپوننت ها در همه جای برنامه خود استفاده کنید. اگر ما در مورد JSX صحبت کنیم، با توجه به اسناد رسمی، JSX نه یک رشته است و نه HTML .

JSX اجازه می دهد تا توسعه دهندگان عناصر React را ایجاد کنند و بیشتر یک قاعده نوشتاری برای جاوا اسکریپت محسوب میشود. مزایای زیادی برای استفاده از JSX وجود دارد، زیرا جاوا اسکریپت قدرتمندتر از HTML است و زبانی کاملا توسعه یافته و پیشرفته برای توسعه front-end است. Vue متفاوت تر از دو فریمورک دیگر است.

این فریمورک مفاهیم را جدا سازی میکند و توسعه دهندگان را قادر میسازد که استایل ها، اسکریپت ها و موارد دیگر را به شیوه ای منظم بنویسند. این روش برای هر مبتدی، طراح و توسعه دهندگان با تجربه که در پروژه های قبلی با HTML آشنا هستند به نظر می رسد عالی باشد.

توجه : شما می توانید از JSX در فریمورک Vue با استفاده از پلاگین بابل استفاده کنید.

فریمورک؟ کتابخانه؟ تفاوت این دو در چیست؟

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

با React، شما می توانید یکپارچگی چندگانه را انجام دهید، زیرا می توانید کتابخانه ها را با سایر ابزارهای عالی جفت، مبادله و ادغام کنید. اما با این وجود احتمال اشتباه در تصمیم گیری و انتخاب وابستگی ها وجود دارد.

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

چیزهای مهم دیگر که باید به آن توجه کنید

Angular  شامل تزریق وابستگی است، مفهومی که یک شی وابستگی هایی را برای شی ای دیگر فراهم می آورد. این باعث می شود کد  برای درک، آسان تر به نظر برسد. از سوی دیگر، یک الگوریتم MVC وجود دارد که پروژه را به سه جزء مختلف تقسیم می کند: مدل، ویو، و کنترلر.

React چنین مفهومی ندارد و به شما کمک میکند که فقط ویو ها را در برنامه خود ایجاد کنید در حالیکه Angular بر اساس معماری MVC است و اجازه می دهد تا توسعه دهندگان برنامه خود را به سه بخش تقسیم کنند.

عملکرد و کارایی: کدام یک از فریمورک ها بهتر هستند؟

مدل DOM مجازی از لحاظ عملکرد بسیار مفید است. هر دو فریمورک React و Vue دارای DOM مجازی هستند. با توجه به ساختار خوب، Vue دارای عملکردی عالی و تخصیص حافظه خوبی است. React هم در این زمینه به خوبی کار میکند و  البته Angular در این رقابت از دو فریمورک دیگر پیشی گرفته است.

عملکرد و کارایی به عوامل مختلفی بستگی دارد. این سه فریمورک نسبتا سریعتر از سایر فریمورک های جاوا اسکریپت هستند. البته توجه کنید که نباید کارایی و عملکرد را معیاری برای انتخاب فریمورک مناسب قرار دهید زیرا کارایی عمدتا به اندازه برنامه و بهینه سازی کد شما متکی است.

آیا با این فریموک ها توسعه برنامه بومی امکان پذیر است؟

برنامه های بومی برای یک پلتفرم خاص ساخته شده اند. React شامل React  است که با استفاده از آن  می توانید برنامه های بومی را برای iOS و پلت فرم اندروید را توسعه دهید.

NativeScript در Angular هم در حال حاضر توسط بسیاری برای توسعه برنامه های بومی پذیرفته شده است و فریمورک Ionic برای استفاده از برنامه های هیبریدی بسیار محبوب است. پلت فرم Weex در Vue نیز در حال تحول است و به نظر می رسد در حال حاضر برنامه ای برای ادامه آن وجود ندارد.

سرانجام، کدام فریموک را باید انتخاب کنیم؟

اگر شما بیش از سایر ویژگی ها انعطاف پذیری را دوست دارید، از React استفاده کنید.

اگر شما کدنویسی در TypeScript را دوست دارید، به سمت Angular بروید.

اگر شما عاشق جاوا اسکریپت هستید، از React استفاده کنید زیرا همه چیز آن در مورد جاوا اسکریپت است.

اگر طرفدار کدی تمیز هستید، از Vue در برنامه خود استفاده کنید.

Vue ساده ترین حالت برای یادگیری را فراهم می کند و این گزینه ای ایده آل برای مبتدیان است.

اگر میخواهید مفاهیم در برنامه ی شما جدا سازی شوند، از Vue استفاده کنید.

اگر شما علاقه مند به برنامه نویسی شی گرا باشید، Angular قطعا یک انتخاب عالی است.

Vue برای یک تیم کوچک و یک پروژه کوچک ایده آل است. اگر برنامه شما به نظر بزرگ می رسد  و و در آینده نیاز دارید آن را توسعه دهید از آنگولار استفاد

منبع: لرن سورس

PWA یا برنامه پیش رونده چیست و چرا باید به آن توجه کنید؟

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

با توجه به اینکه کاربران بیشتری از تلفن همراه استفاده میکنند، بهینه سازی تجربه کاربری برای گوشی های موبایل به یک ضرورت تبدیل شده است.

برای شرکت های کوچکتر که اغلب برنامه های بومی را به دلیل محدودیت زمان و هزینه ندارند، برنامه های وب فرصتی کلیدی است که می تواند با ارائه بهترین تجربه ممکن، مشتریان آنها را حفظ کند.

حتی اگر شرکت ها دارای برنامه های مرسوم تلفن همراه اختصاصی باشند، احتمال دارد بعضی از کاربران همچنان نسخه وب آن را ترجیح دهند تا از دانلود و نصب به علت محدودیت سخت افزار و حافظه یا برخی دیگر از اولویت های شخصی خود اجتناب کنند.

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

حتی انتظار می رود وبسایت ها خانه ها را جستجو کنند و نقشه جهان را در خود نگه دارند. در دروه کنونی یک وبسایت میتواند تمام ویژگی های نرم افزاهایی همچون پاورپوینت و اکسل را ارائه دهد.

با برنامه های وب پیش رونده (progressive) آشنا شوید

بیایید مثالی از یک نرم افزار گوشی تلفن همراه بیان کنیم. نرم افزار Whatsapp را در نظر بگیرید. وقتی اینترنت متصل نیست، هنوز می توانید این برنامه را باز کنید، پیام های گذشته را چک کنید و حتی به دوستان خود پاسخ دهید. هنگامی که اتصال اینترنتی تلفن برقرار می شود، پیام ها به صورت خودکار ارسال می شوند.

این چیزی است که PWA(برنامه پیش رونده) وعده داده در برنامه های وب ارائه دهد. PWA برنامه های وب را قادر می سازد ،وقتی که هیچ شبکه ی اینترنتی وجود ندارد، در پس زمینه همگام سازی وجود داشته باشد و با یکپارچگی کارها را انجام دهد این در حالی است که یک تجربه بومی را نیز به کاربران خود را ارائه می دهد.

چرا ما به PWA ها نیاز داریم و ویژگی های آنها چیست؟

بیایید در مورد برخی از مشخصه های اصلی که در برنامه های کاربردی وب معمولی وجود ندارند و در برنامه های پیش رونده ارائه میشوند صحبت کنیم :

قابلیت اطمینان

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

سریع 

انتقال و پیمایش در بین صفحات برنامه باید نرم و در عین حال سریع باشد. هر کسی از پیمایش کند و سخت متنفر است.

واکنش گرا 

برنامه باید در تمام اندازه های مختلف دستگاه ها  قابل استفاده باشد. برنامه وب باید مانند مایعی باشد که وقتی داخل ظرفی ریخته میشود تمام فضای ظرف را در بر میگیرد.

قابل نصب 

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

Splash Screen

Splash Screen تصویری است که هنگام بارگذاری یک برنامه یا بازی ظاهر می‌شود. این باعث می شود PWA بیشتر شبیه به یک برنامه بومی به نظر برسد.

قابلیت در گیر کردن

برنامه باید کاربران را درگیر کند. یک PWA دارای ویژگی هایی مانند آگاه کردن از طریق اعلان ها، آیکونی در صفحه، قابلیت باز شدن زمانی که شبکه وجود ندارد و ... است که کاربران را به خود مشغول میکند.

تمام ویژگی های فوق در برنامه های PWA ممکن است. PWA فقط یک برنامه وب معمولی است که به تجربه کاربری توجه ویژه ای کرده است.

PWA و فریمورک های مدرن رابط کاربری

بعضی از مردم فکر می کنند که یک PWA همراه با فریمورک های مدرن رابط کاربری مانند ReactJs، Angular 6 یا Vue.js ارائه میشود. خوب، نه لزوما . PWA هیچ ارتباطی با فریمورک هایی که استفاده می کنید ندارد و فقط به کامپوننت های مشخصی نیاز دارد.

PWA چگونه وب سایت ها را به صورت آفلاین در دسترس قرار میدهد؟

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

PWA فایل های HTML، فایل های CSS و تصاویر را در حافظه پنهان مرورگر ذخیره می کند و توسعه دهندگان می توانند به طور کامل ارتباطات شبکه را کنترل کنند. همه اینها توسط Service Worker  قابل دسترسی است.

کاپوننت های تکنیکی PWA کدامند؟

PWA دارای برخی کامپوننت های مهم فنی است که با هم کار می کنند و به برنامه وب به طور منظم انرژی می دهد. کامپوننت های زیر برای ایجاد یک برنامه PWA خوب مورد نیاز است.

اجازه دهید دیدی کلی از هر یک از آنها را بدست آوریم :

1.Service Worker

برنامه های وب ما به طور مستقیم با شبکه اینترنت ارتباط برقرار میکنند و اگر شبکه ای وجود نداشته باشد، صفحه دایناسور معروف را نشان داده میشود.

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

یک Service Worker فقط کامپوننتی از کد های جاوا اسکریپت است که به عنوان یک پروکسی بین مرورگر و شبکه عمل می کند. یک Service Worker  به ایجاد یک برنامه آفلاین با استفاده از API حافظه پنهان مرورگر کمک می کند.

Service Worker می تواند عملکرد و کارایی برنامه شما را بهبود ببخشد، هر چند دستگاه شما به اینترنت متصل باشد و یا نه. یک توسعه دهنده باید کنترل کاملی بر رفتار برنامه و نحوه پاسخ گویی آن در سناریوهای مختلف داشته باشد. service worker چرخه رویداد مربوط به خود را دارد. هنگامی که فرایند کش کامل میشود برنامه شما برای بازید آفلاین آماده است.

2. فایل مانیفست 

فایل مانیفست یک فایل config از جنس JSON است که حاوی اطلاعات برنامه  اعم از آیکون نمایش در صفحه اصلی، نام کوتاه برنامه، رنگ پس زمینه یا تم و .. است. نمونه ای از این فایل در زیر آمده است :

{
  "short_name": "Spinner",
  "name": "Fidget spinner",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/home/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/home/",
  "theme_color": "#3367D6"
}

میتوانید فایل های مانیفست را در عمل در تصاویر زیر مشاهده کنید :

3.HTTPS 

Service workers  قادر به رد درخواست های شبکه هستند و می توانند پاسخ ها را تغییر دهند. Service workers تمام اقدامات را در طرف مشتری انجام می دهند. از این رو، PWA نیاز به پروتکل HTTPS دارد.

بررسی یک برنامه PWA

امروزه PWA های زیادی وجود دارد که در دسترس هستند. اگر میخواهید با PWA ها کار کنید و عملکرد Service workers را در عمل ببینید، از سایت fidgetspin.xyz بازدید کرده و به محیط توسعه دهندگان در مرورگر کروم بروید.

Status : به ما می گوید که service worker فعال و یا غیر فعال است.

آفلاین : با تیک زدن این گزینه، کروم برنامه را در صورتی که آفلاین است، پردازش می کند. برنامه را  ریفرش کرده و مشاهده کنید کخ چگونه PWA وقتی شبکه ای وجود ندارد به شما جواب خواهد داد.

Cache : این بخش نشان می دهد که همه فایل ها در حافظه پنهان توسط service worker ذخیره می شوند.

نتیجه

برنامه های پیش رونده کمک بزرگی به ما توسعه دهندگان هستند زیرا یک تجربه کاربری بهتر را برای کاربران فراهم می آورند. امیدوارم این مقاله شما را ترغیب به یادگیری آنها کند.

دوره های آموزشی

جدیدترین و بروز ترین دوره های آموزش برنامه نویسی را میتوانید در این بخش دنبال کنید

بحث و گفتگو

سوالات خود در زمینه برنامه نویسی و طراحی سایت را در این بخش مطرح کنید

مقالات آموزشی لرن سورس

• طراحی وب
• تجربه کاربری
• جی کوئری
•  رسپانسیو
• کتابخانه
• ابزار طراحی
• گرافیک
•  css
• html
• فریلنسر
• انگولار
• برنامه نویسی
•  سئو
• جاوا اسکریپت
• اندروید
• پی اچ پی
• پایتون
• نود جی اس
• vuejs
• react
• ios
• تکنولوژی
• رابط کاربری
• امنیت
• کسب و کار
• لینوکس
• موبایل
• پایگاه داده

منبع: لرن سورس

اپلیکیشن های Hybrid یا Native کدامیک بهتر است؟

نتظار می رود حجم بازار گوشی های هوشمند به 1.654 میلیارد دلار در سال 2022 افزایش یابد و تعداد کاربران گوشی های هوشمند در همان سال به 3 میلیارد عدد برسد. واضح است که داشتن حضوری قوی در تلفن همراه دیگر اختیاری نیست و شرکت ها باید توسعه برنامه های موبایل را به عنوان یک پیش نیاز اصلی برای رشد خود در نظر بگیریند.

اما با تصمیم برای توسعه یک برنامه تلفن همراه، با گزینه های مهم زیادی که میتواند نیاز های کاربران تلفن همراه را رفع کند رو به رو میشویم . یکی از مهمترین آنها انتخاب میان اپلیکیشن های Hybrid در مقابل اپلیکیشن های native است. هر کدام از این دو رویکرد توسعه برنامه های موبایل دارای مزایا و معایب خاص خود است و ما در این مقاله به طور کامل در مورد آنها توضیح خواهیم داد که کدام رویکرد برای این منظور مناسب است.

تفاوت بین اپلیکیشن Hybrid و Native در چیست؟

اپلیکیشن های Native در یک زبان برنامه نویسی که پلت فرم مخصوص خود را دارد، توسعه داده می شوند و تنها با پلت فرم مربوطه سازگار هستند. برنامه های اندروید در ابتدا در جاوا توسعه پیدا کردند، در حالی که برنامه های iOS در Swift اپل توسعه یافته اند.

از سوی دیگر، اپلیکیشن های هیبریدی با استفاده از فناوری های وب مانند HTML5، جاوا اسکریپت و CSS در ترکیب با عناصر بومی توسعه می یابند. آنها اساسا وبسایت های مستقل از پلتفرمی هستند که با استفاده از یک webview بومی نمایش داده می شوند. webview یک کامپوننت بومی است که به وسیله سسیستم عامل هایی مانند اندروید و ios برای بارگذاری محتوای وب فراهم آورده میشوند.

جوانب مثبت و منفی اپلیکیشن های Hybrid و Native

همانطور که در ابتدای این مقاله گفتیم، هر دو رویکرد Hybrid و Native برای توسعه برنامه های موبایل، جوانب مثبت و منفی خود را دارند که شرکت ها برای ورود به بازار تلفن همراه باید آنها را درذهن خود داشته باشند.

هزینه

هزینه، احتمالا مهمترین عاملی است که بر چگونگی توسعه برنامه های یک شرکت تاثیر می گذارد. در اینجا، رویکرد Hybrid برتری دارد. از آنجا که اپلیکیشن های هیبریدی می توانند برای هر پلتفرمی از پایه ایجاد شوند، ساخت آنها بسیار ارزان تر از برنامه های Native است.

برای مثال ساخت یک محصول قابل قبول با رویکرد هیبریدی برای یک شرکت حدودا 35000 دلار هزینه دارد، اما تولید همین محصول با رویکرد Native چیزی حدود 49000 دلار هزینه دارد. دلیل آن هم این است که برنامه باید برای هر دو سیستم عامل اندروید و ios توسعه پیدا کند. تفاوت این دو مقدار پول زیادی است که متواند برای موارد دیگر صرف شود.

زمان

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

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

نگهداری

امروزه کاربران انتظارات بسیار زیادی از برنامه های تلفن همراه دارند. بر اساس یک نظرسنجی 42 درصد از کاربران برنامه تلفن همراه انتظار دارند برنامه های تلفن همراه سریعتر از وب سایت های تلفن همراه بارگیری شوند. به طور متوسط، صاحبان گوشی های هوشمند انتظار دارند که برنامه ها در دو ثانیه بارگذاری شوند، این چیزی است که اغلب برای دستیابی به آن  نیاز به بروز رسانی های منظم و رفع سریع اشکالات است.

توسعه اپلیکیشن های Native به این معنی است که پایگاههای کد  متعددی برای نگهداری (حداقل یکی برای اندروید و یکی برای iOS) وجود دارد. از آنجایی که توسعه دهندگان اندروید به طور معمول به توسعه iOS مسلط نیستند و بالعکس، شرکت هایی که تصمیم می گیرند یک برنامه بومی را توسعه دهند، باید حداقل تعداد توسعه دهندگان آنها دو برابر باشد. که خوب این باز برتری اپلیکیشن های هیبریدی را می رساند.

کارایی

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

"بزرگترین اشتباهی که ما به عنوان یک شرکت انجام دادیم این بود که، بر روی HTML5 بیش از برنامه های Native  وقت گذاشتیم"، جمله قبل تصمیم مارک زوکربرگ موسس فیس بوک برای دور شدن از برنامه های هیبریدی در سال 2012 را توضیح داد.

البته، اکثر شرکت ها هرگز برنامه هایی با اندازه های مشابه فیس بوک ندارند . در واقع، انواع مختلفی از برنامه هایی وجود دارد که برای به کار انداختن آنها تقریبا نیازی به بهینه سازی ندارند و چنین برنامه هایی می توانند بیشتر از رویکرد هیبریدی بهره مند شوند.

تجربه ی کاربری

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

در حالی که به اپلیکیشن های هیبریدی می توان به عنوان یک برنامه بومی نگاه کرد، تجربه کاربران نشان میدهد که این برنام ها هنوز به اندازه تجربه کاربری ارائه شده توسط برنامه های بومی قدرتمند نیستند.

نتیجه

اگر بخواهید محصولی را با حداقل بودجه و در زمانی محدود توسعه دهید قطعا رویکرد هیبریدی از اولویت برخوردار است. این در حالی است که برنامه های بومی برای محصولاتی که نیاز به عملکرد بی نظیر و ویژگی های سفارشی دارند مناسب است.

دوره های آموزشی

جدیدترین و بروز ترین دوره های آموزش برنامه نویسی را میتوانید در این بخش دنبال کنید

بحث و گفتگو

سوالات خود در زمینه برنامه نویسی و طراحی سایت را در این بخش مطرح کنید

مقالات آموزشی لرن سورس

• طراحی وب
• تجربه کاربری
• جی کوئری
•  رسپانسیو
• کتابخانه
• ابزار طراحی
• گرافیک
•  css
• html
• فریلنسر
• انگولار
• برنامه نویسی
•  سئو
• جاوا اسکریپت
• اندروید
• پی اچ پی
• پایتون
• نود جی اس
• vuejs
• react
• ios
• تکنولوژی
• رابط کاربری
• امنیت
• کسب و کار
• لینوکس
• موبایل
• پایگاه داده

منبع: لرن سورس

آیا هنوز تقاضا برای توسعه دهندگان Full-Stack وجود دارد؟

در سال های اخیر بحث های بسیاری در مورد توسعه دهندگان Full-Stack و آینده آنها صورت گرفته است. بعضی معتقدند که توسعه دهندگان Full-Stack ، منسوخ شده اند، در حالی که بعضی دیگر می گویند  تقاضا برای توسعه دهندگانی که همه فن حریف باشند تا کنون در این حد زیاد نبوده است.

در این مقاله به معرفی توسعه دهدنگان Full-Stack و مزایا و معایب آنها میپردازیم.

یک توسعه دهنده Full-Stack  کیست؟

یک توسعه دهنده Full-Stack  کسی است که با تمام لایه های یک برنامه آشنا است. آشنایی با این لایه ها به مجموعه ای از فن آوری های مختلف برای تکمیل پروژه نیازمند است، به همین دلیل است که از Stack در نام آنها استفاده شده است.

لایه نمایش : این لایه با نام front-end هم شناخته میشود، لایه ارائه یک برنامه شامل همه چیزهایی است که به طور مستقیم توسط کاربر نهایی قابل دسترس است. این روزها، لایه ارائه معمولا با استفاده از HTML، CSS، جاوا اسکریپت، jQuery و بسیاری از کتابخانه های جاوا اسکریپت مانند React JS ، Foundation، Backbone، AngularJS و Ember.js ایجاد می شود.

لایه منطق : این لایه با نام back-end نیز شناخته میشود، لایه منطق برنامه شامل همه توسعه دهندگانی است توسعه است که رابط کاربری را تولید نمیکنند. در عوض، این لایه شامل منطق اصلی برنامه است که برنامه را قادر میکند به خوبی کار کند.

اگر برنامه را با اتومبیل مقایسه کنیم لایه ی منطق موتور اتومبیل محصوب میشود. توسعه دهندگان Back-end به زبانهای برنامه نویسی مانند Python، Ruby، Java، PHP و .Net مسلط هستند.

لایه داده : این لایه گاهی اوقات به عنوان زیر گروهی از لایه منطق نیز شناخته میشود، لایه داده ها با نحوه ایجاد، خواندن، به روز رسانی و حذف داده ها با استفاده از پایگاه های داده مانند MySQL، SQL Server، PostgreSQL و Oracle سر و کار دارد.

همانطور که می توان تصور کرد، پروژه های مختلف برای تکمیل نیازمند تکنولوژی های مختلف هستند، بنابراین هیچ دو توسعه دهنده Full-Stack ایی دارای مهارت های مشابهی نیستند . توسعه دهنده Full-Stack بودن مستلزم این نیست که شما لزوما با همه چیز برای کار با قسمت front-end و back-end آشنا باشید ، این بدان معنی است که شما قادر به کار در هر دو طرف هستید و میتوانید آن چیزی که در حال انجام است را درک کنید 

نوعی جدید از توسعه دهندگان Full-Stack

البته، توسعه دهندگان Full-Stack چیز جدیدی نیستند. در گذشته، برنامه های کاربردی نرم افزار معمولا از ابتدا تا انتها توسط یک فرد تکمیل میشد، بنابراین توسعه دهندگان Full-Stack تنها با نام "توسعه دهنده" شناخته میشدند. اما با توجه به افزایش  پیچیدگی برنامه ها و نیاز به انجام وظایف مختلف در نهایت موجب شد کار ها تقسیم شود تا جایی که توسعه دهندگان  front-end و back-end  از هم جدا شدند.

اکنون بعضی افراد فقط در یکی از این فیلد ها اشتغال دارند. در این زمان احساس میشد که دیگر دوره توسعه دهندگان Full-Stack به پایان رسیده است. اما آنچه که توسعه دهندگان Full-Stack را نجات داد ، تغییر اساسی در توسعه نرم افزار بود. اکنون به ایجاد هر قسمت از ابتدا، توسعه دهندگان نرم افزار میتوانستند از کامپوننت ها آماده و فریمورک ها برای ساده سازی عملیات توسعه استفاده کنند.

 

در اواخر سال 2000، بسیاری از برنامه نویسان توانستند یک سایت کامل که شامل یک منطق تجاری در سرور، یک پایگاه داده مقیاس پذیر و استقرار و پشتیبانی عملیاتی بود را ارائه دهند. این نسل جدید از توسعه دهنده Full-Stack میتوانستند  تیمی از برنامه نویسان را برای انجام وظایف یکسانی در کنار هم جمع کنند.

بر اساس Stack Overflow 2016 Developer Survey، توسعه دهندگان Full-Stack می توانند یکی از حرفه ای ترین و پرطرفدارترین توسعه دهندگان در دوره کنونی باشند.

 

Atishe Chordia میگفت : "ما دنبال توسعه دهنده ای هستیم که بتواند مسائل را حل کند - هر مسئله ای را. این به بدان معنی است که آنها باید بتوانند با همان سرعتی که تکنولوژی رشد میکند فناوری های جدید را یاد بگیرند.

بسیاری از استارتاپ هایی که در ابتدای راه هستند به توسعه دهندگان Full-Stack نیاز دارند. زیرا آنها نمی توانند هزینه یک تیم مهندسی بزرگ را تأمین کنند. همانطور که سازمان رشد میکند، نقش ها  بیشتر متخصص می شوند، اما معمولا به شخصی که در همه زمینه اطلاعات داشته باشد همیشه نیاز است.

مزایا و معایب توسعه دهندگان Full-Stack

امروزه روشن است که تقاضا برای توسعه دهندگان Full-Stack زیاد است، اما چیزی که ممکن است خیلی روشن نباشد، مزایا و معایب توسعه دهندگان Full-Stack در مقایسه با توسعه دهندگانی هست که اختصاصا بر روی یک لایه کار میکنند.

سرعت پیشرفت تکنولوژیک بی رحم است و تکنولوژی هایی که امروزه شرکت ها برای توسعه محصولات نرم افزاری خود به کار میبرند، بسیار متفاوت از فناوری هایی هستند که در 10 سال پیش استفاده می کرده اند.

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

این قابلیت آنها باعث می شود که به ویژه برای استارتاپ ها ارزشمند باشند زیرا یک استارتاپ میخواهد در اسرع وقت یک محصول پایدار (MVP) را منتشر کنند و سپس آن را توسعه دهد. توسعه دهندگان Full-Stack می توانند از یک قسمت از محصول به قسمتی دیگر جابه جا شوند و این کار باعث میشود تا استارتاپ ها کمترین هزینه ممکن را تامین کنند.

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

به طور طبیعی، برای توسعه دهندگان Full-Stack یادگیری و تسلط بر همه چیز غیر ممکن است، که این مورد مسلما بزرگترین عیب آنها در مقایسه با توسعه دهندگان تخصصی است. 

نتیجه

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

 

منبع: لرن سورس

چگونه برنامه های اندروید را به برنامه های IOS تبدیل کنیم؟

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

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

Porting چیست و چگونه کار می کند؟

Porting فرایند تغییر کد یک اپلیکیشن است که در این صورت بتواند بر روی دیگر پلتفرم ها نیز کار کند. اما چرا این کار را باید انجام دهیم؟ زیرا پلتفرم ها نیازمندی ها و معماری های متفاوتی دارند و به همین دلیل است که فرایند Porting  برای تبدیل اندروید به iOS نیاز است. با این حال قبل از تبدیل برنامه، باید به چند مورد توجه کنید:

تفاوت معماری در بین پلت فرم ها. هر تفاوتی بین پلتفرم ها باید به حساب آورده شود.

فریمورک های موجود برای توسعه. حتی ممکن است نیاز به تغییر زبان برنامه نویسی برنامه در این فرآیند داشته باشید. اکثر برنامه های iOS با Swift ایجاد می شوند، در حالی که اندروید به طور کلی از Java یا Kotlin استفاده می کند.

طراحی و رابط کاربری. برخی از ویژگی های موجود در اندروید ممکن است در iOS موجود نباشند یا حداقل ممکن است کاملا متفاوت به نظر برسد. همه این تفاوت ها بر روی تبدیل برنامه بر Android به iOS تاثیر می گذارد .

منطق کسب و کار پشت برنامه . به صورت ایده آل، منطق کسب و کار باید برای هر دو برنامه یکسان باشد. اما، با توجه به تفاوت های هر دو پلتفرم، ممکن است لازم باشد برخی تنظیمات را انجام دهید.

به طور کلی باید توجه داشته باشید که هیچ راه جادویی برای این نوع انتقال وجود ندارد. در این زمان هیچ نرم افزاری وجود ندارد که بتواند برای شما این تبدیل را انجام دهد.

چه چیزهایی را برای تبدیل برنامه Android به iOS نیاز دارید بدانید؟

تبدیل همیشه یک فرایند ساده نیست و نیاز به زمان، تلاش و احتمالا مقداری بودجه دارد. برای شروع این فرایند، مراحل زیر را در نظر بگیرید.

• لیستی از ویژگی های مورد نیاز خود در برنامه ایجاد کنید. اگر زمانی که برنامه Android را می ساختید این لیست را تهیه کردید، می تواند کمک بزرگی برای شما باشد. با این حال اطمینان حاصل کنید که فقط مفاهیم کلی را در نظر میگیرید. شما در مراحل بعدی به جزئیات بیشتری خواهید پرداخت.
• بودجه خود را مشخص کنید. به طور متوسط، هزینه ها بسته به اندازه و پیچیدگی برنامه شما و تیمی که برای فرایند توسعه انتخاب می کنید، می تواند  چیزی بین $ 2،000 تا $ 20،000 باشد.
• تیمی را انتحاب کنید که بتواند برنامه را از Android به iOS تبدیل کند . انجام این کار آسان نیست و تیمی که برای این کار انتخاب می کنید باید توانایی کار با دو پلت فرم را داشته باشد.
• شما باید آماده باشید. این فرآیند بسیار سریع نخواهد بود. انتقال می تواند چند ماه تا چند سال طول بکشد. البته مدت این زمان عمدتا به این بستگی دارد که برنامه تا چه حد بزرگ است و مهارت تیمی که انتخاب کردید تا چه حد است.
• تیم توسعه شما باید شامل حداقل یک توسعه دهنده و یک طراح UX باشد. اگر چه، بسیار توصیه می شود که یک تیم حرفه ای QA نیز داشته باشید.

چند نکته برای تبدیل موفقیت آمیز یک برنامه از Android به iOS

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

منطق کسب و کار را از کد خود جداسازی کنید. اگر قبلا برنامه شما دارای یک منطق کسب و کار بوده است، نیازی به ایجاد منطقی جدید نیست. این منطق موجود به شما کمک خواهد کرد تا ویژگی های برنامه را شکل دهید. علاوه بر این، اگر شما یک منطق آماده دارید، زمانی را برای تفهیم این منطق به تیم خود در نظر بگیرید.

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

ما میخواهیم دوباره بر این نکته تأکید کنیم که تیمی که در حال کار با آن هستید باید قادر به درک و کار با هر دو زبان باشد. در غیر این صورت، روند انتقال به سادگی غیر ممکن است.

هنگام تبدیل برنامه Android به iOS ، تفاوت بین دستگاهها را در نظر بگیرید. این قسمت بیشتر مربوط به جنبه های فنی است و البته بخشی هم مربوط به طراحی میشود. به عنوان مثال، سیستم عامل های مورد استفاده در دستگاه های مخاطب هدف شما ممکن است متفاوت باشد و در حالی که اکثر کاربران iOS، دستگاه های تلفن همراه خود را به آخرین نسخه ارتقاء داده اند، هنوز کسانی هستند که از نسخه های قدیمی تر استفاده می کنند. بنابراین، شما باید اطمینان حاصل کنید که برنامه در دستگاه های مختلف در دسترس باشد

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

به عنوان مثال، ناوبری اصلی در دستگاه های تلفن همراه بسیار متفاوت است. محصولات اپل فقط دارای یک دکمه هستند و دستگاه های Android از سه دکمه برای ناوبری استفاده می کنند. این تفاوت ها فرآیند تغییر کد را مشکل میکند.

تست، بخش مهمی از هر روند توسعه است. پس از تبدیل برنامه Android به iPhone ، باید مطمئن شوید که همه چیز به درستی کار می کند. به همین دلیل، ممکن است ایده خوبی باشد که تست را هم برای مشتری و هم برای توسعه دهندگان انجام دهید . به این ترتیب شما یک چشم انداز از طرف های مختلف دریافت خواهید کرد.

مزایا و معایب تبدیل برنامه

Porting قطعا یک فرایند پیچیده است که به زمان و تلاش زیادی را به نیاز دارد و مانند هر چیز دیگری مزایا و معایب خود را خواهد داشت.

مزایا :

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

معایب:

• این کار بسیار وقت گیر است. این مورد تنها مشکل صاحبان برنامه های  Android نیست بلکه تغییر از هر پلتفرمی به پلتفرم دیگر میتواند کاری زمانبر باشد.
• پیدا کردن توسعه دهندگان اندرویدی که این فرآیند را انجام دهند آسان نیست. اکثر برنامه نویسان تنها بر روی یک زبان تمرکز می کنند، بنابراین شما ممکن است به دو توسعه دهنده نیاز داشته باشید تا به یکدیگر برای انجام این فرآیند کمک کنند.

نتیجه

چیز های زیادی وجود دارد که در تبدیل برنامه های اندروید به ios باید در نظر بگیرید. بعضی از آنها میتواند این روند را به سختی بکشد. با این حال، هیچ چیز غیر ممکن نیست و اگر شما با برنامه ریزی پیش بروید، نتیجه ممکن است حتی فراتر از انتظارات شما باشد. برنامه ریزی خوب و تیم باهوش همیشه کلید موفقیت برای انجام هر کاری است.

دوره های آموزشی

جدیدترین و بروز ترین دوره های آموزش برنامه نویسی را میتوانید در این بخش دنبال کنید

بحث و گفتگو

سوالات خود در زمینه برنامه نویسی و طراحی سایت را در این بخش مطرح کنید

مقالات آموزشی لرن سورس

• طراحی وب
• تجربه کاربری
• جی کوئری
•  رسپانسیو
• کتابخانه
• ابزار طراحی
• گرافیک
•  css
• html
• فریلنسر
• انگولار
• برنامه نویسی
•  سئو
• جاوا اسکریپت
• اندروید
• پی اچ پی
• پایتون
• نود جی اس
• vuejs
• react
• ios
• تکنولوژی
• رابط کاربری
• امنیت
• کسب و کار
• لینوکس
• موبایل
• پایگاه داده

منبع: لرن سورس

React Native یا Flutter کدام برای شما بهتر است؟

امروزه توسعه نرم افزار های Cross-platform محبوبیت زیادی را بدست آورده است. درک چرایی این مسئله آسان است. هزینه های بسیار کمتر و توسعه ی سریعتر و ایجاد تنها یک برنامه  Cross-platform برای پلتفرم های اندروید و iOS ، همه اینها دلایلی هستند که شما را ترغیب به استفاده از آنها میکند.

با در نظر گرفتن این فریمورک ها، ساخت یک برنامه Cross-platform آسان تر شده است. React Native در این زمینه یک کهنه کار محسوب میشود، اما اخیرا رقیب جدیدش، Flutter محبوبیت زیادی به دست آورده است. اگر در استفاده از React Native یا Flutter برای توسعه برنامه های تلفن همراه تردید دارید ، در این مقاله نگاهی به هر دوی این فریمورک ها خواهیم داشت.

React Native و Flutter : در ابتدا باید چه چیزی را بدانید

React Native در سال 2015 به بازار آمد. این فریمورک متن باز است و در ابتدا توسط فیس بوک ساخته و پشتیبانی شد. هزاران برنامه با استفاده از فریمورک React Native ساخته شده اند که میتوان به Instagram و Skype اشاره کرد.

احتمالا شما هنوز در مورد Flutter چیزهای زیادی نشنیده اید و البته دلیل آن این است که Flutter یک ابزار نسبتا جدید است که در سال 2017 منتشر شد. این فریمورک توسط Google توسعه داده شده و پشتیبانی می شود. فلاتر هم  متن باز است و همچنین از آن برای ایجاد برنامه های اندروید، iOS و یک سیستم عامل نسبتا جدید به نام Google Fuchsia استفاده میشود.

Flutter گوگل در مقابل React Native : هفت تفاوت اصلی

سه مورد وجود دارد که Flutter و React Native در آن مشترک هستند :

• آنها متن باز هستند.
• آنها توسط شرکت های بزرگ فناوری اطلاعات توسعه یافته و پشتیبانی می شوند.
• آنها برای توسعه برنامه های تلفن همراه Cross-platform ایجاد شده اند.

با این حال چیزهای بیشتری را باید مقایسه کنیم تا بتوانیم نتیجه گیری کنیم. بیایید React Native و Flutter را مقایسه کنیم تا تفاوت های بین این دو را بشناسیم.

API های بومی پشتیبانی شده

در مورد React Native، می توانید روی اکثر API های بومی اندروید و iOS حساب باز کنید. API های رسمی شامل مواردی هستند که برای سرویس های WiFi و موقعیت مکانی استفاده میشوند. با این حال، API های غیر رسمی هم برای این فریمورک وجود دارد که میتوان به API هایی برای بلوتوث، بیومتریک، دوربین، سنسورها و NFC اشاره کرد. خبر خوب این است که شما همیشه می توانید API های غیر رسمی را برای این سخت افزار پیدا کنید. یک عیب مهم برای React Native عدم حمایت از طراحی گرافیک قابل تنظیم است.

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

زبان ها

اگر از React Native استفاده می کنید، کدنویسی شما با استفاده از زبان جاوا اسکریپت انجام میشود. این زبان یکی از محبوب ترین زبان های برنامه نویسی در میان توسعه دهندگان است. تعداد زیادی توسعه دهنده جاوا اسکریپت در بازار وجود دارد ، با این حال، پیدا کردن توسعه دهنده ای که با React Native کار کند، ممکن است کمی زمانبر باشد.

شما باید با Dart برای استفاده از Flutter آشنا باشید. Dart یک زبان برنامه نویسی کمتر شناخته شده است، بنابراین پیدا کردن توسعه دهندگانی که با فلاتر بتوانند کار کنند، ممکن است برای شما به یک چالش تبدیل شود. از طرفی یادگیری Dart زمان زیادی را از شما نخواهد گرفت ، به خصوص اگر شما یک توسعه دهنده Android بوده و با Java یا Kotlin آشنا هستید. اگرچه، توسعه دهندگان iOS زمان بیشتری را برای یادگیری Dart نیاز دارند.

کارایی

می توانیم تضمین کنیم که مقایسه عملکرد و کارایی React Native و Flutter شما را متعجب خواهد کرد. در مورد برنامه های ساخته شده با React Native، معماری آنها شامل کدهای جاوا اسکریپت و کامپوننت های بومی است. اگر برنامه نیاز به استفاده از کامپوننت های بومی (به عنوان مثال، خدمات مکان یا دوربین) داشته باشد، از JavaScript bridge برای تبدیل متغیرهای جاوا اسکریپت به معادل بومی آنها استفاده می کند.

عملکرد و کارایی یکی از برجسته ترین مزایای Flutter است که این فریمورک را به موضوع داغی تبدیل کرده است. برنامه های Flutter بدون bridge با کامپوننت های بومی ارتباط برقرار میکنند.، در نتیجه باعث صرفه جویی در وقت شده و کارایی برنامه تا حد زیادی افزایش می یابد. پس برنامه های پیچیده ساخته شده با Flutter سریع تر هستند.

توسعه رابط کاربری

یکی دیگر از تفاوت های مهم در اینجاست. ایجاد رابط کاربری با React Native به معنی استفاده از کامپوننت های بومی است. از یک طرف، این امکان به شما اجازه می دهد تا برنامه هایی را ایجاد کنید که از برنامه های بومی ها قابل تشخیص نیستند. از طرفی دیگر، باید  رابط های کاربری مختلفی را برای پلت فرم های مختلف ایجاد کنید.

از سوی دیگر، این کار باعث ایجاد هزینه های بیشتر خواهد شد و در عملکرد برنامه نیز تاثیر خوبی نخواهد داشت. گاهی اوقات هم باید به دنبال کتابخانه های کامپوننت شخص ثالث باشید.

Flutter یک رویکرد کاملا متفاوت برای ساخت رابط کاربری دارد : استفاده از ابزارهای اختصاصی سفارشی شده :

• Material Design برای اندروید
• Cupertino برای IOS
• ویدجت هایی برای متون، انیمیشن ها، و ... که می تواند برای هر پلتفرمی استفاده شود.

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

تست کردن

توسعه دهندگان React Native  انواع مختلفی از ابزارهای جاوا اسکریپت را برای تست واحد در اختیار دارند. با این حال، زمانی که شما نیاز به اجرای UI یا تست اتوماسیون دارید، همه چیز پیچیده تر می شود. شما ابزارهای  غیر رسمی مختلفی را برای این فریمورک در اختیار دارید که میتوانید از بین آنها انتخاب کنید.

وضیت تست در Flutter نیز چندان مناسب نیست. در حالی که ابزار های تست واحد که همراه با Dart ارائه میشوند عالی هستند اما ترکیب این تست ها کار را پیچیده تر میکند. با این حال، یک بسته flutter_driver برای تست عملکرد وجود دارد.

ساختار کد

ساختار کد جنبه ای دیگر است که تمایز روشنی را بین این دو فریمورک ایجاد میکند. Flutter در مقایسه با React Native از یک روش کاملا متفاوت برای ساختار کد نویسی استفاده میکند: این فریمورک داده ها، استایل ها و قالب ها را در یک فایل تشخیص نمی دهد.از طرفی این روش، قابلیت خوانایی کد را کاهش می دهد و به طور کلی آن را شلوغ و به هم ریخته نشان میدهد.

از سوی دیگر، برخی از توسعه دهندگان این رویکرد را راحت تر و آسان تر می یابند. در واقع اگر از Flutter استفاده می کنید نیازی به استفاده از ابزارهای تصویری اضافی و ابزارهای قالب نیست - این فریمورک به شما اجازه میدهد برنامه ای را فقط با استفاده از کد طراحی کنید. علاوه بر این، این رویکرد باعث میشود در زمان صرفه جویی کنید، زیرا لازم نیست که بین حالت طراحی و کد در حال جابه جایی باشید.

IDE و پشتیبانی جامعه

با توجه به اینکه React Native کهنه کارتر از Flutter است، قطعا در مورد IDE و پشتیبانی جامعه بالاتر از فلاتر قرار میگیرد. React Native  تقریبا توسط هر IDE ایی به طور گسترده  مورد استفاده قرار می گیرد. از سوی دیگر Flutter تنها توسط تعداد محدودی از IDE ها پشتیبانی می شود:

• VS Code
• Android Studio
• IntelliJ IDEA

مزیت دیگر React Native نسبت به Flutter اندازه جامعه توسعه دهندگان آن است. با  توجه به اینکه سابقه ی React Native بیشتر است دارای جامعه ی بزرگتری از توسعه دهندگان است.

آخرین کلام در مقایسه دو فریمورک Flutter و React Bative 

حتی اگر ما تمام مزایا و معایب Flutter و React Native را با هم مقایسه کنیم، باز انتخاب شما بستگی به الزامات خاص پروژه ی شما دارد :

React Native بهترین گزینه خواهد بود اگر :

• نیاز به ساخت برنامه ای دارید که در هر دو سیستم عامل Android و iOS اجرا شده و از UI های بومی و بصری در هر پلترفرم جداگانه استفاده کنید
• نیاز به یک ابزار پیشرفته تست شده در طول زمان دارید.

از طرفی، Flutter نیز میتواند وقتی برای شما مناسب باشد که :

• شما نیاز به طراحی رابط کاربری کاملا سفارشی شده دارید
• شما آماده مقابله با اشکالات و کشف قلمرویی ناشناس باشید.
   

دوره های آموزشی

جدیدترین و بروز ترین دوره های آموزش برنامه نویسی را میتوانید در این بخش دنبال کنید

بحث و گفتگو

سوالات خود در زمینه برنامه نویسی و طراحی سایت را در این بخش مطرح کنید

مقالات آموزشی لرن سورس

• طراحی وب
• تجربه کاربری
• جی کوئری
•  رسپانسیو
• کتابخانه
• ابزار طراحی
• گرافیک
•  css
• html
• فریلنسر
• انگولار
• برنامه نویسی
•  سئو
• جاوا اسکریپت
• اندروید
• پی اچ پی
• پایتون
• نود جی اس
• vuejs
• react
• ios
• تکنولوژی
• رابط کاربری
• امنیت
• کسب و کار
• لینوکس
• موبایل
• پایگاه داده

منبع: لرن سورس