אז ריאקט נייטיב או Flutter?
מצד אחד, הפלטפורמה הותיקה של פייסבוק; מצד שני הפלטפורמה הצעירה והצומחת של גוגל. הנה הצצה זריזה על ההבדלים בין השתיים
מאת ברק מנחם
השאלה שמופיעה בכותרת של המאמר הזה היא אחת מהשאלות שאני נשאל הכי הרבה. אבל, כמו שאלות רבות בחיים, גם לשאלה הזו אין תשובת קסם, והיא תלויה במשתנים רבים. לי יש אמנם את ההעדפה שלי, אבל אני אנסה לתת הצצה וטעימה להבדלים בין 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
תודה לתמיר חיים רביע על העזרה בכתיבה
כתב אורח
אנחנו מארחים מפעם לפעם כותבים טכנולוגים אורחים, המפרסמים כתבות בתחומי התמחות שלהם. במידה ואתם מעוניינים לפרסם פוסט בשמכם, פנו אלינו באמצעות טופס יצירת קשר באתר.
הגב
41 תגובות על "אז ריאקט נייטיב או Flutter?"
* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.
Flutter + Dart שפה מדהימה, בדיוק לומד אותה עכשיו
מתכנתים = פועלי בניין וירטואלים
מה עושה פועל בניין? שם מלט עם לבנים טייח וצבע
מה עושה מתכנת? כותב מודל קונטרולר ומחבר GUI יפה
אין שכל בשניהם
change my mind
נשמע שלא כתבת אלגוריתמים מתוחכמים מעולם.
בתור בוגר תואר שני בהנדסת חשמל אני חושב שאתה מבין שעשיתי דבר או שניים בקריירה שלי. 99% מהמתכנתים הקופיפים – לא.
לכו תכתבו מודל וויוו קונטרולר פחחחח
אני מבין את התסכול של מהנדס חשמל שכנראה חווה טראומה במהלך לימודיו מחוסר היכולת של עצמו לכתוב אפילו לולאה פשוטה שלא לדבר על החרדה מהמילה אלגוריטם אבל אין צריך להתבטא בצורה לא מכבדת שכזאת
חחח- קריירה בהנדסת חשמל…אתה בטח בסרט שאתה טסלה שיורה ברקים מהראש או משהו כזה..
אז לדעתך עולם התכנות מתחיל ומסתיים בGUI???
כנשצטרך מישהו שיחליף מנורה שרופה נקרא לך – כי כידוע זו בעיית חומרה מסובכת שרק בוגרי תואר שני בהנדסת חשמל בהצטיינות יודעים לפתור
אתה מביך
אתה בחל״ת
change my mind
חמור גרם לך תלמד קצת מודעות עצמית
זו בדיחה? כתבה שמתחילה ב”לשאלה הזו אין תשובת קסם, והיא תלויה במשתנים רבים”, ומסתיימת ב”לכל אחת מהפלטפורמות יתרונות וחסרונות שונים”, אבל באמצע מפרטת רק יתרונות(!) של flutter על פני RN. אפס אמינות.
בסוף נזכרתם בעצם לציין ש”הכותב הוא מנהל קהילת Flutter Israel Developers”, בעל אינטרס ברור, במקום להתחיל בגילוי המתבקש הזה.
מר ברק מנחם – מצופה ממך לגלות קצת הגינות. אין שום בעיה לכתוב טור בסגנון “למה אני חושב ש-flutter עדיפה על RN”, אבל להתחפש לטור נייטרלי? זו כבר חוצפה.
נראה לי קראת רק התחלה, סוף וכמה משפטים באמצע.
הוא בבירור מציין שריאקט נייטיב הרבה יותר בשלה, ותיקה ועם קהילה גדולה יותר.
חסר יתרון משמעותי של ריאקט נייטיב שזה שינוי קוד ג׳אווה סקריפט בצורה דינאמית.
בנוסף לא ציינת אפליקציות מוכרות בפרודקשן שמשתמשות בטכנולוגיות השונות וזה לדעתי חסר.
היי גינדי!
אכן תמיד אפשר להרחיב יותר, הייתרון של ריאקט נייטיב בעצם היותה מסובבת על JS, אכן מאפשר לה תכונות מיוחדות, אך גם dart מסוגלת לדברים דומים הודות לקומפייל שלה בעל תכונת JIT (Just In Time).
אכן זה משהו שהוא חסר ואולי נעלה כתבה נוספת בנושא, תודה רבה ! נקודה חשובה!
ככל הידוע לי, האפליקציה של יוטיוב כתובה בפלאטר.
לא מוטה בכלל, נראה כמו עוד כתבה אמינה מבית היוצר של GEEKTIME. פה לא מתפשרים על איכות
היי שגיא,
השתדלנו מאוד שהכתבה לא תיהיה מוטת, וציינו מספר יתרונות חשובים מאוד ומכריעים לטובת React Native, כמו הותק שלה, פרוייקט הFabric שעליו עובדת פייסבוק ועוד.
מעבר לכך, עצם העיניין שאף אחד לא טרח לעשות הבהרה כזו עד היום, ואני לקחתי מזמני ועמלתי וחקרתי על מנת להוציא כתבה מקצועית כמה שיותר, אין כאן מקום לזלזול אלה לשיח נעים.
תמיד יתכנו טעויות, ואף אשמח אם תיצור איתי קשר לשיתופי פעולה, המשק העמקת הידע של הקוראים – זה תמיד עדיף מתגובות לא נעימות.
לא להתקרב לפייסבוק!!!!!
תאמת שגם לא לגוגל
אבל פייסבוק קודם
צודק.
לא משנה כמה מוצר של פייסבוק מצליח אני אתרחק ממנו.
“ב-React Native יש את הצורך לתחזק 3 קבצים: JS, CSS, HTML…” – על איזה html אתה מדבר לעזאזל? יצא לך אי פעם לכתוב ה rn?? אין שום html ושום בטיח.
המאמר היה אמור להציג את ההבדלים בין שני הטכנולוגיות אבל ברור שזה לא מטרת המשורר ומה גם שיש כאן לא מעט שטויות שנכתבו..
אני מניח שכשהוא כתב HTML, הוא התכוון ל-JSX, כלומר תגיות בסגנון XML בתוך קבצי JS.
וזה נכון, צריך באמת לתחזק 3 סוגים שונים של שפות ומבני נתונים בריאקט נייטיב.
לא יודע איך זה בפלאטר אבל ההפרדה ל3 קבצים היא לא “טרחה” אלא יתרון. בקובץ אחד שמים את הסטיילים של העיצוב, באחד שמים את הקוד האופרטיבי ובשלישי את הlayout של המסך. גם באנדרואיד נייטיב יש חלוקה דומה וגם בתכנות ווב קלאסי כמעט בכל פרימוורק.
אני לא מומחה RN אבל מהכרות עם ריאקט, אם תתאמץ אתה יכול לדחוף הכל לקובץ אחד ולהתעלל במתכנתים החברים שלך.
בפלאטר מפרידים את הלוקיגה מהUI בדיוק כשם שעושים בכל פלטפורמת פרונטאנד אחרת, הייתרון שכל הכתיבה היא אחידה בDART, ללא תגיות, CSS וכדו
זאת שאלה של העדפת שפה דקלרטיבית מול אימרפטיבית. יש המעדיפים את התכנות כמו בווב עם דפי HTML וCSS שהרבה פעמים אפשר לתת למעצב לעבוד עליהם ישירות.
הרבה מתכנתים מעדיפים שפה “אמיתית” שבו הUI כתוב בפקודות של קוד. כמו בSWING, או כמו בווינדוס הישן והטוב (MFC, Win API), וגוגל כבר היה נסיון לא מוצלח שמזכיר את פלטר: GWT.
אישית אני נמנה עם הסוג השני ולכן שוקל להכנס לפלטר. מקווה שהמנוע שלהם יתפוס כי כבר נפלתי עם פלקס של אדובי בעבר.
Xamrin.
לאחר כתיבת כמה אפליקציות בריאקט נייטיב, עברתי לנסות לפתח אחת על פלאטר וההתרשמות הראשונית שלי היא, וואו! פשוט תענוג!
– שפת דארת מאוד אינטואיטיבית ומזכירה את TypeScript.
– תוך פחות מ-20 דקות של תהליך (כאשר הרוב זה לחכות לכל מיני הורדות קבצים) התקנה ב-MacOS (בוינדואס פח, באופן לא מפתיע קפצו מלא שגיאות והתייאשתי אחרי שעה) מרגע הכניסה לאתר של פלאטר, הייתה לי אפליקציית דמו רצה ועובדת על 2 מכשירים.
– קלות השינויים (כשכל שינוי קורה בזמן אמת בשמירת הקובץ) וקלות הדיבאגינג, טיפול בשגיאות ושקיפות מידע בזמן אמת, הם פשוט וואו! לא ראיתי דברים כאלה.
אכן חוויה תכנותית ששוה לנסות
ויש גם את Uno Platform.
למי שעבד עם C# ו-XAML, אונו מסוגלת להריץ יישום UWP על אנדרואיד, iOS, מק, לינוקס, ואפילו כאתר אינטרנט (דרך WASM!), והכל מבוצע natively.
קישור לאתר שלהם:
https://bit.ly/2XqOyRI
כמה תיקונים:
ריאקטב נייטיב כותבים רק ג’אוה סקריפט.
דווקא לריאקט נייטיב יש ספריה שעושה ווב (טוויטר מובייל כתובה בה) ולפלאטר זה רק בבטא.
יש בריאקט נייטיב גם קימפול לווינדוס ומק שכתוב ע”י מיקרוסופט.
ג’סט ודיטוקס עושה אחלה עבודה לבדיקות.
כתבה מעולה! אם יש משו שממש טוב בflutter זה כל העניין של הספריות צד שלישי ו dependencies. בדרך כלל בקלות אפשר למצוא את הספריה שצריך ואם יש קונפליקטים מאוד קל לפתור אותם:)
בreact native יש די בלגן עם זה, שלא לדבר על שדרוג גרסה…
“הארכיטקטורה המתוארת להלן, משתמשת בארכיטקטורה הנקראת Flux שפותחה ע”י פייסבוק..”
מה קשור? Flux זה בכלל state architecture
אף אמולציה לא יכלה לחקות את הקומפוננטות הטבעיות של iOS ואנדרואיד. לכן מבחינתי פלאטר לא כשירה להחליף אפליקציה נייטיב, ולכן ריאקט נייטיב עדיין עדיפה עליה, למרות הקושי הכי רציני שלה .. שדרוגים.
דיסקליימר – אני פריק של iOS ולא מתפשר על ניראות או אנימציות שלא הגיעו מבית היוצר של אפל. האם כל משתמש פלוני יודע להבדיל? כנראה שלא, אבל לי זה מאוד מפריע. אפליקציות של פלאטר ל iOS, לא מרגישות לי טוב.
אתה מוזמן לנסות ולתת צאנס ותיראה בעצמה את הרמה הגבוהה, מעבר לזה שריאקט נייטיב פחות מהירה מפלאטר, בפלאטר בנוסף, יש ערכת עיצובים שלמה שכולה Cupertino – עיצובים מדוייקים לios
רואים שהכתב כותב ב-Flutter, רב הדברים שנכתבו על React Native שוכחים שהיא ספריית בת של React.
כמו כן, כמעט בכל פרמטר שנכתב שם React טובה יותר, אבל הכתב משום מה מייחס את היתרונות ל-Flutter. שווה היה לכתוב את הכתבה ביחד עם מומחה ל-React שיאזן את הדברים – אנשים יכולים בטעות לקבל החלטה על בסיס השוואה לא מדוייקת…
העברתי את הכתבה טרם היא יצאה בין מספר מתכנתי ריאקט נייטיב, ולאחר מכן היא יצאה, אנו נתקן :)
שווה לציין שעדיין לא יצאה גירסה 1.0 ל- React Native, אז מבחינת הבשלות היא ממש לא שם, זה לא ממש מעניין איזה קהילה יש אם זה עדיין ברמת בטא שכל הזמן הם שוברים דברים, לכן מבחינת הבשלות Flutter הרבה יותר בשלה, ואם נחשיב גם את תקופת הבטא של Flutter אז היא אפילו גם די בוגרת
זה לא משנה flutter או react native. אף אחת מהן לא תחליף לנייטיב.
אם אתם בונים אפליקציה לאתר שלכם לדוגמא, מראש המורכבות היא לא גדולה ולא משנה על מה תלכו.
אם האפליקציה היא מורכבת, כמובן לכו על נייטיב.
אם פיסבוק בעצמה עושה נייטיב ואני מניח שגם גוגל בגירסאות לג’ימיילדרייב וואטאבר , מי אנחנו שנפתח בהייבריד?
אפשר להוסיף דברים קטנים בריאקט או פלוטר אבל בטח לא את כל האפליקציה.
בתור מפתח נטייב לאנדרואיד וios .
Flutter זה העתיד
יתרון ל Flutter, תומך בקלות גם ב- IOS וגם באנדרואיד בנוסף, זמן ריצה מהיר…
חסרון, קהילה קטנה עדיין…