חיפוש

אז ריאקט נייטיב או Flutter?

מצד אחד, הפלטפורמה הותיקה של פייסבוק; מצד שני הפלטפורמה הצעירה והצומחת של גוגל. הנה הצצה זריזה על ההבדלים בין השתיים

השאלה שמופיעה בכותרת של המאמר הזה היא אחת מהשאלות שאני נשאל הכי הרבה. אבל, כמו שאלות רבות בחיים, גם לשאלה הזו אין תשובת קסם, והיא תלויה במשתנים רבים. לי יש אמנם את ההעדפה שלי, אבל אני אנסה לתת הצצה וטעימה להבדלים בין 2 הפלטפורמות האלו.

אי אפשר להתעלם מנוכחותה רבת השנים של React Native, הקהילה הגדולה שמאחוריה והספריות הרבות, וכמובן העובדה שענקית טכנולוגיה כמו פייסבוק נמצאת מאחוריה. מהצד שני, Flutter היא צעירה יותר (גרסה 1.0 הגיעה בשלהי 2018) ומאותו הרגע היא צומחת בקצב מהיר. הכי מהיר, לפי GitHub, שקבע ששפת Dart, שבה Flutter נכתבת, היא השפה בעלת קצב הצמיחה הגבוהה ביותר לשנת 2019, בהתבסס על כמות ה-Repositories המכילים פרויקטי Flutter.


גמישות

React Native מבוססת על סביבת ריצה של Javascript ומשתמשת בbridge לרכיבי היעד בפלטפורמות השונות. כאשר היא מתקמפלת לקוד native היא משתמשת באותם הרכיבים אשר תוארו בעת כתיבת הקוד רק בצורתם האמיתית ביעד, כלומר, אם ביקשנו כפתור, הכפתור יופיע בIOS בגרסאתו בObjective-c, וכנל גם לגבי Android. לעומת זאת, Flutter, משתמשת בארכיטקטורה מעניינת אחרת הנקראת C++ Skia, זהו המנוע שעומד מאחורי הקלעים, בקצרה, במקום להשתמש בbridge אל רכיבי הnative, המימוש של Flutter מגיע מובנה מהקופסא הפעם.

דמיינו דף ריק שעליו תציירו כל מה שאתם רוצים, כך זה עובד, ע"י תיאור הUI, הנקרא Widget, ניתן להסביר לFlutter מה עליו לצייר על הדף וכיצד לצייר, כל מה שFlutter צריך לעשות הוא לבקש את אותו הנייר מפלטפורמת היעד ופשוט לצייר. באופן כזה לדוגמא, תוכלו לייצר רכיבי Android על IOS ולהפך!


שפה

ריאקט נייטיב מבוססת על כתיבה בJavascript, שלה יש ותק של 25 שנות פיתוח, שפה עשירה ומוכרת מאוד, לעומת Flutter משתמשת בשפת Dart, שפה שנוצרה ע"י גוגל במטרה לקחת שליטה מלאה על כל תהליך הפיתוח, כך שאם יש צורך לפיצ'ר בשפה על מנת לשפר את פלאטר, לגוגל יש את היכולת לעשות זאת.


ביצועים

השוני שצויין בחלק האחרון מוביל להבדלי ביצועים, הודות לכך שהמנוע של Flutter נכתב ב ++C, והודות לטריק הציור המעניין של הקומפוננטות, הוא מאפשר לFlutter לרוץ מהר יותר ולהגיע לרוב לקצב של 60fps. קצב בו ניתן לייצר אנימציות חלקות לחלוטין. מאחר וReact Native נשענת על הbridge עם Javascript היא מפסידה בביצועיה באספקט הזה. נציין כי כאשר מדובר על טכנולוגיות המבצעות cross-platform וabstraction לרוב הדברים באים על חשבון ביצועים\נפח ועוד, כאן Flutter מראה ביצועים טובים על אף האפשרות ליצא למספר רב של פלטפורמות. אציין כי מפתחי Flutter דואגים בכל גירסא שהם מוציאים שהיעילות לא תרד מ60fps. אציין כי React Native לאחרונה מתכוננת להסיר את הBrige כחלק מפרוייקט הנקרא Fabric, דבר זה יתן גמישות רבה בעיצוב, ושיפור משמעותי בביצועים.


יש גב

כשמסתכלים מי עומד מאחורי כל אחת מהן, מדובר בלא פחות מקרב הענקיות, React של Facebook בעוד Flutter של Google. גם כאן ניתן לשים את האצבע על השפעת שפת התכנות בה משתמשים, Flutter נכתבת עם Dart, שגם היא, מתוחזקת ע"י גוגל עצמה, מה שמקנה לה שליטה מלאה על המתרחש ועל הפיצ'רים השונים בשפה.



טסטים טסטים טסטים

