چرا آیونیک 2 (Ionic2) ؟ ( مقایسه Ionic2 و Ionic1 )

چرا آیونیک 2

آیونیک 2

 

برتری آیونیک 2 (Ionic2) نسبت به آیونیک 1 (Ionic1)

 

وقتی  آیونیک 2 (Ionic2) منتشر شد، من خیلی خوشحال شدم. در عین حال، نظرات توسعه دهنده­ ها را هم می شنیدم که این جمله را میگفتن  : ” تازه داشتم به آیونیک 1 (Ionic1) عادت میکردم ولی حالا مجبورم که فریم ورک دیگه ای رو یاد بگیرم ما همواره نیاز داریم تا به محض ظهور تکنولوژی، اون رو یاد بگیریم و نمیتونیم در تمام زندگیمون تنها بر یک مهارت تکیه کنیم. فاصله زمانی، بین انتشار کامل آیونیک 1 (Ionic1) و انتشار نسخه آلفا آیونیک 2 (Ionic2)، تقریبا کم بود. برخلاف این بازه کم زمانی، درک این مساله که  آیونیک 2 (Ionic2) بهترین انتخاب می باشد ساده است. بیاید دو مورد زیر را باهم بررسی کنیم:

  • انگولار 2 نسبت به انگولار 1 پیشرفت­ها و بهبودهای زیادی داشته و در حال حاضر هم در حال بهبود است (مخصوصا برای موبایل) که انگولار 2 درنهایت، از ورژن اولیه انگولار، پیشی می­گیرد؛ پس نیاز به ساخت یک فریم ورک جدید برای آن احساس می­شود یعنی همان آیونیک 2 (Ionic2).
  • توسعه دادن با استفاده از آیونیک 1 (Ionic1)، بر روی ورژن قدیمی تر انگولار، باعث می­شود تا زمان و تلاش بیشتری را صرف کنیم و در عین حال هم شاهد نتایج کمتری باشیم، که این موضوع منجر به تغییر رویه ما و استفاده از انگولار 2 می­شود.

در بین دو گزینه بالا، به نظر من اولین گزینه، مورد قبول تر است. البته این موضوع را هم نباید فراموش کنیم که در هر صورت، تیم Ionic ، به پشتیبانی از آیونیک 1 (Ionic1) برای مدت زمان زیادی ادامه خواهد داد. من به محض انتشار آیونیک 2 (Ionic2)، زمان زیادی را صرف کردم، (خیلی خیلی زیاد)، تا آیونیک 2 (Ionic2) را یاد بگیرم و با آن کار کنم و به نظرم ، آیونیک 2 (Ionic2) بهتر از آیونیک 1 (Ionic1)  است. من در این پست ادعای زیادی نمیکنم،  واقعا اینکه تکرار دوم هر چیزی بهتر از نسخه اولیه آن باشد، مساله دور از انتظاری نیست. (شاید تنها گزینه استثنا در اینجا، فیلم­های سینمایی باشند).

طبیعتا آیونیک 2 (Ionic2) که بر روی انگولار 2 ساخته شد، میبایست بهبودهای زیادی را به همراه داشته باشد. تیم Ionic می تواند با یک شروع جدید، تمام درسهایی را که از آیونیک 1 (Ionic1) فراگرفته است در اختیار بگیرد و از آن برای ساخت بهتر آیونیک 2 (Ionic2) استفاده کند. هم اکنون آیونیک 2 (Ionic2) موجود است و همچنان هم در حال پیشرفت است، پس درحقیقت در این لحظه ، این­که  آیونیک 2 (Ionic2) بهتر است یا آیونیک 1 (Ionic1)، می­تواند مورد بحث قرار گیرد.آیونیک 2 (Ionic2)  به اندازه آیونیک 1 (Ionic1) کامل نیست و هنوز بخش­هایی را ندارد و باگ ها و مشکلات زیادی را هم دارد که در حال تکمیل و درست شدن هستن. درواقع این مساله­­ی مورد بحث ما در این پست نیست. در این پست، من راجع به مسائل آیونیک 2 (Ionic2)، از دید توسعه دهنده صحبت میکنم.

