В наши дни, какое бы веб-приложение Вы не писали, Вам приходится принимать множество архитектурных решений. И Вам хочется принимать их правильно: использовать технологии быстрой разработки, непрерывные итерации, максимально эффективно, быстро, надежно и др. Вы хотите делать меньше и получать больше, используя различные технологии. Но не всегда такие технологии просты в освоении.
По моему опыту full-stack JavaScript (под которым далее будем понимать полный цикл разработки на JavaScript) выполняет все вышеперечисленные задачи. Возможно, Вы где-то с ним сталкивались; вероятно, Вы убеждены в его эффективности и даже спорили с друзьями по этому поводу. А сами пробовали? В этом посте я сделаю обзор full-stack JavaScript, расскажу зачем он Вам нужен и как все это работает.
Почему я использую JavaScript
Я веб-разработчик с 1998 года. В те времена чаще всего мы использовали Perl для серверной разработки, но уже тогда на стороне клиента был JavaScript. С тех пор серверные технологии сильно изменились: одна за другой нас накрывали волны языков и технологий, таких как PHP, ASP, JSP, .NET, Ruby, Python и др. Разработчики стали осознавать, что использование двух разных языков на клиенте и сервере всё усложняет.
В начале эпохи PHP и ASP, когда шаблонизаторы были лишь в зачаточной стадии, разработчики встраивали код приложений прямо в HTML. Например:
<script>
<?php
if ($login == true){
?>
alert("Welcome");
<?php
}
?>
</script>
Или еще хуже:
<script>
var users_deleted = [];
<?php
$arr_ids = array(1,2,3,4);
foreach($arr_ids as $value){
?>
users_deleted.push("<php>");
<?php
}
?>
</script>
У начинающих существовали типичные проблемы с пониманием операторов в разных языках, к примеру таких, как for или foreach. Более того, написание подобного кода на сервере и на клиенте для обработки одних и тех же данных – неудобно даже сегодня:
<?php
$arr = array("apples", "bananas", "oranges", "strawberries"),
$obj = array();
$i = 10;
foreach($arr as $fruit){
$obj[$fruit] = $i;
$i += 10;
}
echo json_encode(obj);
?>
<script>
$.ajax({
url:"/json.php",
success: function(data){
var x;
for(x in data){
alert("fruit:" + x + " points:" + data[x]);
}
}
});
</script>
Первые попытки делать всё на одном языке заключались в создании клиентских компонентов на сервере и компиляции их в JavaScript. Это не работало так, как ожидалось, и многие их тех проектов провалились (к примеру, ASP MVC, заменивший ASP.NET Web forms, и GWT, которому на смену пришел весьма сомнительный Polymer). Но сама по себе идея была замечательной, а особенно: единый язык на клиенте и сервере, позволяющий нам повторно использовать компоненты и средства (ключевое слово здесь: средства).
Решение было простым: запустить JavaScript на сервере.
На самом деле JavaScript зародился как серверный язык в Netscape Enterprise Server, но попросту не был готов к тому моменту. Спустя годы проб и ошибок вышел в свет Node.js, который не только запускал JavaScript на сервере, но и продвигал идею неблокирующего программирования, пришедшего из мира nginx, за что спасибо создателю Node.js, имевшего опыт работы с nginx, а также сохранившего простоту, за что спасибо событийно-ориентированной природе JavaScript.
(Событийно-ориентированное неблокирующее программирование заключается в том, что требующие времени на выполнение задачи откладываются в сторону, вместо чего определяются действия, которые будут выполнены по завершении этих задач, а процессор в это время обрабатывает другие запросы.)
Node.js изменил способ доступа к потоку ввода/вывода навсегда. Как веб-разработчики, мы использовали следующие строки для доступа к базам данных:
var resultset = db.query("SELECT * FROM 'table'");
drawTable(resultset);
Эта строка блокирует код, т.к. программа приостанавливается до тех пор, пока база данных не вернет resultset. Тем временем поступают другие конкурирующие запросы в том же потоке.
С Node.js и принципом неблокирующего программирования у нас есть больше контроля над ходом исполнения программы. Теперь (даже если база данных продолжает выполнять какие-то задачи), мы можем указать, что программе следует делать и что она будет делать, когда получит resultset:
db.query("SELECT * FROM 'table'", function(resultset) {
drawTable(resultset);
});
doSomeThingElse();
Этим куском кода мы создали два программных потока: первый обрабатывает наши действия сразу после отправки запроса к базе, в то время как второй обрабатывает наши действия после получения resultset, используя простой колбек. Это элегантный и мощный способ управлять конкурирующими запросами. Как говорится, «Всё работает параллельно, кроме твоего кода». Таким образом, ваш код прост в написании, прост для чтения, понимания и поддержки, и всё это не теряя контроля над выполнением программы.
В то время эти идеи не были новы – так почему же они стали популярны с Node.js? Всё просто: неблокирующее программирование достигается разным путями. Возможно, проще всего использовать колбеки и event loop. В большинстве языков это непростая задача: если колбек это общая фишка во многих языках, то event loop нет, и часто приходится искать сторонние библиотеки для этого (например, Python и Tornado).
Но в JavaScript колбеки встроены в язык, как и event loop, и почти каждый программист, хоть немного работавший с JavaScript, знаком с ними (даже если не совсем понимал, что такое event loop). Внезапно каждый стартап на планете Земля смог использовать разработчиков (они же средства) сразу на оба фронта.
Итак, теперь у нас есть невероятно быстрая платформа (благодаря неблокирующему программированию) и очень простой в обращении язык программирования (JavaScript). Но достаточно ли этого? Уверен, что JavaScript займет важное место в будущем. Объясню почему.
Функциональное программирование
JavaScript был первым языком программирования, несшим парадигму функционального программирования в массы (безусловно, Lisp был первее, но большинство программистов никогда не писали на нем серьезных приложений). Lisp и Self, наиболее повлиявшие на JavaScript, были полны инновационных идей, которые могли дать нам свободно изучать новые технологии, паттерны и парадигмы. Все эти идеи пришли в JavaScript.
Динамические объекты и прототипное наследование
Объектно-ориентированное программирование без классов (и бесконечных иерархий классов) позволяет разрабатывать быстро – просто создайте объект, добавьте методы и используйте их. Более важно то, что это позволяет уменьшить время на рефакторинг в процессе поддержки кода, т.к. программист изменяет объекты вместо классов. Скорость и гибкость прокладывают дорогу к быстрой разработке.
JavaScript – это и есть Интернет
JavaScript был создан для Интернета. Он был здесь с самого начала и никуда не денется. Все попытки уничтожить его провалились. Вспомните, к примеру, гибель Java-апплетов, замену VBScript на TypeScript от Microsoft (который компилируется в JavaScript), и падение Flash перед мобильным рынком и HTML5. Удаление JavaScript из миллионов веб-страниц невозможно без их разрушения, так что наша задача улучшать его.
Конечно, альтернативы JavaScript появляются каждый день: CoffeeScript, TypeScript и еще миллионы языков, компилируемых в JavaScript. Эти альтернативы хороши для разработки на определенных этапах, но в долгосрочной перспективе они не смогут заменить JavaScript по двум причинам: их сообщества не растут и их лучшие стороны переймет ECMAScript (т.е. JavaScript). JavaScript это не ассемблерный язык: это высокоуровневый язык программирования с таким исходным кодом, который нам понятен.
End-to-End JavaScript: Node.js и MongoDB
Мы разобрались по каким причинам стоит использовать JavaScript. Далее, взглянем на JavaScript, как на причину использовать Node.js и MongoDB.
Node.js
Node.js представляет собой платформу для создания быстрых и масштабируемых сетевых приложений. На самом деле Node.js это нечто большее: это крутейшая среда исполнения JavaScript на сегодняшний день, используемая тоннами приложений и библиотек – даже браузерные библиотеки работают под Node.js. Даже, если вы не планируете писать свое серверное приложение на Node.js, вы можете использовать инструменты, работающие на Node.js в целях облегчения процесса разработки. Например, Bower в качестве пакетного менеджера, Mocha для unit-тестов, Grunt для автоматической сборки и даже Brackets в качестве полноценного редактора кода.
Так что, если вы решили писать JavaScript приложения для сервера или клиента, можете смело знакомиться с Node.js, потому что он потребуется вам ежедневно. Существуют некоторые интересные альтернативы, но ни одна из них не имеет и 10% сообщества Node.js.
MongoDB
MongoDB это NoSQL документо-ориентированная система управления базами данных, использующая JavaScript в качестве языка запросов (но написана не на JavaScript), завершая таким образом нашу end-to-end JavaScript платформу. Но это не единственная причина использовать данную БД.
MongoDB это бессхемная БД, позволяющая гибко хранить объекты и, таким образом, быстро адаптироваться под новые требования. Также она хорошо масштабируется и базируется на map-reduce, что подходит для больших приложений. MongoDB настолько гибкая, что может использоваться как бессхемная, так и реляционная БД (хотя ей не хватает транзакций, которые можно лишь эмулировать) и даже как хранилище вида ключ-значение для кеширования ответов, как Memcached и Redis.
Одностраничные приложения
При работе с full-stack JavaScript часто приходится создавать одностраничные приложения (SPA). Многие веб-разработчики ни раз искушались попробовать себя в SPA. Вы когда-нибудь сравнивали SPA и обычное веб-приложение при мобильном соединении? Разница в отклике порядка десятков секунд.
(Примечание: некоторые могут с этим не согласиться. Twitter, например, откатил свою попытку сделать SPA. Тем временем, большие сайты наподобие Zendesk наоборот двигаются в сторону SPA.)
Если одностраничные приложения так хороши, то почему все их не делают? Основной аргумент, который приходится слышать от людей – SEO. Но, если всё делать правильно, это не будет проблемой: можно использовать разные подходы, начиная от использования PhantomJS, заканчивая рендерингом страницы специально для поисковых ботов.
Backbone.js, Ember и Twitter Bootstrap
Многое сказано про MV* фреймворки для SPA. Это трудный выбор, но поговорим о трех лучших из них: Backbone.js, Ember и AngularJS. Какой из них лучше подойдет вам?
К сожалению, у меня было мало опыта в AngularJS, поэтому мы опустим его в данном обсуждении. Рассмотрим, как Ember и Backbone.js решают одну и ту же проблему двумя различными способами.
Backbone.js минималистичен и предлагает ровно столько возможностей, сколько необходимо для простого одностраничника. Ember, напротив, является завершенным профессиональным фреймворком для создания SPA.
Для CSS стилизации прекрасно подойдет Twitter Bootstrap, т.к. он имеет готовые наборы стилей, готовые к использованию прямо из коробки, а также легко кастомизируется.
Полезные инструменты: Grunt и RequireJS
Напоследок, упомянем некоторые полезные инструменты, работающие под Node.js.
Grunt
Grunt позволяет автоматизировать сборку приложений, выполнять любые задачи по копированию/вставке и конкатенации файлов, прекомпиляцию шаблонов, компилировать LESS/SASS, осуществлять юнит-тестирование, проверять код и минифицировать его.
RequireJS
По названию RequireJS можно подумать, что это всего лишь инструмент для подгрузки модулей с AMD API, но это нечто большее. С RequireJS вы можете определять зависимости и иерархии модулей и подгружать их по мере необходимости. Также он позволяет избежать засорения глобального пространства имен при помощи объявления ваших модулей внутри функций.
Заключение
Full-stack JavaScript это не решение всех проблем. На JavaScript можно создавать масштабируемые, удобные в поддержке приложения, написанные на одном языке. Как бы вы не относились к full-stack JavaScript, безусловно, это сила, с которой надо считаться.
Данная статья является вольным переводом статьи An Introduction To Full-Stack JavaScript от Alejandro Hernandez.
Оригинал статьи: http://www.toptal.com/javascript/guide-to-full-stack-javascript-initjs
Похожие статьи: http://wiht.link/javascript-resources