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


מאת ברק‌ ‌מנחם‌

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

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

שיעור בגמישות

React Native מבוססת על סביבת ריצה של JavaScript ומשתמשת ב-Bridge לרכיבי היעד בפלטפורמות השונות. כאשר היא מתקמפלת לקוד נייטיב היא משתמשת באותם הרכיבים אשר תוארו בעת כתיבת הקוד רק בצורתם האמיתית ביעד. כלומר, אם ביקשנו כפתור, הכפתור יופיע ב-iOS בגרסתו ב-Objective-C, וכנ”ל גם לגבי Android. הארכיטקטורה המתוארת להלן, משתמשת בארכיטקטורה הנקראת Flux שפותחה ע”י פייסבוק.
לעומת זאת, Flutter, משתמשת בארכיטקטורה מעניינת אחרת הנקראת Skia, מנוע גרפי ++C שעומד מאחורי הקלעים. בקצרה, במקום להשתמש ב-Bridge אל רכיבי הנייטיב, המימוש של Flutter מגיע מובנה מהקופסה הפעם.

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

ביצועים

השוני שצויין בחלק האחרון מוביל להבדלי ביצועים, הודות לכך שהמנוע של Flutter נכתב ב-++C, והודות לטריק הציור המעניין של הקומפוננטות, הוא מאפשר ל-Flutter לרוץ מהר יותר ולהגיע לרוב לקצב של 60fps. קצב בו ניתן לייצר אנימציות חלקות לחלוטין.
מאחר ו-React Native נשענת על ה-Bridge עם JavaScript היא מפסידה בביצועיה באספקט הזה.
נציין כי כאשר מדובר על טכנולוגיות המבצעות Cross-platform ו-Abstraction לרוב הדברים באים על חשבון ביצועים, נפח ועוד. כאן Flutter מראה כי בנושא הזה היא לא מתכוונת לוותר. אציין כי מפתחי Flutter דואגים בכל גירסא שהם מוציאים שהיעילות לא תרד מ60fps ואף תגיע ל-120fps במכשירים תומכים.

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

יש גב

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

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

לא פעם מתכנתים נוטים להזניח את החלק הזה בקוד, על אף מתודולוגיות כמו TDD (כלומר Test-driven development) שהוכיחו את חשיבותם של הטסטים.

ראשית, נבין את הסוגיה. כשמדובר בטסטים לחלקי Front-end, ישנן מספר דרכים בהן יש לבדוק את התוכנה או האפליקציה שכתבנו. נידרש לבדיקות יחידה בסיסיות לקטעי קוד לוגיים, נידרש לבדיקות ה-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, לאור יציאתה היותר מאוחרת בבדצמבר 2018, הקהילה עדיין לא מספיק גדולה.

למרות זאת, לפחות מניסיוני האישי, הקהילה היא בשלה לחלוטין להתחלת עבודה, ישנן המון ספריות ואפילו ספריות כגון Angular Dart, React Dart המאפשרות לכתוב את אותן הטכנולוגיות ב-Dart.

עד כמה אני Cross-platform

כידוע React Native מאפשרת לייצא את הקוד ל-Android ול-iOS. כאן Flutter בעלת שאיפות רבות יותר, וכיום היא מאפשרת גרסאות יצוא ל-Android, iOS, וגרסאות יצוא בשלבי פיתוח: Web, Window, Mac, Linux, Google Fuchsia OS.

תחזוקה ואחידות

ב-React Native יש את הצורך לתחזק 3 קבצים: JS, CSS, HTML. לעומת זאת ב-Flutter יש קובץ מסוג אחד בלבד – Dart.

מה צופה העתיד

React Native ככל הנראה ממשיכה את התמקצעותה בתחומי ה-Android וה-iOS, אך בזמן זה, וממה שידוע עד עכשיו, לגוגל יש תוכניות ארוכות טווח. כידוע, גוגל מתכננת מערכת הפעלה חדשה שעתידה להחליף את Android ואף יותר מזה, היא עתידה להיות נכונה לכל מכשיר IoT: החל מהשלט של המזגן והקומקום, דרך טלפונים ומחשבים ועד – ניחשתם נכון – מערכת הפעלה למחשבים, כי Flutter היא ה-Framework הרשמי לתכנות אפליקציות על גבי Fuchsia OS.

לסיכום

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

‌הכותב הוא מנהל קהילת Flutter Israel Developers

תודה‌ ‌לתמיר‌ ‌חיים‌ ‌רביע‌ על‌ ‌העזרה בכתיבה



רוצים לראות איפה החברים שלכם עובדים?


רוצים לראות איפה החברים שלכם עובדים?
ללוח מיתוג המעסיק גיקטיים אינסיידר לחצו כאן >







Avatar

כתב אורח

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


מקור