در سطح بالا، آیونیک 2 (Ionic2) از نظر مفهومی بسیار شبیه به آیونیک 1 (Ionic1) است. در آیونیک 1 (Ionic1)، شما کنترل کننده هایی دارید (controllers) که منطق شما را نگه می­دارد و قالب­هایی (templates) که دید (view)  را مشخص می­کند. آیونیک 2 (Ionic2) هم همین­طور است؛ با این تفاوت که شما به جای کنترل کننده­ ها (controllers) ، کلاس (class) دارید. در سینتکس قالب (template syntax)، تفاوت­های کمی وجود دارد ولی در ساختار کلاس، تفاوت­ها زیاد است، در هر صورت مفاهیم هم­چنان یکیست و تغییر از آیونیک 1 (Ionic1) به آیونیک 2 (Ionic2) طبیعیست. بهتر است به بررسی برخی از مشخصات بپردازیم.

دلایل برتری آیونیک 2 (Ionic2) نسبت به آیونیک 1 (Ionic1) :

 

1- سازمان و ساختار (Organization and Structure) آیونیک 2 (Ionic2) :

در آیونیک 2 (Ionic2)، هر صفحه یا کامپوننت ( component ) در برنامه شما، فولدر خاص خودش با فایل کلاس خودش، فایل قالب (template) و فایل استایل را دارد. اگر من در برنامه ام دو صفحه داشته باشم، Home و About، ساختار فایل من به شکل زیر است:

  • home
    • home.ts
    • home.html
    • home.scss
  • about
    • about.ts
    • about.html
    • about.scss

این همه چیز را منظم و سازمان دهی شده نگه می­دارد و هم­چنین ویژگی­ هایی را که می­سازید، ماژولار می­کند. من یک برنامه را با آیونیک 2 (Ionic2) ساختم، و بعدها آن برنامه را در یک tab در برنامه دیگری بردم و تمامی اجزا مربوطه را کپی کردم و همه چیز، بی نقص کار کرد؛ همچنین یک سرویس گوگل مپ ساختم که به راحتی میتوانم با درگ و دراپ کردن آن در هر برنامه ای که میخواهم، از آن استفاده کنم.

البته شما میتوانید که پروژه­ های آیونیک 1 (Ionic1) خودتان را هم به این ترتیب مرتب کنید، اما استایل پیش فرض اولیه نیست و نیاز به دانش قبلی و انگیزه دارد تا به ساختار معقول و مقیاس پذیری نظیر این در آیونیک 1 (Ionic1)، دست پیدا کرد. با آیونیک 2 (Ionic2) شما نمی­توانید از روش های من در آوردی غلط استفاده کنید، شما کم و بیش مجبورید که کارها را به درستی و به بهترین نحو و بهترین تکنیک انجام دهید (best practices) . در آیونیک 1 (Ionic1)  میتونیم تنبل باشیم و فقط یک کنترل کننده بسازیم که میتواند منطق را در چندین صفحه مختلف از برنامه ام در دست بگیرد، اما در آیونیک 2 (Ionic2)، شما واقعا نمیتونی این کار را انجام دهید.

2- ابزار ها و تجهیزات آیونیک 2 (Ionic2)

یکی از دستورات مورد علاقه ام در آیونیک 2 (Ionic2)، این دستور است :

ionic generate page MyPage

که میتواند به شکل زیر کوتاه شود:

ionic g page MyPage

با رابط متنی آیونیک 2 ( Ionic 2 CLI ) شما می­توانید به صورت خودکار، صفحات، ارائه دهندگان (providers) ، لوله (pipe)، اجزا و دستوردهنده­ ها (directive) را تولید کنید و آن ، تمامی فایل­های مورد نیاز شما و برخی از کدها را برای شما تنظیم میکند. برای مثال، با اجرای دستور بالا، Ionic CLI، به طور خودکار ، فایل­های زیر را برای من تولید می­کند:

  • my-page
    • my-page.ts
    • my-page.html
    • my-page.scss

و داخل آن فایل­ها، کدهای اولیه هست ، به ویژه، فایل تایپ اسکریپت ، چیزی شبیه به این است:

import {Component} from '@angular/core';
  import {NavController} from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/home/home.html'
  })
  export class HomePage {
  constructor(public navCtrl: NavController) {
  }
 }

پس در زمان شروع یک پروژه جدید، میتوانیم حدودا 7-8 دستور مختلف را اجرا کنیم و نصف برنامه برایمان ساخته می­شود. پس میتوانیم تمام چیزهای درهم و برهم رو مثل ذخیره کردن فایلهای جدید و تنظیم ساختار اولیه رد کنیم و مستقیما به سراغ مسائل اصلی برویم. این مورد، برای تازه­ کارها عالیست چرا که به شما این دید را می­دهد که فایل باید به چه صورت باشد.

3- مسیریابی در آیونیک 2 (Ionic2)

مسیریابی در Ionic 2  با مسیریابی در آیونیک 1 (Ionic1)، متفاوت است. در Ionic 1، مسیریابی با استفاده از URL ها تعریف می­شد. برای مثال:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
   .state('intro', {
     url: '/',
     templateUrl: 'templates/intro.html',
     controller: 'IntroCtrl'
   })
   .state('main', {
     url: '/main',
     templateUrl: 'templates/main.html',
     controller: 'MainCtrl'
   });
   $urlRouterProvider.otherwise("/");
 });

و شما این حالت ها رو با لینک شدن به اون ها فعال می کردید که با رویکرد وب هست. در آیونیک 2 (Ionic2)،  رویکرد Native استفاده می­شود (مثل push کردن فرگمنت ها در اندروید) که صفحات push  و pop می­شوند.

this.nav.push(MyPage);

من زیاد وارد این مساله و توضیح و معنای آن نمی­شم.ولی شبیه به رفتار کد به صورت native در اندروید هست ، شما می­توانید یک صفحه را در پشته مسیریابی Push کنید تا آن را تبدیل به صفحه کنونی کنید، و هم­چنین می­توانید آن را Pop کنید تا آن را از پشته مسیریابی حذف کنید و به صفحه قبل باز گردید. دقیقا مثل Push  و Pop در آرایه.

4- سینتکس قالب (Template Syntax) در آیونیک 2

سینتکس قالب در Ionic 1  و Ionic 2  بسیار شبیه به هم است. در ابتدا کمی عجیب به نظر می­رسد، اما به نظر من سینتکس قالب در Ionic 2  تمیزتر است. نگاهی به چند کد بیاندازیم:

آیونیک 1 (Ionic1):

<img ng-src="{{photo.image}}" />

آیونیک 2 (Ionic2):

<img [src]="photo.image" />

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

آیونیک 1 (Ionic1):

<button ng-click="doSomething()">

آیونیک 2 (Ionic2):

<button (click)="doSomething()">

دوباره دراین جا کد تمیزتر به نظر میرسد، اما مزیت دیگر کد Ionic 2 ، این است که به راحتی میتوانیم کنترل­ کننده کلیک را به هر رخدادی که می­خواهیم، تغییر دهیم.  میتوانیم از (tap)، (change)،  یا هرچیزی استفاده کنیم. تغییرات کوچک بسیاری نظیر این مورد وجود دارد، اما نمی­ خواهیم که وقت زیادی بگذاریم و راجعش صحبت کنیم . هرچند که به طور کلی،  سینتکس جدید را تمیزتر و مفیدتر میدانیم.

5- آیونیک 2 (Ionic2) فقط جاوا اسکریپت استاندارد است

دز انگولار 1 و آیونیک 1 (Ionic1)، اصطلاحات و سینتکس های جدید و خاص زیادی وجود داشت که نیاز به یادگیری داشت. اما آیونیک 2 (Ionic2)، همان جاوا اسکریپت ساده قدیمی است. هرچیزی که شما میسازید، اساسا  استاندارد ES6 (البته به صورت فنی تایپ اسکریپت) است که مختص هر فریم ورکی نیست.

اگر شما با ES6 آشنایی ندارید، باید سرچ کنید که  ECMAScript 6 چیست، اما اساسا این آخرین خصوصیات جاوا اسکریپت است و شامل تعدادی ویژگی جدید است. مزیت این کار این است که هرچیزی که شما برای ساختن برنامه آیونیک2  یاد می گیرید، صرفا به شما در ساخت اپلیکیشن کمک نمی­کند، بلکه به طور کلی به شما در “حرفه ای تر شدن در جاوا اسکریپت” هم کمک می­کند. مهارت­ هایی که  با Ionic 2  به دست می­آورید، این قابلیت را دارند که در جاهای بسیار دیگری هم استفاده شوند چرا که ES6، در نهایت به عنوان  جاوا اسکریپت نرمال جدید شناخته می­شود.

6- آیونیک 2 از سینتکس ES6 استفاده می کند

از آنجایی که Ionic 2  از ES6 استفاده می­کند، بدین معنا که ما می­توانیم از تمامی سینتکس های ES6 استفاده کنیم.دقت داشته باشید که تایپ اسکریپت و ECMAScript 6 (ES6) دو نوع کاملا جدا از هم نیستند ، و عملا می شه گفت تایپ اسکریپت فرمت استاندارد سینتکس ECMAScript 6 (ES6)  است.

در حال حاضر، ES6  توسط همه مرورگرها پشتیبانی نمی­شود، اما آیونیک 2 (Ionic2) کد شما را زمانی که ساخته می­شود، تبدیل به کد ES5 معتبر میکند ( که همان جاوا اسکریپتیست که بیشتر مردم بلدند از آن استفاده کنند). شما نمی­توانید این مساله را ببینید مگر آنکه کد تبدیل شده را دیباگ کنید.

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

doSomething(function(data){
    console.log(data);
});

به زیر:

doSomething((data) => {
    console.log(data);
})

کد کمی تمیزتر به نظر می­رسد که شما را جذب خود می­کند، اما بهترین نکته در این زمینه اینست که حوزه والدین (parent scope) را نگه می­دارد. این بدان معناست، هر ارجاعی به this ، در حوضه parent صدا می­شود، نه در حوضه فراخوانی تابع. پس حالا، به جای انجام دادن کار زیر:

this.someData = null;
 var me = this;
 doSomething(function(data){
     me.someData = data;
 });

شما می­توانید کار زیر را انجام دهید.

this.someData = null;
 doSomething((data) => {
  this.someData = data;
  })

بدون نیاز به ایجاد متغیر اضافی برای نگه­داری ارجاع دقیق به parent

به همین راحتی و باحالی ☺☺☺

 

7- ساختن نهایی برنامه توسط آیونیک2

در Ionic 2، تقریب تمامی کدهای شما در داخل فولدر app، انجام می­شود؛ که کاملا از فولدر www جداست، که این فولدر شامل کدی هست که دراختیار مرورگر است. زمانی که شما یک برنامه Ionic 2 را اجرا می­کنید، کدی که در داخل فولدر app است، به طور خودکار،  به یک فایل جاوا اسکریپت تبدیل می­ شود که در فولدر www کپی شده است و در آنجا استفاده می­شود.

برای بیشتر قسمت­ ها، شما هرگز نیازی ندارید تا به فایل index.html دست بزنید. من این مساله را به آیونیک 1 (Ionic1) ترجیح می­دهم چون شما مجبور بودید تا تمامی فایلهای جاوا اسکریپتی را که ایجاد کرده بودید،به صورت دستی به فایل index.html خود وارد کنید. هرچند که کدهای همراه آیونیک 2 (Ionic2)، به طور خودکار، کوتاه یا مبهم نمی­شود .

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

نتیجه گیری :

بدون شک، به همه پیشنهاد می­کنیم که از آیونیک 2 (Ionic2) استفاده کنند، سوال اینجاست که چه زمانی؟ این سوال که آیا باید از آیونیک 2 (Ionic2) استفاده شود، زیاد مطرح می­شود، پس دراینجا پیشنهادات من به طور خلاصه آمده است:

  • اگر شما در Ionic تازه کار هستید، با Ionic 2 شروع کنید. که سرعت کار باهاش بالاتره و به اندازه کافی مناسب است تا در هر پروژه ای استفاده شود.
  • اگر شما از Ionic 1 برای پروژه موجود استفاده می­کنید، از همان آیونیک 1 (Ionic1) استفاده کنید و بعدا از آیونیک 2 (Ionic2) استفاده کنید.
  • اگر شما از Ionic 1 استفاده می­کنید و می­خواهید پروژه جدیدی را شروع کنید، در صورتی که پروژه­ تان، عجله ای است، یا پیچیده است و نیاز است تا زود منتشر شود، از آیونیک 1 (Ionic1) استفاده کنید. اما اگر امکان وجود باگ برای مدت زمان کم وجود دارد یا برنامه قرار نیست تا ماه­ ها به طور رسمی منتشر شود، از Ionic 2 استفاده کنید.

اگر شما می­خواهید یادگیری بیشتری را درباره آیونیک 2 (Ionic2) را شروع کنید، که من به همه پیشنهاد می­کنم، اکنون اینکار را انجام دهند، حتی اگر برای مدت­ها با Ionic 1 کار کرده اید.تمام شد و رفت

 

2 پاسخ
  1. بهزاد
    بهزاد says:

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

    اگه بخواین راهنمایی کنید و بصورت خیلی کلی بفرمایید که کدوم یکی بهتره ، امکان پذیر هست؟

    پاسخ دادن

دیدگاه خود را ثبت کنید

Want to join the discussion?
Feel free to contribute!

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *