PWA در مقابل برنامه های بومی: کدام یک را باید انتخاب کنید؟

محتوا

• PWA در مقابل برنامه های بومی: تفاوت چیست؟
• برنامه های وب پیشرفته: ساخت وب
• نقاط قوت PWA ها
• نقاط ضعف PWA ها
• واکنش بومی
• نقاط قوت React Native
• نقاط ضعف React Native
• NativeScript
• نقاط قوت NativeScript
• نقاط ضعف NativeScript

هنگام ساخت یک برنامه کدام رویکرد را باید در پیش بگیرید؟ آیا باید مسیر PWA / web technology را طی کنید یا باید بومی شوید و برای سیستم عامل های خاص طراحی کنید؟ هر دو گزینه مزایا و معایب خود را دارند و در این مقاله ما بر روی چند مورد از گزینه های محبوب مورد استفاده برای ایجاد وب و برنامه های بومی متمرکز شده ایم.

PWA ها (Progressive Web Apps) یا همان برنامه های وب ، با فناوری های وب محبوب HTML ، CSS و JavaScript ساخته شده اند و در یک مرورگر وب کار می کنند. (برخی از برچسب های ضروری HTML را برای کمک به ساختهای خود بررسی کنید.) PWA ها به طور موثری وب سایت های موبایلی هستند که شبیه یک برنامه طراحی شده اند و استفاده از API های وب به آنها عملکردی مشابه یک برنامه بومی می دهد.

برای مشاوره بیشتر در مورد ساخت برنامه ، به پست ما در مورد نحوه ساخت برنامه مراجعه کنید ، یا اگر سایتی است که می خواهید ایجاد کنید ، از این برترین سازندگان وب سایت و خدمات میزبانی وب دیدن کنید.

PWA در مقابل برنامه های بومی: تفاوت چیست؟

برنامه های پیشرو وب دارای این مزیت هستند که بدون نیاز به فروشگاه برنامه ، قابل نصب و زندگی در دستگاه هستند. و ، بخشی از این فرآیند ، مانیفست برنامه وب است که به توسعه دهندگان اجازه می دهد نحوه نمایش یک برنامه و نحوه راه اندازی آن را کنترل کنند. همچنین ، طراحان وب / توسعه دهندگان جلویی مهارت های لازم برای شروع فوری ساخت را دارند. برخلاف برنامه های بومی ، نیازی به یادگیری زبان جدید نیست.

برنامه های بومی با در نظر گرفتن سیستم عامل خاصی ساخته می شوند - یعنی. iOS و Android - و برای تحقق این هدف از یک چارچوب یا زبان استفاده کنید. برنامه های iOS معمولاً از Xcode یا Swift و برنامه های Android ، JavaScript استفاده می کنند. اما ، برای این مقاله ما روی دو چارچوب منبع باز مبتنی بر JavaScript - React Native و NativeScript - تمرکز داریم که برای هر دو سیستم عامل کار می کنند.

مزایای برنامه های بومی این است که به طور معمول عملکرد بهتری دارند زیرا از یک سخت افزار و نرم افزار دستگاه بهتر استفاده می کنند ، سریعتر و پاسخگوتر هستند و با وجود رتبه بندی در فروشگاه های برنامه ، تضمین کیفیت خواهید داشت. اما ، این به معنای یادگیری نحوه استفاده از یک چارچوب یا کتابخانه خاص است.

در اینجا ما سه گزینه مختلف را بررسی می کنیم - یکی برای وب (PWA) و دیگری برای بومی (React Native، NativeScript) - برای ساخت یک برنامه. ما نحوه کارکرد آنها ، کارهایی را که می توانند انجام دهند ، بررسی می کنیم و نقاط قوت و ضعف آنها را بررسی می کنیم تا به شما در تصمیم گیری برای انتخاب برنامه خود برای انتخاب کمک کنیم.

برنامه های وب پیشرفته: ساخت وب

نقاط قوت PWA ها

• برنامه ها در مرورگر نیز کار می کنند
• توزیع: مرورگر ، شرکت و فروشگاه های برنامه
• می تواند از React ، Angular ، Vue ، وانیل یا چارچوب های دیگر استفاده کند

نقاط ضعف PWA ها

• دسترسی به هر API بومی وجود ندارد
• قابلیت ها و توزیع فروشگاه در iOS و iPadOS محدود است
• این در تکامل مداوم است

PWA الگوی طراحی فعلی برای ایجاد برنامه های قابل نصب ، آفلاین و قابل نصب فقط با استفاده از پشته وب است: HTML ، CSS ، JavaScript و API مرورگرها. با تشکر از سرویس دهنده و مشخصات آشکار برنامه وب ، اکنون می توانیم بعد از نصب برای Android ، iOS ، iPadOS ، Windows ، macOS ، سیستم عامل Chrome و Linux ، یک تجربه برنامه درجه یک ایجاد کنیم.

برای ایجاد PWA ها می توانید از هرگونه معماری استفاده کنید: از سمت سرور ، JavaScript وانیلی ، React ، Vue ، Angular یا سایر چارچوب های سمت مشتری. این می تواند یک برنامه تک صفحه ای یا یک برنامه وب چند صفحه ای باشد و ما تعریف می کنیم که چگونه در حالت آفلاین از کاربران پشتیبانی کنیم.

در این روش ، نیازی به بسته بندی و امضای منابع برنامه خود نداریم: ما فقط فایل ها را در یک وب سرور میزبانی می کنیم و سرویس دهنده وظیفه پنهان کردن پرونده ها را در مشتری خواهد داشت و پس از نصب آنها را سرویس می کند. این همچنین به این معنی است که اگر برنامه ای به به روزرسانی نیاز دارد ، شما فقط پرونده های موجود در سرور را تغییر دهید و منطق سرویس دهنده وظیفه به روزرسانی آنها را در دستگاه های کاربران بدون دخالت کاربر یا فروشگاه برنامه بر عهده خواهد داشت.

از نظر توزیع ، متداول ترین روش مرورگر است. کاربران با پذیرفتن دعوتنامه نصب یا با استفاده از رابط کاربری سفارشی برنامه وب در سیستم عامل های سازگار ، برنامه را از مرورگر با استفاده از گزینه منو به صفحه اصلی یا نصب نصب می کنند. شایان ذکر است که اپل PWA خالص منتشر شده در App Store را رد می کند و توسعه دهندگان وب را به توزیع آن از طریق Safari ترغیب می کند.

رابط کاربری کاملاً توسط زمان اجرا در وب مدیریت می شود ، این بدان معنی است که طراح وب وظیفه ارائه هر کنترل روی صفحه را دارد. اگر از یک چارچوب UI مانند Ionic یا کتابخانه Material Design استفاده می کنید ، HTML و CSS از رابط های بومی در Android یا iOS تقلید می کنند اما اجباری نیست.هنگام انجام PWA ، استفاده از تکنیک های عملکرد وب برای حفظ تجربه کاربری الزامی است.

از نظر توانایی ، PWA فقط به API های موجود در موتور مرورگر در آن سیستم عامل دسترسی خواهد داشت و با کد محلی قابل تمدید نیست - به استثنای توزیع فروشگاه PWA در فروشگاه برنامه. در این زمینه ، iOS و iPadOS بسترهای محدودتری برای PWA ها هستند ، در حالی که Chrome (برای سیستم عامل های Android و دسک تاپ) از قابلیت دسترسی بیشتری برخوردار است و سخت تلاش می کند تا با پروژه Fugu هر API ممکن را به JavaScript اضافه کند.

• بهترین فضای ذخیره سازی ابری: گزینه مناسب خود را انتخاب کنید.

واکنش بومی

نقاط قوت React Native

• الگوهای مشابه با React.js
• برخی از API های وب در معرض هستند
• پشتیبانی وب و دسک تاپ

نقاط ضعف React Native

• امکان استفاده مجدد از مIلفه های UI وب وجود ندارد
• پل بومی نیاز به کار دارد
• تجربه واکنش لازم است

React Native یک چارچوب منبع باز مبتنی بر جاوا اسکریپت است که توسط فیس بوک حمایت مالی می شود و از الگوهای طراحی React و همچنین زبان JavaScript برای جمع آوری برنامه های بومی برای iOS ، iPadOS و Android از یک کد منبع استفاده می کند.

اما هیچ عنصر HTML برای ارائه پذیرفته نیست. فقط سایر م componentsلفه های بومی معتبر هستند. بنابراین ، به جای ارائه a div> با یک p> و یک ورودی> عنصر با JSX ، شما رندر خواهید کرد نمایش> با یک متن> و یک TextInput>. برای اجزای یک ظاهر طراحی شده ، شما همچنان از CSS استفاده می کنید و طرح آن از طریق Flexbox تعریف شده است.

رابط کاربری در DOM مرورگر ارائه نمی شود اما از کتابخانه های رابط کاربری بومی در Android و iOS استفاده می شود. بنابراین ، الف دکمه> در ReactNative به نمونه ای از UIButton در iOS و سیستم عامل تبدیل خواهد شد android.widget. دکمه کلاس در اندروید؛ در React Native هیچ زمان اجرای وب وجود ندارد.

با این حال ، همه کد های جاوا اسکریپت در دستگاه مجازی جاوا اسکریپت روی دستگاه اجرا می شوند ، بنابراین هنگام تدوین برنامه هیچ تبدیل جاوا اسکریپت به کد واقعی واقعی وجود ندارد. مجموعه ای از API های شناخته شده برای توسعه دهندگان وب مانند Fetch API ، WebSockets و تایمرهای مرورگر وجود دارد: setInterval و requestAnimationFrame. سایر توانایی ها از طریق API های سفارشی مانند انیمیشن ها در سیستم عامل مستقر می شوند.