לא פעם מתכנתים נוטים להזניח את החלק הזה בקוד, על אף מתודולוגיות כמו TDD שהוכיחו את חשיבותם של הטסטים. ראשית נבין את הסוגיה, כשמדובר בטסטים לחלקי Frontend ישנם מספר דרכים בהם יש לבדוק את התוכנה\האפליקציה שכתבנו, נדרש לבדיקות יחידה בסיסיות לקטעי קוד לוגיים, נדרש לבדיקות הUI על מנת לוודא שמה שמוצג על המסך אכן תואם את הציפיות על סמך ערכי הקוד(הstate), ובנוסף נירצה בדיקות משתמש - לוודא שכפתור אכן לחיץ, תיבת הטקסט אכן מקבלת מידע ועוד. בFlutter הדברים נבנו בצורה מותאמת מאוד בדיוק למקרים הללו, ולכן ישנה תמיכה מלאה בDart לטסטים. שם הטסטים מחולקים ל3 ולכל סוג טסטים קיימות הסיפריות המתאימות המתוחזקות ע"י Google והקהילה: Unit tests, Widget tests, Integration tests, כאשר Unit הן בדיקות יחידה, Widget הם בדיקות המוודאות את המוצג על המסך, אך אינן מריצות את הטסטים פיזית על אימולטור, ולבסוף Integration הן בדיקות המיועדות לדמות פעילות של משתמש כאשר האפליקציה מותקנת באופן אוטומטי על מכשיר יעד והטסטים רצים אוטומטית. בReact Native הדבר שונה, קיימות ספריות כמו Jest המאפשרות בדיקות יחידה לקטעי קוד Javascript אבל כאשר זה מגיע לבדיקות UI, אין תמיכה רישמית של React Native בניגוד Flutter, ניתן להשתמש בכלים כמו Appium, Detox על מנת להשיג את המבוקש.



ותק ושנות נסיון

כידוע, React Native היא על תפקיד המבוגר האחראי, שנות הניסיון שלה באות לידי ביטוי בחברות הייטק וסטארטאפים רבים הבוחרים להשען על מוצר מוגמר, בדוק וללא הפתעות. React Native רצה החל מ2015 וכיום היא הנפוצה מכל הטכנולוגיות בתחום הCross-Platform, ולכן בכל בעיה שתיהיה, ככל הנראה תוכלו מהר מאוד למצוא תשובה\עזרה\מתכנת נוסף לצוות. בFlutter לאור יציאתה היותר מאוחרת ב4 בדצמבר 2018 הקהילה עדיין לא מספיק גדולה, אך מניסיוני האישי - היא בשלה לחלוטין להתחלת עבודה, ישנן המון ספריות ואפילו ספריות כגון Angular Dart, React Dart המאפשרות לכתוב את אותן הטכנולוגיות בDart.


עד כמה אני cross-platform

כידוע React Native מאפשרת לייצא את הקוד לAndroid ולIOS. ישנה אפשרות ליצא גם לWEB וגם לWindows ע"י שימוש בספריות. כאן Flutter נותנת הכל במקום אחד והכל בניהולה של Google, וכיום המצב הוא כזה: גרסאות יצוא יציבות : Android, IOS.

גרסאות יצוא בשלבי פיתוח: Web(קרוב ליציב), Window, Mac, Linux, Google Fuchsia OS.


מה צופה העתיד

React Native ככל הנראה ממשיכה את התמקצעותה בתחומי הAndroid והIOS, אך בזמן זה(וממה שידוע עד כה, החל מ2016), לGoogle יש תוכניות ארוכות טווח. Google מפתחת מערכת הפעלה חדשה שעתידה להחליף את Android ואף יותר מיזה, היא עתידה להיות נכונה לכל מכשיר IOT, החל משלט של מזגן וקומקום ועד לטלפונים, מחשבים ועוד - ניחשתם נכון, Flutter היא הFramework הרישמי לתכנות אפליקציות על גבי Fuchsia OS.



לסיכום,

לכל אחת מהפלטפורמות יתרונות וחסרונות שונים, יש לבחון בקפידה את הדברים ולתת מקום ולנסות דברים חדשים. תחליטו ותבחרו את הטכנולוגיה שתתאים לusecase שלכם בצורה הטובה ביותר.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


תודה על הקריאה, וההתעניינות אני זמין לכל שאלה והתייעצות בתחום,

תודה לתמיר חיים רביע מומחה React Native, Flutter, על תיקונים והוספת מידע למאמר.


ברק מנחם | AppsFID+Barak@gmail.com \ AppsFID@gmail.com | +972 52 467 1406

מהנדס תוכנה, תחומים: Embedded, Fullstack, Flutter


תמיר חיים רביע | tamir.rabia@gmail.com


125 צפיות0 תגובות

פוסטים אחרונים

הצג הכול