​​Webix UI Library

Библиотека пользовательского интерфейса Webix JavaScript — уже завоевала преданность разработчиков. Она предлагает более 100 виджетов; 13 из них являются полноценными одностраничными приложениями. Это готовые веб-приложения, которые вы можете использовать самостоятельно или встроить в свой уникальный проект.

Наиболее популярными инструментами являются Gantt, File Manager, Kanban и Pivot. Библиотека также включает в себя микрофреймворк Webix Jet, который позволяет разработчикам эффективно комбинировать виджеты.

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

Библиотека поставляется по лицензии MIT, доступны различные планы. Приятным бонусом является бесплатный пробный период, позволяющий понять, действительно ли вам нужна эта покупка.

Плюсы:
⚡ большой выбор комплексных виджетов;
⚡ оперативна техническая поддержка;
⚡ быстрое освоение.

Минусы:
💩 неполная документация по некоторым виджетам.


#библиотеки #фреймворки

​​Ember.js

Это веб-фреймворк JS с открытым исходным кодом. Он появился не так давно, но зарекомендовал себя как надёжное решение. Освоение может быть долгим, так как структура фреймворка довольно необычна. Пользовательский интерфейс, созданный с помощью Ember, управляется HTML, поэтому при разработке вы будете использовать HTML-шаблоны, которые являются основными частями фреймворка.

Приложения Ember предлагают встроенную среду разработки с автоматической перезагрузкой и программой тестирования. Кроме того, встроенный маршрутизатор Ember поддерживает вложенные URL-адреса с извлечением данных, загрузок и ошибок. Документация включает руководства и ссылки на API. Форум кажется довольно живым и отзывчивым.

Плюсы:
⚡ бесшовная поддержка URL;
⚡ открытый исходный код;
⚡ быстрый процесс разработки;
⚡ многократно используемый код.

Минусы:
💩 сложность освоения;
💩 малочисленное сообщество.


#библиотеки #фреймворки

​​DHTMLX

Это ещё одно достойное решение, которое помогает разработчикам создавать комплексные веб- и мобильные приложения. Библиотека невелика, но в ней есть все основные компоненты, необходимые для несложного проекта. Она включает в себя набор готовых компонентов HTML5, основанных на материальном дизайне, которые можно легко настроить.

Наиболее мощными компонентами являются Gantt, Scheduler, Kanban и Grid. Все компоненты совместимы с React, Angular и Vue. Также поддерживается TypeScript. Библиотеку можно приобрести на различных лицензионных условиях.

Плюсы:
⚡ отличная производительность;
⚡ простая реализация;
⚡ оперативная техническая поддержка.

Минусы:
💩 недостаточная документация;
💩 ограниченное количество компонентов.

#библиотеки #фреймворки

​​DevExtreme

Мы не включили Angular, React и Vue в список, но будет несколько решений, которые хорошо интегрируются с этими популярными JavaScript-фреймворками. DevExtreme предлагает полный набор мощных компонентов в дополнение к Большой тройке.

Платформа поддерживает устройства с сенсорным экраном и настольные компьютеры. Компоненты включают DataGrid, PivotGrid, TreeList, Charts, Form, Maps и другие. В целом, в фреймворке имеется более 50 интуитивно понятных и простых в использовании инструментов. Встроенный конструктор тем Theme Builder позволяет разработчикам изменять имеющиеся темы и создавать собственные.

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

Плюсы:
⚡ интеграция с React, Angular, Vue;
⚡ широкий выбор компонентов;
⚡ открытый исходный код.

Минусы:
💩 большой размер;
💩 неактивный блог.

#библиотеки #фреймворки

​​Kendo

Если вы не можете уйти от React, Angular, Vue или jQuery, Kendo — это то, чем вы будете рады воспользоваться. Он предлагает четыре отдельные библиотеки JS для этих 4 фреймворков. Каждый из них имеет устойчивый API и темы

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

Плюсы:
⚡ отличная интеграция с популярными JavaScript-фреймворками;
⚡ множество различных простых элементов управления.

Минусы:
💩 недостаточно документации по некоторым компонентам;
💩 недостаточно примеров кода.

#библиотеки #фреймворки

​​Backbone.js

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

Процесс разработки организован с помощью взаимодействия Models и Views. Состояние моделей отображается в представлениях, которые реагируют на любые изменения, и процессы происходят автоматически. Библиотека с открытым исходным кодом.

Плюсы:
⚡ прост в освоении и использовании;
⚡ лёгкий;
⚡ открытый исходный код.

Минусы:
💩 ограниченная функциональность;
💩 низкая производительность в проектах с большими данными.

#библиотеки #фреймворки

​​Infragistics

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

Ещё одним интересным интегрированным инструментом является Indigo.Design. Это платформа цифрового дизайна, используемая для создания прототипов и приложений, а также тестирования совместно с UX. Продукт также имеет бесплатный пробный период.

Плюсы:
⚡ аккуратный и настраиваемый дизайн.

Минусы:
💩 малочисленное сообщество.

#библиотеки #фреймворки

​​Sencha

Sencha включает широкий спектр различных продуктов, таких как Java-фреймворк и React Grid. Ext JS — это JavaScript-фреймворк от Sencha, который предлагает более 140 компонентов пользовательского интерфейса для создания идеальных приложений. Среди компонентов: календарь HTML5, сводная сетка, адаптер D3, деревья, списки, формы и многое другое.

Помимо компонентов, в Sencha есть целый ряд полезных инструментов, облегчающих жизнь разработчикам. Среди них Sencha Architect, Sencha Themer, Inspector, обеспечивающий отладку; Sencha Fiddle, бесплатный инструмент, с помощью которого вы можете попробовать Ext JS, ничего не скачивая. В случае, если вы решите купить лицензию, ознакомьтесь с различными условиями покупки.

Плюсы:
⚡ мощные компоненты;
⚡ регулярные обновления;
⚡ отзывчивая поддержка;
⚡ совместимость с любым устройством.

Минусы:
💩 малочисленное сообщество;
💩 сложность освоения;
💩 высокая цена.

#библиотеки #фреймворки

​​Syncfusion

Компоненты этого набора пользовательского интерфейса включают DataGrid, Charts, ListView, Scheduler, PDF Viewer и библиотеку Excel. Эти инструменты можно использовать для мобильной, настольной и веб-разработки. Ресурсы, позволяющие сократить время освоения, хорошо структурированы. Здесь есть демо-версии, документация, видеоуроки, а также электронные ресурсы, форум сообщества и техническая поддержка. Предлагается бесплатный пробный период.

Плюсы:
⚡ быстрый;
⚡ мощные и эффективные компоненты.

Минусы:
💩 сложная интеграция;
💩 недостаточная документация.

#библиотеки #фреймворки

​​Vaadin

Эта библиотека с открытым исходным кодом, за исключением некоторых коммерческих профессиональных компонентов. Компоненты предназначены для настольной и мобильной разработки. Более 45 компонентов включают Date Picker, Combo Box, Charts, Grid. Механизм внедрения CSS обеспечивает кастомизацию стиля. Также поддерживается TypeScript. Дополнительные инструменты включают Collaboration Engine, Design System Publisher, Designer и TestBench.

Плюсы:
⚡ поддержка плагинов;
⚡ открытый исходный код.

Минусы:
💩 малочисленное сообщество.

#библиотеки #фреймворки

​​Объекты

Как мы знаем в JavaScript существует 8 типов данных. Семь из них называются "примитивными", так как содержат только одно значение (будь то строка, число или что-то другое).

Объекты же используются для хранения коллекций различных значений и более сложных сущностей. В JavaScript объекты используются очень часто, это одна из основ языка. Поэтому мы должны понять их, прежде чем углубляться куда-либо ещё.

Объект может быть создан с помощью фигурных скобок {…} с необязательным списком свойств. Свойство - это пара "ключ: значение", где ключ - это строка (также называемая "именем свойства"), а значение может быть чем угодно.

Мы можем представить объект в виде ящика с подписанными папками. Каждый элемент данных хранится в своей папке, на которой написан ключ. По ключу папку легко найти, удалить или добавить в неё что-либо.

