PWA супраць уласных прыкладанняў: каго абраць?

Задаволены

• PWA супраць уласных праграм: у чым розніца?
• Прагрэсіўныя вэб-праграмы: стварэнне Інтэрнэту
• Моцныя бакі PWA
• Слабыя бакі PWA
• Рэагаваць роднай
• Моцныя бакі React Native
• Слабыя бакі React Native
• NativeScript
• Моцныя бакі NativeScript
• Слабыя бакі NativeScript

Які падыход вы павінны выкарыстоўваць пры стварэнні прыкладання? Калі вы ідзяце па маршруце PWA / вэб-тэхналогій ці вам варта пайсці на родны дызайн і распрацаваць пэўныя платформы? У абодвух варыянтаў ёсць свае плюсы і мінусы, і ў гэтым артыкуле мы спынімся на некалькіх папулярных варыянтах, якія выкарыстоўваюцца для стварэння вэб-праграм і праграм.

PWA (Progressive Web Apps), якія называюцца вэб-праграмамі, ствараюцца з выкарыстаннем папулярных вэб-тэхналогій HTML, CSS і JavaScript і працуюць у вэб-аглядальніку. (Праверце некаторыя важныя HTML-тэгі, якія дапамогуць вам у зборцы.) PWA - гэта эфектыўныя мабільныя вэб-сайты, распрацаваныя так, каб выглядаць як прыкладанне, а выкарыстанне вэб-API дае ім функцыянальнасць, падобную на роднае.

Для атрымання дадатковай парады па стварэнні прыкладанняў глядзіце наш пост пра тое, як зрабіць прыкладанне, альбо, калі гэта сайт, які вы хочаце стварыць, паглядзіце гэтыя асноўныя канструктары сайтаў і паслугі хостынгу.

PWA супраць уласных праграм: у чым розніца?

Прагрэсіўныя вэб-праграмы маюць перавагу ў тым, што іх можна ўсталёўваць і працаваць на прыладзе без неабходнасці крамы прыкладанняў. І часткай працэсу з'яўляецца Web App Manifest, які дазваляе распрацоўшчыкам кантраляваць, як выглядае прыкладанне і як яно запускаецца. Акрамя таго, вэб-дызайнеры / распрацоўшчыкі інтэрфейсаў ужо будуць мець набор навыкаў, неабходны для неадкладнага стварэння. У адрозненні ад роднай праграмы няма неабходнасці вывучаць новую мову.

Родныя праграмы ствараюцца з улікам пэўнай АС - г.зн. iOS і Android - і выкарыстоўвайце фрэймворк альбо мову для выканання гэтай мэты. У дадатках iOS звычайна выкарыстоўваецца Xcode альбо Swift, а ў праграмах Android - JavaScript. Але ў гэтым артыкуле мы канцэнтруемся на некалькіх фреймворках з адкрытым зыходным кодам на аснове JavaScript - React Native і NativeScript - якія працуюць на абедзвюх платформах.

Перавагі ўласных праграм у тым, што яны звычайна паляпшаюць функцыянальнасць, бо яны лепш выкарыстоўваюць апаратнае і праграмнае забеспячэнне прылад, хутчэй і больш хутка рэагуюць, і вы атрымліваеце гарантыю якасці, хаця і рэйтынгі ў крамах прыкладанняў. Але гэта будзе азначаць неабходнасць навучыцца карыстацца пэўнай структурай альбо бібліятэкай.

Тут мы разгледзім тры розныя варыянты - адзін для Інтэрнэту (PWA) і два для ўласнага (React Native, NativeScript) - для стварэння прыкладання. Мы прааналізуем, як яны працуюць, што яны могуць зрабіць, і разгледзім іх моцныя і слабыя бакі, каб дапамагчы вам вырашыць, які варыянт вам абраць для стварэння вашага прыкладання.

Прагрэсіўныя вэб-праграмы: стварэнне Інтэрнэту

Моцныя бакі PWA

• Праграмы таксама працуюць у браўзэры
• Распаўсюд: крамы для аглядальнікаў, прадпрыемстваў і прыкладанняў
• Можа выкарыстоўваць React, Angular, Vue, vanilla ці іншыя фреймворкі

Слабыя бакі PWA

• Няма доступу да кожнага ўласнага API
• Магчымасці і размеркаванне крам на iOS і iPadOS абмежаваныя
• Гэта ў бесперапыннай эвалюцыі

PWA - гэта бягучая мадэль дызайну для стварэння высокапрадукцыйных аўтаномных праграм, якія можна ўсталёўваць, выкарыстоўваючы толькі стэк: HTML, CSS, JavaScript і API аглядальнікаў. Дзякуючы работніку службы і спецыфікацыям вэб-прыкладанняў, мы зараз можам стварыць першакласную працу пасля ўстаноўкі для Android, iOS, iPadOS, Windows, macOS, Chrome OS і Linux.

