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

Что такое одностраничные веб приложения

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

one-page-web-app

Итак, что же такое одностраничные веб приложения. Если дать определение в одно предложение, то должно получиться что-то вроде этого: одностраничное веб приложение – это приложения весь функционал которого отображается без перехода на другие страницы, т.е. прогрузка нового контента происходит через ajax запросы. И если я уже упомянул то, что контент погружается через ajax запросы, то стоит сразу поговорить о преимуществе этого подхода.

Во-первых (и это очень важный во-первых) снижается нагрузка на сервер – вы запрашиваете только нужную вам часть информации, а не всю страницу. Более того серdер передает именно данные (обычно через json), а не парсит всю страницу. Как следствие при разработке сильно разделяются серверная и клиентская части. Сервер при этом обрабатывает только api запросы, за дизайн и отображение html отвечает клиентская часть.

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

Теперь давайте поговорим об области применения одностраничных веб приложений. Помимо снижения нагрузки на сервер и экономии траффика одна и центровых причин для такого подхода к разработке была создание веб приложений с максимально приближенным к нативному поведению. То есть если вы открываете тот же фотошоп, он же не прогружатся заново в тот момента, как вы открываете новый документ 🙂 Так вот того же хотели добиться одностраничными веб приложениями. Почему вдруг появилась эта необходимость? Ответ достаточно очевиден – появились облака. Интернет подешевел настолько, что 24-х часовой доступ к сети стал реальностью. Огромное количество сервисов стали предоставлять свои услуги через модель SAAS. Наверное самая заметная область это CRM системы и облачные хранилища файлов.

Стоит ли начать применять концепцию одностраничных веб приложений в вашем следующем проекте? Я затрудняюсь однозначно ответить на этот вопрос. Все зависит от типа проектов, с которыми вы ежедневно сталкиваетесь и насколько хорошо знает ваша команда разработчиков клиентскую часть. Однако, я определенно рекомендую подумать в этом направлении :]

Поделиться:

В чем разница между AngularJS и jQuery

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

angularjs-jquery

Тогда в каких случаях нужно выбирать между AngularJS и jQuery. Чтобы ответить на этот вопрос давайте разберемся с тем что такое jquery и для чего создавалась эта библиотека. Обратите внимание, что jquery это именно библиотека, в которой собраны различные функции для манипуляции DOM. Все функции разрабатывались для кросбраузерной поддержки – и это очень важный момент,потому что не смотря на то что все браузеры поддерживают одну и ту же конвенцию, они не все одинаково обрабатывают одни и те же команды.

Казалось бы что ещё желать? На самом деле этот вопрос и является ключевым для понимания нужно ли вам изучать AngularJS. В тот момент, когда он задается, у меня есть 100% подходящий ответ – вам AngularJS не нужен. Это абсолютно точно, можете не заморачиваться. Вам просто не приходилось разрабатывать многофункциональные приложения, это очень легко исправляется – поднимите цены на свои услуги и к вам потянуться более серьёзные проекты 🙂

Ограниченность библиотеки jQuery понимаешь, когда сталкиваешься с задачей по разработке многостраничной административной панели. Когда с каждым изменением нужно обновлять данные в 10 разных местах, или когда для определённого действия нужно подтверждение от 3-х разных api, когда в итоге код начинает выглядеть следующим образом:

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

Работая с jQuery вы сами прописывание ему не только все команды, но и в какой последовательности и когда их всех выполнять. Это удобно, но и отражается на количестве когда, который нужно написать, для того, чтобы обеспечить тот или иной функционал. Именно по-этому jQuery это библиотека, то есть это набор функций, которые можно использовать в той или иной ситуации. AngularJS же это фреймворк, который работает по совершенно другим законам. Вы загружаете в AngularJS свои функции, а уже фреймворк решает когда их исполнять. Звучит как серьёзное ограничение? Но это не так, это всего лишь немного меняет структуру кода, вместе с этим преимущества перемешивают в разы.

Стоит так же отметить что AngularJS и jquery прекрасно работают вместе. В AngularJS уже встроены некоторые базовые функции jQuery, однако если вам нужен более широкий функционал, то вы без проблем можете так же включить файл jQuery.

Поделиться:

Как научиться программировать? – часть 2

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

programming-where-do-you-start

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

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

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

Клиентская часть – это что видят ваши посетители. Это сами страницы, которые отображаются в браузере. У этой части три основные составляющие: HTML, CSS и JavaScript. Сервер – это невидимая часть вашего веб приложения, это серверный язык программирования: PHP, Python, Java, Ruby. В этот раз все знать вовсе не обязательно, достаточно одного. Плюс нам понадобиться база данных. Сразу скажу, что можно начинать с MySQL, есть более экзотические варианты, но если вы только начинаете вряд ли вам стоит даже задумываться о чем-то другом.

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

Фреймворк – это набор функций организованны в среду разработки для выбранного вами серверного языка. Для Python это Django, для Ruby это Rails, а для PHP это может быть Laravel Для каждого из перечисленных языков есть еще фреймворки, но не будем усложнять.

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

Если ваша цель создать прототип, то я порекомендую писать на PHP, с использованием Laravel. Это самый простой путь, потому что вы легко найдете огромное количество ресурсов и огромное сообщество разработчиков.

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

Если вы беспокоитесь о том достаточно ли мощен PHP для вашего проекта, то давайте посмотрим на несколько сайтов, сервер которых работает именно на этом языке программирования:

facebook_logo     badoo-logo

mailchimp_logo   wikipedia-logo

 

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

Поделиться:

Что такое Ionic framework

Ionic – это html5 фреймворк для создания гибридных мобильных приложений. Первый релиз фреймворка прошел в ноябре 2013. Ionic построен на AngularJS и использует его функционал для оперирования DOM, в то время как Ionic предоставляет пользовательский интерфейс.

angularjs-ionic-framework

Одно из ярких приемуществ в использовании Ionic для разработки мобильных приложений – это то что вам не требуется использовать новые для вас технологии. Если вы уже разрабатываете для веба, то вы определенно знаете HTML, CSS и JavaScript – а это именно те технологии, которые лежат в основе разработки под Ionic. Время разработчика – это сегодня самый дорогой ресурс. Если есть возможность его сократить, то нужно использовать эту возможность.

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

Установка Ionic подразумевает наличие Node.js и NPM. Если у вас уже они установлены, то процедура запуска Ionic не займет много времени. Однако, из моего опыта самый длительный процесс установки все-таки под виндоус, владельцам линукса и Mac’ов будет проще :]

Параллельные проекты от создателей Ionic framework

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

Ionicons

http://ionicons.com/

ionicons

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

ngCordova

http://ngcordova.com/

ngCordova

ngCordova – это библиотека написанная специально для AngularJS, она предоставляет доступ к Cordova API. По сути это означает, что при помощи этой библиотеку у разработчика появляется возможность создавать гибридные приложения с доступам к железному функционалу смартфона: камере, вспышке, GPS и т.д. При этом нет необходимости использовать весь ionic – можно включить в проект только эту библиотеку и разрабатывать приложение только с ней.

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

Поделиться:

Разработка гибридных приложений под android – ToDo list

Все видео по созданию гибридного приложения – ToDo list. Все в одном месте. Пишите, если у вас есть вопросы, либо комментарии.

Видео, плейлист:

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

Поделиться:

Разработка гибридных приложений под android с использованием HTML, CSS, AngularJS, Ionic ч.2

Вторая часть рассказа о создании гибридного приложения под android.

Инструкция по установке ionic и cordova – ссылка здесь
Видео объяснение как установить ionic, cordova и android SDK – можно посмотреть здесь
Пустой проект можно скачать нажав на эту ссылку.

Поделиться:

Разработка гибридных приложений под android с использованием HTML, CSS, AngularJS, Ionic ч.1

Небольшой анонс. Я готовлю серию видео уроков о разработке гибридного приложения под android с использованием HTML, CSS, AngularJS и Ionic. Строго говоря абсолютно та же технология будет использоваться и для разработки под iPhone, однако там другие подводные камни, но этого я коснусь уже в сами уроках.

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

Поделиться:

Что такое AngularJS?

AngularJS – это JavaScript фреймворк предназначенный для создания одностраничных веб приложений. Поскольку до сих пор существует определенная путаница связанная с определением этих слов, то стоит внести ясность. В первую очередь, как я уже сказал AngularJS – это фреймворк. Фреймворк подразумевает под собой то, что вместо того, чтобы писать весь код самому разработчик “играет по заранее оговоренным правилам”. Эти правила – это стандарты и инструменты выбранного фреймворка.

angularjs

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

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

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

AngularJS позволяет сократить время разработки приложений. Это достигается за счет встроенных механизмов, которые сильно помогают разработчику. Один из таких механизмов – это встроенный шаблонизатор (template engine). Шаблонизатор позволяет использовать встроенные команды AngularJS для вывода данных. Например:

