Бұл жазба автоматты түрде аударылған. Бастапқы тіл: Орысша
Біз туралы аздап
Біз troubleshooting Technology компаниясымыз, 6 жылдан астам уақыт бойы бизнес, білім және мемлекеттік құрылымдар үшін IT-шешімдерді жобалаумен және әзірлеумен айналысып келеміз. Осы уақыт ішінде мобильді қосымшалар мен web-сервистерден бастап интеграциялық платформалар мен аналитика және автоматтандыру жүйелеріне дейінгі ондаған жобалар іске асырылды.
Біз не туралы сөйлесеміз
Өткен жазбаның жалғасында мобильді қосымшаны әзірлеу кезінде қандай тәсілдер бар екенін талдаймыз. Осыдан кейін кросс-платформалық тәсіл туралы сөйлесейік (ортақ кодта iOS және Android үшін бір қосымша, Flutter, React Native және т. б.)
Кросс-платформалар
Кросс-платформаны әзірлеу-бұл әртүрлі операциялық жүйелерде (iOS, Android және т.б.) бірдей кодты іске қосуға болатын мобильді қосымшаларды құру тәсілі. Әр платформа үшін бөлек нұсқаны жазудың орнына, әзірлеуші бір шеңберді қолданады және ол қосымшаны қажетті жүйеге бейімдейді.
"Барлығына арналған бір код" идеясы жұмыс үстелінің дамуында (Java, Qt) болған, бірақ мобильді әлемде екі бөлек қосымшаны әзірлеу қымбат және ұзақ болғаннан кейін танымал болды. 2015 жылы Facebook React Native шығарған кезде және 2017 жылы Google Flutter-ді енгізген кезде серпіліс болды.
Тәсіл жақсы, өйткені ол уақыт пен бюджетті үнемдейді, қолдауды жеңілдетеді, MVP іске қосылуын тездетеді және жаңартуларды бірден екі платформаға шығаруға мүмкіндік береді.
PWA және жергілікті қосымшалардан айырмашылығы неде
Біз PWA туралы алдыңғы жазбада егжей-тегжейлі айттық. Қысқаша еске түсірсек, бұл ұялы телефонға бейімделген веб-сайт. Жергілікті қосымша белгілі бір ОЖ үшін жазылады және оның мүмкіндіктерін барынша пайдаланады. Кросс-платформа-бұл Орта жол: қолданба құрылғының барлық дерлік мүмкіндіктеріне қол жеткізе алады, бірақ кодтың көп бөлігі екі платформаға ортақ.
React Native
Facebook шеңбері, JavaScript немесе TypeScript-те логика жазу. Интерфейс жергілікті iOS және Android компоненттерін қолдана отырып көрсетіледі, ал олармен байланыс "көпір" арқылы өтеді — js және платформа арасындағы командаларды жіберетін арнайы қабат.
Артықшылықтары: шынайы интерфейс сезімі, дамыған қауымдастық, TypeScript қолдауы.
Кемшіліктері: күрделі анимациямен көпір тығырыққа тірелуі мүмкін, ал кейбір функциялар үшін сіз әлі де жергілікті кодты жазуыңыз керек.
Flutter
Google-дің Dart тіліндегі құрылымы. Дайын ОЖ элементтерін пайдаланудың орнына, Flutter skia қозғалтқышы арқылы интерфейсті өзі салады. Бұл барлық құрылғыларда бірдей көрініс пен жоғары жұмыс жылдамдығын береді.
Артықшылықтары: дизайнды толық бақылау, жоғары өнімділік, болжамды дисплей.
Кемшіліктері: қолданбалар қиынырақ, дизайн кейде "жергілікті емес" болып көрінеді және дайын кітапханалар JavaScript ортасынан кішірек.
Көптеген пайдаланушылар үшін жергілікті қосымшаның айырмашылығы минималды болады. Кросс-платформалық қосымшалар жылдам, қимылдарды, анимацияларды және офлайн функцияларды қолдайды. Айырмашылықтар тек ресурстарды қажет ететін тапсырмаларда — 3D, AR, белгілі бір платформаға ғана тән функционалдылықпен жұмыс жасауда немесе native әлі де жеңетін ауыр графикада көрінуі мүмкін.
Кросс-платформа құрылғының функцияларына толық қол жеткізуге мүмкіндік береді: камера, GPS, Bluetooth, NFC, сенсорлар, офлайн режим. Егер дайын плагин болмаса, әзірлеуші өзінің жергілікті модулін жазып, оны ортақ кодқа қоса алады.
Команда кішірек-көбінесе бір немесе екі әзірлеуші жеткілікті. Мерзімдер екі бөлек жергілікті қосымшаны құруға қарағанда қысқа, ал құны әдетте үштен жартысына төмен. Қолдау оңайырақ: жаңартулар мен өңдеулер бір кодқа енгізіледі, бірақ кейде iOS немесе Android-тің жаңа нұсқалары әр платформаға өзгертулер енгізуді қажет етеді.
Қолданбаны iOS және Android жүйелерінде жылдам және салыстырмалы түрде арзан шығару қажет болса, кросс — платформа тамаша таңдау болып табылады, сонымен бірге пайдаланушыға дерлік жергілікті тәжірибе береді. Бұл стартаптар, e-commerce, корпоративтік қызметтер, білім беру және қызмет көрсету қосымшаларына сәйкес келеді.
Өнімділік пен графикаға, ауыр ойындарға немесе шешімдерге қойылатын максималды талаптары бар жобалар үшін ең жақсы нұсқа емес, мұнда жүз пайыз жергілікті интерфейс маңызды.
Немного о нас
Мы — компания Troubleshooting Technology, уже более 6 лет занимаемся проектированием и разработкой IT-решений для бизнеса, образования и государственных структур. За это время реализовали десятки проектов: от мобильных приложений и web-сервисов до интеграционных платформ и систем аналитики и автоматизации.
О чем поговорим
В продолжении прошлого поста разберем какие подходы есть при разработке мобильного приложения. И в этом после поговорим про кроссплатформенный подход (одно приложение для iOS и Android на общем коде, Flutter, React Native и пр.)
Кроссплатформ
Кроссплатформенная разработка — это способ создания мобильных приложений, при котором один и тот же код можно запускать на разных операционных системах (iOS, Android и пр.). Вместо того чтобы писать отдельную версию для каждой платформы, разработчик использует один фреймворк, а он уже адаптирует приложение под нужную систему.
Идея «одного кода для всех» существовала ещё в десктоп-разработке (Java, Qt), но в мобильном мире получила популярность после того, как стало дорого и долго разрабатывать два отдельных приложения. Прорыв случился, когда в 2015 Facebook выпустил React Native, а в 2017 Google представил Flutter.
Подход хорош тем, что экономит время и бюджет, упрощает поддержку, ускоряет запуск MVP и позволяет выпускать обновления сразу на обе платформы.
Чем отличается от PWA и нативных приложений
Про PWA мы подробно рассказывали в предыдущем посте. Если вспомнить вкратце, это адаптированный под мобилку веб-сайт. Нативное приложение пишется под конкретную ОС и максимально использует её возможности. Кроссплатформа — это золотая середина: приложение получает доступ почти ко всем функциям устройства, но при этом большая часть кода общая для обеих платформ.
React Native
Фреймворк от Facebook, написание логики на JavaScript или TypeScript. Интерфейс отрисовывается с использованием нативных компонентов iOS и Android, а связь с ними идёт через «мост» — специальный слой, который передаёт команды между JS и платформой.
Плюсы: ощущение настоящего нативного интерфейса, развитое сообщество, поддержка TypeScript.
Минусы: при сложной анимации мост может стать узким местом, а для некоторых функций всё равно придётся писать нативный код.
Flutter
Фреймворк от Google на языке Dart. Вместо использования готовых элементов ОС, Flutter рисует интерфейс сам, через движок Skia. Это даёт одинаковый внешний вид на всех устройствах и высокую скорость работы.
Плюсы: полный контроль над дизайном, высокая производительность, предсказуемое отображение.
Минусы: приложения получаются тяжелее, дизайн иногда выглядит «не по-нативному», а готовых библиотек меньше, чем у JavaScript-среды.
Для большинства пользователей разница с нативным приложением будет минимальной. Кроссплатформенные приложения работают быстро, поддерживают жесты, анимации и офлайн-функции. Отличия могут проявиться только в очень ресурсоёмких задачах — 3D, AR, работе с функционалом уникальным для конкретной платформы, или тяжёлой графике, где натив всё ещё выигрывает.
Кроссплатформа даёт почти полный доступ к функциям устройства: камера, GPS, Bluetooth, NFC, сенсоры, офлайн-режим. Если готового плагина нет, разработчик может написать собственный нативный модуль и подключить его к общему коду.
Команда меньше — зачастую хватает одного-двух разработчиков. Сроки короче, чем при создании двух отдельных нативных приложений, а стоимость обычно на треть-половину ниже. Поддержка проще: обновления и правки вносятся в один код, но иногда новые версии iOS или Android всё же требуют доработок под каждую платформу.
Кроссплатформа — отличный выбор, если нужно быстро и относительно недорого выпустить приложение на iOS и Android, при этом обеспечить пользователю почти нативный опыт. Она подойдёт стартапам, e-commerce, корпоративным сервисам, образовательным и сервисным приложениям.
Не лучший вариант для проектов с максимальными требованиями к производительности и графике, тяжёлых игр или решений, где важен стопроцентно нативный интерфейс.
Share