Для стварэння PWA вы можаце выкарыстоўваць любую архітэктуру: з боку сервера, ванільнага JavaScript, React, Vue, Angular альбо іншых платформаў на баку кліента. Гэта можа быць аднастаронкавае альбо шматстаронкавае вэб-дадатак, і мы вызначаем, як мы будзем падтрымліваць карыстальнікаў у аўтаномным рэжыме.

Пры такім падыходзе нам не трэба ўпакоўваць і падпісваць рэсурсы нашага прыкладання: мы проста размяшчаем файлы на вэб-серверы, і работнік службы будзе адказваць за кэшаванне файлаў у кліенце і падаваць іх пасля ўстаноўкі. Гэта таксама азначае, што калі дадатак патрабуе абнаўлення, вы проста змяняеце файлы на серверы, і логіка работніка службы будзе адказваць за іх абнаўленне на прыладах карыстальнікаў без умяшання карыстальніка або крамы прыкладанняў.

З пункту гледжання распаўсюджвання найбольш распаўсюджаным метадам з'яўляецца браўзэр. Карыстальнікі ўсталёўваюць прыкладанне з браўзэра, выкарыстоўваючы пункт меню Дадаць на галоўны экран альбо Усталёўка, прымаючы запрашэнне на ўсталёўку альбо выкарыстоўваючы карыстацкі карыстацкі інтэрфейс на сумяшчальных платформах. Варта адзначыць, што Apple адмаўляецца ад чыстых PWA, апублікаваных у App Store, і заклікае вэб-распрацоўшчыкаў распаўсюджваць іх праз Safari.

Карыстальніцкі інтэрфейс кіруецца выключна вэб-версіяй, што азначае, што вэб-дызайнер адказвае за адлюстраванне кожнага элемента кіравання на экране. Калі вы выкарыстоўваеце структуру карыстацкага інтэрфейсу, напрыклад Ionic, альбо бібліятэку Material Design, HTML і CSS будуць імітаваць уласныя інтэрфейсы на Android або iOS, але гэта не абавязкова.Пры выкананні PWA прымяненне метадаў працы ў Інтэрнэце з'яўляецца абавязковым для захавання добрага карыстацкага досведу.

З пункту гледжання магчымасцей, PWA будзе мець доступ толькі да API, даступных у рухавіку аглядальніка на гэтай платформе, і яго нельга пашырыць з дапамогай уласнага кода - за выключэннем дыстрыбутываў PWA у краме прыкладанняў. У гэтым пытанні iOS і iPadOS з'яўляюцца больш абмежаванымі платформамі для PWA, у той час як Chrome (для Android і настольных АС) мае большую даступнасць і прыкладае ўсе намаганні, каб дадаць усе магчымыя API у JavaScript з праектам Fugu.

• Лепшае воблачнае сховішча: Выберыце правільны варыянт для сябе.

Рэагаваць роднай

Моцныя бакі React Native

• Тыя ж шаблоны, што і ў React.js
• Адкрываюцца некаторыя вэб-API
• Падтрымка Інтэрнэту і працоўнага стала

Слабыя бакі React Native

• Немагчыма паўторна выкарыстоўваць кампаненты вэб-інтэрфейсу
• Роднаму мосту трэба папрацаваць
• Неабходны вопыт рэагавання

React Native - гэта структура кампанентаў на аснове JavaScript з адкрытым зыходным кодам, якая спансуецца Facebook, якая выкарыстоўвае шаблоны дызайну React, а таксама мову JavaScript для кампіляцыі ўласных праграм для iOS, iPadOS і Android з аднаго зыходнага кода.

Але ніякія элементы HTML не прымаюцца да рэндэрынгу; сапраўдныя толькі іншыя ўласныя кампаненты. Такім чынам, замест адлюстравання div> з p> і а уваход> элемент з JSX, вы будзеце адлюстроўваць Выгляд> з Тэкст> і а Увод тэксту>. Для кампанентаў стылістыкі вы па-ранейшаму выкарыстоўваеце CSS, а макет вызначаецца праз Flexbox.

Карыстацкі інтэрфейс не будзе адлюстроўвацца ў DOM браўзэра, але з выкарыстаннем уласных бібліятэк карыстацкага інтэрфейсу на Android і iOS. Такім чынам, а Кнопка> у ReactNative стане асобнікам UIButton на iOS і android.widget.Button клас на Android; у React Native няма вэб-асяроддзя выканання.

Аднак увесь код JavaScript будзе выконвацца ў віртуальнай машыне JavaScript на прыладзе, таму пры складанні прыкладання няма пераўтварэння JavaScript у рэальны ўласны код. Існуе набор добра вядомых API для вэб-распрацоўшчыкаў, такіх як API Fetch, WebSockets і таймеры аглядальніка: setInterval і requestAnimationFrame. Іншыя здольнасці разгортваюцца на платформе з дапамогай карыстацкіх API, такіх як анімацыя.

