Выбор технологии мобильной разработки в 2017 году

January 2017

Разработка: Технологии мобильной разработки в 2017 году
Од­на­ж­ды в по­не­дель­ник утром к нам при­шёл кли­ент, ко­то­ро­му необ­хо­ди­мо бы­ло раз­ра­бо­тать муль­ти­плат­фор­мен­ное мо­биль­ное при­ло­же­ние для бан­кин­га. У него был про­то­тип со все­ми экра­на­ми, это и ста­ло на­шим тех­за­да­ни­ем. «Окей, кру­то». Те­перь мы долж­ны во­пло­тить в жизнь эту идею, ко­то­рая бы­ла раз­ме­ром при­мер­но в 50 экра­нов. И у нас есть все­го три ме­ся­ца. Вау.

С че­го на­чать? Ка­кую тех­но­ло­гию ис­поль­зо­вать? Ту, ко­то­рая уже усто­я­лась на рын­ке или луч­ше сде­лать став­ку на со­вре­мен­ный стек? Эти во­про­сы не пе­ре­ста­ва­ли зву­чать в на­ших го­ло­вах.

Мы по­ду­ма­ли, что сто­ит по­про­бо­вать каж­дое ре­ше­ние, пе­ред тем, как вы­брать од­но. За­тем мы на­ча­ли ана­ли­зи­ро­вать все ви­ды воз­мож­ных ре­ше­ний в на­деж­де най­ти ре­ше­ние на­шей про­бле­мы. Ох, стоп… Это бы­ла пло­хая идея! Этот ана­лиз при­вёл нас к невоз­мож­но­сти сде­лать вы­бор во­об­ще. И этот пост как раз об этом. ( Мы как раз на­ча­ли раз­ра­бот­ку по­сле на­пи­са­ния этой ста­тьи %) )

(В про­то­ти­пе бы­ло бо­лее 50 экра­нов; тре­бо­ва­лись та­кие ве­щи, как ка­ме­ра, NFC, сер­ви­сы ло­ка­ции, Push но­ти­фи­ка­ции и т.д.)

Разработка: Технологии мобильной разработки в 2017 году

Ка­ко­ва на­ша цель?

В со­вер­шен­стве во­пло­тить идею в мо­биль­ное при­ло­же­ние, ко­то­рое пол­но­стью удо­вле­тво­рит на­ше­го кли­ен­та, поль­зо­ва­те­лей и НАС ( а нас очень слож­но чем-ли­бо удо­вле­тво­рить :P )

Мы счи­та­ем, что всё, над чем мы ра­бо­та­ем, долж­но при­но­сить удо­вле­тво­ре­ние. Мы ни­ко­гда не хо­те­ли бы и не бу­дем де­лать что-то, чем мы не смо­жем впо­след­ствии гор­дить­ся.

Обой­дём де­ре­во воз­мож­ных ре­ше­ний…

Разработка: Технологии мобильной разработки в 2017 году

Native Apps: При­ло­же­ния, раз­ра­бо­тан­ные на на­тив­ных язы­ках, та­ких как Java, Objective-C или Swift.
Hybrid Apps: При­ло­же­ния, раз­ра­бо­тан­ные с при­ме­не­ни­ем веб-тех­но­ло­гий, ко­то­рые рас­по­ла­га­ют­ся внут­ри на­тив­но­го кон­тей­не­ра, что да­ёт до­ступ че­рез API к на­тив­ным пла­ги­нам
Almost Native Apps: При­ло­же­ния, вы­пол­ня­е­мые в вир­ту­аль­ной ма­шине JavaScript, но ис­поль­зу­ю­щие род­ные для плат­фор­мы ком­по­нен­ты поль­зо­ва­тель­ско­го ин­тер­фей­са

На­тив­ные при­ло­же­ния

Ес­ли вы уже до­шли до этой ча­сти, то долж­ны по­ни­мать, о чём мы го­во­рим. ДА! ЭТО КОШ­МАР ДЛЯ РАЗ­РА­БОТ­ЧИ­КА. Со­зда­ние оди­на­ко­во­го при­ло­же­ния на раз­ных язы­ках — это как про­ле­тать че­рез пре­ис­под­нюю раз за ра­зом. Вы толь­ко пред­ставь­те, как тя­же­ло бу­дет ис­прав­лять, до­ра­ба­ты­вать и об­нов­лять раз­ные ко­до­вые ба­зы.

Ко­неч­но, бу­дет су­пер-ме­га-кру­то, ес­ли мы бу­дем раз­ра­ба­ты­вать и под­дер­жи­вать чи­сто на­тив­ные при­ло­же­ния. Но мы ве­рим, что это не сто­ит уси­лий в этом про­ек­те и про­сто невоз­мож­но уло­жить­ся в то вре­мя, что у нас есть.

По­го­ди­те… а как же Xamarin

Разработка: Технологии мобильной разработки в 2017 году
Xamarin, под­дер­жи­ва­е­мый ком­па­ни­ей Microsoft, предо­став­ля­ет воз­мож­ность со­хра­нять до 75% об­щей ко­до­вой ба­зы, при этом раз­ра­ба­ты­вая поль­зо­ва­тель­ский ин­тер­фейс от­дель­но для каж­дой плат­фор­мы. Это про­сто ВАУ, не так ли?

На­тив­ный поль­зо­ва­тель­ский ин­тер­фейс, на­тив­ный до­ступ к API, на­тив­ная про­из­во­ди­тель­ность. И это аб­со­лют­но бес­плат­но!
Да, Xamarin был бы ве­ли­ко­леп­ным ва­ри­ан­том, но здесь всё не так про­сто. Есть несколь­ко ми­ну­сов, ко­то­рые за­став­ля­ют нас взгля­нуть и на дру­гие ва­ри­ан­ты:

  • Име­ю­щи­е­ся сро­ки (у нас есть толь­ко 3 ме­ся­ца)
    – Вы­со­кие из­держ­ки раз­ра­бот­ки
    – Раз­ра­бот­ка и те­сти­ро­ва­ние UI под каж­дую плат­фор­му от­ни­ма­ет мно­го вре­ме­ни
    – Неко­то­рые по­же­ла­ния кли­ен­та мо­гут за­ста­вить нас пи­сать биб­лио­те­ки, а мы хо­те­ли бы из­бе­жать это­го
  • Ре­ше­ние, ко­то­рое мы пред­ла­га­ем, нуж­да­ет­ся в быст­рой раз­ра­бот­ке
  • Со­об­ще­ство во­круг Xamarin не та­кое боль­шое, как хо­те­лось бы
  • На­ша ко­ман­да не лю­бит раз­ра­бот­ку на язы­ке c# :(
    Но до­ста­точ­но раз­го­во­ров. Мы про­сто пе­рей­дём к дру­го­му ва­ри­ан­ту, так как этот не под­хо­дит нам по вре­ме­ни на раз­ра­бот­ку.

Разработка: Технологии мобильной разработки в 2017 году

(Но ес­ли у вас есть до­ста­точ­но ре­сур­сов и вре­ме­ни, то Xamarin бу­дет от­лич­ным ва­ри­ан­том)

По­го­во­рим о ги­бри­дах

Ги­брид­ные при­ло­же­ния — в та­ких ком­по­нен­ты ин­тер­фей­са рас­по­ло­же­ны в кон­тей­не­ре с web-view, то есть фак­ти­че­ски в бра­у­зе­ре. И здесь пер­вая за­пад­ня: web-view со­сто­ит из DOM и это при­во­дит к су­ще­ствен­но­му за­мед­ле­нию при­ло­же­ний в срав­не­нии с на­тив­ны­ми.

Окей. Мы зна­ем, что это бу­дет мед­лен­нее, но по­смот­рим, чем этот ва­ри­ант си­лён.

  • Раз­ра­бот­ка со­вре­мен­ных веб-при­ло­же­ний (Progressive App)
  • До­ступ­ны по­чти все на­тив­ные функ­ции че­рез раз­лич­ные обёрт­ки
  • Веб тех­но­ло­гии (HTML5, CSS, и JS нам очень близ­ки)
  • Очень про­стая под­держ­ка при­ло­же­ний (как ми­ни­мум, в срав­не­нии с дру­ги­ми ва­ри­ан­та­ми)
  • По­тря­са­ю­щая под­держ­ка со­об­ще­ства
  • мно­гое дру­гое…
    Нам нуж­но об­ду­мать, на ка­кие ком­про­ми­сы мы мо­жем пой­ти с учё­том плю­сов/ми­ну­сов…
    По­смот­рим на име­ю­щи­е­ся здесь ва­ри­ан­ты:

  • Ionic 1.3 с angularJS
    – Пре­вос­ход­ная под­держ­ка со­об­ще­ства
    – Angularjs — наш дав­ний друг

  • Framework 7
    -Впе­чат­ля­ю­щий и от­лич­но до­ку­мен­ти­ро­ван­ный, но сла­бая под­держ­ка со­об­ще­ства
    -Кри­вая обу­че­ния до­воль­но кру­та, так как этот фрейм­ворк са­мо­до­ста­то­чен

  • Sencha UI, Appcelerator
    -Кру­тая кри­вая обу­че­ния
    -Мень­шая под­держ­ка со­об­ще­ства
    -Не бес­плат­ный…

  • Со­зда­ние соб­ствен­но­го ком­по­нен­та
    -Очень мно­го­обе­ща­ю­ще. Но сто­ит ли оно уси­лий?

  • Ionic 2 с angular 2
    -Хмм… Я ду­маю, что это по­дой­дёт… но… По­го­ди­те… Ionic 2 всё ещё в бе­те

IONIC 1

По­ка мы об­суж­да­ли толь­ко ва­ри­ан­ты раз­ра­бот­ки ги­брид­ных при­ло­же­ний. Под­держ­ка со­об­ще­ства у ionic и са­мо­го angularJS очень впе­чат­ли­ла нас. Спер­ва мы взя­ли ionic 1.3.

  • Хо­ро­шая до­ку­мен­та­ция
  • Фрейм­ворк до­ста­точ­но зре­лый
  • Мы от­лич­но зна­ем этот стек тех­но­ло­гий
  • Очень лёг­кое пла­ни­ро­ва­ние раз­ра­бот­ки
  • Мы в прин­ци­пе зна­ем каж­дый под­вод­ный ка­мень в этом про­ек­те
    На­вер­ное, нам сто­ит взять без лиш­них раз­ду­мий ionic 1.3…

Разработка: Технологии мобильной разработки в 2017 году

Ionic 1.3 по­стро­ен на angularJS. У нас есть ужас­ный опыт мо­биль­ной раз­ра­бот­ки на angularJS. Учи­ты­вая на­ши про­то­ти­пы и слож­ность бу­ду­ще­го при­ло­же­ния, мы уже мог­ли пред­ска­зать недо­ста­ток про­из­во­ди­тель­но­сти, ко­то­рый бу­дет у бу­ду­щей про­грам­мы.

IONIC 2

Но­вая ар­хи­тек­ту­ра недав­но вы­шед­ше­го Angular 2 да­ва­ла нам на­деж­ду на уве­ли­че­ние про­из­во­ди­тель­но­сти. Ionic 2, с дру­гой сто­ро­ны, предо­став­лял го­раз­до луч­ший ин­тер­фейс и да­вал ощу­ще­ние на­тив­но­го при­ло­же­ния, а это про­сто фан­та­сти­ка!

Пе­ред тем, как оста­но­вить­ся на Ionic 2, мы ви­дим несколь­ко про­блем:

  • Всё-та­ки это ги­брид­ное при­ло­же­ние и оно не по­ка­жет су­пер-про­из­во­ди­тель­но­сти
  • Ionic 2 всё ещё в со­сто­я­нии бе­ты
  • Angular 2 это со­вер­шен­но но­вый стек, ко­то­рый нам пред­сто­ит осво­ить
    Так по­че­му же нам не хо­чет­ся рас­ста­вать­ся с ionic 2?

  • Ionic 2 недав­но (при­мер­но 20/12/2016) за­мо­ро­зил свой API, что озна­ча­ет для нас от­сут­ствие круп­ных про­блем с фрейм­вор­ком в бли­жай­шее вре­мя.

  • Це­ле­вые смарт­фо­ны для на­ше­го про­ек­та бу­дут иметь хо­ро­шую про­из­во­ди­тель­ность (в иде­а­ле, Galaxy S3 и бо­лее позд­ние вер­сии).
    И в этом кон­тек­сте, бу­дет ли про­из­во­ди­тель­ность про­бле­мой во­об­ще? Мы так не счи­та­ем. И ду­ма­ем, что хо­ро­шее со­об­ще­ство не ста­нет под­дер­жи­вать мо­биль­ный фрейм­ворк, ес­ли он не со­от­вет­ству­ет ожи­да­е­мой про­из­во­ди­тель­но­сти
    Так, мы сде­ла­ли став­ку на со­об­ще­ство за angular 2 и ionic 2, ко­то­рые ста­нут ве­ли­ко­леп­ным ре­ше­ни­ем на­шей за­да­чи.

И всё на­чи­на­ет­ся… на­чи­на­ет­ся с angular 2

Разработка: Технологии мобильной разработки в 2017 году

Мы на­ча­ли ис­сле­до­ва­ние angular 2 и Ionic 2 с со­зда­ния про­сто­го про­то­ти­па. В про­цес­се со­зда­ния про­то­ти­па мы сфо­ку­си­ро­ва­лись на пе­ре­осмыс­ле­нии UX-ча­сти при­ло­же­ния и по­ка­зы­ва­ли скет­чи ин­тер­фей­са в sketch.io од­но­вре­мен­но для на­ше­го кли­ен­та и раз­ра­бот­чи­ков (Вре­ме­ни на про­ект бы­ло ма­ло, по­это­му нам нуж­но бы­ло из­бе­жать ненуж­ных кор­рек­ти­ро­вок про­ек­та от ко­го-ли­бо).

По­чти на­тив­ные ре­ше­ния

По­ка мы про­дол­жа­ли изу­чать Ionic 2 и не сде­ла­ли окон­ча­тель­ный вы­бор, мы не пе­ре­ста­ва­ли ду­мать и о дру­гом ва­ри­ан­те: По­чти-на­тив­ных при­ло­же­ни­ях.
Это React Native и Native Script…

Оба фрейм­вор­ка гор­дят­ся сво­ей на­тив­ной про­из­во­ди­тель­но­стью. Они ис­поль­зу­ют JavaScript для ло­ги­ки, то­гда как UI от­ри­со­вы­ва­ет­ся на­тив­ны­ми ком­по­нен­та­ми.

Зву­чит очень мно­го­обе­ща­ю­ще!

  • Мень­ше вре­ме­ни на раз­ра­бот­ку
  • Зна­ко­мые тех­но­ло­гии (ну… по­чти)
  • Рас­ту­щее со­об­ще­ство
  • Про­из­во­ди­тель­ность
    Разработка: Технологии мобильной разработки в 2017 году

Очень тя­же­ло сде­лать вы­бор меж­ду React Native и Native Script. Это в кон­це кон­цов окон­чит­ся бит­вой меж­ду Angular 2 про­тив React JS.

Мы про­ана­ли­зи­ро­ва­ли до­ступ­ные ком­по­нен­ты и биб­лио­те­ки, необ­хо­ди­мые на­ше­му при­ло­же­нию.

На­ши опа­се­ния

  • Необ­хо­ди­мые пла­ги­ны:
    – Ска­нер штрих­ко­дов
    – NFC
    – Card.io
    – Push-но­ти­фи­ка­ции
    – Ска­нер от­пе­чат­ков паль­ца
    – API ка­ме­ры
    – Го­ло­со­вой API
    – Google кар­ты
    – Bluetooth
  • Воз­мож­ность ка­сто­ми­за­ции сти­ля при­ло­же­ния
  • Ста­биль­ность пред­ла­га­е­мых API
    (мы не хо­тим, что­бы при­ло­же­ние сло­ма­лось в бу­ду­щих вер­си­ях фрейм­вор­ка)
    С точ­ки зре­ния на­ших опа­се­ний, оба фрейм­вор­ка иде­аль­ны.

  • +1 за React Native из-за име­ю­ще­го­ся у него пла­ги­на к Card.io, то­гда как у Native Script по­ка не бы­ло та­ко­го.

  • +1 за Native Script за име­ю­щи­е­ся воз­мож­но­сти сти­ли­за­ции при­ло­же­ния.
    Сно­ва ни­чья!

Окон­ча­тель­ный вер­дикт

Разработка: Технологии мобильной разработки в 2017 году

Что нам вы­брать…? Ionic 2? React Native? Или Native Script?

И мы вы­бра­ли Ionic 2… Ба­бах!

Слиш­ком тя­же­ло вы­брать луч­ше­го из все­го пе­ре­чис­лен­но­го. Всё, что мы мог­ли, это вы­брать са­мое удоб­ное ре­ше­ние для на­ше­го про­ек­та (По край­ней ме­ре, мы на­де­ем­ся на это).

Но по­че­му Ionic 2?

Вот несколь­ко при­чин…

  • У Ionic 2 наи­боль­шее со­об­ще­ство
  • Все нуж­ные нам пла­ги­ны уже есть в нём
  • Мы та­к­же мо­жем со­брать windows-при­ло­же­ние на этой ба­зе
  • Нам уже из­ве­стен этот стек и ни­че­го не нуж­но изу­чать
  • Typescript — Луч­ший ин­стру­мент!
  • Боль­шой +1 за ка­сто­ми­за­цию и сти­ли

Это всё?

Разработка: Технологии мобильной разработки в 2017 году

Од­на из глав­ных при­чин вы­бо­ра Ionic 2 — это Angular 2! Вы удив­ле­ны? Всё про­сто…

В бу­ду­щем, ко­гда кли­ент ре­шит пе­рей­ти на на­тив­ные при­ло­же­ния, Native Script ста­нет на­шим спа­се­ни­ем. Мы уве­ре­ны, что Native Script к это­му вре­ме­ни уже бу­дет иметь под­держ­ку windows-при­ло­же­ний. И нам не нуж­но бу­дет пе­ре­пи­сы­вать всю ло­ги­ку за­но­во! Нам нуж­но бу­дет про­сто со­здать недо­ста­ю­щие ком­по­нен­ты ин­тер­фей­са и пе­ре­со­брать при­ло­же­ние.

Вы не ду­ма­е­те, что это офи­ген­ный план?

За­клю­че­ние

Два клю­че­вых мо­мен­та, на ко­то­рых мы сде­ла­ли став­ку

  1. Здо­ро­вое со­об­ще­ство это ключ к успе­ху
  2. Angular 2 и Typescript — фан­та­сти­че­ский ду­эт

Пре­ду­пре­жде­ние

Эта ис­то­рия по­яви­лась в на­ших боль­ных го­ло­вах, по­ка мы ис­ка­ли на­ше ре­ше­ние. Будь­те го­то­вы уди­вить­ся :P

Ори­ги­нал ста­тьи

comments powered by Disqus