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

Применение гибридных мобильных приложений

Я уже давно пишу о том, как создаются веб приложения, о технологиях о том как добиться тех или иных результатов в разработке, но одна важная тема так и осталась вне внимания. Где же применяются мобильные веб приложения? Идея создавать приложения под смартфоны без того чтобы использовать нативные языки разработки (которые не так уж и просты в изучении) кажется достаточно привлекательной, особенно принимая во внимание тот факт, что для разработки требуются широко известные HTML, CSS и JS. Я не говорю, что легко найти людей, которые хорошо знают эти языки, однако, сама идея разработки приложения уже выглядит проще.

native-hybrid-iphone-app

Итак, давайте в общих чертах опишем, где гибридное приложение может найти применение:

  • Веб сайт работающий как приложение.
  • Комплексное мобильное приложение, которое можно залить и скачать на appstore или google play.
  • Добавить функционал в существующее приложение.

1. Создание сайта, работающего как приложение, может быть достаточно интересной идеей. Разумеется, что это не абсолютное решение и всем без исключения его советовать не стоит. Плюс к тому оптимальный подход – это выделить определённый сервис сайта в такое приложение. Например, для сайта ресторана в отдельное приложение можно выделить заказ столика, либо заказ доставки, с выбором блюд и времени доставки.

2. Гибридное приложение может быть упаковано в нативную оболочку и выставлено для всеобщего доступа. Сфера применения таких приложений очень широка. Разумеется, что тут есть определённые ограничения, как например работа со сложными вычислением или графикой.

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

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

Встраиваться в приложения порталы. Большие фирмы, например тот же paypal продвигают свои приложения, которые объединяют несколько бизнесов в одной упаковке. Самый быстрый способ встроить свой бизнес в такое приложение через webview. При этом подходе, если вы захотите обновить своё приложение вы не будет зависеть от родительской оболочки.

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

Поделиться:

Linux Mint

На своих домашнем и рабочем компьютерах перешел с Ubuntu на Linux Mint. Спокойствие и гармония снова с нами -) Минт прекрасная система с очень простым и приятным GUI. При всем при этом это все та же Убунту, с теми же командами в командной строке. Так что пока вижу только одни плюсы. Последние 3 месяца полет нормальный – рекомендую всем.

Linux_Mint

Поделиться:

Мокро-библиотеки JavaScript – MicroJS

Сегодня я хотел бы вам рассказать о достаточно интересном ресурсе, который коллекционирует микробиблиотеки, написанные на JavaScript – MicroJS. Чем они могут быть полезны? Ну оставим тот факт, что всегда полезно иметь много доступных инструментов и использовать их по мере необходимости.

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

micro-js

Ссылки по теме:
MicroJS

Поделиться:

Проблема background-position и background-position-x

Хорошей практикой считается использовать спрайты для отображения иконок.
Под спрайтами я подразумеваю аггрегирование всех иконок / картинок в одном файле и отображение их через background: url()

Когда для каждой иконки меняется позиция background по осям X и Y. Однако, не все браузеры одинаково работают со всеми настройками позиционирования.
Для качественной работы стоит использовать background-position: X Y, а не более понятные background-position-x or background-position-y
Если background-position поддерживается всеми современными браузерами, то background-position-x поддерживается только хромом, что неприятно, но ничего с этим не поделать ^_^

Поделиться:

Библиотека ReactJS – первый взгляд

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

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

Для начала давайте разберемся, в терминологии.

Элементы реакта это объекты JavaScript, которые представляют элементы HTML. Их нет в браузере. Они представляют элементы DOM такие как h1, div, section и другие.

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

JSX – это язык программирования компилируемый в JavaScript. Он разрабатывается японской компанией DeNA Co. Этот язык не является обязательным условием для работы с реактом, однако огромное количество примеров заточено именно под него, так что имеет смысл разобраться. Плюс к тому с его использованием код ReactJS выглядит действительно приятнее и читабильнее. Другое дело, что неподготовленный программист примет его скорее за черную магию, но это уже скорее издержки профессии.

Давайте, для наглядности, на небольшом примере посмотрим в чем разница между реактом на JSX и на ванильном JS:

JSX

JS

Как вы можете заметить – читабильность кода на чистом JavaScript ниже чем на JSX.

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

See the Pen ReactJS – #1 Example by Artem Demo (@artemdemo) on CodePen.

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

Ссылки по теме:
http://facebook.github.io/react/

Поделиться:

Добавление дефолтивной опции в select – AngularJS

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

Решение, как оказалось достаточно простое и легко применимо в любом проекте.

Поделиться:

Графическая библиотека three.js

Сегодня хотелось бы поговорить о достаточно популярной графической библиотеке (или графическом движке) three.js – библиотека предназначена для вывода графики. Сегодня хочу показать простой пример для начала работы с ней.

three-js

Для старта на потребуется всего лишь несколько вещей. Во-первых, сама библиотека (неожиданно). Возьмем ее из CDN:

https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js

Далее используем совсем простой CSS, только для того чтобы канвас лег без проблем:

Далее, что бы не отставать от мировых тенденций – напишем весь код с использование синтаксиса ES6. Он, разумеется, в браузерах еще не поддерживается, но для решения этого вопроса есть два проверенных способа (есть и больше, но мне нравятся эти два): TypeScript и traceur. Оба они умеют перекомпилировать код в ES5.

See the Pen three test – es6 by Artem Demo (@artemdemo) on CodePen.

Как видите библиотека достаточно интересная, стоит поизучать ее повнимательнее.

Ссылки по теме:
http://threejs.org/

Поделиться:

Когда только начинаешь учить что-то новое

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

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

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

Это неизбежные ощущения, которые обуревают любого программиста, который сталкивается с фремворками. Это то, через, что и я проходил, когда только начинал разбираться с ангуларом (чего только стоит то как он работает с зависимостями, как буд-то не на JavaScript’е программируешь). То же самое и с разработкой под Андроид – вроде как Java, но там столько настроек и работы с XML файлами, что вроде и не та Java, что приходилось в универе учить.

Самое главное при этом не отчаиваться и не опускать руки. Легче все равно не станет, так зачем сейчас останавливаться?

TRY-AND-FAIL

Поделиться:

Elevator Saga

Онлайн игра для программистов, в которой вы программируете систему работы лифта, для того чтобы обеспечить перемещение жильцов. Если вы считаете себя программистом, и вам нравится JavaScript вам определенно нужно попробовать эту игру ^_^

http://play.elevatorsaga.com/

elevator-saga

Поделиться:

Как использовать ng-model в новой директиве – AngularJs

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

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

В нашем случае нужно ввести дополнительный атрибут тега , который передавал бы данные из директивы во внешний скоп:

В этом случае переменная result будет хранить полученные данные из директивы и можно будет выводить их во внешний скоп:

В самой же директиве нужно объявить новый атрибут в объекте скопа:

Ну и конечно, передавать в него данные когда выбирается элемент:

Рабочий пример:

See the Pen Как использовать ng-model в новой директиве by Artem Demo (@artemdemo) on CodePen.

Ссылки по теме:
Поиск с выпадающим списком на ангулар

Поделиться: