BitrixMobile VS Bootstrap

BitrixMobile VS Bootstrap

<p>Данная заметка была опубликована за 1 сутки до конференции &quot;Формула Сайта&quot; 2013 в Москве, где этот доклад <a href="/information/about/Aleksey/" >Мне</a> предстояло читать совместно с Алексеем Новиковым. В статье приводятся все основные аспекты по которым на следующий день проводилось сравнение продуктов, актуальные на конец 2013 года.</p> <p>В статье не затрагивается ряд вопросов, дабы не мешать сравнению продуктов. Как это ни удивительно для меня, однако на данный момент наблюдается определённый паритет между технологиями. Кто получит преимущество покажет самое ближайшее время.</p> <p><img src="/upload/medialibrary/a46/a46f0de41197eee6743814944d7c2f39.png" title="Мобильное приложение BitrixMobile VS Адаптивный Дизайн Bootstrap - 2013" border="0" alt="Мобильное приложение BitrixMobile VS Адаптивный Дизайн Bootstrap - 2013" width="600" height="400" /></p> <p> <b>Что такое мобильное приложение?</b> </p> <p>В рамках данной дискуссии мы не будем углубляться в особенности архитектурных решений и технических реализаций. Мы примем, что мобильное приложение - это программа, устанавливаемая из Магазина приложений (Google.Play, Appstore, WindowsMarketplace и т.п.) и находящаяся на телефоне владельца. Запускается такое приложение непосредственно с телефона.</p> <p>BitrixMobile - один из технических способов создания приложения сразу для 2 платформ: Android и iOS (возможно в будущем добавятся и другие платформы).</p> <p>В рамках дискуссии говоря мобильное приложение мы будем подразумевать именно приложение, сделанное на BitrixMobile.</p> <p><b>Что такое Адаптивный Дизайн?</b></p> <p>Это способ разработки обычного веб сайта, размещённого в интернете, когда владельцы разных устройств получают одну и ту же версию сайта (и информацию), адаптированную под возможности их устройства. Т.е. владельцы телефонов с маленькой диагональю видят крупные элементы навигации и узкие колонки, а владельцы десктопов и ноутбуков с широкоформатными мониторами - обычный сайт с множеством колонок и привычными элементами управления.</p> <p>Важно, что адаптивный дизайн - это концепция в рамках которой информация подаётся в рамках 1 сайта, который выглядит по разному, а не отдельной версии сайта.</p> <p>Адаптивный дизайн может быть реализован с помощью множества разных технологий, однако в последнее время большую популярность набрали так называемые CSS фреймворки (т.е. наборы правил и решений, призванные облегчить работу по созданию сайта) и пожалуй самый известный из них - Twitter Bootstrap. Это, впрочем, не отменяет того факта, что адаптивный дизайн можно реализовать вовсе без Bootstrap или с использованием только отдельных его частей и рекомендаций.</p> <p>В рамках дискуссии мы будем подразумевать, что понятия Bootstrap и Адаптивный дизайн идентичны.</p> <p> <br /> </p> <p><i>Поскольку дискуссия подразумевает смертельную битву между 2 участниками, мы сгруппируем параметры по которым производится сравнение 2 группы и они будут идти последовательно переходя от одной темы к другой, как если бы противники использовали слабые места друг друга и коронные приёмы для эффективной атаки:</i></p> <h2>Раунд 1 - технологический</h2> <p><u><font size="4">Цена лицензии</font></u></p> <p>Адаптивный дизайн не требует приобретения каких-либо лицензий, сама технология <b>бесплатна</b>! Цена лицензии на 1 приложение BitrixMobile на 2013 составляет 47.900 рублей.</p> <p><b>Адаптивный дизайн получает 1 очко!</b></p> <p>результат: 0-1</p> <p> <br /> </p> <p><font size="4"><u>Цена разработки дизайна</u></font></p> <p>Разрабатывая дизайн мобильного приложения нужно отрисовать только экраны мобильного приложения. При этом есть стандартные нативные элементы, дизайн которых в большинстве случаев не изменяют и на данный момент их можно оставить дефолтными.</p> <p>Рисуя дизайн для адаптивной вёрстки приходится отрисовывать все экраны для всех типов устройств. Если сайт предполагает работу только в 2 режимах, то это будет &quot;десктоп&quot; и &quot;телефон&quot;, однако возможны варианты когда будет отрисовано 4 и даже более вариантов (телефон вертикально, телефон горизонтально или планшет вертикально, планшет горизонтально, десктоп узкий, десктоп широкий). Учитывая, что некоторые варианты дизайнов должны плавно переходить один в другой (например десктопные должны &quot;резиниться&quot; и массштабировать), а так же, что изменения вносимые в 1 макет придётся вносить и во все остальные цена отрисовки адаптивного дизайна растёт не линейно, а экспоненциально с числом поддерживаемых вариантов внешнего вида.</p> <p><b>Мобильное приложение отбивает 1 очко обратно!</b></p> <p>результат: 1-1</p> <p> <br /> </p> <p><font size="4"><u>Цена сборки (разработки)</u></font></p> <p>Адаптивный дизайн - это просто сайт. Поместили компоненты и они работают. Размещаем их 1 раз. Шаблоны натягиваются идентично обычному дизайну. Если вы знаете как устроен CSS сложностей не будет. Следовательно, компетенция разработчика не должна быть особенно высокой, накладные расходы тем самым снижаются.</p> <p>BitrixMobile - гибридное приложение, использующее 1С-Битрикс в качестве серверной части. Однако для разработки приложения всё равно необходимо знать тонкости работы (файлы настроек, JS API для работы с нативными элементами, отдельные компоненты и т.п.). Компетенция разработчика выше, таких разработчиком (и студий) меньше =&gt; цена разработки выше!</p> <p><b>Снова 1 очко в пользу Адаптивного Дизайна!</b></p> <p>результат: 1-2</p> <p> <br /> </p> <p><font size="4"><u>Скорость внедрения</u></font></p> <p>Это может показаться немного парадоксальным в свете предыдущего пункта, НО...</p> <p>Внедряя мобильное приложение можно построить работу параллельно с работой по разработке сайта. Гибкие методологии и опытные команды здесь могут сократить время внедрения в 2, если не 3 раза.</p> <p>Внедряя адаптивный дизайн очень сложно выстроить работы параллельно. Каждое изменение должно быть протестировано во всех версиях. Багов больше - больше период тестирования, дольше внедрение.</p> <p><b>Мобильное приложение берёт реванш!</b></p> <p>результат: 2-2</p> <p> <br /> </p> <p><font size="4"><u>Независимость изменений</u></font></p> <p>Одно из главных преимуществ адаптивного дизайна - единая &quot;точка входа&quot;. Внося изменения мы сразу наблюдаем как они применились для всех версий сайта, в том числе мобильной. Экономия времени и сил сотрудников, которые можно направить на другие полезные задачи!</p> <p>Если же нам нужно поменять какой-то элемент на сайте и в мобильном приложении, то зачастую придётся делать это дважды, поскольку фактически это 1 разных системы, 2 разных &quot;сайта&quot;.</p> <p><b>Адаптивный дизайн побеждает!</b></p> <p>результат: 2-3</p> <p> <br /> </p> <p><font size="4"><u>Независимость изменений</u></font></p> <p>То, что является сильной стороной так же будет и слабой.</p> <p>Мобильное приложение и сайт можно сделать полностью разными, независимыми друг от друга. Можно задавать разные цены и скидки для интернет-магазинов, можно выводить даже разный контент!</p> <p>Адаптивная вёрстка - это разное представление одного и того же контента. Зачастую придётся очень аккуратно подгонять свои тексты и картинки и следить, чтобы во всех версиях сайта они смотрелись хорошо. Это решается введением бизнес-процессов, однако не добавляет гибкости...</p> <p><b>BitrixMobile одерживает победу!</b></p> <p>результат: 3-3</p> <p> <br /> </p> <p><font size="4"><u>Документация</u></font></p> <p>Документация для BitrixMobile ещё в процессе написания. Продукт новый, над ним работает коммерческая компания и на всё рабочих рук просто не хватает.</p> <p>Для таких же монстров, как Bootstrap сообщество энтузиастов написало уже десятки, если не сотни тысяч статей как решить практически любую проблему и реализовать практически любое требование. Интернет полон так же и видео уроками на любых языках мира!</p> <p><b>Bootstrap и огромное сообщество побеждают &quot;всухую&quot;</b></p> <p>результат: 3-4</p> <p> <br /> </p> <p><font size="4"><u>Возможность развернуть из коробки</u></font></p> <p>BitrixMobile можно развернуть из коробки. В поставке есть решение интернет-магазина, которое просто переделать в просто информационное приложение, всего лишь удалив каталог. Косметические изменения достаточные для большинства проектов - замена цвета и контента. Все приложения универсальны!</p> <p>Развернуть из коробки сайт на 1С-Битрикс конечно можно. И новый сайт интернет-магазина даже обладает адаптивным дизайном. Однако, этот дизайн удовлетворит далеко не каждого заказчика. Просто потому, что на &quot;большом&quot; сайте развернуться фантазии есть где и требования к нему выше. Реализуя все эти требования необходимо понимать, что каждый раз необходимо тестировать их в каждом варианте отображения сайта и проверять не появились ли баги - это делает процесс внесения правок более длительным, тем самым уменьшая количество правок во внедрении &quot;из коробки&quot; и постепенно превращая его в полноценный проект с переработкой дизайна и функционала.</p> <p><b>Очко в пользу Мобильного приложения!</b></p> <p>результат: 4-4</p> <p> <br /> </p> <h2>Раунд 2 - Ценность для Бизнеса</h2> <p><u><font size="4">Простота 1 контакта с клиентом</font></u></p> <p>Для того чтобы &quot;загнать&quot; пользователя в мобильное приложение нужно заставить его установить. Самый распространённый сценарий - маркет производителя (Appstore и Google Play), однако там уже сотни тысяч приложений и новому очень непросто выделиться! Приходится перенаправлять людей откуда-то ещё, рекламировать приложение, которое само по себе является вашим рекламным инструментом.</p> <p>Адаптивный сайт - это просто сайт. Если у вас есть траффик, если вас знают или находят, то у вас будут в том числе и мобильные пользователи. Технологии просты и отлажены.</p> <p><b>Адаптивный дизайн вновь отрывается от соперника по очкам!</b></p> <p>результат: 4-5</p> <p> <br /> </p> <p><font size="4"><u>Возможность повторного контакта</u></font></p> <p>Сайт сам по себе никаких инструментов для повторного контакта не имеет. Как максимум пользователь может занести ваш сайт в избранное браузера, а вы можете дать ему куку и при определённых договорённостях с другими сайтами пытаться показывать свою рекламу.</p> <p>Возможности мобильного приложения гораздо шире за счёт PUSH-уведомлений - вы можете послать сообщение прямо на экран телефона (это выглядит как обычное сервисное сообщение)! Пользователь мог забыть про вас, но если вы не забудете про него, то всегда есть шанс повторного контакта!</p> <p>Важно лишь не перейти тонкую грань, отделяющую вас от спама.</p> <p><b>Оспорить победу Мобильного приложения невозможно!</b></p> <p>результат: 5-5</p> <p> <br /> </p> <p><font size="4"><u>Доступ к устройствам: камере, микрофону, GPS</u></font></p> <p>Казалось бы безоговорочная победа Мобильного приложения?</p> <p>Нет, несмотря на то, что мобильные приложения могут пользоваться устройствами телефона, такими как микрофон и камера, разработанный стандарт HTML-5 позволяет ровно всё то же самое сделать и с помощью браузера обычному адаптивному сайту! За пределами далеко ходить нет нужды - youtobe!</p> <p>Возможно в будущем, мобильное приложение BitrixMobile позволит использовать и другие устройства, такие как акселерометр. Однако пока нет точных планов и сроков, а HTML-5 очень активно развивается и кто скажет, не успеет ли он так же переломить привычную парадигму разработки и достучаться до тех устройств, которые сейчас кажутся недоступными...</p> <p><b>Как ни удивительно, но это ничья!</b></p> <p>результат: 5-5</p> <p> <br /> </p> <p><font size="4"><u>OFFline работа</u></font></p> <p>Теоретически это одно из самых сильных мест нативного приложения. Однако по состоянию на декабрь 2013 BitrixMobile не умеет использовать даже кеширование страниц (не то что пред-загрузку контента). Фактически без интернета в настоящий момент оказываются неработоспособными и адаптивный сайт и гибридное приложение.</p> <p>Когда же наконец появится обещанное кеширование BitrixMobile заслуженно заберёт очко в свою пользу в этой категории.</p> <p><b>И снова ничья! <i>Однако у Мобильного приложения все шансы уже в будущем году победить и здесь!</i></b></p> <p>результат: 5-5</p> <p> <br /> <font size="4"><u> Охват аудитории</u></font></p> <p>Чтобы человек установил ваше приложение его нужно либо заставить скачать установщик, либо загнать в маркет на страницу приложения. Для этого все методики хороши, в том числе реклама на своём собственном сайте и в маркете, вот только... цепочка коммуникации удлиняется. Мы вынуждены &quot;продавать&quot; и рекламировать инструмент, которым будем потом &quot;продавать&quot;.</p> <p>А адаптивный сайт - это обычный сайт. Все методики отточены и если у вас уже есть траффик или вас можно найти в поисковике, то свою аудиторию вы соберёте!</p> <p><b>Безоговорочная победа Адаптивного дизайна!</b></p> <p>результат: 5-6</p> <p> <br /> </p> <p><font size="4"><u>Маркетинговый эффект</u></font></p> <p>15 лет назад иметь сайт было престижно. 5 лет назад иметь сайт стало насущной потребностью. Поэтому сегодня мобильным или адаптивным сайтом вы никого не удивите.</p> <p>В то же самое время запуск мобильного приложения пока ещё событие. Это PR повод и иногда об этом можно даже говорить со СМИ. Не даром, например по Бизнес-ФМ периодически говорят как о новости о запуске мобильного приложения для всех основных платформ (не только Android и iOS, но и WindowsPhone).</p> <p><b>Завершающим ударом Мобильное приложение добивается ничьей во всём поединке!</b></p> <p>результат: 6-6</p> <p> <br /> </p> <h2>Сравнительная таблица результатов:</h2> <p> <br /> </p> <table border="0" cellpadding="5" cellspacing="1"> <tbody> <tr><td></td><td> <div style="text-align: center;"><b>Мобильное приложение</b></div> <b> <div style="text-align: center;"><b>(BitrixMobile)</b></div> </b></td><td> <div style="text-align: center;"><b>Адаптивный Дизайн</b></div> <b> <div style="text-align: center;"><b>(Bootstrap)</b></div> </b></td></tr> <tr><td>Цена лицензии</td><td style="text-align: center;">-</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td></tr> <tr><td>Цена разработки дизайна</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td><td style="text-align: center;">-</td></tr> <tr><td>Цена сборки (разработки)</td><td style="text-align: center;">-</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td></tr> <tr><td>Скорость внедрения</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td><td style="text-align: center;">-</td></tr> <tr><td>Независимость изменений <br /> (<i>скорость и удобство за счёт 1 правки</i>)</td><td style="text-align: center;">-</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td></tr> <tr><td>Независимость изменений <br /> (<i>гибкость за счёт независимости</i>)</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td><td style="text-align: center;">-</td></tr> <tr><td>Документация</td><td style="text-align: center;">-</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td></tr> <tr><td>Возможность развернуть из коробки</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td><td style="text-align: center;">-</td></tr> <tr><td>Простота 1 контакта с клиентом</td><td style="text-align: center;">-</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td></tr> <tr><td>Возможность повторного контакта</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td><td style="text-align: center;">-</td></tr> <tr><td>Доступ к устройствам: камере, микрофону, GPS</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td></tr> <tr><td>OFFline работа</td><td style="text-align: center;"> - </td><td style="text-align: center;"> - </td></tr> <tr><td>Охват аудитории</td><td style="text-align: center;">-</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td></tr> <tr><td>Маркетинговый эффект</td><td style="text-align: center;"><img src="/upload/medialibrary/6f3/6f34a3555d5dc0884760b37992a0d87f.png" border="0" width="50" height="32" title="+" alt="+" /></td><td style="text-align: center;">-</td></tr> </tbody> </table> <p> <br /> </p> <h2>Итоги</h2> <p>Подводя итог нашей битве необходимо сказать, что оборвалось оно самым неожиданным для автора образом - я просто не нашёл больше аргументов в пользу той или иной стороны. Я буду признателен читателям этой статьи и зрителям семинара &quot;Формула Сайта&quot;, если вы на форуме, по электронной почте или через форму обратной связи сообщите мне своё мнение по поводу тех или иных моментов. Возможно что-то ушло от внимания, однако в целом результат соответствует моим ожиданиям - Мобильное приложение пока столь же актуально и перспективно, как и хороший адаптивный сайт!</p> <p>Эти 2 инструмента не исключают, а лишь дополняют друг друга!</p> <p><img src="/upload/medialibrary/5a9/5a91525be6444e700b2fe521e9035a93.png" title="BitrixMobile VS Bootstrap - Итоги - 2013" hspace="0" vspace="5" border="0" alt="BitrixMobile VS Bootstrap - Итоги - 2013" width="600" height="450" /></p> <p>Мобильное приложение BitrixMobile и Адаптивный сайт (например на Twitter Bootstrap) в настоящее время решают несколько разные задачи разными методами и прекрасно дополняют друг друга:</p> <p> <br /> </p> <table border="0" cellpadding="5" cellspacing="1"> <tbody> <tr><td><b>BitrixMobile</b></td><td><b>Адаптивный сайт</b></td></tr> <tr><td> <ul> <li>Нишевые решения</li> <li>Сценарные решения</li> <li>Длительная работа с клиентом</li> <li>Особый функционал</li> </ul> </td><td> <ul> <li>Полноценный сайт</li> <li>Универсальное решение</li> <li>Привычные цены и технологии</li> </ul> </td></tr> </tbody> </table> <p> Я рекомендую не терять из виду оба этих инструмента, однако для начала сосредоточиться на одном из них, том которое лучше решает ваши задачи в ближайшей перспективе и которое вам понятнее. В будущем же, при появлении дополнительных ресурсов дополнить свою стратегию вторым решением, либо, при смене приоритетов, заменить инструмент. </p> <p>Помните - <b>для сильного удара необходимо бить не растопыренной ладонью, но сжатым кулаком!</b></p> <p> <br /> </p> <div style="text-align: right;"><a href="http://plus.google.com/112316725504958628550?rel=author" target="_blank" >Задойный А.В.</a></div>