Frontender Libs - обзор библиотек JS / CSS

Owl carousel Это плагин для создания слайдеров. Имеет интуитивные настройки точек остановки слайдера. Адаптивен. Отлично работает как на мобильной, так и на десктопной версии. Owl карусель поддерживает модульную структуру плагина. Таким образом, можно отсоединить плагины, которые не используются в проекте, или создать новые, которые необходимы. Поддерживает старые версии браузеров. 👉 @sWebDev

Программист из Google выкладывает тесты и задачи по JavaScript 👉 @js_tests Зайди и посмотри сколько сможешь решить

History Этот плагин управляет состоянием страницы. Отправляет ссылку на уже подгруженную историю браузера. Состояние страницы при этом сохраняется в виде нормального URL и всё работает так, как будто вы на самом деле переходите с одной страницы на другую. 👉 @sWebDev

Meteor.js Полноценная инфраструктура Meteor.js обеспечивает быструю Frontend разработку для сквозных веб-приложений и мобильных приложений в JavaScript. Из-за своей модульной структуры библиотеки очень удобно использовать пакеты. Сегодня данная структура используется для разработки приложений в таких компаниях, как Mazda, Honeywell и IKEA 👉 @sWebDev

Mithril.js Mithril.js весит около 12kb в формате gzipped благодаря своему малому API. Он предоставляет механизм шаблонов с виртуальной реализацией DOM diff для рендеринга, утилиты для высокоуровневого моделирования с использованием функционального состава, а также поддержку маршрутизации и компонентности. Mithril.js имеет ряд похожих функций, как в React.js. Mithril предлагает иерархические элементы MVC и различные безопасные шаблоны, которые поставляются с интеллектуальными различиями DOM, они используются для проверки высокопроизводительного рендеринга. Данный JavaScript Framework также поставляется с двумя очень впечатляющими функциями для Frontend Development - маршрутизацией URL-адресов и настраиваемой привязкой данных. Преимущества 1. Чистый JavaScript. 2. Отлично работает с ES6, может выдерживать любую нагрузку. 3. Наличие интеллектуальной системы автоматической перерисовки. 4. Быстрее чем React. 5. Виртуальный DOM позволяет объединять HTML, XHTML или XML документы по определенным критериям.

Next.js Фреймворк был запущен командой React.js в качестве инструмента для рендеринга на стороне сервера. Разработчики, работающие с комбинацией Next и React.js, могут значительно упростить процесс разработки интерфейса. Next.js поставляется с набором замечательных функций, таких как маршрутизация на стороне клиента и автоматическое разделение кода. Прежде всего, Next.js поставляется с полной поддержкой CSS, известной как styled-jsx, чтобы упростить разработку дизайна пользовательского интерфейса 👉 @sWebDev

Node.js — мощный инструмент для fullstack- и backend-разработчиков. Быстро освоиться в этом фреймворке и научиться использовать все его возможности поможет онлайн-курс «Node.js Developer» от OTUS. Справитесь ли вы с уровнем курса? Покажет вступительный тест. ❗️Пройдите тестирование, чтобы: • оценить свои навыки • занять место по специальной цене • получить доступ к демо-урокам курса • попасть в закрытое сообщество профессионалов 👉 Пройти тестирование: https://otus.pw/FoCY/

Algolia Places Algolia Places – библиотека JavaScript для автоматического заполнения форм. Она специализируется на адресах, может добавить карту в поиск и отобразить местоположение. Удивительно точная и сверхбыстрая библиотека повысит удобство работы пользователей с сайтом. 👉 @sWebDev

Как JavaScript-разработчику прокачивать свой профессиональный уровень? 16 июня Александр Коржиков, Dev IT Engineer в международной финансовой корпорации ING Group, расскажет о своем опыте и проведет обзор вакансий. Также вы познакомитесь с программой онлайн-курса «JavaScript Developer. Professional» и форматом обучения в OTUS. В конце встречи вы получите возможность приобрести курс по спец.цене. Ждем вас на встрече! Записи вебинара НЕ будет. Зарегистрироваться -> https://otus.pw/nJWBH/

String.js Библиотека string.js, или просто S, это маленькая (менее 5 Кб в минифицированном и сжатом виде) JavaScript-библиотека, которую можно использовать в браузере и в среде Node.js. Она даёт в распоряжение программиста большой набор методов для работы со строками. Это — методы объекта string.js, в состав которых, для удобства, включены и стандартные методы строк. Объект string.js — это нечто вроде обёртки для обычных строк. Примечательные методы Метод between Он извлекает из строки подстроку, содержащуюся между строками left и right. Например, этот метод можно использовать для извлечения элементов, находящихся между двумя HTML-тегами:

 S = require('string');
S('<a>This is a link</a>').between('<a>', '</a>').s 
// 'This is a link'

Метод camelize Он удаляет из обрабатываемой строки пробелы, символы подчёркивания, тире, и приводит эту строку к «верблюжьему» стилю. var S = require('string'); S('---Foo---bAr---').camelize 👉 @sWebDev

Aurelia JS Этот JavaScript фреймворк — детище Роба Эйзенберга, автора известных в прошлом Caliburn.Micro и Durandal. Роб был членом команды, работающей над Angular, но в процессе работы над этим проектом между ним и остальными членами команды возникли разногласия. Из-за этого он вышел из ее состава и стал работать над собственным фреймворком, так начиналась история Aurelia JS. Его называют JavaScript фреймворком следующего поколения, идеально подходящим для веб и мобильных приложений. Aurelia JS отличается компактностью и ненавязчивостью кода. То есть специфические конструкции самого JavaScript фреймворка минимально засоряют ваш код. Это удобно и облегчает освоение Aurelia JS. 👉 @sWebDev

Reselect Если вы используете Redux, то эта функция станет для вас спасительной. Мы знаем, что редьюсеры Redux могут хранить большое количество данных, и если вы передадите всё хранилище в какой-либо компонент, это приведет к тому, что он будет заново рендериться каждый раз, когда что-либо в этом хранилище будет обновляться. Reselect решает эту проблему, меморизуя значения и передавая только то, что необходимо. Преимущества (из документации) 1. Селекторы могут вычислять производные данные, что позволяет Redux хранить минимально возможное состояние. 2. Селекторы эффективны. Селектор не пересчитывается, если один из его аргументов не изменился. 3. Селекторы являются составными. Они могут быть использованы в качестве входных данных для других селекторов. 👉 @sWebDev

DHTMLX DHTMLX предлагает JavaScript библиотеки и UI компоненты c богатой функциональностью для построения интерактивных веб-интерфейсов, используемых в различных сферах бизнеса. На данный момент линейка продуктов компании включает следующие решения: Suite с 20+ UI компонентами, Gantt и Scheduler для управления проектами с помощью диаграммы Ганта и планировщика событий, Diagram для наглядной визуализации данных, Spreadsheet для работы с динамическими таблицами наподобие Excel, а также Pivot, Rich Text Editor и Vault для удобной загрузки файлов. Кроме того, команда разработчиков DHTMLX планирует вскоре выпустить Kanban, который можно будет интегрировать с DHTMLX Gantt для еще более эффективного управления проектами. 👉 @sWebDev

Чат-бот или ассистент все чаще становится обязательным элементом в IT-продуктах. Когда-то это была трудоемкая задача, но теперь у разработчиков есть упрощающие процесс фреймворки. 10 июня приглашаем познакомиться с этими инструментами на demo-занятии «Что такое Smart App?» Виталий Ракитин расскажет, какие они бывают и какие возможности открывают. Уже на первом занятии вы сможете написать свои приложение для виртуальных ассистентов с виртуальным ассистентом внутри. Занятие рассчитано на специалистов с опытом web-разработки и входит в программу онлайн-курса OTUS, посвященного созданию голосовых ассистентов и чат-ботов. Регистрация на вебинар https://otus.pw/wGr3/

Почему вы выполняете рендеринг (Why Did You Render) Ненужный рендеринг может навредить производительности ваших React-приложений. Но иногда мы делаем это, даже не подозревая. Этот замечательный пакет, Why Did You Render, помогает нам найти проблемы с производительностью и решить их. Вы просто включаете его в любом компоненте, и он сообщает вам, почему именно происходит рендеринг. Ниже представлен компонент с возникающими проблемами рендеринга.

 import React, {useState} from 'react'

 const WhyDidYouRenderDemo = () => {
     console.log('render')
    
     const [user , setUser] = useState({})
     const updateUser = () => setUser({name: 'faisal'})

     return (
      <>
         <div > User is : {user.name}</div>
         <button onClick={updateUser}> Update </button>
      </>
     )
 }
 export default WhyDidYouRenderDemo

После включения эта библиотека запишет в консоль результат с картинки.

Webix UI Library Это одна из самых функциональных и высокопроизводительных библиотек. Webix специализируется исключительно на бизнес-приложениях. Это библиотека подобна универсальному швейцарскому ножу, который умеет практически все. Webix содержит 100+ UI виджетов, из которых можно собрать абсолютно любое бизнес-приложение. На момент написания статьи, в комплект Webix входило 8 высокоуровневых виджетов — SAP приложений: File Manager, Document Manager, User Manager, Chat-Messenger, Task Manager (Kanban), Pivot, Spreadsheet, SQL Query. 👉 @sWebDev

React LazyLoad Ленивая загрузка - это техника, используемая для загрузки только того, что вам нужно. Таким образом, она повышает производительность, не расходуя без необходимости вычислительные мощности. React LazyLoad - это библиотека, специально созданная для этой цели. Вы просто оборачиваете свой компонент, а эта библиотека позаботится обо всем остальном. Преимущества 1. Повышенная производительность 2. Поддерживает рендеринг на стороне сервера Пример использования import React from 'react'; import LazyLoad from 'react-lazyload'; const ImageList = () => { return <div> <LazyLoad> <img src ='image1.png' /> <LazyLoad> <LazyLoad> <img src ='image2.png' /> <LazyLoad> <LazyLoad> <img src ='image3.png' /> <LazyLoad> <LazyLoad> <img src ='image4.png' /> <LazyLoad> <LazyLoad> <img src ='image5.png' /> <LazyLoad> </div> } 👉 @sWebDev

Deep Equal Это известная библиотека, которую можно использовать для сравнения. Это очень удобно. Ведь в JavaScript, несмотря на то, что два объекта могут иметь одинаковые значения, они считаются разными, поскольку указывают на разные области памяти. Если мы используем Deep Equal, то это повышает производительность в 46 раз. Ниже приведен пример того, как мы можем это сделать. var equal = require('deep-equal'); const user1 = { name:'faisal' } const user2 ={ name:'faisal' } const deepEqual = equal(user1 , user2); // true -> exactly what we wanted! 👉 @sWebDev

React Window React Window используется для рендеринга длинных списков. Представьте, что у вас есть список из 1 000 элементов. На экране отображаются только десять, но ваш код пытается визуализировать 1000 элементов одновременно. Это может привести к серьезным задержкам в вашем приложении. Данная библиотека очень популярна и является обязательным инструментом в вашем арсенале. Использование React Window

 import { FixedSizeList as List } from 'react-window';
 
 const Row = ({ index, style }) => <div style={style}> Name is {names[index]}</div>
 
 const LongList = () => (
   <List
     height={150}
     itemCount={1000}
     itemSize={35}
     width={300}
   >
     {Row}
   </List>
 );

Данный код рендерит только то, что вы видите на экране. Поначалу это может быть непонятно, но необходимо, если вам нужно отобразить длинный список. 👉 @sWebDev