Вы можаце пачаць хуткі праект React Native з двума бясплатнымі CLI: Expo альбо больш дасканалым і афіцыйным ReactNative CLI. Калі вы выкарыстоўваеце афіцыйны CLI, вам таксама спатрэбіцца Android Studio для кампіляцыі і тэставання прыкладання Android і Xcode, каб зрабіць тое ж самае на iOS і iPadOS, таму вам спатрэбіцца кампутар macOS для гэтай платформы.

React Native кампілюе натыўныя праграмы для iOS і Android, што азначае, што распаўсюджванне вашага прыкладання будзе прытрымлівацца тых жа правілаў, што і іншыя ўласныя праграмы: крамы праграм для агульнадаступных праграм, карпаратыўная дыстрыбуцыя і альфа / бэта-тэставанне. Як правіла, вы не можаце распаўсюджваць прыкладанне праз браўзэр, хоць React Native для Інтэрнэту і Microsoft React Native для Windows могуць дапамагчы.

NativeScript

Моцныя бакі NativeScript

• Добрыя інструменты для кадавання і тэставання
• Шырокая галерэя праграм, гатовых да гульні
• Усе API для Android і iOS прадстаўлены ў JS

Слабыя бакі NativeScript

• Невялікая суполка
• Немагчыма паўторна выкарыстоўваць кампаненты вэб-інтэрфейсу
• Няма падтрымкі Інтэрнэту, працоўнага стала альбо React

NativeScript не так вядомы, як React Native, але ён канкуруе ў той жа галіне: уласныя прыкладання для iOS і Android з JavaScript і вэб-фрэймворкаў. Гэта дазваляе выкарыстоўваць JavaScript альбо TypeScript і файл карыстацкага інтэрфейсу XML для стварэння ўласных праграм. Ён таксама падтрымлівае Angular і Vue адразу, таму гэта выдатнае рашэнне для распрацоўшчыкаў, якія прывыклі да гэтых фреймворкаў.

Перавагі NativeScript відавочней, калі вы выкарыстоўваеце Angular або Vue. Для Angular вы ствараеце тыя самыя кампаненты, да якіх вы прывыклі, але выкарыстоўваеце XML замест HTML для шаблону, уключаючы ўсе прывязкі дадзеных. У XML замест div> з p> і ан img>, вы размесціце StackLayout> з Этыкетка> і ан Выява> кампанент.

CSS і Sass падтрымліваюцца ў браўзэры з падобнымі стылямі з CSS. Маршрутызацыя і кіраванне сеткай ажыццяўляюцца з дапамогай рэалізацыі стандартных паслуг Angular. Для Vue гэта нешта падобнае; вы пішаце шаблон у XML, а не выкарыстоўваеце HTML у тым самым шаблон> элемент у вашым .vue-файле.

NativeScript уключае калекцыю кампанентаў, якія потым супастаўляюцца з уласным элементам кіравання Android або iOS, так што пры рэндэрынгу спіса альбо выбару гэта будзе родная праграма з выкарыстаннем той жа ідэі, што і ў React Native.

Ваш код JavaScript або TypeScript (скапіляваны) выконваецца ў віртуальнай машыне JavaScript на прыладзе з мостам у / з роднай асяроддзя. У гэтым мосце адкрыты ўвесь натыўны API з Android альбо iOS / iPadOS, таму, нягледзячы на ​​доступ да міжплатформенных API, мы можам стварыць асобнік альбо выклікаць любы код Java або Objective-C з JavaScript / TypeScript і NativeScript.

NativeScript мае вялікую падтрымку інструментальных сродкаў, уключаючы ўбудовы кода VS, CLI, сістэму тэсціравання з гарачай перазагрузкай і праграму NativeScript для гульнявой пляцоўкі, таму вам не трэба ўсталёўваць усе залежнасці падчас тэставання, а таксама некалькі дадатковых сэрвісаў, такіх як Інтэрнэт дзіцячая пляцоўка.

Нарэшце, NativeScript складае толькі дадатак для Android і iOS, якое можна ўсталяваць з афіцыйных каналаў распаўсюджвання і крам прыкладанняў, калі вы выконваеце іх правілы, карпаратыўнае распаўсюджванне і альфа / бэта-тэставанне. Звычайна не будзе магчымасці распаўсюджваць праграмы з браўзэра, і для гэтай платформы няма рашэнняў для настольных праграм.

Гэты артыкул быў першапачаткова апублікаваны ў выпуск 325 of net - самы прадаваны ў свеце часопіс для вэб-дызайнераў і распрацоўшчыкаў. Купляйце выпуск 325 альбо падпісацца да сеткі.

Далучайцеся да нас у красавіку 2020 года з нашай лінейкай суперзоркаў JavaScript на GenerateJS - канферэнцыя, якая дапаможа вам стварыць лепшы JavaScript. Браніруйце зараз па адрасеgeneratedconf.com