Другой прекрасный инструмент, который предоставляет AngularJS, это то как фреймворк управляет DOM (Document Objerct Model) или, говоря иначе, HTML тегами. Если при разработке с использованием jQuery (и ее сестрами jQuery UI, jQuery Mobile) вам постоянно приходится вручную обновлять все данные на экране пользователя, то AngularJS делает всю работу за нас. Достаточно указать какие элементы к каким объектам данных привязаны и при каждом изменении состояния на экране будут выводиться обновленная информация.

AngularJS использует объектный подход для разработки. Эта архитектура называется MVC (Model View Controller), стоит отметить, что вместе с этим при классическом подходе эта модель не совсем соответствует тому как ангулар работает с данными. Существует более точное определение его архитектуры – MVVM (Model View – View Model), однако точная разница между это и MVC не сильно важна на этом этапе, так что можно пока не заморачиваться.

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

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

Поделиться:

Подходы к разработке мобильных приложений – нативные приложения и гибридные

Существует 2 основных подходя для разработки мобильных приложений: разработка нативных приложений с использование языка программирования для разрабатываемой платформы и создание гибридного приложения с использованием CSS, HTML и JavaScript. Зачастую выделяется и третий подход – мобильное веб приложение, но если мы говорим об установке апликации на смартфон и возможности скачать ее с Apple Store или Google Play, то это либо нативная разработка либо гибридная. Именно об этих двух подходах я и хочу поговорить в этой статье.

native-app-vs-html5-mobile-application

Нативные (от англ. native – родной) приложения – это приложения разработанные на “родном” для платформы языком. Если речь идет об андроиде то это Java, а если об iOS, то objective-C. Хотя сейчас Apple активно продвигает Swift – новый язык программирования разработанные специально для написания приложений под их операционные системы.

Разработка под iOS таит в себе определенные преграды свойственные только для Apple, самая явная из них – для разработки под iOS вам нужен компьютер с установленным на нем Mac OS X. Существуют обходные варианты, как-то компиляция в облаке с установленной нужной операционкой, либо создания “хакинтоша”, то есть установка на не маковский компьютер операционной системы от Apple. Однако это все равно танцы с бубном, которые стоит избегать если есть такая возможность.

Разработка под андроид более либеральна в своем подходе. Можно писать приложения под эту операционную систему хоть на маке, хоть на линуксе, хоть на виндоусе. Что вам удобно, то и используйте. Удивительно, почему эта операционка распространяется активнее iOS? Ответ а тот вопрос, так и останется загадкой -)

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

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

Что если ваше приложение и так должно получать данные из сети? Что если сложная анимация не нужна? Да нужно, хранить данные на телефоне, но не сотни мегабайт. Да нужно обеспечить удобный UI, но не нужно “сходить с ума” и анимировать каждый пиксель. Если это та ситуация, с которой столкнулась компания, то определенно использование сложных, либо незнакомых технологий кажется более чем неоправданным.

В этом случае вполне возможно что стоит подойти к решению разработав гибридное мобильное приложение. Гибридными называются приложения, которые разрабатываются при помощи HTML, CS и JavaScript – то есть теми же технологиями, что и интернет сайты, а для того чтобы они могли быть установлены на смартфоне код “оборачивается” в нативную оболочку. Для этой процедуры существует несколько как платных, так и бесплатных решений, пожалуй самые распространенные это PhoneGap и Cordova.

Таким образом входной порог на рынок мобильных приложений значительно снизился. Можно использовать широко известные инструменты для создания приложения, при этом не погружаясь в изучения новых языков. Помимо этого гибридная разработка позволяет создавать приложение сразу под обе платформы: Android и iOS. Можно и под Windows, но я не изучал этот вопрос. Стоит отметить, что сам процесс компиляции включает все те же подводные камни. Так например, для создания приложения для iOS все так же требуется компьютер с этой операционкой.

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

Поделиться:

Создание фильтров и HTML форматирование текста на лету в ангулар [видео] – AngularJS filters and markdown

Итак, вот список тем, которые я затронул в этом уроке:

  • Что такое двусторонняя привязка данных в ангулар.
  • Создание фильтров и их использование.
  • HTML форматирование текста на лету.
  • Использование JS библиотеки showdown.

See the Pen Markdown for html on the fly by Artem Demo (@artemdemo) on CodePen.

Ссылка на библиотеку showdown: https://github.com/coreyti/showdown

Поделиться: