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

1. jQuery

7 ТЕХНОЛОГИЙ, КОТОРЫЕ ИЗМЕНИЛИ ЖИЗНЬ РАЗРАБОТЧИКОВДумаю, вы согласитесь, что jQuery оказалась одной из революционных библиотек.

Скорее всего, мы бы не увидели jQuery, если бы в 2004 году, парень по имени Джон Резиг не увлекся JavaScript.

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

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

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

Все, наверное, помнят это “вау” от возможности легко создавать анимации для html элементов, которые теперь могли плавно выпадать, двигаться, меняться, затухать, исчезать и т.д.

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

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

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

Кажется сейчас на популярность jQuery, покусился AngularJS — JS фреймворк, который имеет, принципиально иной подход к созданию веб-приложений. Но это тема для отдельной статьи, а пока, давайте признаем, что jQuery, если не совершил революцию, то уже точно, в свое  время, был большим прорывом в веб-разработке! 

2. HTML5

7 ТЕХНОЛОГИЙ, КОТОРЫЕ ИЗМЕНИЛИ ЖИЗНЬ РАЗРАБОТЧИКОВНовый стандарт языка гипертекстовой разметки HTML, если не совершил революцию, то точно сделал серьезный прорыв в веб-разработке.

Даже, когда, новый стандарт еще не был, официально опубликован, Стив Джобс “не удержался” и позволил себе сказать, что с разработкой HTML5, нужда во Flash для мобильных устройств уже отпадает. Это вызвало, достаточно, бурную реакцию it-сообщества.

Если можно было бы сказать, только об одном самом важном нововведении в новой версии HTML, то скорее всего это была бы поддержка новых html-элементов <audio> и <video>.

Ведь до этого проигрывать аудио и видео файлы, можно было только с помощью технологии Flash, а теперь появилась возможность это делать из-коробки. Да, надо признать, что тут не было все так гладко, как хотелось бы. Для кроссбраузерного проигрывания видео, приходиться иметь, как минимум, 3 типа видеофайлов в теге <video>. Но все же, сайтов, которые используют флеш для проигрывания аудио и видео, становится все меньше и, думаю, этот тренд будет набирать дальше все больше и больше оборотов.

Кроме того, HTML5 принес и многие другие интересные вещи:

  • новые атрибуты-поведения и новые html-элементы
  • объект Canvas
  • возможность определять геолокацию пользователя
  • поддержка дополнительных математических формул
  • и много других вещей, которые раньше были недоступны разработчикам.

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

3. Bootstrap

7 ТЕХНОЛОГИЙ, КОТОРЫЕ ИЗМЕНИЛИ ЖИЗНЬ РАЗРАБОТЧИКОВBootstrap, одна из фронтенд-технологий, которая значительно преобразила жизнь фронтендщиков и верстальщиков. И хотя в этом большая заслуга компании Twitter, Bootstrap стал одним из передовых и самых популярных CSS фреймворков. Он просто идеален для стартапов и прототипов, а также проектов, в которых оригинальный дизайн не играет большой роли.

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

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

Раньше, чтобы быстро накидать более-менее симпатичный макет и показать его заказчику, приходилось тратить не мало времени. В противном случае, получалась верстка, которая точно не вызывала приятных эмоций. И даже если, у вас, просто прототип — портить первые впечатление заказчика о сайте — не лучшее решение, так что Bootstrap вам в помощь!

4. WebSockets — асинхронный интернет

7 Технологий, Которые Изменили Жизнь РазработчиковНесомненно, один из самых серьезных технологических прорывов за последние несколько лет — это WebSockets. Технология позволила по новому взглянуть на модель HTTP и дала возможность разработчикам вырваться за рамки привычных “Request-Response”.

В 2009 году, разработчики Google Chromium рассказали миру о том, что теперь их движок поддерживает такую технологию как WebSockets.

Эта новость потрясла англоязычный интернет. Многие известные разработчики испытали технологическую новинку и оставили лестные отзывы у себя в блогах.

В чем, собственно, состоял прорыв?

Запрос — Ответ

Как известно, HTTP-протокол работает по принципу Запрос->Ответ. Это полностью синхронная модель.

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

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

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

Нововведение состояло в том, что WebSockets дал возможность работать с запросом и ответом асинхронно, а еще точнее не делать фоновые запросы вообще.

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

Люди, которые использовали AJAX или другие костыльные технологии, которые пытались дать функциональность WebSockets, конечно, восприняли эту новость с радостью.

WebSockets — тренд, набирающий обороты

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

  • чаты
  • корпоративные чаты (hipchat, kato.im)
  • Real-time applications — приложения в которых нужно обновлять информацию в режиме реального времени.
  • Кросс-доменные приложения

Многие знают, что у веб-приложений, которые используют Ajax, есть большая проблема — это кросс-доменные запросы. Чтобы получить ответ от сервера вы должны отправлять AJAX запрос с того же домена или сделать так, чтобы сервер в ответе добавлял заголовок Access-Control-Allow-Origin: *, который говорит браузеру о том, что запросы принимаются от любого домена.

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

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

5. GIT и системы контроля версий

7 Технологий, Которые Изменили Жизнь РазработчиковВы видели выражение лица этого парня?

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

А вы задумывались как разработчики раньше жили без систем контроля версий?

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

  • file.php
  • file_14_08.php
  • file_15_08.php
  • file_15_08_copy.php
  • file_15_08_copy_copy.php

 А еще, как правило, у каждого была своя “система контроля версий” и свое понимание как называть файлы и когда у нас происходило “слияние” — об этом можно было снимать фильмы. Мы знали, что существуют системы контроля версий, но у нас не доходили руки, чтобы попробовать какую-нибудь из них.

Сейчас я понимаю, что примерно также жили разработчики в то время, когда VCS (Version Control System) еще не было. Хотя, что-то мне подсказывает, что пользователи таких систем как RCS, были не намного счастливее нас.

Как Git выручил нашу команду.

Последние годы Git приобретает все больше и больше фанатов и когда мы решили работать с VCS, то у нас не оставалось выбора, кроме как начать использовать эту систему. Далее, расскажу короткую историю.

Как-то, в поездке, находясь в поезде, я открыл Viber и увидел много гневных сообщений в общем чате с нашим руководством. Почему-то у нас поломался сайт и почти не работал. Так вышло, что из разработчиков в он-лайне был доступен только я и мне пришлось разбираться с этой проблемой. Выяснялось, что, накануне вечером, мы закоммитили серьезный баг и не протестировали изменения.

У меня был с собой ноутбук и смартфон, но интернета в ноутбуке не было. Был только слабенький мобильный интернет в телефоне. Слава Богу, мне удалось, даже с таким интернетом зайти на сервер с телефона по SSH и с помощью Git откатиться назад. Таким образом мы были “спасены”! Но ситуация уже была критичная.

Думаю, из этого примера ясно как VCS серьезно изменили подход к разработке и какие преимущества дали разработчикам. Сейчас, это просто необходимость для командной разработки. Но даже если вы работаете в одиночку — используйте Git и вы не пожалеете, потому что иногда даже одиночным разработчикам приходится кусать локти из-за отсутствия элементарной возможности — “откатить изменения назад”!

6. Сервер Непрерывной Интеграции и Автоматические Тесты (Continuous Integration)

7 Технологий, Которые Изменили Жизнь РазработчиковCI-сервер и автоматические тесты, сборка, разворачивание веб-приложения — это процессы, которые прочно, вошли в жизнь современных продуктоввых и аутсорсинговых компаний.

Об этом известные it-авторы пишут популярные книги, а блоггеры интересные статьи. Тема в последние годы приобретает всю большую популярность.

Как же Continuous Integration изменил жизнь разработчиков? Или какой технологический прорыв он совершил?

