Подбираем npm пакеты
Stacks, queues and deques are the most basic of the slightly more advanced data structures you will meet. The good news is that they are very, very easy to implement in JavaScript.
JavaScript Data Structures Contents
JavaScript has a really useful Array object that can be used to create some of the most basic data structures - stacks and queues. In this short article we take a look at how to create stacks and queues and describe some aspects of why they are useful.
The LIFO stackIt is always difficult to know which stack is the most basic but the LIFO or Last In First Out stack is perhaps the most commonly used.
A simple array object already has the two basic methods needed to create a LIFO stack push and pop.
The push method will add any object to the top of the stack and the pop method will remove it. To treat an array as a LIFO stack you simply create an instance and use push and pop.
var stack=new Array();
stack.push("A);
stack.push("B");
stack.push("C"
alert(stack.pop());
alert(stack.pop());
alert(stack.pop());
If you try this out you will see the alerts display "C", "B" and "A". This is the key property of a LIFO stack - it reverses the order of the data you store on it. You pushed A, B and then C byt you got back C, B and then A.
You can use any Array object as a LIFO stack and it is sometimes useful to treat an array as a stack for a while and then go back to working with it as an array. If you really want to create a stack object that can only be used as a stack then you have to encapsulate an Array and expose only the push and pop methods.
function Stack()
{
this.stac=new Array();
this.pop=function(){
return this.stac.pop();
}
this.push=function(item){
this.stac.push(item);
}
}
If you make the stac Array object private using a closure say then the only operations allowed on Stack are push and pop.
var stack=new Stack();
stack.push("A");
stack.push("B");
stack.push("C");
alert(stack.pop());
alert(stack.pop());
alert(stack.pop());
and again you will see the data retrieved in the order "C", "B", "A".
Notice that while we refer to the "top of the stack" push adds the object to the "end" of the array and pop removes the final element.
That is if the array has three items already stored i.e. array, array and array then push() stores its object in array.
Also notice that if you try to pop a value that doesn"t exist i.e. pop an empty stack the result is undefined. You could test for this error in the Stack object and throw an exception or some other error if the user attempts to pop an empty stack.
A typical stack will often allow you to manipulate the stack pointer say or peek at the value on the top of the stack i.e. retrieve it without removing it but these "non-stack" operations are generally not necessary.
Also notice that as you can push and pop any object onto the stack you can use it in very sophisticated ways. For example, if you need to store an object on the stack long with the time it was created you don"t need to create a more complex Stack object because you can simply push a composite object:
Push({MyData,Time});
Also notice that there is no need to worry about problems of enumeration - because you don"t naturally ever need to enumerate a stack structure.
The close relative of the LIFO stack is the FIFO - First In First Out stack - also known as the Queue because it mimics the behaviour of a queue in the real world. That is you store an item on the back of the queue and retrieve it from the front.
Once again the Array object provides methods that enable us to create a Queue directly. The unshift method adds an item to the front of the Array. To create a queue we have to remove items from the end of the Array and this we can do using the pop method again.
That is to treat an Array as a queue all we have to do is
var Q=new Array();
Q.unshift("A);
Q.unshift("B");
Q.unshift("C");
alert(Q.pop());
alert(Q.pop());
alert(Q.pop());
If you try this out you will see the data retrieved in the order "A", "B" and "C". That is a queue or a FIFO stack doesn"t change the order of the data the items are retrieved in the order that they were stored.
A queue is useful when ever you have data to deal with and not enough time to deal with it all. You simply add the data you can"t deal with to the queue and deal when it when you can. The queue ensures that it is dealt with in the order it arrived. Another name for a queue is a buffer.
If you want to create a queue object you can follow the basic idea used for the LIFO stack:
Function Queue()
{
this.stac=new Array();
this.dequeue=function(){
return this.stac.pop();
}
this.enqueue=function(item){
this.stac.unshift(item);
}
}
Var Q=new Queue();
Q.enqueue("A");
Q.enqueue("B");
Q.enqueue("C");
Alert(Q.dequeue());
alert(Q.dequeue());
alert(Q.dequeue());
The methods enqueue and dequeue aren"t standard names but they are often used. Another controversy is over whether you join the head or start of the queue ot the tail or end of the queue. It all depends on how you think about it and as long as you get the basic FIFO action it all works.
As in the case of a stack trying to remove something from an empty queue returns undefined. You can also queue complex objects and augment the queue with additional methods to return the number of items in the queue and even the nth item in the queue.
There are more complex types of queue that you can implement but these are less commonly encountered.
For example, the priority queue works int he same way but when you enqueue an item you can also specify its priority. When items are dequeued they are returned in priority order rather than the order that they arrived in. You can implement a priority queue either by keeping the array sorted in priority order or simply search for the value to be returned in an unsorted list.
You can also use more complex data structures to implement a priority queue such as the heap - see a future article for details.
Стек вызова функций (Call stack in programming languages)
Как рассматривать стек вызова функции (Call Stack) в контексте языков программирования. Хочу сказать, что стек вызова не совсем то, что демонстрирует нам большинство материалов. Чтобы окончательно понять что такое стек вызова, необходимо вернуться к азам и рассмотреть как работает стек вызова в операционной системе, почему именно так? Потому что нельзя рассматривать стек вызова функций оторванно от физической памяти и возможностью управления ею и тем самым не надо забывать, что стек вызова функций это не «виртуальная» операция, а конкретное место в памяти выделяемое операционной системой для выполнение программного кода функции, которая была запущена внутренним или внешним API (будь-то браузера, IDE или движка какого либо языка).
Хочу определить что такое стека вызова функции в низкоуровневых (low-level programming languages) языках (Assembler, C++):
На примере Ci++:
(В современных низкоуровневых языках есть современные библиотеки позволяющие поддерживать работу ООП и контролировать стек функции не на физическом уровне, а использованием вывода консоли: Poppy, Pantheios)
Шаг 1: запуск лейаута кода.
В лейауте кроме самих инструкций находится дополнительная информация (переменные, декларативные данные, дополнительные технические данные и …)
Получив первую инструкцию о запуске ОС начинает строить стек. Сначала выделяет физическое место на кластерах памяти и заполняет его данными, но какими:
Инструкция получена, создается сам стек в котором основная часть - выделенное место для выполнения операций, а сегмент стека для хранения данных для возврата результата выполнения функции.
На рисунке 1 показаны стеки (участки памяти) предназначенные для выполнения кода для каждой функции, с правой стороны находится сегмент, куда отправляются инструкции возврата в порядке вызова функций.
На определенном этапе, функция либо возвращает результат либо вызывает следующую функцию. В сегмент стека кладется информация не о времени, месте или каких-то других параметрах вызова функции, только адрес(в бинарной нотации), куда надо вернуть результат вызова функции. Так же в этот сегмент попадают локальные переменные.
Инструкция возврата вызова, это не место вызова этой функции, а следующая за ней инструкция.
Сегмент стека (который мы сейчас по простоте называем стеком вызова) это отдельный участок памяти, в котором храняться инструкции о возврате результатов вызванных функции. Используется метод: кто пришел последний - уйдет первый (LIFO).
В языках подобных С++ имплементированы два метода: Call и Ret, Call создает инструкцию с адресом(в бинарной нотации) и кладет на верхний уровень стека, Ret не содержит адреса, этот метод просто забирает верхнюю инструкцию и возвращает нас по указанному адресу. Сам стек, после возвращения данных и выполнения функций уничтожается и данные из него недоступны.
На рисунке 2 схематично нарисован сегмент стека вызова функций и указаны локальные переменные и инструкции по возврату.
Далее необходимо понять, как высокоуровневые языки реализовывают работу стека вызова. Давайте рассмотрим два случая: языки использующие многопоточность и однопоточные языки. Почему именно такие варианты? Потому что именно многопоточность (multithreading) и однопоточность определяет взаимодействие виртуальной и физической памяти ресурса.
Языки использующие многопоточность рассмотрим на примере Java.
На рис 3 приведена простая схема распределения динамической памяти. (Здесь тоже хочу сказать, что динамическая память также использует физические кластеры, то есть общее представление стека вызовов будет таким же как у низкоуровневых языков), на этом рисунке еще более схематично динамическая память при вызове функции.
В движок java имплементирована специальная коллекция Stack, у которой есть два метода push(добавит данные) и pop(удалить данные). Виртуальная машина Javaведет запись всех вызванных функций и с каждым вызовом функции создает StackTraceElement. После завершения выполнения функции StackTraceElement уничтожается, поэтому информация о стеке вызовов всегда актуальная. С Помощью метода getMethodName можно всегда получить информацию о методе верхнего элемента StackTraceElement, а значит о методе вызова функции.
На рисунке представлен стек вызова с переменными и методами объектов, реализованных в Java
Javascript: Javascript однопоточный скриптовый язык использующий очередь функций обратного вызова(callback functions queue) с методом FIFO (первый пришел - первый уйдешь).
Два варианта взаимодействия физической и виртуальной памяти в Javascript:
Сам стек как и базовые использует LIFO, а очередь колбэков - FIFO. Так же в V8 имплементированы методы push и pop, декларация идентична методам, реализованным в Java.
Таймеры в JS
Методы Javascript использующие таймеры использующие API OS и таймеры которые работают на API браузера. Таймеры всегда передвигают выполнение функции-колбэка в конец стека вызовов. Что это значит? Это значит, что в браузере выполняя методы setTimeout, setInterva сначала запускается таймер, а лишь потом функция-колбэк попадает в очередь ожидания. Если в момент попадания колбэка стек переполнен, колбэку приходится ждать своей очереди. Таймеры запущенные вне браузера реализованы на основании либо внутренних методов V8 либо при обращении к API окружения (API OS).
Особенностью языка Javascript является технология ajax или иначе возможность отправки асинхронных запросов (XMLHTTPRequest) и выполнения каких либо операций без задержки выполнения основного кода. XMLHTTPRequest может быть отправлен синхронно, но при этом весь остальной код будет дожидаться либо результата отправки запроса, что порой нецелесообразно. Технология ajax реализована исключительно в браузерах, что делает выделяет Javascript из группы языков использующих async. Асинхронные запросы в JS используют цикл событий с очередью колбэков (event loop with callback queue). В остальных языках программирования тоже есть возможность запуска асинхронного кода (Python (asyncio), C#(async/await)), что позволяет выполнять какие-то операции без задержки выполнения основных функций, принципом тут тоже выступает цикл событий, где функция колбэк помещается в очередь ожидания. Принцип работы очереди - FIFO.
В мире JavaScript очень легко набрать свой стек технологий, используя набор небольших пакетов, каждый из которых решают свою конкретную проблему. И это хорошо, c одной стороны, а с другой стороны, у вас особо нет выбора - фреймворки которые выполняют широкий спектр задач в JavaScript не популярны.
- Статья 1: Основы
Я перешел на full-stack JavaScript из.NET. И уже после того как я освоил основы Node, мне пришлось еще уйму времени потратить на построение своего базового стека технологий и способа организации кода. К сожалению, существует не так много примеров конечных приложений на JS, где видно как решать основные, для большинства проектов задачи, такие как: обработка ошибок, доступ к БД, организация кода, авторизация и прочее.
Для того, чтобы всегда иметь под рукой пример использования базовых технологий, был написан Contoso Express , пример full-stack приложения на JS. В нашей команде, используем этот проект, как стартовый шаблон для других проектов, поэтому он будет поддерживаться и обновляться в дальнейшем.
Contoso Express это ремейк известного Microsoft учебника, для обучения основам разработки.NET веб проектов.
Для многих частей стека, сложно остановиться на одной альтернативе. Поэтому для некоторых технологий есть альтернативные имплементации. Смотри ветки ALT в Contoso Express repository.
Эти статьи для тех, кто уже знает основы, если вам нужно восполнить знания в какой-то области, поищите нужное в списке дополнительных ресурсов .
Приступим!
Почему JavaScriptПричин может быть много, вот мой топ лист:
- Язык JavaScript : JavaScript очень гибок и прост в использовании, многие недостатки языка исправлены в последней версии ES6, типизацию опционально можно добавить, используя TypeScript.
Простота : В основном, библиотеки в Node имеют простые API с которыми легко разобраться и которые работают интуитивно понятным образом. Если не получилось с одной библиотекой, как правило, несложно найти хорошую альтернативу.
Контроль : Программист сам строит инфраструктуру проекта, выбирая и объединяя небольшие модули для конкретных задач. Это требует больше времени, но результат стоит того. Разобравшись один раз, полученный опыт легко применять в дальнейшем.
Универсальность : JavaScript изначально работал только на клиенте. Вначале вместе с Node он перебрался на сервер, а совсем недавно на нем стало можно успешно писать десктопные (Eletctron) и мобильные приложения. Причем, для мобильных приложений есть опция гибридных приложений (используется обертка над браузером (Cordova)) или приложений с нативным интерфейсом (ReactNative, NativeScript). Для Node существует огромное множество библиотек и его легко интегрировать с другими технологиями, базы данных, облачные технологии, различные форматы и протоколы, найдется все.
Легкое развертывание : Node очень легко разворачивать на сервере: как на Linux, так и на Windows. После многих лет работы с.NET, деплоймент каждый раз был для меня неприятным испытанием, на Node этот процесс даже приносит удовольствие. Это просто надо попробовать.
Производительность : Node асинхронен и не блокирует процесс выполнения во время длительных операций, таких как вычитка файла или обращение к базе данных. Это позволяет достичь высокого уровня производительности при использовании единственного потока (single threaded environment). C другой стороны, вычисления в JavaScript медленнее чем в статически типизированных языках. Для большинства проектов это не проблема. Если нужны вычисления, а не просто преобразования данных, то лучше написать отдельный сервис на чем-то другом.
Один язык на сервере и клиенте : Это удобно, так как позволяет, без усилий переносить код между клиентом и сервером, легче в разработке и поддержке.
И это далеко не полный список.
Варианты языка JSСовременный JavaScript можно писать в нескольких вариантах:
- ES6 / ES7 next
- Языки компилируемые в JS (TypeScript и другие)
- ES7 / Next - еще не утвержденные новые фичи JS.
ES5 - версия JavaScript от 2009 года, полностью поддерживаемая всеми современными браузерами и Node.
ES6 - недавнее утвержденное обновление языка. Разработка поддержки стандарта всех JS движках пока еще в процессе разработки.
Взглянуть на текущее состояние поддержки ES6 можно на
Kangax ES6 .
Таким образом, в ближайшее время разрабатывать клиентскую часть сразу на ES6 нельзя, потому что поддержки во всех браузерах еще нет.
Для Node используется V8 движок, текущая стабильная LTS версия которого (4.x) не поддерживает все новые особенности ES6.
LTS (long term support) это версия NodeJs, рекомендуемая для использования на продакшeне. Следующая LTS Node ожидается в октябре 2016 и в ней уже есть поддержка большинства возможностей ES6.
Транспайлинг (transpiling)Для того чтоб бы использовать фичи ES6/ES7 существует несколько транспайлеров которые преобразуют код написанный на ES6 в ES5.
Обратите внимание на разницу между транспиляцией и компиляцией: .
Babel самый популярный транспайлер из ES6/Next в ES5.
TypeScriptTypeScript это язык расширение JavaScript, которое добавляет возможность статической типизации. Типы в TypeScript используются для проверки корректности кода и дополнительных возможностей рефакторинга и авто-подсказок. Когда TypeScript транспилируется в JS, все определения типов опускаются.
TypeScript поддерживает многие ES6/ESNext возможности и может использоваться как Транспайлер (вместо Babel).
Кроме того в TypeScript существуют дополнительные конструкции, которых нет в JS - энумы, наследование и полиморфизм в классах и прочее. Они транспилируются в JS с помощью вспомогательного JS кода.
Не все возможности TypeScript одинаково полезны перечислю основные категории:
- Возможности TS, которых нет в JS - это я бы не рекомендовал к использованию без необходимости или если вы не используете фреймворки написанные непосредственно на TS (например Angular2). Использование таких возможностей делает конвертацию TSJS гораздо сложнее, они чаще изменяются между разными версиями TS.
Транспиляция ES6/ESNext - TS отлично с этим справляется, хотя и уступает Babel в некоторых моментах, например async/await в TypeScript пока только доступно если транпилировать в ES6 версию. Больше об этом в следующей статье.
Статическая типизация в коде приложения - это основная причина использовать TS, типы в TS опциональны, если тип не указан, предполагается тип "any", что значит в этот тип можно записать и прочитать из него любые поля, это делает перевод существующего кода JS на TS, гораздо легче, не нужно добавлять типы везде, а только там где это имеет смысл. При этом даже если вы не описываете типы в TS, у вас появляется много дополнительных проверок, которые помогают обнаруживать тривиальные ошибки-опечатки, еще до того, как вы запускаете приложение. Дополнительно у вас хорошо работают подсказки в коде и не нужно лишний раз смотреть какие методы есть у модуля и какие у них сигнатуры.
Типизация сторонних библиотек - TS позволяет описывать структуру сторонних библиотек (например lodash иди express), это позволяет контролировать, что вы вызываете методы с правильными параметрами и позволяет видеть методы и их сигнатуры без использования документации. К сожалению качество таких описаний часто оставляет желать лучшего и когда в описании нет нужной сигнатуры ее нужно добавлять вручную. Иногда легче не использовать сторонние описания (работать с библиотекой как с типом "any"). Проблема в том, что сейчас описания библиотек в TS и сами библиотеки чаще всего пишут разные люди. Скорее всего ситуация будет улучшаться с ростом популярности TS.
Я бы рекомендовал выбирать между ES6 и TypeScript. ES6 имеет очень много полезных дополнений, которые делают разработку легче и приятнее и это стоит того, чтобы потратить больше времени на первоначальную настройку. На своих проектах я перешел на TypeScript, потому что это действительно серьезно улучшает процесс разработки, хотя и требует гораздо больших усилий по настройке и интеграции. Что бы вы не выбрали, хорошо если вы делаете осознанный выбор, поработав и с тем и с другим.
Среда разработкиWebStorm - умная среда разработки со множеством встроенных функций. Хорошая поддержка для TypeScript. Платная. Подробности настройки для contoso express на wiki-странице проекта. WebStorm основная IDE в нашей команде.
Visual Studio Code - бесплатная среда от Microsoft. Наилучшая поддержка для TypeScript, появилась недавно, нет некоторых привычных функций. Быстро развивается, полностью сделана и поддерживает плагины на JavaScript.
Другие - можно пользоваться и другими JavaScript IDE, такими как Atom, Sublime, Brackets. TypeScript в той или иной степени поддерживается везде.
Подбираем npm пакетыРаботать с npm очень просто. Просто устанавливать и просто публиковать свои пакеты. Вследствии этого пакетов на npm великое множество (на текущий момент 330.000+).
Подобрать правильный пакет достаточно сложно. По любому запросу на npmjs.com найдется множество пакетов, при этом не факт, что там будут предоставлены основные пакеты для решения нужной задачи.
Выбирая пакет стоит обратить внимание на: количество закачек (популярность) и как часто пакет обновляется (коммиты в гитхаб репозитории). Найдя нужный пакет, можно поискать информацию в интернете, так можно найти другие пакеты выполняющие схожие задачи.
Есть сайт с альтернативным поиском по npm npms.io , там сразу просчитываются такие характеристики, как популярность и регулярность поддержки.
В дальнейших статьях я буду описывать основные опции по пакетам для базовых задач разработки. Если имя пакета в кавычках (например "bluebird"), это значит это имя с которым пакет зарегистрирован в npm и его можно посмотреть по ссылке https://www.npmjs.com/package/{package_name } (т.е. в данном случае https://www.npmjs.com/package/bluebird).
Базы данныхSQL или NoSQL?На этот вопрос нельзя ответить однозначно, зависит от конкретной ситуации. Самыми популярными опциями для SQL/NoSql являются PostgreSQL/MongoDb. Недавнее добавление JSON полей в PostgreSQL, делает его очень привлекательным вариантом соединяющим в себе лучшее из миров SQL/NoSql. Но, несмотря на это, MongoDb по-прежнему самая популярная база данных для Node, и может быть легче для работы, особенно для тех, у кого не было предыдущего опыта работы с SQL базами данных.
Доступ к базе данныхРаботая с базой данных вы можете использовать доступ напрямую с помощью драйвера базы данных или каккую-то ORM абстракцию более высокого уровня. Если у вас не много взаимодействий с базой данных, то лучше использовать доступ напрямую или абстракцию низкого уровня, такую как Knex (для SQL баз данных).
ORMSequelize - самая популярная ORM для SQL баз данных. Она предоставляет высокий уровень абстракции над БД схемой и поддерживает основные SQL диалекты (PostgreSQL, MySQL, SQLite and MSSQL). Используется в Contoso Express.
Knex - это абстракция более низкого уровня. Больше как конструктор запросов, чем полоценная ORM. Поддерживает большее количество диалектов и дает больше контроля над генерируемым SQL. Имеются функции построения схемы БД и ее миграций.
Bookshelf - eще одна популярная ORM основанная на Knex, уровень абстракции ниже чем в Sequelize и многие вещи нужно определять вручную.
Mongoose - Самая популярная ORM для самой популярной в JS базы данных MongoDB
Прямое подключениеДля всех основных баз данных существуют драйверы хорошего качества, для прямого соединения. Для Postgres используйте "pg" или "pg-promise" пакеты.
Что дальшеВ следующей статье я расскажу про работу с JS на сервере. Она будет более практичной и покроет такие вещи, как выбор веб фреймворка, организация структуры проекта, работа с конфигами, авторизация, логирование, обработка ошибок и другое.
Буду рад замечаниям комментариям, особенно, непосредственно, по коду проекта Contoso Express:)
Спасибо всем кто дочитал до конца! Stay tuned!
В наши дни, какое бы веб-приложение Вы не писали, Вам приходится принимать множество архитектурных решений. И Вам хочется принимать их правильно: использовать технологии быстрой разработки, непрерывные итерации, максимально эффективно, быстро, надежно и др. Вы хотите делать меньше и получать больше, используя различные технологии. Но не всегда такие технологии просты в освоении.
По моему опыту (под которым далее будем понимать полный цикл разработки на JavaScript) выполняет все вышеперечисленные задачи. Возможно, Вы где-то с ним сталкивались; вероятно, Вы убеждены в его эффективности и даже спорили с друзьями по этому поводу. А сами пробовали? В этом посте я сделаю обзор full-stack JavaScript, расскажу зачем он Вам нужен и как все это работает.
Почему я использую JavaScriptЯ веб-разработчик с 1998 года. В те времена чаще всего мы использовали Perl для серверной разработки, но уже тогда на стороне клиента был JavaScript . С тех пор серверные технологии сильно изменились: одна за другой нас накрывали волны языков и технологий, таких как PHP, ASP, JSP, .NET, Ruby, Python и др. Разработчики стали осознавать, что использование двух разных языков на клиенте и сервере всё усложняет.
В начале эпохи PHP и ASP, когда шаблонизаторы были лишь в зачаточной стадии, разработчики встраивали код приложений прямо в HTML. Например:
alert("Welcome");
Или еще хуже:
var users_deleted = ; users_deleted.push("");
У начинающих существовали типичные проблемы с пониманием операторов в разных языках, к примеру таких, как for или foreach . Более того, написание подобного кода на сервере и на клиенте для обработки одних и тех же данных – неудобно даже сегодня:
$.ajax({ url:"/json.php", success: function(data){ var x; for(x in data){ alert("fruit:" + x + " points:" + data[x]); } } });
Первые попытки делать всё на одном языке заключались в создании клиентских компонентов на сервере и компиляции их в JavaScript. Это не работало так, как ожидалось, и многие их тех проектов провалились (к примеру, ASP MVC, заменивший ASP.NET Web forms , и GWT , которому на смену пришел весьма сомнительный Polymer). Но сама по себе идея была замечательной, а особенно: единый язык на клиенте и сервере, позволяющий нам повторно использовать компоненты и средства (ключевое слово здесь: средства).
Решение было простым: запустить JavaScript на сервере.
Одностраничные приложенияПри работе с full-stack JavaScript часто приходится создавать одностраничные приложения (SPA). Многие веб-разработчики ни раз искушались попробовать себя в SPA. Вы когда-нибудь сравнивали SPA и обычное веб-приложение при мобильном соединении? Разница в отклике порядка десятков секунд.
(Примечание: некоторые могут с этим не согласиться. Twitter, например,