با دو CLI رایگان: Expo یا ReactNative CLI پیشرفته تر و رسمی می توانید یک پروژه سریع React Native را شروع کنید. اگر از CLI رسمی استفاده می کنید ، برای تدوین و آزمایش برنامه Android و Xcode برای انجام همان کار در iOS و iPadOS به Android Studio نیز نیاز دارید ، بنابراین برای آن سیستم عامل به یک کامپیوتر macOS نیاز خواهید داشت.

React Native برنامه های بومی را برای iOS و Android کامپایل می کند ، این بدان معناست که توزیع برنامه شما همان قوانینی را دارد که سایر برنامه های بومی را دنبال می کند: فروشگاه برنامه برای برنامه های عمومی ، توزیع شرکتی و تست آلفا / بتا. به طور معمول ، شما نمی توانید یک برنامه را از طریق مرورگر توزیع کنید ، اگرچه React Native for Web و Microsoft's React Native برای سیستم عامل های Windows می توانند به شما کمک کنند.

NativeScript

نقاط قوت NativeScript

• ابزار خوبی برای کدگذاری و آزمایش است
• گالری گسترده ای از برنامه های آماده برای بازی با
• تمام API های Android و iOS در JS قرار دارند

نقاط ضعف NativeScript

• جامعه کوچک
• امکان استفاده مجدد از مIلفه های UI وب وجود ندارد
• بدون پشتیبانی از وب ، دسک تاپ یا React

NativeScript به اندازه React Native شناخته شده نیست اما در همان زمینه رقابت می کند: برنامه های بومی iOS و Android از JavaScript و چارچوب های وب. به شما امکان می دهد از JavaScript یا TypeScript و یک فایل رابط کاربری XML برای ایجاد برنامه های بومی استفاده کنید. همچنین از Angular و Vue خارج از جعبه پشتیبانی می کند ، بنابراین یک راه حل عالی برای توسعه دهندگانی است که به این چارچوب ها عادت کرده اند.

مزایای NativeScript هنگام استفاده از Angular یا Vue واضح تر است. برای Angular ، شما همان م componentsلفه هایی را که عادت کرده اید ایجاد می کنید اما از XML به جای HTML برای الگو استفاده می کنید ، از جمله تمام اتصال داده ها. در XML ، به جای a div> با یک p> و یک img>، شما یک StackLayout> با یک برچسب> و یک تصویر> جزء.

CSS و Sass با سبک های مشابه CSS در مرورگر پشتیبانی می شوند. مسیریابی و مدیریت شبکه از طریق پیاده سازی خدمات استاندارد Angular انجام می شود. از نظر Vue ، چیزی شبیه به این است. شما به جای استفاده از HTML در همان الگو ، آن را در XML می نویسید الگو> عنصر در پرونده .vue شما.

NativeScript شامل مجموعه ای از م componentsلفه ها است که سپس به یک کنترل محلی Android یا iOS ترسیم می شوند ، بنابراین وقتی لیستی یا انتخابگر را ارائه می دهید ، این برنامه بومی است و از همان ایده React Native استفاده می کند.

کد جاوا اسکریپت یا TypeScript شما (به صورت transpiled) در دستگاه مجازی جاوا اسکریپت روی دستگاه با پل ارتباطی به / از محیط بومی اجرا می شود. در آن پل ، تمام API های بومی Android یا iOS / iPadOS در معرض دید قرار می گیرند بنابراین علی رغم دسترسی به API های چند پلتفرمی ، می توان هر نوع کد Java یا Objective-C را از JavaScript / TypeScript و NativeScript برای انواع داده ها ایجاد و یا فراخوانی کرد.

NativeScript پشتیبانی زیادی از ابزارآلات دارد ، از جمله پلاگین های کد VS ، CLI ، یک سیستم تست بارگیری مجدد داغ و یک برنامه زمین بازی NativeScript ، بنابراین در هنگام آزمایش نیازی به نصب همه وابستگی ها و همچنین چندین سرویس اضافی مانند آنلاین نیست. زمین بازی

سرانجام ، NativeScript فقط برنامه ای را برای Android و iOS جمع آوری می کند که می تواند از کانال های رسمی توزیع و فروشگاه های برنامه نصب شود ، در صورت رعایت قوانین ، توزیع سازمانی و آزمایش آلفا / بتا. به طور معمول هیچ راهی برای توزیع برنامه ها از یک مرورگر وجود ندارد و هیچ راه حلی برای برنامه های دسک تاپ برای این سیستم عامل وجود ندارد.

این مقاله در اصل در شماره 325 از نت ، پرفروش ترین مجله جهان برای طراحان و توسعه دهندگان وب است. خرید شماره 325 یا اشتراک در به شبکه.

در آوریل 2020 با مجموعه سوپراستارهای جاوا اسکریپت در GenerateJS به ما بپیوندید - کنفرانسی که به شما در ساخت JavaScript بهتر کمک می کند. هم اکنون رزرو کنید درgenerateconf.com