Спасти рядового разработчика

Давайте, снова представим, что вы разработчик очень большого веб-сайта. Еще представим, что ваша команда — настоящие молодцы и вы используете Git и у вас есть репозиторий, куда вы коммитите все изменения и новые “фичи”. Также вы деплоете код с этого репозитория на боевой сервер.

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

Или, наиболее, типичный пример.

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

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

А если нерабочая форма регистрация на сайте = потере n-суммы денег, тогда ситуация, совсем не радужная.

CI-супермен

Избавлять вас от таких ситуаций и призван CI-сервер с автоматическими тестами.

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

Если бы у вас был написан функциональный тест (Behat) для вашей формы регистрации, то сервер непрерывной интеграции сообщил бы вам об этом баге, еще до того как вы будете выгружать изменения на сервер.

Собственно и в этом и состоял прорыв. Использование CI-сервера дает вам возможность узнавать, кто из разработчиков все поломал и кого за это ругать. А самое главное — дает возможность не выгружать баги на боевой сервер (конечно при условии если у вас покрыты тестами, наиболее критичные места приложения).

Как насчет быстро и без боли, с нуля разворачивать приложение?

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

Часто бывает, что при долгой работе над кодом проекта, вы можете забыть о том, что проект, кто-то захочет развернуть с нуля помимо вас. Или вам самим придется развернуть проект на новом сервере. Забвение этого факта может привести к ситуации, когда вы, просто-напросто, не можете быстро развернуть приложение, У вас начинают появляться какие-то ошибки и эксепшены, говорящие о том, что у вас, что-то не работает и не можете развернуть сайт безболезненно на новом сервере. Continuous Integration помогает решить и эту проблему.

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

Если у вас большой проект и вы сталкивались с проблемами, которые я описал выше, то вам просто необходимо начать писать тесты, особенно для самых критичных мест и использовать такие известные CI-сервера, как Jenkins, TeamCity.

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

7. Облака. Облачные технологии и облачный хостинг

7 Технологий, Которые Изменили Жизнь РазработчиковВ последнее время виртуализация и облачные технологии развиваются дикими темпами. Это можно видеть, если хотя бы посмотреть на 2 ведущих лидера в области облачных технологий, таких как Amazon AWS и DigitalOcean (зарегистрировавшись по этой ссылке вы получите $10 на аккаунт). Эти компании делают, действительно, качественные сервисы и хорошие продукты.

Каким образом “облака” изменили или улучшили жизнь разработчиков?

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

Автоматическое масштабирование

А как насчет, одним кликом делать масштабирование проекта и добавлять новые сервера (инстансы)? Не говоря уже о теме авто-масштабирования (Auto-scaling), которая заслуживает отдельной статьи.

Представьте. Раньше, чтобы сделать балансировку нагрузки на крупном проекте, нужно было звать специалиста и он реализовывал бы это на уровне Nginx. Теперь, мало-мальски, образованный разработчик, получил возможность  использовать специальные сервисы и включать услугу авто-балансировки (Elastic Load Balancing в AWS). Хорошо это или плохо для профессионального роста разработчика — отдельный вопрос!

Для особо продвинутых программистов и разработчиков — это целое, непаханное поле для “творческих экспериментов”. Автоматически включать инстансы и выключать, когда они становятся не нужны — это, пожалуй, одна из изюминок разработки и администрирования.

Экономия ресурсов и ресурсоемкие задачи

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

Также, эта тема, особенно актуальна для компаний, которые занимаются 3d рендерингом. Наверное, многие знают, что качественный рендеринг модели, интерьера или ландшафта, с реалистичным освещением может занимать порядка 3-8 часов, в зависимости от железа. А что если компания не справляется с очередью заказов по причине того, что покупать дополнительные сервера накладно?

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

Это просто, потрясающие возможности, которыми нельзя не пользоваться в 21 веке.

Заключение

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