PWAs לעומת אפליקציות מקוריות: באיזה מה כדאי לבחור?

תוֹכֶן

• PWAs לעומת אפליקציות מקומיות: מה ההבדל?
• אפליקציות אינטרנט מתקדמות: בנייה לאינטרנט
• חוזקות PWA
• חולשות של PWAs
• תגיב יליד
• חוזקות התגובה הילידים
• חולשות של הילידים בתגובה
• NativeScript
• חוזקות ה- NativeScript
• חולשות NativeScript

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

PWAs (יישומי אינטרנט מתקדמים), גם כן יישומי אינטרנט, בנויים בטכנולוגיות אינטרנט פופולריות HTML, CSS ו- JavaScript ועובדים בדפדפן אינטרנט. (בדוק כמה מתגי ה- HTML החיוניים שיעזרו לך בבנייתך.) PWAs הם למעשה אתרים ניידים שנועדו להיראות כמו אפליקציה, והשימוש בממשקי API אינטרנטיים מקנה להם פונקציונליות הדומה לאפליקציה מקומית.

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

PWAs לעומת אפליקציות מקומיות: מה ההבדל?

לאפליקציות אינטרנט מתקדמות יש יתרון להתקנה ולחיות במכשיר ללא צורך בחנות אפליקציות. וחלק מהתהליך הוא Web App Manifest המאפשר למפתחים לשלוט כיצד אפליקציה מופיעה וכיצד היא מופעלת. כמו כן, מעצבי אתרים / מפתחי ממשק קצה כבר יהיו בעלי הכישורים הדרושים כדי להתחיל בבנייה מיידית. אין צורך ללמוד שפה חדשה, בניגוד לאפליקציות מקומיות.

אפליקציות מקומיות בנויות מתוך מחשבה על מערכת הפעלה ספציפית - כלומר. iOS ו- Android - והשתמשו במסגרת או בשפה כדי להגשים מטרה זו. יישומי iOS משתמשים בדרך כלל ב- Xcode או Swift, ובאפליקציות Android, JavaScript. אך, עבור מאמר זה אנו מתרכזים בכמה מסגרות קוד פתוח מבוססות JavaScript - React Native ו- NativeScript - שעובדות בשתי הפלטפורמות.

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

כאן נבחן שלוש אפשרויות שונות - אחת לאינטרנט (PWAs) ושתי עבור הילידים (React Native, NativeScript) - לבניית אפליקציה. אנו עוברים כיצד הם פועלים, מה הם יכולים לעשות ובוחנים את נקודות החוזק והחולשה שלהם כדי לעזור לך להחליט באיזו אפשרות אתה צריך לבחור לבנות את האפליקציה שלך.

אפליקציות אינטרנט מתקדמות: בנייה לאינטרנט

חוזקות PWA

• אפליקציות פועלות גם בדפדפן
• הפצה: חנויות דפדפנים, ארגונים ואפליקציות
• יכול להשתמש במסגרות React, Angular, Vue, וניל או אחרות

חולשות של PWAs

• אין גישה לכל ממשק API מקומי
• יכולות והפצת חנויות ב- iOS ו- iPadOS מוגבלות
• זה באבולוציה מתמשכת

PWAs הם דפוס העיצוב הנוכחי ליצירת אפליקציות בעלות ביצועים גבוהים, לא מקוונים, להתקנה באמצעות ערימת האינטרנט בלבד: HTML, CSS, JavaScript וממשקי API של דפדפנים. הודות לעובד השירות ולמפרט המניפסט של אפליקציות האינטרנט, כעת אנו יכולים ליצור חוויית אפליקציה מהשורה הראשונה לאחר התקנה עבור Android, iOS, iPadOS, Windows, macOS, Chrome OS ו- Linux.

כדי ליצור PWAs, אתה יכול להשתמש בכל ארכיטקטורה: החל משרת צד, JavaScript וניל, React, Vue, Angular או מסגרות אחרות בצד הלקוח. זה יכול להיות יישום של עמוד יחיד או יישום אינטרנט מרובה עמודים ואנחנו מגדירים איך אנחנו נתמוך במשתמשים במצב לא מקוון.

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

