Мазмұны
- PWAs және Native apps: айырмашылығы неде?
- Прогрессивті веб-қосымшалар: Интернетке арналған ғимарат
- PWA-ның күшті жақтары
- PWA-ның әлсіз жақтары
- React Native
- React Native күштері
- React Native әлсіз жақтары
- NativeScript
- NativeScript-тің күшті жақтары
- NativeScript әлсіз жақтары
Қосымшаны құру кезінде қандай тәсіл қолдану керек? Сіз PWA / веб-технологиялар маршрутымен жүруіңіз керек пе немесе нақты платформалар үшін дизайн жасау керек пе? Екі нұсқада да оң және теріс жақтары бар, және осы мақалада біз веб пен жергілікті қолданбаларды жасау үшін қолданылатын бірнеше танымал таңдауларға назар аударамыз.
PWA (Progressive Web Apps) немесе веб-қосымшалар танымал HTML, CSS және JavaScript веб-технологияларымен құрастырылған және веб-шолғышта жұмыс істейді. (Сіздің құрастыруларыңызға көмектесу үшін кейбір маңызды HTML тегтерін тексеріп көріңіз.) PWA - бұл қосымша ретінде көрінетін мобильді веб-сайттар, ал веб-API-ді пайдалану оларға жергілікті қолданбаға ұқсас функционалдылық береді.
Қолданба құру туралы көбірек кеңес алу үшін біздің қосымшаны қалай жасауға болатындығы туралы хабарламаны немесе егер сіз жасағыңыз келетін сайт болса, осы веб-сайт жасаушылар мен веб-хостинг қызметтерін көріңіз.
PWAs және Native apps: айырмашылығы неде?
Прогрессивті веб-қосымшалардың қолданбалар дүкенін қажет етпестен орнатылатын және құрылғыда өмір сүретіндігінің артықшылығы бар. Сонымен, процестің бір бөлігі - бұл веб-қолданбаның манифесті, бұл әзірлеушілерге бағдарламаның қалай пайда болатынын және оның қалай іске қосылатындығын басқаруға мүмкіндік береді. Сондай-ақ, веб-дизайнерлер / алдыңғы жасаушылар тез арада құрылысты бастау үшін қажетті дағдыларға ие болады. Жергілікті қолданбаларға қарағанда жаңа тіл үйренудің қажеті жоқ.
Жергілікті қолданбалар белгілі бір ОЖ-ны ескере отырып салынған - яғни. 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 OS және Linux үшін орнатқаннан кейін бірінші деңгейлі қолданба тәжірибесін жасай аламыз.
PWA құру үшін кез-келген архитектураны пайдалануға болады: серверлік, ванильді JavaScript, React, Vue, Angular немесе басқа клиенттік жақтаулардан. Бұл бір беттен тұратын немесе бірнеше беттен тұратын веб-қосымша болуы мүмкін және біз желіден тыс уақытта қолданушыларға қалай қолдау көрсететінімізді анықтаймыз.
Бұл тәсілде біз өз қосымшамыздың қорларын жинап, қол қоюдың қажеті жоқ: біз файлдарды веб-серверде орналастырамыз, ал сервис қызметкері клиенттегі файлдарды кэштеу үшін жауап береді және оларды орнатқаннан кейін қызмет етеді. Бұл сондай-ақ бағдарлама жаңартуды қажет етсе, сіз жай ғана сервердегі файлдарды өзгертесіз, ал сервис қызметкерінің логикасы оларды қолданушылардың құрылғыларында қолданушы мен қолданба дүкенінің араласуынсыз жаңартуға жауапты болады.
Тарату тұрғысынан ең кең таралған әдіс - шолғыш. Пайдаланушылар қолданбаны браузерден «Басты экранға қосу» немесе «Орнату» мәзір пунктін қолдану арқылы, қондырғыны шақыру арқылы немесе үйлесімді платформаларда қолданушының қолданбалы интерфейсін қолдану арқылы орнатады. Apple App Store-да жарияланған таза PWA-дан бас тартады және веб-әзірлеушілерді оны Safari арқылы таратуға шақырады.
Қолданушы интерфейсі тек веб-жұмыс уақытымен басқарылады, демек, веб-дизайнер экрандағы әр басқаруды басқаруға жауапты. Егер сіз интерфейс интерфейсін қолдансаңыз, мысалы Ionic немесе Material Design кітапханасы, 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 - бұл React дизайн үлгілерін, сондай-ақ iOS, iPadOS және Android жүйелеріне арналған жергілікті бағдарламаларды бір бастапқы кодтан құрастыру үшін, React дизайн үлгілерін қолданатын, Facebook демеушілігімен жасақталған JavaScript негізіндегі компоненттік негіз.
Бірақ көрсету үшін HTML элементтері қабылданбайды; тек басқа жергілікті компоненттер жарамды. Сондықтан, көрсетудің орнына а div> а p> және а енгізу> JSX бар элемент, сіз а бейнесін көрсетесіз Көру> а Мәтін> және а TextInput>. Компоненттерді сәндеу үшін сіз әлі де CSS-ті қолданасыз және оның орналасуы Flexbox арқылы анықталады.
Пайдаланушы интерфейсі браузердің DOM-ында көрсетілмейді, бірақ Android және iOS жүйелеріндегі жергілікті интерфейс кітапханаларын қолданады. Сондықтан, а Түйме> ReactNative-де iOS пен iOS жүйесіндегі UIButton нұсқасы болады android.widget.Button Android-тағы сынып; React Native-ге қатысатын веб-жұмыс уақыты жоқ.
Алайда, барлық JavaScript коды құрылғыдағы JavaScript виртуалды машинасында орындалады, сондықтан бағдарламаны құрастыру кезінде жергілікті кодты нақты түрлендіруге арналған JavaScript жоқ. Fetch API, WebSockets және шолғыштың таймерлері сияқты веб-әзірлеушілерге арналған белгілі API жиынтығы бар: setInterval және requestAnimationFrame. Басқа қабілеттер платформада анимация сияқты арнайы API арқылы орналастырылады.
Сіз жылдам React Native жобасын екі тегін CLI-мен бастауға болады: 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 артықшылықтары бұрыштық немесе Vue қолданған кезде айқынырақ болады. Angular үшін сіз әдеттегі компоненттерді жасайсыз, бірақ барлық деректерді байланыстыруды қоса, шаблон үшін HTML орнына XML-ді қолданасыз. XML-де, орнына div> а p> және ан img>, сіз орналастырасыз StackLayout> а Жапсырма> және ан Сурет> компонент.
CSS және Sass браузерде CSS-ке ұқсас стильдермен қолдау көрсетіледі. Маршруттау және желіні басқару стандартты бұрыштық қызметтерді енгізу арқылы жүзеге асырылады. Vue үшін бұл ұқсас нәрсе; сіз HTML-ді қолданудың орнына шаблонды XML-де жазасыз шаблон> .vue файлындағы элемент.
NativeScript құрамына компоненттер жиынтығы кіреді, содан кейін олар Android немесе iOS жергілікті басқару жүйелерімен салыстырылады, сондықтан сіз тізім немесе таңдаушы ұсынған кезде, ол React Native-дегі идеяны қолданып, жергілікті қолданба болады.
Сіздің JavaScript немесе TypeScript кодыңыз (көшірілген) құрылғыдағы JavaScript виртуалды машинасында жергілікті ортаға шығу / шығу көпірімен орындалады. Бұл көпірде Android немесе iOS / iPadOS-тің барлық жергілікті API интерфейстері ашық, сондықтан платформалар аралық API-ге қол жеткізуге қарамастан, біз кез-келген Java немесе JavaScript / TypeScript кодтарынан немесе NativeScript-тен маршалды деректер түрлерін шақыра аламыз.
NativeScript құрал-саймандарға, соның ішінде VS код плагиндеріне, CLI-ге, ыстық қайта жүктеу тестілеу жүйесіне және NativeScript ойын алаңына арналған қосымшаларға өте жақсы қолдау көрсетеді, сондықтан тестілеу кезінде барлық тәуелділіктерді орнатудың қажеті жоқ, сонымен қатар онлайн сияқты бірнеше қосымша қызметтер ойын алаңы.
Сонымен, NativeScript тек Android және iOS жүйелеріне арналған ресми дистрибьютерлік арналардан және қосымшалар дүкендерінен орнатуға болады, егер сіз олардың ережелеріне, корпоративті дистрибуцияға және альфа / бета тестілеуіне сәйкес болсаңыз ғана құрастырады. Әдетте бағдарламаларды браузерден таратудың мүмкіндігі болмайды және бұл платформаға арналған жұмыс үстелдері үшін шешімдер жоқ.
Бұл мақала бастапқыда жарияланған 325 net, веб-дизайнерлер мен әзірлеушілерге арналған әлемдегі ең көп сатылатын журнал. Сатып алу 325 немесе жазылу торға
2020 жылдың сәуірінде GenerateJS-тегі JavaScript супержұлдыздар қатарына қосылыңыз - бұл сізге JavaScript-ті жақсартуға көмектесетін конференция. Қазір тапсырысgenerateconf.com