Пустой объект ("пустой ящик") можно создать, используя один из двух вариантов синтаксиса:

let user = new Object(); // синтаксис "конструктор объекта"
let user = {}; // синтаксис "литерал объекта"

Обычно используют вариант с фигурными скобками {...}. Такое объявление называют литералом объекта или литеральной нотацией.

#типы_данных #object

​​Литералы и свойства

При использовании литерального синтаксиса {...} мы сразу можем поместить в объект несколько свойств в виде пар "ключ: значение":

let user = { // объект
name: "John", // под ключом "name" значение "John"
age: 30 // под ключом "age" значение 30
};

У каждого свойства есть ключ (также называемый "имя" или "идентификатор"). После имени свойства следует двоеточие ":", и затем указывается значение свойства. Если в объекте несколько свойств, то они перечисляются через запятую.

В объекте user сейчас находятся два свойства:
1. Первое свойство с именем "name" и значением "John".
2. Второе свойство с именем "age" и значением 30.

Можно сказать, что наш объект user - это ящик с двумя папками, подписанными "name" и "age".

Мы можем в любой момент добавить в него новые папки, удалить папки или прочитать содержимое любой папки.

Для обращения к свойствам используется запись "через точку":

// получаем свойства объекта:
alert( user.name ); // John
alert( user.age ); // 30

Значение может быть любого типа. Давайте добавим свойство с логическим значением:
user.isAdmin = true;

Для удаления свойства мы можем использовать оператор delete:

delete user.age;

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

let user = {
name: "John",
age: 30,
"likes birds": true // например как тут
};

Последнее свойство объекта может заканчиваться запятой:

let user = {
name: "John",
age: 30*!*,*/!*
}

Это называется "висячая запятая". Такой подход упрощает добавление, удаление и перемещение свойств, так как все строки объекта становятся одинаковыми.

#типы_данных #object

​​Строки

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

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

let single = 'single-quoted';
let double = "double-quoted";

let backticks = `backticks`;

Одинарные и двойные кавычки работают, по сути, одинаково, а если использовать обратные кавычки, то в такую строку мы сможем вставлять произвольные выражения, обернув их в ${…}:

function sum(a, b) {
return a + b;
}

alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.

Ещё одно преимущество обратных кавычек — они могут занимать более одной строки, вот так:

let guestList = `Guests:
* John
* Pete
* Mary
`;

alert(guestList);
// список гостей, состоящий из нескольких строк

Выглядит вполне естественно, не правда ли? Что тут такого? Но если попытаться использовать точно так же одинарные или двойные кавычки, то будет ошибка:

let guestList = "Guests: // Error: Unexpected token ILLEGAL
* John";

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

#типы_данных #string

​​Числа

В современном JavaScript существует два типа чисел:

1. Обычные числа в JavaScript, который также называют "числа с плавающей точкой двойной точности" (double precision floating point numbers). Это числа, которые мы будем использовать чаще всего. Мы поговорим о них в этой главе.

2. BigInt числа дают возможность работать с целыми числами произвольной длины. Они нужны достаточно редко и используются в случаях, когда необходимо работать со значениями более чем 253 или менее чем -253.

Способы записи числа

Представьте, что нам надо записать число 1 миллиард. Самый очевидный путь:

let billion = 1000000000;

Но в реальной жизни мы обычно опускаем запись множества нулей, так как можно легко ошибиться. Укороченная запись может выглядеть как "1млрд" или "7.3млрд" для 7 миллиардов 300 миллионов. Такой принцип работает для всех больших чисел.

В JavaScript можно использовать букву "e", чтобы укоротить запись числа. Она добавляется к числу и заменяет указанное количество нулей:

let billion = 1e9; // 1 миллиард, буквально: 1 и 9 нулей

alert( 7.3e9 ); // 7.3 миллиардов (7,300,000,000)

Сейчас давайте запишем что-нибудь очень маленькое. К примеру, 1 микросекунду (одна миллионная секунды):

let ms = 0.000001;

Записать микросекунду в укороченном виде нам поможет "e".

let ms = 1e-6; // шесть нулей, слева от 1

#типы_данных #number