מבחינת ההפצה, השיטה הנפוצה ביותר היא הדפדפן. משתמשים מתקינים את האפליקציה מהדפדפן באמצעות פריט התפריט 'הוסף למסך הבית' או 'התקן', על ידי אישור להזמנה להתקנה או באמצעות ממשק משתמש מותאם אישית של אפליקציית אינטרנט בפלטפורמות תואמות. ראוי לציין כי אפל דוחה PWAs טהורים שפורסמו בחנות האפליקציות ומעודדת מפתחי אתרים להפיץ אותם דרך Safari.

ממשק המשתמש מנוהל אך ורק על ידי זמן הריצה באינטרנט, מה שאומר שמעצב האינטרנט אחראי על ביצוע כל בקרה על המסך. אם אתה משתמש במסגרת ממשק משתמש, כגון Ionic, או בספריית עיצוב חומרים, HTML ו- CSS יחקו ממשקים מקוריים באנדרואיד או iOS, אך זה לא חובה.בעת ביצוע PWAs, יישום טכניקות ביצועי רשת הוא חובה על מנת לשמור על חווית משתמש טובה.

מבחינת יכולות, ל- PWA תהיה גישה רק לממשקי API הזמינים במנוע הדפדפן בפלטפורמה זו ולא ניתן להרחיב אותה באמצעות קוד מקורי - למעט הפצות PWA בחנות האפליקציות. בעניין זה, iOS ו- iPadOS הן הפלטפורמות המוגבלות יותר עבור PWAs, בעוד של- Chrome (עבור מערכות הפעלה אנדרואיד ושולחן עבודה) יש יותר זמינות ועובד קשה להוסיף כל API אפשרי ל- JavaScript עם פרויקט Fugu.

• אחסון הענן הטוב ביותר: בחר באפשרות המתאימה לך.

תגיב יליד

חוזקות התגובה הילידים

• אותם דפוסים כמו ב- React.js
• חלק מממשקי ה- API של האינטרנט נחשפים
• תמיכה באינטרנט ובשולחן העבודה

חולשות של הילידים בתגובה

• לא ניתן לעשות שימוש חוזר ברכיבי ממשק משתמש באינטרנט
• הגשר המקומי זקוק לעבודה
• יש צורך בניסיון תגובה

React Native היא מסגרת רכיבים מבוססת JavaScript על בסיס קוד פתוח, בחסות פייסבוק, המשתמשת בדפוסי עיצוב React, כמו גם בשפת JavaScript כדי להרכיב אפליקציות מקוריות עבור iOS, iPadOS ו- Android מקוד מקור אחד.

אך אין רכיבי HTML מקובלים לעיבוד; רק רכיבים מקוריים אחרים תקפים. לכן, במקום לעבד א div> עם p> ו קלט> אלמנט עם JSX, אתה תהיה עיבוד צפה> עם טקסט> ו קלט טקסט>. עבור רכיבי עיצוב, אתה עדיין משתמש ב- CSS והפריסה מוגדרת באמצעות Flexbox.

ממשק המשתמש לא יוצג ב- DOM של הדפדפן אלא באמצעות ספריות ממשק המשתמש המקוריות באנדרואיד וב- iOS. לכן, א כפתור> ב- ReactNative יהפוך למופע של UIButton ב- iOS וב- android.widget.Button שיעור באנדרואיד; אין זמן ריצה באינטרנט מעורב ב- React Native.

עם זאת, כל קוד ה- JavaScript יבוצע במכונה וירטואלית של JavaScript במכשיר, ולכן אין JavaScript להמרת קוד מקורי אמיתי בעת קומפילציה של האפליקציה. יש קבוצה של ממשקי API ידועים למפתחי אתרים, כגון ממשק API, WebSockets וטיימרים של הדפדפן: setInterval ו- requestAnimationFrame. יכולות אחרות נפרסות בפלטפורמה באמצעות ממשקי API מותאמים אישית, כגון אנימציות.

אתה יכול להתחיל פרוייקט React Native מהיר עם שני CLIs בחינם: Expo או ה- ReactNative CLI המתקדם והרשמי יותר. אם אתה משתמש ב- CLI הרשמי, אתה זקוק גם ל- Android Studio כדי להרכיב ולבדוק את אפליקציית Android ו- Xcode כדי לעשות את אותו הדבר ב- iOS ו- iPadOS, כך שתצטרך מחשב MacOS לפלטפורמה זו.

React Native מקבץ אפליקציות מקוריות עבור iOS ו- Android, מה שאומר שההפצה של האפליקציה שלך תלווה באותם כללים כמו אפליקציות מקוריות אחרות: חנויות אפליקציות לאפליקציות ציבוריות, הפצה ארגונית ובדיקות אלפא / בטא. בדרך כלל, אינך יכול להפיץ יישום דרך דפדפן, אם כי פלטפורמות React Native עבור האינטרנט ופלטפורמות React Native for Windows של מיקרוסופט יכולות לעזור.

NativeScript

חוזקות ה- NativeScript

• כלים טובים לקידוד ובדיקה
• גלריה רחבה של אפליקציות מוכנות לשחק איתן
• כל ממשקי ה- API של Android ו- iOS נחשפים ב- JS

חולשות NativeScript

• קהילה קטנה
• לא ניתן לעשות שימוש חוזר ברכיבי ממשק משתמש באינטרנט
• אין תמיכה באינטרנט, בשולחן העבודה או ב- React

NativeScript אינו ידוע כמו React Native אך הוא מתחרה באותו תחום: יישומי iOS ואנדרואיד מקוריים מ- JavaScript ומסגרות אינטרנט. זה מאפשר לך להשתמש ב- JavaScript או TypeScript ובקובץ ממשק משתמש XML כדי ליצור יישומים מקוריים. הוא תומך גם ב- Angular ו- Vue היישר מהקופסה, כך שזה פתרון נהדר עבור מפתחים שרגילים למסגרות אלה.

היתרונות של NativeScript ברורים יותר כאשר משתמשים ב- Angular או Vue. עבור Angular, אתה יוצר את אותם רכיבים שהורגלת אליהם אך אתה משתמש ב- XML ​​במקום ב- HTML עבור התבנית, כולל כל כריכות הנתונים. ב- XML, במקום a div> עם p> ו img>, תציב א StackLayout> עם תווית> ו תמונה> רְכִיב.

CSS ו- Sass נתמכים בסגנונות דומים ל- CSS בדפדפן. ניתוב וניהול רשת נעשים באמצעות הטמעות של שירותי Angular הסטנדרטיים. מבחינת Vue, זה משהו דומה; אתה כותב את התבנית ב- XML ​​במקום להשתמש ב- HTML באותו תבנית> אלמנט בקובץ .vue שלך.

NativeScript כולל אוסף של רכיבים אשר ממופים לאחר מכן לפקד מקורי של Android או iOS, כך שכאשר אתה מעבד רשימה או בורר, זו תהיה האפליקציה המקורית, תוך שימוש באותו רעיון כמו ב- React Native.

קוד ה- JavaScript או ה- TypeScript שלך (מועבר) מתבצע במכונה JavaScript וירטואלית במכשיר עם גשר אל / אל הסביבה המקורית. בגשר זה, כל ממשקי ה- API המקוריים מאנדרואיד או iOS / iPadOS נחשפים, כך שלמרות שיש לנו גישה לממשקי API חוצי פלטפורמות, אנו יכולים ליצור או להתקשר לכל קוד Java או Objective-C מ- JavaScript / TypeScript ו- NativeScript ירקדו סוגי נתונים.

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

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

מאמר זה פורסם במקור ב גיליון 325 of net, המגזין הנמכר ביותר בעולם עבור מעצבי אתרים ומפתחי אינטרנט. לִקְנוֹת גיליון 325 אוֹ הירשם כמנוי לרשת.

הצטרפו אלינו באפריל 2020 עם מערך כוכבי העל של JavaScript ב- GenerateJS - הכנס שעוזר לכם לבנות JavaScript טוב יותר. הזמן עכשיו בgenerateconf.com