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

Как научиться программировать? – часть 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

Поделиться:

Новые разработки в мире ангулар – 16.09.2014

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

Angular-Morph – плавная анимация всплывающих окон на ангулар

https://github.com/jimobrien/ngMorph
Проект только набирает обороты, но автор уже подготовил базовый функционал. Достаточно посмотреть на пример, как сразу становится понятно – что стоит последить за развитием проекта. Я уже знаю в какой работе применю эти функции.

Нажмите на изображение, чтобы увидеть анимацию в действии:

ngMorph

Angular 1.3 – one time data-binding, recompile directive

https://www.youtube.com/watch?v=hFOSXVT-Cps
Готовится к выходу новая версия ангулара. Одно из очень интересных нововведений – это одноразовая привязка данных. Теперь можно будет значительно проще следить за расходом ресурсов и не тратить их на обновление статичных данных.
Интересный момент – автор этой презентации так же рассказал о своем методе перекомпиляции элементов, в тех случаях когда после одноразовой привязки так снова нужно обновить данные.
Дополнительные темы:

  • Разница между service и factory – (service use “new”, factory don’t)
  • Как добавить загрузку разных CSS при раутинге

Ment.io – использование # и @ для хештега и ссылки на пользователя

http://jeff-collins.github.io/ment.io/
Интересный модуль, который добавляет функционал по отображения всплывающего списка хештегов, либо пользователей. Список зависит от того, какой символ вы использовали #, либо @.
ment-io

Поделиться:

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

Для начала давайте посмотрим зачем вообще учить код? Зачем беспокоить серое вещество и усложнять свою жизнь? Вполне возможно, что все и так хорошо?

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

learn-to-code

Если вопрос о поиске программиста – это центральный камень преткновения на пути к осуществлению вашей идеи, то у меня для вас плохие новости – у вас ничего не получится.

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

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

В чем проблема? Разработку очень сложно оценить и загнать в какие-то рамки. Вот одна из мыслей, которая не будет давать вам покоя: “Разработка этой функции на самом деле занимает 20 часов или меня пытаются раздеть?”

Если вы предприниматель, который ждет кого-то кто воплотит вашу идею, то мне жаль, но вы не предприниматель.

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

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

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

Поделиться: