כיצד שימוש ב-React Native משנה את הדרך בה אפליקציות מתנהגות

המשתמשים היום יודעים לזהות כשאפליקציה מכבידה על הנייד ומרוקנת את הסוללה. אם פיתחתם אפליקציה ב-RN, כדאי שתהיו מודעים לאתגרים בביצועים, אבל גם לפתרונות שישמרו את המשתמשים מרוצים. רותם מזרחי מידן, מהנדס תוכנה ב-Wix Engineering, מזהה את נקודות החולשה, וממליץ איפה נכון לחפש את הפתרון ולמה

מאת רותם מזרחי מידן

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

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

שתי ממלכות וגשר

פיתוח אפליקציה ב-React Native מייצר לנו כמפתחים יתרונות משמעותיים, ויחד איתם אתגרים חדשים לשמירה על רמת ביצועים גבוהה. React Native מבקשת לעשות הפרדה ברורה בין ה-business logic, אותו נרצה לכתוב ב-javascript, והמנוע (UI rendering, networking, IO) אותו נרצה, בדרך כלל, לכתוב ב-native.

תחילת הפתרון נמצא בהבנה מעמיקה של כיצד האפליקציה שלנו ו-React Native עובדות, וכיצד הן מגיבות לאירוע כזה או אחר. המקום הראשון שאליו ניגש ואותו חשוב להבין הוא ה"גשר", שמחבר בין עולם ה-JavaScript והמכונה הווירטואלית שבה הוא רץ, לבין עולם ה-native שאחראי ל-UI rendering, קריאות רשת, פעולות דיסק ועוד.

כמעט כל הוראה הנכתבת ב-javascript מתורגמת לפעולה (אחת ואף יותר) ב-native, מה שהופך את הגשר לצוואר בקבוק משמעותי ולאחד מהמודולים הרגישים ביותר בפעולה תקינה של המערכת. כדי לאתר את העומסים על פני הגשר נפנה ל-MessageQueue, וספציפית ללוגים אותם הוא פולט בכל תקשורת החוצה את הגשר (Spy logs). הלוגים מספרים לנו במדויק אילו הוראות עוברות על פני הגשר, אילו הודעות עוברות בחזרה ובאיזה סדר.

לאחר ההסבר נריץ דמו קצר שבו ניקח אינטראקציה עם אפליקציה וננתח באמצעות הלוגים את התקשורת העוברת על פני הגשר. לאחר מכן נדגים מצב של Frozen UI, בו האפליקציה מגיבה חלקית בלבד, נוצרים עיכובים ב-callbacks ואנחנו מזהים קפיצות באנימציות. ננתח למה היא מצליחה להגיב חלקית, איפה הבעיה, ובעיקר מתי זה קורה ולמה. אל הלוגים נחבר כלי ניטור נוסף, Android Device Monitor, שיראה לנו איך מתנהג ה-CPU באותם מצבי קיצון.

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

הכתבה בחסות Wix Engineering

Wix היא פלטפורמה לפיתוח Online presence באינטרנט, עם למעלה מ-100 מיליון משתמשים ב-190 מדינות.
אנחנו ב-Wix Engineering מפתחים אפליקציות ענן מהמתקדמות  בעולם, מקדישים זמן להתפתחות מקצועית ולמידה ולוקחים גם את ההנאה שלנו באותה הרצינות. תרבות הפיתוח שלנו מבוססת על חדשנות, יצירתיות ועל הצורך והרצון להמשיך לאתגר את עצמנו ואת גבולות הטכנולוגיה. אנו משתמשים בטכנולוגיות המתקדמות ביותר (Scala, Node, React, and Angular), בפלטפורמות מבוססות ענן (Google, Amazon and Azure) ומיישמים מתודולוגיות כגון Continuous Delivery ו-TDD.

כתב אורח

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

הגב

4 Comments on "כיצד שימוש ב-React Native משנה את הדרך בה אפליקציות מתנהגות"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
אני
Guest

אולי תיישמו חלק מהדברים שלמדתם ותתקנו את ה site editor שלכם? :)

Autonomous
Guest

אני עובד ככה כבר כמה שנים, לפני ריאקט ודומיו, חפשו javascriptcore או rhino.

שבלוליקו
Guest

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

אאא
Guest
wpDiscuz

תגיות לכתבה: