​​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

​​Массивы

Существует два варианта синтаксиса для создания пустого массива:

let arr = new Array();
let arr = [];

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

let fruits = ["Яблоко", "Апельсин", "Слива"];

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

let fruits = ["Яблоко", "Апельсин", "Слива"];

alert( fruits[0] ); // Яблоко
alert( fruits[1] ); // Апельсин
alert( fruits[2] ); // Слива

Мы можем заменить элемент:

fruits[2] = 'Груша';
// теперь ["Яблоко", "Апельсин", "Груша"]

…Или добавить новый к существующему массиву:

fruits[3] = 'Лимон';
// теперь ["Яблоко", "Апельсин", "Груша", "Лимон"]

Общее число элементов массива содержится в его свойстве length:

let fruits = ["Яблоко", "Апельсин", "Слива"];

alert( fruits.length ); // 3

В массиве могут храниться элементы любого типа.
Например:

// разные типы значений
let arr =
[ 'Яблоко',
{ name: 'Джон' },
true,
function() { alert('привет'); }
];

// получить элемент с индексом 1 и показать его свойство
alert( arr[1].name ); // Джон

// получить элемент с индексом 3 и выполнить её
arr[3](); // привет

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

​​Методы массивов

Массивы предоставляют множество методов. Чтобы было проще, они разбиты на разные посты.

filter

На тот случай, если найденных элементов может быть много, предусмотрен метод arr.filter(fn).
Синтаксис этого метода схож с find, но filter возвращает массив из всех подходящих элементов:
let results = arr.filter(function(item, index, array) {
// если true - элемент добавляется к результату, и перебор продолжается
// возвращается пустой массив в случае, если ничего не найдено
});

Например:
let users = [
{id: 1, name: "Вася"},
{id: 2, name: "Петя"},
{id: 3, name: "Маша"}
];

// возвращает массив, состоящий из двух первых пользователей
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

#array #array_methods

​​Методы массивов

map
Метод arr.map является одним из наиболее полезных и часто используемых.
Он вызывает функцию для каждого элемента массива и возвращает массив результатов выполнения этой функции.
Синтаксис:
let result = arr.map(function(item, index, array) {
// возвращается новое значение вместо элемента
});
Например, здесь мы преобразуем каждый элемент в его длину:
let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

#array #array_methods

​​Методы массивов

slice

Его синтаксис:
arr.slice([start], [end])

Он возвращает новый массив, в который копирует элементы, начиная с индекса start и до end (не включая end). Оба индекса start и end могут быть отрицательными. В таком случае отсчёт будет осуществляться с конца массива.
Это похоже на строковый метод str.slice, но вместо подстрок возвращает подмассивы.
Например:
let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (копирует с 1 до 3)

alert( arr.slice(-2) ); // s,t (копирует с -2 до конца)

Можно вызвать slice и вообще без аргументов: arr.slice() создаёт копию массива arr. Это часто используют, чтобы создать копию массива для дальнейших преобразований, которые не должны менять исходный массив.

#array #array_methods

​​Методы массивов

Array.isArray

Массивы не образуют отдельный тип языка. Они основаны на объектах.
Поэтому typeof не может отличить простой объект от массива:
alert(typeof {}); // object
alert(typeof []); // тоже object

...Но массивы используются настолько часто, что для этого придумали специальный метод: Array.isArray(value). Он возвращает true, если value массив, и false, если нет.

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

#array #array_methods

​​Методы массивов

split и join

Ситуация из реальной жизни. Мы пишем приложение для обмена сообщениями, и посетитель вводит имена тех, кому его отправить, через запятую: Вася, Петя, Маша. Но нам-то гораздо удобнее работать с массивом имён, чем с одной строкой. Как его получить?
Метод str.split(delim) именно это и делает. Он разбивает строку на массив по заданному разделителю delim.
В примере ниже таким разделителем является строка из запятой и пробела.

let names = 'Вася, Петя, Маша';

let arr = names.split(', ');

for (let name of arr) {
alert( `Сообщение получат: ${name}.` ); // Сообщение получат: Вася (и другие имена)
}

У метода split есть необязательный второй числовой аргумент -- ограничение на количество элементов в массиве. Если их больше, чем указано, то остаток массива будет отброшен. На практике это редко используется:

let arr = 'Вася, Петя, Маша, Саша'.split(', ', 2);

alert(arr); // Вася, Петя

Вызов arr.join(glue) делает в точности противоположное split. Он создаёт строку из элементов arr, вставляя glue между ними.
Например:
let arr = ['Вася', 'Петя', 'Маша'];

let str = arr.join(';'); // объединить массив в строку через ;

alert( str ); // Вася;Петя;Маша

#array #array_methods

Что НЕ является валидным?

const bird = {
size: "small"
};

const mouse = {
name: "Mickey",
small: true
};

A: mouse.bird.size - 80
👍👍👍👍👍👍👍👍 68%
B: mouse[bird.size] - 14
👍👍 12%
C: mouse[bird["size"]] - 7
👍👍 6%
D: Все варианты валидны - 17
👍👍 14%
👥 118 человек уже проголосовало.

Какой верный ответ?