Мазмун
- PWAs жана Native apps: айырмасы эмнеде?
- Прогрессивдүү веб колдонмолор: Веб үчүн курулуш
- PWA күчтүү жактары
- PWAлардын алсыз жактары
- React Native
- React Native күчтүү
- React Nativeдин алсыз жактары
- NativeScript
- NativeScript күчтүү жактары
- NativeScriptтин алсыз жактары
Колдонмону курууда кандай ыкманы колдонуш керек? Сиз PWA / веб технологиялар каттамы менен барышыңыз керекпи же конкреттүү платформалардын дизайнын түзүп, иштешиңиз керекпи? Эки варианттын тең оң жана терс жактары бар жана бул макалада веб жана жергиликтүү колдонмолорду түзүү үчүн колдонулган бир нече популярдуу тандоолорго көңүл бурабыз.
PWAs (Progressive Web Apps) ака веб колдонмолор, популярдуу HTML, CSS жана JavaScript веб технологиялары менен курулган жана веб-браузерде иштейт. (Курулуштарыңызга жардам берүү үчүн, кээ бир маанилүү HTML тегдерин карап көрүңүз.) PWAs - бул натыйжалуу мобилдик веб-сайттар, алар колдонмо сыяктуу көрүнөт жана веб API колдонсо, аларга жергиликтүү колдонмого окшош функционалдык мүмкүнчүлүктөр берилет.
Колдонмолорду куруу боюнча кененирээк маалымат алуу үчүн, колдонмону кантип жасоо керектиги жөнүндө, же сиз түзгүңүз келген сайт болсо, анда ушул мыкты веб-сайт куруучулар менен веб-хостинг кызматтарын көрө аласыз.
PWAs жана Native apps: айырмасы эмнеде?
Прогрессивдүү Веб Колдонмолордун артыкчылыгы, орнотула турган жана колдонмо дүкөнүн талап кылбастан, түзмөктө жашайт. Ошондой эле, процесстин бир бөлүгү Веб Колдонмо Манифести болуп саналат, ал иштеп чыгуучуларга колдонмонун кандайча пайда болгонун жана анын кандайча ишке киргизилгенин көзөмөлдөөгө мүмкүнчүлүк берет. Ошондой эле, веб-дизайнерлер / алдыңкы иштеп чыгуучулар тез арада курулушту баштоо үчүн зарыл болгон көндүмдөргө ээ болушат. Жергиликтүү колдонмолордон айырмаланып, жаңы тил үйрөнүүнүн кажети жок.
Жергиликтүү колдонмолор белгилүү бир OS тутумун эске алуу менен курулат - б.а. 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 App Store дүкөнүндө жарыяланган таза PWAларды четке кагып, веб-иштеп чыгуучуларды Safari аркылуу жайылтууга үндөйт.
Колдонуучунун интерфейси вебдин иштөө убактысы аркылуу башкарылат, демек, веб-дизайнер экранда ар бир башкарууну көрсөтүүгө жооптуу. Эгерде сиз UI алкагын колдонсоңуз, мисалы Ionic же Материалдык Дизайн китепканасы, HTML жана CSS Android же iOS тутумундагы интерфейстерди тууроочу, бирок бул милдеттүү эмес.PWA жасоодо, колдонуучунун тажрыйбасын сактап калуу үчүн, веб-техниканын техникасын колдонуу милдеттүү.
Жөндөмдүүлүк жагынан алганда, PWA ошол платформада браузердин кыймылдаткычында болгон APIлерге гана мүмкүнчүлүк алат жана аны жергиликтүү код менен кеңейтүү мүмкүн эмес - тиркеме дүкөндөрүнүн PWA таркатууларынан тышкары. Бул жагынан алганда, iOS жана iPadOS PWA үчүн чектелген платформалар болуп саналат, ал эми Chrome (Android жана рабочий ОС үчүн) көбүрөөк жеткиликтүүлүккө ээ жана Fugu долбоору менен JavaScript'ке мүмкүн болгон API кошуу үчүн жан үрөп иштөөдө.
- Мыкты булут сактагыч: Өзүңүзгө ылайыктуу жолду тандаңыз.
React Native
React Native күчтүү
- React.js менен бирдей үлгүлөр
- Айрым веб API'лер ачыкка чыгууда
- Веб жана рабочий колдоо
React Nativeдин алсыз жактары
- Интерфейс интерфейсинин компоненттерин колдонууга болбойт
- Тубаса көпүрө бир аз иштөөгө муктаж
- Реакция тажрыйбасы керек
React Native бул ачык булактуу JavaScript негизделген компонент алкагы, Facebook тарабынан каржыланган, React дизайны үлгүлөрүн, ошондой эле iOS, iPadOS жана Android үчүн жергиликтүү колдонмолорду бир булак кодунан түзүүдө JavaScript тилин колдонот.
Бирок HTML элементтери көрсөтүлбөйт; башка жергиликтүү компоненттер гана жарактуу. Ошондуктан, көрсөтүүнүн ордуна а div> менен p> жана а киргизүү> элементин JSX менен көрсөтсөңүз болот View> менен Текст> жана а TextInput>. Компоненттерин стилдөө үчүн, сиз дагы деле CSS колдоносуз жана анын макети Flexbox аркылуу аныкталат.
Колдонуучу интерфейси браузердин DOMунда көрсөтүлбөйт, бирок Android жана iOS тутумундагы жергиликтүү колдонуучулар интерфейсинин китепканаларын колдонушат. Ошондуктан, а Баскыч> in ReactNative iOS жана UIButton нускасы болуп калат android.widget.Button Androidдеги класс; React Nativeге катышкан эч кандай веб-убакыт жок.
Бирок, бардык JavaScript коддору түзмөктөгү JavaScript виртуалдык машинасында аткарылат, андыктан колдонмону түзүүдө чыныгы кодду конверсиялоо үчүн JavaScript жок. Вет иштеп чыгуучулар үчүн белгилүү API топтому бар, мисалы, Fetch API, WebSockets жана браузердин таймерлери: setInterval жана requestAnimationFrame. Башка жөндөмдөр платформада анимациялар сыяктуу бажы APIлери аркылуу жайгаштырылат.
Эки акысыз CLI менен тез React Native долбоорун баштасаңыз болот: Expo же кыйла өнүккөн жана расмий ReactNative CLI. Эгер сиз расмий CLIди колдонсоңуз, анда Android тиркемесин жана Xcode'ду iOS жана iPadOS'то жасоо үчүн Android Studio түзүп, сынап көрүшүңүз керек, андыктан ошол платформа үчүн macOS компьютериңиз керек болот.
React Native iOS жана Android үчүн жергиликтүү колдонмолорду түзөт, демек, колдонмоңуздун таркатылышы башка жергиликтүү колдонмолордогу эрежелерди сактайт: коомдук колдонмолор үчүн колдонмо дүкөндөрү, ишканалардын жайылышы жана альфа / бета тесттери. Адатта, колдонмону браузер аркылуу жайылта албайсыз, бирок React Native for Web жана Microsoftтун React Native for Windows платформалары жардам берет.
NativeScript
NativeScript күчтүү жактары
- Коддоо жана сыноо үчүн жакшы шаймандар
- Ойнотууга даяр колдонмолордун кеңири галереясы
- Бардык Android жана iOS API'лери JSде ачыкка чыгат
NativeScriptтин алсыз жактары
- Чакан жамаат
- Интерфейс интерфейсинин компоненттерин колдонууга болбойт
- Веб, иш такта же React колдоосу жок
NativeScript React Native сыяктуу белгилүү эмес, бирок ал бир эле жаатта атаандашат: жергиликтүү iOS жана Android тиркемелери JavaScriptтен жана веб алкактардан. Бул жергиликтүү колдонмолорду түзүү үчүн JavaScript же TypeScript жана XML колдонуучу интерфейс файлын колдонууга мүмкүнчүлүк берет. Ошондой эле, бул бурчтук жана Vue түздөн-түз кутудан сырткары колдойт, ошондуктан бул алкактарга көнгөн иштеп чыгуучулар үчүн сонун чечим.
NativeScriptтин артыкчылыктары Angular же Vue колдонгондо ачык-айкын болот. Angular үчүн, сиз көнгөн эле компоненттерди түзөсүз, бирок шаблонго HTML ордуна XML колдоносуз, анын ичинде бардык берилиштерди байлоо. XMLде, ордуна div> менен p> жана img>, сиз жайгаштырасыз StackLayout> менен Label> жана Image> компонент.
CSS жана Sass браузердеги CSS окшош стилдер менен колдоого алынат. Маршруттоо жана тармакты башкаруу стандарттык бурчтук кызматтарды ишке ашыруу аркылуу жүргүзүлөт. Vue үчүн бул окшош нерсе; шаблонду HTMLдин ордуна, XMLде жазасыз шаблон> .vue файлыңыздагы элемент.
NativeScript компоненттеринин топтомун камтыйт, андан кийин Android же iOS түпнуска башкаруусуна картага түшүрүлөт, андыктан тизме же тандоочу чыгарганда, ал React Nativeдегидей идеяны колдонуп, жергиликтүү колдонмо болот.
Сиздин JavaScript же TypeScript кодуңуз (көчүрүлдү) түзмөктөгү JavaScript виртуалдык машинасында жергиликтүү айлана-чөйрөгө / андан көпүрө менен аткарылат. Ошол көпүрөдө Android же iOS / iPadOS программаларынан чыккан жергиликтүү APIлердин бардыгы ачыкка чыккан, ошондуктан платформалар аралык API'лерге мүмкүнчүлүгүбүз болсо дагы, биз JavaScript / TypeScript жана JavaScript-тин каалаган Java же Objective-C кодун орнотуп же чакыра алабыз жана NativeScript маршал маалыматтарынын түрлөрү болот.
NativeScript инструменттерди, анын ичинде VS коду плагиндерин, CLI, ысык жүктөө тестирлөө тутуму жана NativeScript оюн аянтчасынын тиркемесин колдоого алат, андыктан тестирлөө учурунда бардык көз карандылыктарды орнотуунун кажети жок, ошондой эле онлайн сыяктуу бир нече кошумча кызматтар балдар аянтчасы.
Акыры, NativeScript Android жана iOS үчүн гана колдонмолорду түзөт, аларды расмий бөлүштүрүү каналдарынан жана тиркеме дүкөндөрүнөн орнотсоңуз болот, эгерде алардын эрежелерине, ишканалардын жайылышына жана альфа / бета тестирлөөсүнө туура келсе. Адатта, браузерден колдонмолорду жайылтуунун жолу жок болот жана бул платформа үчүн рабочий колдонмолор үчүн чечимдер жок.
Бул макала алгач жарыяланган 325 of net, дүйнөдөгү веб-дизайнерлер жана иштеп чыгуучулар үчүн эң көп сатылган журнал. Сатып алуу 325 же жазылуу торго
2020-жылдын апрель айында GenerateJSтеги JavaScript супер жылдыздарыбыздын катарын толуктаңыз - сизге JavaScriptти жакшыраак түзүүгө жардам берген конференция. Азыр брондоңузgenerateconf.com
