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

Всплывающее окно с плавной анимацией в ангулар – AngularJs morph animation

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

Сегодня я хочу показать как сделать достаточно интересную анимацию всплывающего окна средствами ангулара и CSS3. Первый раз такую анимацию я встретил на сайте Morphing Buttons Concept – там предоставлено много интересных примеров анимации и меня заинтересовал как можно сделать то же самое, но уже в среде ангулара.

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

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

See the Pen Pop Up morph animation by Artem Demo (@artemdemo) on CodePen.

Поделиться:

5 вещей, которые делают JavaScript таким особенным

Функции первого класса – First Class Functions

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

Давайте посмотрим на примере:

Событийно-ориентированная среда разработки – Event-Driven Environment

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

JavaScript отлавливает все эти события и запускает привязанные к ним функции.

Например:

Собственно, во многом благодаря этому и объясняется быстрота JavaScript. Он не вызывает все функции, которые были в него загружены, а только те, которые были вызваны. Это, собственно, и отличает его от многих языков программирования, в частности от php.

Замыкания – Closures

Замыкания – это функции в теле которых присутствуют ссылки на переменные объявленные вне тела этой функции в окружающем коде и не являющиеся её параметрами. Говоря другим языком, замыкание — функция, которая ссылается на свободные переменные в своём контексте. (Последнее предложение особенно хорошо помогло верно? :] Обожаю определения из учебников, пока сам не разберешься в чем суть, они ни разу не помогут)

Немного модифицируем предыдущий пример:

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

Скоп – Scope

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

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

Контекст – Context

По своей сути контекст, это применение переменной this. Контекст отличается от скопа, это можно увидеть в следующем примере:

Поскольку функция по умолчанию привязывается к корневому объекту, то в обоих случаях (что снаружи, что внутри функции) контекст не меняется и по-прежнему остается Window {}. Это изменится, если мы создадим отдельный объект.

Поделиться:

Анимация в ангулар – AngularJS Animation

За анимация в AngularJS отвечает отдельный модуль, который так и называется – ngAnimate. Этот модуль поддерживает как использование css анимации, так и создание своей анимации средствами JavaScript. В этой статье я расскажу об инструментах ангулара для css3 анимации.

AngularJS-animation

Для того что бы начать использовать анимацию достаточно просто включить этот модуль в проект и использовать встроенные в него классы. В ангуларе есть ряд директив, которые поддерживают анимацию по умолчанию, в первую очередь это ng-repeat – скорее всего именно с этой директивой будет связанна львиная часть анимации вашего проекта. Также анимацию поддерживают: ng-include, ng-if, ng-switch, ng-show, ng-hide, ng-view и ng-class.

Ангулар будет автоматически добавлять классы для появляющихся и исчезающих элементов. К этим классам можно будет добавить анимацию. Элементу добавляется по два класса: начало анимации (например ng-enter) и в активный класс (например ng-enter-active). на первый класс “вешается” определение первой стадии анимации, на последний ее окончание.

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

Пример анимации:

See the Pen Анимация с фильтром by Artem Demo (@artemdemo) on CodePen.

Поделиться:

Анимация в css3 – css3 animation пример

В этом примере я расскажу о том как использовать анимацию в css3

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

Поделиться:

Анимированное меню – css3 transition пример

В этом видео я показываю пример использования css3 transition.

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

Поделиться:

Разница между css transition и css animation

Давайте сегодня поговорим об анимации. Меня уже ни раз просили рассказать о том как работать с ней и в том числе, как применять ее в ангуларе. Однако, для того что бы перейти к “разбору полетов” с фреймворком нужно разобраться с основами.

css3-animations-image

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

Прежде всего давайте поговорим о том какие механизмы анимации используются в css3. Их два: css transition и css animation – согласен, что название второго вводит в заблуждение получается что “анимация, animation”, но тут ничего не поделать и для ясности я буду использовать английские слова для обозначения терминов.

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

Пример такой анимации можно посмотреть вот здесь:

See the Pen CSS3 transitions, menu by Artem Demo (@artemdemo) on CodePen.

Если же перед нами стоит задача сделать анимацию, которая не обязательно включает начальную и конечную стадии, либо требует более аккуратную, по кадровую настройку. Например, анимация цвета, которая проходит через несколько оттенков – от синего, через зеленый, до красного; Либо бесконечная анимация, которая постоянно будет присутствовать на странице. В этом случае уже нужно использовать css animation.

Пример такой анимации можно посмотреть вот здесь:

See the Pen css animation by Artem Demo (@artemdemo) on CodePen.

Поделиться:

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

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

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 он предоставляет широкий спектр возможностей для разработчика.

Поделиться: