Наши разработчики всегда следят за последними тенденциями развития JavaScript, чтобы предоставить вам самые современные функциональные возможности наших продуктов. Будет обидно, если эти знания будут потеряны. Иногда лучший способ сохранить что-то - поделиться этим с другими людьми. Поэтому мы решили поделиться с вами некоторыми новостями из мира JavaScript. В этой статье мы расскажем вам о самых интересных событиях декабря 2017 года.
Новые фреймворки и инструменты
Vuetron: приложение для тестирования и отладки Vue и Vuex
Vuetron - это инструмент для тестирования и отладки ваших приложений Vue.js. Он предоставляет возможность подписаться на определенные переменные состояния, наблюдать за запросами и ответами API, а также визуализировать структуру компонентов вашего приложения. Функция отладки путешествия во времени позволяет проверять предыдущие состояния приложения или отменять сразу целую группу изменений состояния.
Vuetron поддерживает пять типов событий:
- Подключено к серверу
- Состояние инициализировано
- Изменение состояния
- Событие инициировано
- Запрос / ответ API
Вы можете подписаться на определенные части состояния вашего приложения, чтобы улучшить процесс отладки. Вы можете построить дерево компонентов для визуализации структуры вашего приложения и свернуть или развернуть элементы дерева для определенных представлений иерархии.
Vuetron - это кроссплатформенный инструмент, поддерживающий Windows, Mac и Linux.
React Food Truck. Коллекция расширений для React
React Food Truck - это набор расширений для разработчиков React, использующих VS Code. Автор собрал самые полезные расширения, доступные на VS Code Extension Marketplace, чтобы сделать жизнь React-разработчика более приятной. Посмотрим, что у нас получится:
- Simple React Snippets - это основная коллекция фрагментов и команд React.
- ES6 Snippets - это расширение, которое содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора VS Code. Он поддерживает как JavaScript, так и TypeScript.
- Prettier может автоматически форматировать ваш код, чтобы он был более понятным и читабельным.
- ESLint - это линтерный инструмент для выявления и составления отчетов по шаблонам в JavaScript.
- Npm Intellisense - это плагин, который автоматически заполняет модули npm в операторах импорта.
- Стоимость импорта отображается в редакторе в строке, чтобы проинформировать вас о размере импортированного пакета.
- много других удобных расширений
Турбо. Невероятно быстрый клиент NPM
Turbo - клиент NPM, который в пять раз быстрее, чем Yarn & NPM. Это может значительно уменьшить размер node_modules. Turbo имеет несколько уровней избыточности и полностью работает в вашем браузере. Этот инструмент извлекает только те файлы, которые вам нужны, по запросу, а не загружает архивы целиком. Такой подход позволяет уменьшить количество неиспользуемых файлов, что может быть особенно важно в случае больших проектов:
При необходимости Turbo может отложить загрузку необходимого файла по запросу и сохранить его для использования в будущем. Turbo использует специальный алгоритм разрешения, чтобы ускорить процесс разрешения зависимостей. Он использует бессерверную версию преобразователя, который имеет доступ ко всему набору данных NPM в памяти и разрешает любой package.json за ‹85 мсек.
Octohint. Читайте код на GitHub с умом
Octohint - это расширение для браузера, упрощающее чтение кода на GitHub. Теперь вы можете найти ссылки на переменную или позицию определения функции без клонирования полного репозитория или использования Ctrl + F.
После установки этого расширения при наведении курсора мыши отобразится информация о текущем токене. Щелчок левой кнопкой мыши покажет все ссылки на текущий токен. Ctrl + Click позволяет перейти к определению текущего токена.
Octohint поддерживает все языки и может работать со следующими платформами: GitHub, GitLab и Bitbucket.
Nexus.js: среда выполнения многопоточного JavaScript
Nexus.js - это многопоточная серверная среда выполнения JavaScript, основанная на WebKit / JavaScriptCore. Он был разработан с упором на высокую производительность и динамическое масштабирование. Использование асинхронной, неблокирующей модели ввода-вывода и планировщика пула потоков позволяет максимально эффективно использовать современное оборудование.
Вы можете ознакомиться с подробным списком функций, чтобы узнать больше о реализованной функциональности. Также включены результаты тестов.
Обновления
И Дизайн 3.0
And Design - это язык дизайна пользовательского интерфейса корпоративного класса и реализация на основе React с набором компонентов React. Версия 3.0 вышла не так давно. Вы можете проверить полный список изменений, и мы сосредоточимся на наиболее важных функциях.
Новая цветовая система. Разработчики переписали алгоритм цвета для создания новых палитр. Он был создан, чтобы обеспечить свежие и яркие цвета и сделать переходы в оттенках серого более естественными.
Новый дизайн компонентов. Следуя отзывам сообщества, разработчики изменили размер шрифта компонентов по умолчанию. Кроме того, были изменены размеры всех компонентов. Это позволяет оптимизировать приложения для больших экранов.
Переписанные компоненты. Разработчики переписали компоненты Table и Form, чтобы решить некоторые долгие проблемы. Были добавлены некоторые новые свойства, позволяющие настраивать компоненты.
Новые компоненты. Разработчики создали два новых компонента: List и Divider. Компоненты списка могут использоваться для текста, списков, изображений, абзацев и других типов данных. Компонент Divider, в свою очередь, может использоваться для разделения абзацев текста на разные главы.
dhtmlxDiagram 1.1
Библиотека диаграмм DHTMLX позволяет создавать легко настраиваемые графики и диаграммы для отображения иерархических данных, таких как структура организации.
Начиная с версии 1.1, вы можете использовать Редактор организационных диаграмм для настройки и настройки диаграммы без программирования. Используя редактор, вы можете изменить текст на узлах и выбрать определенный цвет для заголовков с помощью палитры цветов. Положение каждого узла можно изменить либо перетаскиванием, либо указав значение в редакторе боковой панели. Вы можете изменить размер каждого узла с помощью ручки изменения размера. Вы можете переключаться между двумя режимами представления дочерних узлов: вертикальным и горизонтальным. Помимо этого, есть также функция отмены / повтора и поддержка перетаскивания, которая позволяет упорядочивать элементы диаграммы.
Советы, руководства и статьи
Руководство по GraphQL для интерфейсного разработчика
Пегги Райзис описывает основы использования GraphQL. Если вы хотите узнать, как интегрировать GraphQL с вашим приложением, чтобы избежать проблем с удаленными данными, не забудьте ознакомиться с этим руководством. Для тех, кто плохо знаком с этой технологией, автор выделяет некоторые полезные ресурсы, которые могут помочь в изучении GraphQL с использованием стека Apollo.
10 лучших библиотек React с открытым исходным кодом на GitHub
Фреймворк React приобрел невероятную популярность с момента своего первого выпуска. Это упрощает процесс разработки и позволяет создавать пользовательский интерфейс, который будет работать как акула. GitHub содержит десятки библиотек React, что не всегда хорошо, поскольку вам нужно потратить свое драгоценное время, чтобы понять, как каждая из них работает, и решить, подходит ли она вашим потребностям. Антон Шалейников любезно согласился провести свободное время и написал статью, в которой анализирует десятку лучших библиотек React на GitHub.
Интерфейс в 2017 году: важные части
Для тех, кто не следил за событиями фронтенд-экосистемы в 2017 году, есть статья Келана Кутера, в которой суммируются все последние тенденции. Он анализирует текущее состояние дел с популярными фреймворками и веб-технологиями, чтобы дать вам общее представление об отрасли. Стоит прочитать.
