Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

HTML фреймворк для разработки мобильных приложений под iOS – Framework7

Активное развитие рынка смартфонов побуждает разработчиков создавать новые фреймворки. Разумеется, что со временем останутся только самые популярные, а все остальные просто исчезнут, однако на мой взгляд имеет смысл следить за появлением новых игроков на рынке. Интересные решение, новые подходы, это прекрасная почва для саморазвития.

Сегодня я хочу рассказать о фреймворке Framework7, который разрабатывается компанией idangero.us. Кстати, интересный факт – это российская компания, находится в Ростове-на-Дону, хотя по сайту это не заметно, потому что он ориентирован исключительно на западного клиента.

Framework7 заточен под разработку приложений для iOS. Дизайн всех его виджетов взят из последней спецификации яблочной компании, так что даже если на в принципе конечное приложение можно скомпилировать и под Android (используется все тот же PhoneGap), то на практике это не имеет особого смысла. Дизайн этих двух систем слишком разный – и не стоит их смешивать. Плюс к тому видимо, все тесты прошли тоже только под iOS, а значит только под нее можно рассчитывать на минимальное количество глюков.

framework7-ui

Если ionic framework является больше графическим и ui решением, а весь его функционал основывается на работе AngularJS, то в случае с Framework7 все иначе. Он не использует по умолчанию сторонние библиотеки. Весь JS написан его создателями и сторонние библиотеки явно не используются. Хорошо, это или плохо сказать сложно, все зависит от поставленных задач.

Стоит так же отметить, что фреймворк продуман с хорошей анимацией и заточен под работу приложений для iOS. В итоге посмотреть определенно стоит, но имеет ли смысл использовать каждый решит для себя сам.

Поделиться:

Автозаполнение адресов – мобильный виджет для Ionic framework

Во многих приложениях может понадобиться ввод адреса пользователя. Это может быть ресторанное приложение, доставка посылок, практический любая сервисная служба сегодня выполняет те или иные работы на дому у клиента. Для того что бы автоматизировать процесс заполнения адреса (и для того что бы минимизировать возможные ошибки) стоит использовать автоматическое заполнение адреса.

Один из таких сервисов предоставляется гуглом. Пример работы этого сервиса можно посмотреть на самом сайте поискового гиганта – вот по этой ссылке. Использовать этот сервис на сайте – очень просто, но могут возникнуть сложности при использовании на мобильных телефонах.

Выпадающий список поиска все время норовит оказать под клавиатурой, а в том случае, если его таки удается выловить – оказывается что нет никакой возможности нажать на элементы списка. Они перестают выполнять свою функцию на экране смартфона. Проблема нудная, но решаемая. Можно воспользоваться вот это директивой, которая специально создана для использования в Ionicframework:

geo-google-autocomplete

Скачать ее можно, с github аккаунта автора.

Поделиться:

Добавить поле для ввода даты не всегда просто – Mobiscroll datetime

Одна из проблем разработки web приложений под смартфонов в том, что не все виджеты работают так как нужно. Приходится надеяться на то, что браузер и WebView возьмут на себя решение таких, казалось бы, тривиальных задач как ввод даты. Создать поле для ввода даты действительно очень просто и даже была разработана спецификация html5:

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

Одна из связанных со временем проблем – это установка ограничений. Добавить виджет для выбора даты – это одна задача, а вот чтобы он еще и не давал пользователю выбирать что-то выходящее за рамки – это уже отдельная сложность.

Дополнительная проблема в том, что разрабатывая под смартфоны приходится так же учитывать запросы по дизайну. Нужно чтобы все было приятно глазу и работало без косяков. иначе ваше приложение будет никому не нужно.

mobiscroll-date-time

Для решения этой задачи может вполне подойти виджеты, которые разрабатываются компанией Mobiscroll. Она как раз специализируется на такого рода решениях.

Один из ее виджетов, которым я регулярно пользуюсь это Date & Time. Он отлично помогает решить проблему редактирования даты во всех смартфонах. при этом он очень просто настраивается и хороша работает как с jQuery Moile, так и с AngularJS. Рекомендую попробовать если вы еще не работали с этими виджетами.

Кстати, все их виджеты выложены в ознакомительных целях на гитхабе, так можете скачать вот по этой ссылке.

Поделиться:

Создание приложений для Windows, Mac или Linux при помощи HTML5, CSS и JavaScript

Раз уж я пишу о достаточно широком спектре использования JavaScript и HTML5 в целом, то не могу пройти мимо того, как эти технологии можно применить в разработке приложений для стационарных компьютеров, а не только для смартфонов.

Сегодня речь пойдет о двух платформах, с очень схожим названием: TideKit и TideSDK. Названия схожи в первую очередь в связи с тем, что их разработкой занималась одна и та же группа программистов. Просто на определенном этапе было принято решение разделить проекты, потому что цели у каждого из них были разные. Собственно, история чем то напоминает историю Cordova и PhoneGap.

Итак, давайте посмотрим чем отличаются эти платформы друг от друга. TideKit – это платформа для разработки приложений для десктопа, веба и мобильных устройств; в то время как TideSDK это комплект средств разработки для разработки под десктоп (SDK – Software Development Kit).

TideKit – это не один единственный инструмент разработки. Это платформа для разработки. TideKit соединяет программное обеспечение доступное удаленно с локальными программами установленными на компьютере. Разработчики пишут код используя удобные им инструменты и отдают команды TideKit через командную строку.

TideSDK

TideSDK – предназначена для разработки приложений для компьютера. Она предоставляет кросплатформенный компилятор и одна и та же программа может быть импортирована как на Виндоус, так и на Линукс и Мак.

tidebox

Разумеется, что центральным преимуществом в использовании этих технологии является более быстрая разработка и поддержка всех основных ОС, которыми могут пользоваться клиенты. Одни и те же разработчики могут работать над созданием сайта, приложения для компьютера и для смартфона. Плюс к этому разработка под разные ОС не будет в корне отличаться – за кулисами будут все те же HTML5, CSS и JavaScript.

Чтобы получить более полную картину посмотрите на список операционных систем, поддерживаемых каждой из платформ:

TideKit

  • Windows XP
  • Windows Vista
  • Windows 7
  • Windows 8
  • OSX 10.6 Snow Leopard
  • OSX 10.7 Lion
  • OSX 10.8 Mountain Lion
  • OSX 10.9 Mavericks
  • Ubuntu 12.04
  • Ubuntu 12.11
  • Ubuntu 13.04
  • iOS 6
  • iOS 7
  • Android
  • Ubuntu Server
  • RedHat
  • CentOS

TideSDK

  • Windows XP
  • Windows Vista
  • Windows 7
  • Windows 8
  • OSX 10.6 Snow Leopard
  • OSX 10.7 Lion
  • OSX 10.8 Mountain Lion
  • Ubuntu 12.04
  • Ubuntu 12.11

Ссылки по теме:
http://www.tidesdk.org/
https://www.tidekit.com/

Поделиться:

Создание многоязычного приложения в ангулар – AngularJs Multilingual App

Для многоязычных приложений в ангулар существую хороший модуль angular-translate, который вы уже сейчас можете начать применять в своем приложении.

В этом примере я хочу показать не только как использовать этот модуль, но и как сделать переключатель языков. Думаю, что это достаточно острая необходимость, иначе в чем смысл делать многоязычное приложение :]

Код примера:

See the Pen ng-translate by Artem Demo (@artemdemo) on CodePen.

Ссылки по теме:
http://angular-translate.github.io/
Easy global i18n angularJS language translations for your Angular app

Поделиться:

Material Design – новый подход Гугла к дизайну мобильных приложений

Несколько месяцев назад Гугл анонсировал новую концепцию в своем подходе к дизайну мобильных приложений. Это безусловно было связано с выходом новой версии андроида – Android L. Смартфоны становятся все более производительными, их характеристики все стремительнее улучшаются и, как следствие имеет смысл задуматься об улучшении графической составляющей. И то что Гугл предложил в своей новой концепции не может не радовать, потому что он смог обобщить многие принципы, которые витали в воздухе, но никто не мог их выразить в рамках одной концепции.

material-design

Суть Material Design заключается в метафорах, к которым мы не только привыкли, но которые являются непосредственной составляющей окружающего мира. За этими метафорами лежат тысячелетия истории и опыта поколений. Нам не нужно описывать как льется вода, горит пламя или шелестят листья, все это является частью общего знания. Если мы используем понятную всем метафору, то нам не нужно пояснять как работает та или иная вещь – метафора создаст нужный контекст.

Основная метафора в новом интерфейсе андроида – это поведение листа бумаги, как он передвигается в пространстве, какая интеракция происходит с окружающими его объектами. Далее команда гугла уделила внимание каждому аспекту работы пользователя с приложением: от типографики и новой концепции для иконок, до поведения кнопок и реакции смартфона на клик по одной из них.

Важная часть работы приложение – это то как оно переводит пользователя с одной страницы на другую. Как происходит открытие файла, фотографии или нового документа. Моментальное появление информации на экране – это не самое лучшее решение, гораздо правильнее сделать анимацию выдвижения нового листа сбоку, поверх текущего.

Достаточно сложно описать всю концепцию текстом, потому что основная ее задача – это создание графической среды, позволяющей пользователю проще ориентироваться. Самое лучшее – это изучить ее самому. Вот видео обобщающее некоторые яркие принципы Material Design:

Что можно сказать по поводу всего проекта? Я считаю, что направление крайне правильное. Да, вполне возможно, что некоторые части и принципы будет сложно применить. Вполне возможно, что со временем многое что поменяется, но лично мне это очень нравится. Material Design определенно крайне интересный концепт и уже начинают появляться библиотеки, которые его поддерживают, но об этом я расскажу в следующий раз.

Ссылки по теме:
Google I/O 2014 – Material design principles
Material Deisgn Specs

Поделиться:

Почему мы до сих пор используем JavaScript и нет альтернатив?

Почему мы используем JavaScript? Ведь есть такое количество других языков, которые настолько лучше в столь разных аспектах. Потому что, как сказал Ричард Гебриал “Чем хуже, тем лучше” (Worse is better). Не имеет значения, насколько более продвинутая технология находится в вашем распоряжении. Имеет значение, только то насколько просто и быстро вы можете встроить это в ваш рынок. Насколько проще вашим пользователям будет адаптировать вашу технологию, решение или программу в его условиях.

JavaScript-tiger

Если коротко, то то что доступно повсеместно, то и будет использоваться. Поэтому очень сложно представить себе какое-то альтернативное решение, которое бы смогло заменить JavaScript. Подумайте, например, что может заставить компании разрабатывающие популярные браузеры имплементировать еще один язык разработки параллельно с JavaScript? Очень сложно представить ситуацию, в которой это будет возможно.

JavaScript, это уникальный язык. Он не разрабатывается какой-то определенной компанией. Он не принадлежит кому конкретно. По сути любой разработчик браузера может встать в один прекрасный день и сказать, что он будет выпускать новые функции, не поддерживающиеся в других браузерах. Безусловно в этом нет смысла, потому что кто же будет использовать то, что ни в одном другом браузере все равно работать не будет. :]

Что же заставляет JavaScript двигаться вперед и продолжать развиваться? В первую очередь стоит сказать, что развитие JS – это был достаточно сложный и долгий процесс, который начался еще в 1995 году, когда компания Netscape впервые выпустила самый первый браузерный язык программирования – Mocha, который в последствии стал основой для JS. В отсутствии компании, которая бы отвечала за разработку языка для всех браузеров, единственное, что двигало развитие – был рынок и конкуренция.

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

На сегодняшний день вполне очевидно, что JavaScript это серьезный язык программирования, который применяется в многих проектах порой не связанных с браузерами. Поэтому вряд ли назреет необходимость и рыночная выгодность в замене его на какую либо альтернативу.

Хорошо это или плохо?

На самом деле я не вижу какого-то смысла даже задаваться этим вопросам и отношу его к разряду риторических. В первую очередь, это связанно с тем, что отсутствие альтернатив это данность и тут никаких вариантов нет. Поэтому самое очевидное решение – это смириться и начать учить JavaScript :]

Поделиться:

Scope в директивах ангулара – AngularJS Directives

Директивы в ангуларе это обширная тема, о которой можно достаточно много говорить. Сегодня я хочу расширить разговор о директивах и описать особенности их скопа.

Скоп директивы может быть полностью изолирован от скопа родителя. Единственная связь – это через полученные при инициализации данные в атрибутах и содержание самой директивы. Однако, что делать, если нужно привязать данные директивы к данным в родительском скопе так что бы если есть изменения с одной стороны, то они транслировались бы повсеместно. Для этой цели у нас есть привязка данных.

Существует три типа привязки данных в директивах:

1. Текстовая привязка (префикс: @)
2. Двусторонняя привязка (префикс: =)
3. Односторонняя привязка (префикс: &)

@ Текстовая привязка

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

See the Pen Angular Directive – @ binding by Artem Demo (@artemdemo) on CodePen.

= Двусторонняя привязка

Двусторонняя привязка позволяет связать объекты и передавать уже их, а не только текст. При этом изменения в передаваемом объекте будут отражаться везде – как в директиве, так и в родительском скопе.

& Односторонняя привязка

Односторонняя привязка, это чуть более хитрый пример. Они предназначена в первую очередь для передачи вызова функции из родительского скопа в скоп директивы:

See the Pen Angular Directive – & binding by Artem Demo (@artemdemo) on CodePen.

Предыдущие статьи об директивах можно найти вот по этой ссылке.

https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/
http://www.sitepoint.com/practical-guide-angularjs-directives-part-two/
http://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope

Поделиться:

Что будет в следующей версии JavaScript? – ECMAScript 6

JavaScript – это один из самых динамично развивающихся языков программирования. Предыдущая спецификация языка вышла в 2009 году и на сегодняшний день очевидно назрела необходимость для перевода JavaScript на следующий уровень. Причин тому вагон и маленькая тележка – JS уже давно вышел за пределы браузеров на стационарных компьютерах и используется в огромном количестве направлений: это и серверный язык (Node.js), это и язык для работы с железом (tessel.io), движок для разработки игр (scirra.com) я уже не говорю о применении JS в мобильном интернете и современных браузерах.

Так вот на июнь 2015 года запланирован выход следующей версии языка. Это достаточно серьезное событие, потому что в описании есть очень много нововведений выводящих язык на совершенно другой уровень. О некоторых из них я и хочу рассказать в этом посте.

Классы

В JS появятся классы! Пожалуй, одно из самых ожидаемых нововведений. На отсутствие классов в JS жаловались уже давно и то решение, которое да было предложено в языке многих не устраивало. Теперь же ситуация в корне изменится и это хорошо :]

Оператор =>

В новой версии языка вводится новый оператора =>, который будет использоваться при вызове функции. Это сокращенный вариант вызова безымянной функции, помимо этого он позволяет перетягивать родительский контекст в тело новой функции. Другими словами оператор this внутри новой функции будет относиться к родителю.

Как сейчас мы пишем код:

Как этот же код может быть переписан при помощи нового оператора =>

Блоковое определение переменных

В ECMAScript 6 вводится новая команда для определения переменной. Если до этого мы пользовались командой var, то теперь у нас есть let. Для сравнения давайте посмотрим на два примера.

Код, с командой var:

Это одна из классических проблем в работе с JS. Этот код не будет работать так, как программист может ожидать. Функции, которые будет вызваны в runCallbacks() все будут использовать последнее значение, которое переменные v, p получили. Это связанно с тем, что несмотря на то, что мы объявляем их внутри цикла, JS все равно перенесет их наружу.

Теперь давайте посмотрим, как этот же код можно переписать с использованием команды let:

Теперь этот код начнет работать так, как мы и ожидаем, потому что при каждом вызове цикла будет созданы новые переменные v, p

Ссылки по теме:
https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript-august-2014
http://www.wintellect.com/blogs/nstieglitz/5-great-features-in-es6-harmony
https://github.com/lukehoban/es6features

Поделиться:

Разработка браузерного приложения с использованием AngularJS и jQuery Mobile – все видео

Разработка браузерного приложения с использованием AngularJS и jQuery Mobile – все видео уроки в одном плейлисте. Чтобы два раза не вставать и можно было посмотреть одним махом.

Полный исходный код приложения можно скачать вот здесь.

Поделиться: