Съдържание
- PWA срещу собствени приложения: Каква е разликата?
- Прогресивни уеб приложения: Изграждане за мрежата
- Силни страни на PWA
- Слабости на PWA
- React Native
- Силни страни на 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 Native
- Същите модели като при React.js
- Някои уеб API са изложени
- Поддръжка на уеб и настолни компютри
Слабости на React Native
- Не могат да се използват повторно компонентите на уеб потребителския интерфейс
- Родният мост се нуждае от малко работа
- Необходим е опит за реагиране
React Native е компонентна рамка, базирана на JavaScript с отворен код, спонсорирана от Facebook, която използва дизайнерски модели React, както и език на JavaScript за компилиране на собствени приложения за iOS, iPadOS и Android от един изходен код.
Но не се приемат HTML елементи за рендиране; само други естествени компоненти са валидни. Следователно, вместо да изобразявате a div> с p> и а вход> елемент с JSX, ще изобразите a Преглед> с Текст> и а TextInput>. За стилизиращи компоненти все още използвате CSS и оформлението се дефинира чрез Flexbox.
Потребителският интерфейс няма да се визуализира в DOM на браузъра, но използвайки библиотеките на родния потребителски интерфейс на Android и iOS. Следователно, a Бутон> в ReactNative ще се превърне в екземпляр на UIButton на iOS и android.widget.Button клас на Android; няма уеб изпълнение по време на React Native.
Целият код на JavaScript обаче ще бъде изпълнен във виртуална машина на JavaScript на устройството, така че при компилиране на приложението няма преобразуване на JavaScript в истински роден код. Има набор от добре познати API за уеб разработчици, като API за извличане, WebSockets и таймерите на браузъра: setInterval и requestAnimationFrame. Други способности са внедрени в платформата чрез потребителски API, като анимации.
Можете да започнете бърз проект React Native с две безплатни CLI: Expo или по-напредналия и официален ReactNative CLI. Ако използвате официалния CLI, имате нужда и от Android Studio, за да компилирате и тествате приложението за Android и Xcode, за да направите същото на iOS и iPadOS, така че ще ви е необходим компютър macOS за тази платформа.
React Native компилира естествени приложения за iOS и Android, което означава, че разпространението на вашето приложение ще следва същите правила като другите естествени приложения: магазини за приложения за публични приложения, корпоративно разпространение и алфа / бета тестване. Обикновено не можете да разпространявате приложение чрез браузър, въпреки че React Native за уеб и платформите React Native за Microsoft за 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> и an img>, ще поставите StackLayout> с Етикет> и an Изображение> съставна част.
CSS и Sass се поддържат с подобни стилове на CSS в браузъра. Маршрутизацията и управлението на мрежата се извършват чрез внедряване на стандартните Angular услуги. За Vue е нещо подобно; пишете шаблона в XML, вместо да използвате HTML в същия шаблон> елемент във вашия .vue файл.
NativeScript включва колекция от компоненти, които след това се съпоставят с вграден контрол на Android или iOS, така че когато изобразявате списък или инструмент за избор, това ще бъде родното приложение, използващо същата идея като в React Native.
Вашият JavaScript или TypeScript код (транслиран) се изпълнява във виртуална машина на устройство с устройство с мост към / от родната среда. В този мост са изложени целият приложен програмен интерфейс (API) от Android или iOS / iPadOS, така че въпреки че имаме достъп до API на различни платформи, можем да създадем екземпляр или да извикаме всеки код на Java или Objective-C от JavaScript / TypeScript и NativeScript ще маршира типове данни.
NativeScript има чудесна поддръжка за инструментариум, включително VS кодови приставки, CLI, система за тестване с горещо презареждане и приложение за игра на NativeScript, така че не е необходимо да инсталирате всички зависимости по време на тестване, както и няколко допълнителни услуги като онлайн игрище.
И накрая, NativeScript компилира приложение за Android и iOS, което може да се инсталира от официалните канали за разпространение и магазините за приложения, ако спазвате техните правила, корпоративно разпространение и алфа / бета тестване. Обикновено няма да има начин за разпространение на приложения от браузър и няма решения за настолни приложения за тази платформа.
Тази статия първоначално е публикувана в брой 325 на net, най-продаваното списание за уеб дизайнери и разработчици. Купува брой 325 или Абонирай се към мрежа.
Присъединете се към нас през април 2020 г. с нашия набор от суперзвезди на JavaScript в GenerateJS - конференцията, която ви помага да изградите по-добър JavaScript. Резервирайте сега на адресgenereconf.com
