12 вещей, которые нужно учесть при оценке библиотеки JavaScript


Оглавление (нажмите, чтобы открыть):

JavaScript библиотеки 2020

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

Большинство разработчиков уже знают такие известные названия как jQuery и React, но в этой статье я бы хотел представить 12 альтернативных JavaScript библиотек, которые менее известны, но стремительно растут.

Хранение и обработка больших объемов данных (big data) – быстро развивающаяся индустрия, как и визуализация данных (data visualization), которая становится не менее важной. Существует множество различных библиотек, помогающих разрешить проблему, но ни одна не выделяется так сильно как D3.js. Эта JavaScript библиотека работает с SVG для рендеринга графиков, диаграмм и динамической визуализации.

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

NODE.JS

Я знаю, что многие разработчики уже устали все время слышать о Node, но это действительно самая быстрорастущая JavaScript библиотека, которая предлагает больше, чем просто среду для разработки. С помощью NPM вы можете управлять локальными данными всех ваших проектов прямо из командной строки – это делает Node полноценным инструментом для разработки, который отлично сочетается с другими инструментами, например, с Gulp. К тому же, существует много проектов с открытым исходным кодом, построенных на Node.js, так что вы можете работать с модулем тестирования на Mocha.js или создать фронтенд интерфейс с помощью Sails.js фреймворка.

Если вы еще не попробовали Node, то вы многое теряете.

RIOT.JS

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

Но Riot.js успешно борется за право стать альтернативой React. Используя фреймворк Riot у вас все еще будет доступ к виртуальному DOM, но управлять им будет значительно легче благодаря упрощенному синтаксису. К сожалению, эта библиотека не такая большая как React, и не спонсируется Facebook’ом, так что большого сообщества разработчиков тоже нет. Но это неплохая альтернатива и достойный конкурент в фронтенд пространстве.

CREATE.JS

От веб-анимации до диджитал медиа – с помощью Create.js вы можете работать с чем угодно. Это не одна единственная библиотека, а набор библиотек, созданных для разных целей. Например, Easel.js работает с HTML5 canvas элементами, Tweet.js помогает создавать анимации.

Каждая библиотека в этой сборке служит для определенной цели и предлагает современные возможности для всех основных браузеров. Но большинство этих библиотек обладают специфическими возможностями, так что их лучше всего применять на специализированных сайтах. Если интересно, можете посмотреть на сайте Create.js что они предлагают.

KEYSTONE.JS

Ранее я упоминал о Node.js и как много библиотек на нем построено. Keystone.js – отличный пример, который предлагает полноценный CMS движок.

С помощью Keystone вы можете создать MEAN приложения, работающие на Node/Express и MongoDB. Keystone.js абсолютно бесплатная, но все еще очень новая. На момент написания статьи существует только версия 0.3, так что пройдет еще много времени, прежде чем она станет востребованной среди профессионалов. Но если вас интересует JavaScript CMS, то обязательно попробуйте.

VUE.JS

В мире фронтенд фреймворков существует два наиболее известных варианта: Angular и Ember, но Vue.js – это еще один популярный фреймворк, который набирает все большую популярность с момента выхода версии 2.0.

Vue – это MVVM фронтенд JavaScript фреймворк, так что он уже отличается от типичной MVS архитектуры. Его сложно учить, но синтаксис становится понятным, когда начинаешь понимать, как все работает. Это неплохой вариант в войне фронтенд фреймворков, и он достоин пристального внимания.

METEOR

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

Уже даже существует социально-новостной фреймворк, названный Telescope, построенный на Meteor, который позволяет создавать новостные/социальные сайты с нуля, работающие на Meteor и React.

Meteor – отличная библиотека c огромным количеством возможностей, но изучить его не так просто. Однако, это весело, и умелые JavaScript разработчики могут создать практически что угодно на этой платформе.

CHART.JS

С помощью Chart.js вы можете создавать гистограммы, линейные графики, пузырьковые диаграммы и другие похожие вещи, используя JavaScript и canvas API. Это одна из наиболее простых JavaScript библиотек для изображения данных в графиках с предустановленными опциями и анимациями.

  • Визуализация данных становится всё более популярной.

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

WEBVR

Похоже, виртуальная реальность берет мир штурмом со своими новыми стартапами и неустанно работающими над VR проектами разработчиками. Вот почему я не удивился, когда нашел WebVR – JavaScript API, сделанная для VR в вашем браузере.

Она работает с большинством популярных девайсов, таких как Oculus Rift и Vive, но на данный момент находится на стадии разработки. Исходный код API тестируется на современных браузерах, чтобы определить, как он функционирует на VR девайсах.

Если хотите узнать и поучаствовать в проекте, посетите официальный сайт или страницу MozVR.

THREE.JS

Сложно представить, насколько сильно развилась 3D анимация с 1980 года по сегодняшний день. Нам всем знакомы 3D анимированные фильмы, но веб анимация все еще новый рубеж. К счастью, у нас есть такие библиотеки как Three.js, прокладывающие путь для 3D анимации в интернете.

На главном сайте вы сможете найти много примеров Three.js в действии. Вы можете создать чувствительные к движению фоны, пользовательскую 3D веб графику, и динамические элементы интерфейса. Если у вас достаточно терпения и желания, вы сможете создать практически людей 3D эффект с помощью этой библиотеки. Это лучший ресурс для 3D анимации в интернете с большим количеством примеров, которые покажут с чего начать.

OMNISCIENT.JS

Функциональное программирование с помощью JavaScript появилось не так давно, но это все еще достаточно новое направление, которое становится еще более популярным благодаря Omniscient.js. Эта бесплатная JavaScript библиотека осуществляет рендеринг для всех фронтенд компонентов сверху вниз. Вы можете писать функциональный JS код с нуля и работать с отличной библиотекой пользовательского интерфейса React.

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

RACTIVE.JS

Если вам нужна JavaScript библиотека, работающая с пользовательским интерфейсом, Ractive.js вам подойдет. Она работает шаблонными элементами и данными так, что вы сможете создавать шаблоны из элементов, которые прикреплены к Ractive функциям в JavaScript.

Это достаточно сложная библиотека, но она предлагает понятные курсы для новичков. Она не такая детализированная как React и использует другой синтаксис в JS и HTML. Посетите основной сайт, чтобы узнать больше, и взгляните на страницу с примерами, чтобы понять, на что способен Ractive.

Заключение

Каждая из библиотек в этой статье может предложить что-то новое для JavaScript сообщества. Если вам нравится кодить на JavaScript, то просмотрите каждую библиотеку, может, они смогут как-то улучшить ваш веб-проект.

Перевод статьи 12 JavaScript libraries to watch in 2020

15 свежих Javascript-библиотек

jQuery -плагины и Javascript -библиотеки помогают нам сэкономить время, особенно если речь идет о реализации какого-нибудь нестандартного решения для веб-сайтов.

Сегодня мы хотим поделиться с вами подборкой свежих Javascript -библиотек, с помощью которых можно создавать эффективные и полезные веб-приложения. Наслаждайтесь!

1. Datalib

Datalib — это библиотека для работы с данными. Она включает в себя средства для загрузки данных, ведения статистики и использования шаблонов строк. Хотя изначально библиотека разрабатывалась для движка Vega и связанных с ним проектов, datalib – это полноценная независимая библиотека.

Ее можно использовать для создания с помощью Javascript приложений для управления данными как на стороне клиента ( в браузере ), так и сервера ( например, в связке с node.js ).

2. Vorlon.js

Vorlon.js – это open-source инструмент с поддержкой расширений, позволяющий удаленно вести отладку и тестирование javascript-кода .

Библиотека основывается на node.js и socket.io . Чтобы установить Vorlon.JS , нужно будет добавить всего лишь одну строку кода в ваше веб-приложение. Затем запустить сервер и открыть консоль Vorlon.JS . Инструмент позволяет одновременно подключиться к 50 устройствам.

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

3. Layzr.js

Layzr.js – маленькая, современная, быстрая и независимая библиотека для создания отложенной инициализации ( или как ее принято называть «ленивой загрузки» ). Она помогает увеличить скорость загрузки страницы, так как изображения загружаются только после того, как попадут в область просмотра браузера.

4. Wheelnav

Wheelnav.js — библиотека на основе SVG для создания анимированного навигационного меню. Она позволяет создавать округлые, табулированные и многие другие форматы меню навигации. Библиотека включает в себя предопределенные CSS -классы, а также поддерживает data-атрибуты HTML5 .

5. Sprint.js

Sprint.js представляет собой миниатюрную DOM -библиотеку для современных браузеров. Sprint эффективен в использовании на устройствах с ограниченной пропускной способностью, будь то смартфон или планшет.

6. Cta.js

cta.js или Call to Animation ( в переводе «нажми для включения анимации» ) – это миниатюрная библиотека, которая позволяет анимировать любой элемент на странице, развернув его на все окно браузера.

7. Yako.js

Yako.js представляет собой миниатюрную библиотеку для построения графиков без использования DOM , разработанную для быстрого рендеринга как на клиентской, так и на серверной стороне. Библиотека предназначена для создания простеньких легких SVG -графиков, которые работают гораздо быстрее по сравнению с highcharts / flot / c3 / d3 .

8. Dragula

Dragula – j avascript -библиотека, которая просто делает свою работу, и не зависит при этом от перегруженных фреймворков.

9. twgl.js

Главная задача библиотеки twgl.js заключается в том, чтобы облегчить процесс использования API WebGL .

10. Beep.js

Beep.js – набор JavaScript -инструментов для разработки браузерных синтезаторов на основе API WebAudio .

11. Basket.js

Basket.js – простой загрузчик скриптов, который кэширует их в локальное хранилище. Он позволяет автоматически подгружать локально сохраненные скрипты, а новые автоматически кэшировать для дальнейшего использования.

12. Bamboo.js

Bamboo.js — фреймворк для разработки адаптивных веб-приложений, в которых необходимо использовать скользящее меню и фиксированную шапку сайта с возможностью прокрутки контента. Традиционная кнопка раскрывает и скрывает меню навигации. Если окно браузера будет меньше ширины веб-страницы, то меню будет постоянно отображаться с левой стороны.

13. Elevator.js

elevator.js – простая кнопка « Наверх », которая имитирует поведение настоящего лифта, и даже воспроизводит соответствующее звуковое сопровождение.

14. Iconate.js

Iconate.js представляет собой миниатюрную библиотеку для создания иконки, которая изменяется в зависимости от используемого браузера. iconate.js также поддерживает модульные паттерны AMD и commonJS .

15. AudioDrop

AudioDrop – утилита, которая позволяет реализовать загрузку данных из AudioBuffer в формате drag-and-drop . Просто укажите элемент, который будет выполнять функции дроп-зоны, и создайте callback-функции для последующей обработки загруженных данных.

Данная публикация представляет собой перевод статьи « 15 FRESH JAVASCRIPT LIBRARIES FOR MAY 2015 » , подготовленной дружной командой проекта Интернет-технологии.ру

Основные библиотеки, инструменты и фреймворки JavaScript, которые вы должны знать

JavaScript существует уже более 20 лет, и это один из тех языков, который не перестает развиваться. Язык переживал быстрый рост в последнее время, что заставляет задуматься, будут ли современные интерфейсные технологии JavaScript, которые хорошо известны сегодня, актуальны через пару лет.

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

Введение

Среда JavaScript стала просто огромной. Она имеет собственную экосистему библиотек, фреймворков, инструментов, менеджеров пакетов и новых языков, которые компилируются до JavaScript. Интересно, что NPM, который является де-факто менеджером пакетов для JavaScript, также является крупнейшим в мире реестром программного обеспечения. Вот выдержка из публикации, опубликованной на Linux.com еще в январе 2020 года.

С более чем 350 000 пакетами, реестр NPM содержит более чем вдвое пакетов по сравнению с другими наиболее популярными реестрами пакетов (одним их которых является хранилище Apache Maven). Фактически, в настоящее время это самый крупный реестр пакетов в мире.

Теперь давайте промотаем время вперед на восемь месяцев, и в настоящее время в реестре NPM имеется около 500 000 пакетов. Это огромный рост по сравнению с другими хранилищами пакетов.

Будучи фронт-энд разработчиком на JavaScript, важно не отставать от современных инструментов и библиотек JavaScript. Когда технология становится популярной, спрос на нее высок, что, в свою очередь, означает больше заданий по кодированию, за которые платят самую высокую стоимость в отрасли. Поэтому мы собрали список популярных технологий JavaScript, которые, как мы думаем, вам следует знать.

Библиотеки

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

Мастер Йода рекомендует:  Горизонтальное масштабирование PHP-приложений

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

React — это библиотека JavaScript, созданная разработчиками Facebook и Instagram. React была признана самой любимой технологией среди разработчиков, согласно опросу Stack Overflow Survey 2020. React также является самым популярным проектом JavaScript, основываясь на подсчете звезд GitHub.


Так почему React привлекает столько внимания? С помощью React можно создать интерактивный интерфейс с использованием декларативного подхода, в котором вы можете контролировать состояние приложения, говоря «картинка должна выглядеть так». Он использует компонентную модель, в которой компоненты являются многократно используемыми элементами пользовательского интерфейса, и каждый компонент имеет свое собственное состояние.

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

jQuery — это библиотека, которая сделала JavaScript более доступным, а манипуляции с DOM проще, чем раньше. Мягкая кривая обучения jQuery и простой синтаксис породили поколение новых клиентских разработчиков. Несколько лет назад jQuery считался надежным решением для создания мощных веб-сайтов с кросс-браузерной поддержкой. Основные функции jQuery, такие как манипулирование DOM на основе селекторов CSS, обработка событий и создание вызовов AJAX, подпитывали ее популярность.

Однако все изменилось, и среда JavaScript постоянно развивается. Некоторые функции jQuery были включены в новую спецификацию ECMAScript. Более того, новые библиотеки и фреймворки, используемые сегодня, имеют собственный способ связывания DOM, и поэтому простые методы манипуляции с DOM больше не требуются. Популярность jQuery находится на спаде, но я не думаю, что он исчезнет в ближайшее время.

D3 (или D3.js) — мощная библиотека JavaScript для создания интерактивных визуализаций с использованием веб-стандартов, таких как SVG, HTML и CSS. В отличие от других библиотек визуализации, D3 предлагает лучший контроль над окончательным визуальным результатом.

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

Если вы хотите создать простые визуализации, не вкладывая слишком много времени в них, вы должны проверить Chart.js.

Фреймворки

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

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

AngularJS когда-то была самой популярной технологией JavaScript среди разработчиков интерфейсов. Она был поддержана Google и сообществом частных лиц и корпораций. Несмотря на популярность, у AngularJS была своя доля недостатков. Команда провела два года работы над новой версией Angular, которая была, наконец, выпущена в сентябре 2020 года.

Выпуск Angular 2 был переделкой AngularJS. Некоторые из функций Angular 2 включают:

  • TypeScript поверх JavaScript как язык по умолчанию
  • компонентная архитектура
  • улучшенная производительность как на мобильных, так и на веб-платформах
  • лучшие инструменты и варианты скаффолдинга

Тем не менее, модернизация от Angular 1.x до Angular 2 является дорогостоящей, потому что Angular 2 — совершенно другой зверь. Это одна из причин, почему у Angular 2 не было такой же скорости принятия, как у ее предшественника. Но Angular и AngularJS по-прежнему относятся к числу наиболее часто используемых технологий в соответствии с Stack Overflow (2020). Проект имеет около 28 000 звезд в GitHub.

Vue.js — это легкая инфраструктура JavaScript, которая в этом году была в тренде. Это самый популярный фреймворк JavaScript на GitHub с точки зрения звезд GitHub. Синтаксис шаблона на основе HTML связывает предоставленный DOM с данными экземпляра.

Фреймворк предлагает опыт, похожий на React, с его виртуальными DOM и компонентами многократного использования, которые можно использовать для создания как виджетов, так и целых веб-приложений. Кроме того, вы также можете использовать синтаксис JSX для непосредственного написания функций рендеринга. Когда состояние изменяется, Vue.js использует систему реактивности, чтобы определить, что изменилось и перераспределяет минимальное количество компонентов. Vue.js также поддерживает интеграцию других библиотек во фремворк без особых хлопот.

Ember.js является интерфейсом на основе шаблона Model-View-ViewModel (MVVM). Он следует за стандартным подходом к настройке, который популярен среди сторонних фреймворков, таких как Ruby on Rails и Laravel. Ember.js включает в себя общие идиомы и лучшие практики фреймворков, чтобы вы могли создать приложение без особых усилий.

Стек Ember обычно включает:

  • Ember CLI: предоставляет основные варианты скаффолдинга и поддерживает сотни надстроек.
  • Ember Data: библиотека сохранения данных, которая может быть настроена для работы с любым сервером.
  • Ember Inspector: расширение доступно для Chrome и Firefox.
  • Liqu >Инструменты

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

Инструменты: универсальные исполнители задач

Универсальные исполнители задачи — это инструменты, используемые для автоматизации определенных повторяющихся задач. В число популярных исполнителей задач входят:

Gulp — это инструментарий JavaScript, который используется как исполнитель задач и как система сборки в веб-разработке. Компиляция, минимизация кода, оптимизация изображения, модульное тестирование, листинг и т.д. — это повторяющиеся задачи, которые должны быть автоматизированы. Gulp упрощает процесс написания задач даже для людей, которые менее знакомы с JavaScript.

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

Grunt — это исполнитель задач и инструмент автоматизации JavaScript. Grunt имеет интерфейс командной строки, который позволяет запускать настраиваемые задачи, определенные в файле, называемом Gruntfile. У Grunt есть тысячи плагинов на выбор, которые должны охватывать большинство обычных повторяющихся задач, с которыми вы столкнулись. С помощью Grunt вы можете запускать все задачи под одной командой, что упрощает вашу жизнь.

Gulp и Grunt требуют, чтобы вы потратили время на изучение и освоение нового инструмента, что займет у вас так же время. Ввода дополнительных зависимостей в ваш проект можно избежать, выбирая альтернативу, которая уже связана с Node.js. Хотя npm больше известен как менеджер пакетов, сценарии npm можно использовать для выполнения основной части вышеупомянутых задач.

Инструменты: тестирование

Тестирование — это процесс утверждения и проверки того, что приложение соответствует ожидаемым бизнес-требованиям и техническим требованиям. Подход, основанный на испытаниях, также помогает обнаруживать ошибки и, следовательно, следует рассматривать как неотъемлемую часть современного интерфейса разработки.

Jest — это относительно новая платформа тестирования, созданная Facebook и хорошо принятая сообществом React. Существует распространенное заблуждение, что Jest специально разработан для работы с React; однако, согласно документации Jest:

Несмотря на то, что Jest можно рассматривать как тест, специфичный для React, на самом деле это универсальная платформа тестирования, способная адаптироваться к любой библиотеке или фреймворку JavaScript. Вы можете использовать Jest для проверки кода JavaScript.

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

Jest имеет функцию под названием «snapshot testing», которая позволяет гарантировать, что пользовательский интерфейс приложения не изменится неожиданно. Разработчики из Facebook и другие участники вложили много работы в этот проект, поэтому не удивительно, что Jest окажется самой популярной платформой для тестирования JavaScript в ближайшие годы.

Mocha — это платформа тестирования JavaScript, которая имеет поддержку браузера, поддержку асинхронного обслуживания, включая перспективы, отчеты об охвате тестирования и JavaScript API для запуска тестов. Mocha часто соединяется с библиотекой утверждений, такой как Chai, should.js, expect.js, потому что у нее нет собственной библиотеки утверждений.

Jasmine — это ориентированный на поведение фреймворк JavaScript. Жасмин стремится стать браузером, платформой и независимым от фреймворка набором тестов. У Jasmine есть своя собственная библиотека утверждений, называемая matchers, которая дает инструменту чистый и легко читаемый синтаксис. Jasmine не имеет встроенного тестового исполнителя, и вам, возможно, придется использовать общий тестовый исполнитель, например, Karma.

В заключении

JavaScript остался актуальным со времен его создания еще в 1995 году. Вероятно, он останется таким же, пока браузеры не решат отказаться от него ради другого языка. Несмотря на то, что существует множество других языков, которые компилируются с использованием JavaScript, нет другого языка сценариев, который заменит JavaScript в обозримом будущем. Почему? Потому что JavaScript стал слишком популярным, чтобы его можно было заменить.

Язык не лишен кривых обучения, и есть множество фреймворков и библиотек, которые помогут вам заняться его изучением. Если вы ищете дополнительные ресурсы для изучения или использования языка в своей работе, то в Интернете вы сможете найти массу полезных ресурсов на эту тему.

Среда JavaScript определенно развивается, что видно из текущих тенденций в веб-разработке. Старые библиотеки и фреймворки были заменены новыми технологиями. jQuery, которая когда-то была наиболее популярной библиотекой JavaScript, испытывает некоторый спад с точки зрения привлекательности, использования и популярности. Новое поколение интерфейсных библиотек, фреймворков и инструментов набирает силу и получает всеобщее признание.

Привыкание к новым тенденциям в технологии также имеет свои преимущества. Работы по кодированию, требующие знание React, имеют одни из самых высоких зарплат в данной отрасли. Поэтому вам нужно продолжить обучение и экспериментировать с новейшими инструментами и фреймворками, чтобы максимально использовать JavaScript.

12 концепций, которые прокачают ваш JavaScript

Несмотря на уровень знаний вы должны понимать основополагающие концепции языка. Эти 12 концепций, конечно, не охватывают всего, что должен знать разработчик, но важны для любого JS-программиста.

Присвоения примитивных и ссылочных типов

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

JavaScript всегда использует присвоение по значению. И это очень важно: когда присваиваемое значение является одним из 5 JavaScript’овых примитивов (Boolean, null, undefined, String и Number) — присваивается фактическое значение. Однако, когда присваиваемое значение является типом Array, Function или Object, присваивается ссылка на объект в памяти.

Например, в коде ниже переменной var2 присваивается значение var1 . Т. к. var1 является примитивом (String), то переменной var2 присваивается строковое значение var1 , и она может рассматриваться как отдельная (независимая) переменная. Соответственно, изменения var2 никак не отразятся на var1 .

А теперь попробуем то же самое с типом Object .

Если бы вы ждали от кода выше такого же поведения, как и с примитивами, — это, вероятнее всего, вызвало бы ошибки. Подобное может быть особенно неудобным, если вы решите создать функцию, которая будет изменять какой-нибудь Object .

Замыкания

Замыкания — важный паттерн для приватизации переменной. В примере ниже createGreeter возвращает анонимную функцию, которой доступна переданная переменная greeting со значением «Hello». После эта переменная будет доступна для sayHello .

Или же более «правдоподобный» пример. У вас может быть некая функция apiConnect(apiKey) , которая возвращает некоторые методы с использованием API ключа. В таком случае этот ключ нужно передать только один раз.

Деструктуризация

Деструктуризация — это просто способ извлечения свойств из объектов.

Если вам нужно извлечь свойство, дав ему другое имя, — делайте так:

В следующем примере деструктуризация применяется для «чистой» передачи объекта person в функцию introduce . Иначе говоря, деструктуризация может использоваться для непосредственного извлечения передаваемых параметров. Для тех, кто разрабатывает на React, это может показаться знакомым.

Spread

Нельзя не сказать об этой концепции. Spread — это специальный оператор JavaScript, который позволяет расширять выражения в тех местах, где предусмотрено использование нескольких аргументов.

18 ноября – 20 декабря, Москва, 43 990 ₽

В следующем примере Math.max() не может принять массив arr , т. к. функции с таким аргументом не существует. Math.max() принимает числа отдельными аргументами. Оператор spread (три точки — . ) используется для извлечения отдельных элементов из массива.

Rest-параметры

Rest-параметры позволяют передавать произвольное количество аргументов, принимая их в виде массива.

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

С помощью методов массива в JavaScript можно добиться крутых (а порой и элегантных) способов трансформации данных. На StackOverflow часто можно наткнуться на вопросы о том, как работать с массивом объектов.

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

map, filter, reduce

В методах map() , filter() и reduce() иногда можно запутаться. Они полезны для трансформации массива или возвращения его агрегатного значения.

  • map(): возвращает массив, в котором каждый элемент изменяется с помощью переданной функции.
  • filter(): возвращает массив с теми элементами, в которых переданная функция возвращает true .
  • reduce(): работа с элементами с сохранением промежуточного результата.

find, findIndex, indexOf

Эти методы очень похожи. Используйте их следующим образом:

    find(): возвращает первый элемент массива, удовлетворяющий определенному условию.

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

  • findIndex(): метод идентичен find() , но вместо возвращаемого значения здесь возвращается индекс первого подходящего элемента.
  • indexOf(): метод идентичен findIndex() , но вместо функции он принимает искомое значение. Используйте этот метод в тех случаях, когда вам не нужна функция для проверки элемента на совпадение.
  • push, pop, shift, unshift

    Вот отличные методы, которые позволяют добавлять или убирать элементы в массиве.

    • push(): этот метод относительно простой. Он добавляет элемент в конец массива. Метод модифицирует массив и одновременно возвращает добавленный элемент.
    • pop(): метод удаляет последний элемент массива. Как и в прошлом случае, метод изменяет массив и одновременно возвращает удалённый элемент.
    • shift(): этот метод удаляет первый элемент массива. Метод изменяет массив и возвращает удалённый элемент.
    • unshift(): добавляет один или несколько элементов в начало массива. Как и прошлые методы, он изменяет массив, но возвращает новую длину массива.

    splice, slice

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

    • splice(): метод изменяет массив, удаляя или заменяя существующий элемент, и/или добавляет новый. Метод только изменяет массив. Код ниже можно объяснить так: в позиции 1 массива удалить 0 элементов и вставить b.
    • slice(): возвращает подмассив элементов массива, начиная и заканчивая на определённой позиции. Если конечная позиция не указана, возвращается остаток массива. Важно понимать, что этот метод не модифицирует массив, а только возвращает подмассив.

    Метод сортирует массив, основываясь на функции, которая принимает первый и второй элемент. Этот метод изменяет сам массив. Если в массиве порядок элементов не был изменен, метод возвращает 0, если изменён — 1.

    Генераторы

    Не забываем и про них. Генератор определяет, какое значение будет возвращено при следующем вызове next() .

    А вот пример использования генератора для бесконечных значений:

    Разница операторов сравнения (===) и (==)

    Не стоит пренебрегать разницей этих операторов. Оператор ( == ) перед операцией сравнения будет выполнять преобразование типов, а ( === ) делать преобразования не будет.

    Сравнение объектов

    Частая ошибка у новичков в JavaScript — это неправильное сравнение объектов. Дело в том, что переменные объектов хранят в памяти ссылку на объект, а не сам объект. Один из способов сравнения двух объектов — предварительное преобразование их в JSON строку. Однако у этого способа есть недостаток: не факт, что порядок в объекте сохранится. Более безопасный способ сравнения объектов — использование специальной библиотеки, которая сравнивает объекты на более глубоком уровне (к примеру isEqual от loadash)

    Хоть следующие объекты кажутся одинаковыми, они ссылаются на разные объекты в памяти.

    А вот в следующем примере сравнение возвращает true , потому что второй объект приравнивается к первому и они оба ссылаются на один объект.


    Важно понимать разницу между примитивами и ссылочными типами для правильной установки переменной, которая будет ссылаться на объект в памяти.

    Callback-функции

    Многие избегают callback-функции (функции обратного вызова). А зря — ведь это довольно просто! В следующем примере console.log() будет передан в myFunc() в качестве callback-функции.

    Промисы

    Как только вы начнёте понимать работу callback’ов в JavaScript, возможно, совсем скоро вы окажетесь в «аду обратных вызовов». На помощь приходят промисы (англ. Promises). Оберните свою асинхронную логику в промисы: resolve — для успехов, reject — для фейлов. Используйте then для обработки успеха и catch — для обработки фейлов.

    Async Await

    Как только вы разберётесь в промисах, вам может понравиться async await — это«синтаксический сахар» поверх промисов. Ниже пример async функции с await и промисом.

    Заключение

    Если вы не знали ни об одной из этих 12 концепций — не стоит откладывать их изучение в долгий ящик. А если знали — практика лишней никогда не будет.

    10 вещей, которые надо знать, чтобы стать мастером JavaScript

    Полагаю, вы веб-разработчик. Надеюсь, ваши дела идут хорошо, у вас отличная работа, возможно вы работаете на себя или в качестве фрилансера. Будущее этой сферы выглядит многообещающе. Может быть, вы только начинаете свою карьеру разработчика, а может быть, вы работаете уже многие годы. Какими бы навыками JavaScript вы ни обладали, всегда полезно освежить некоторые знания или изучить что-то новое. Ниже представлены 10 вещей, которые вы обязательно должны знать, чтобы считаться мастером JavaScript.

    1. Поток команд

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

    • if else — если вы этого не знаете, как вообще раньше писали код?
    • switch —то же, что и if else, только в чуть усложненном виде. Применяйте его, когда у вас несколько различных вариантов.
    • for — циклы созданы, чтобы вам не приходилось повторяться. Полезен будет не только простой for , `for of`и for in тоже весьма пригодятся. Большим достоинством циклов for является блокировка, поэтому в них можно использовать async await.
    • Предварительные условия — Применение ternary и логических операторов значительно облегчит вашу жизнь. Особенно если вы производите промежуточные действия и не хотите сохранять значения, чтобы использовать их дальше.

    2. Устранение ошибок

    Это заняло у меня немало времени. Не важно, работаете вы с front-end или back-end, первый год работы вы всегда будете пользоваться console.log или console.error для “устранения” ошибок. Для того, чтобы писать качественные приложения, вам нужно избавиться от этой привычки, и вместо использования ленивых логов устранять ошибки правильно. Разберитесь, как написать свой собственный конструктор Error, как правильно находить ошибки, а также как показывать пользователю, в чем проблема.

    3. Модели данных

    Постоянно просматривая ваш код, вы должны решать, когда стоит объединить определённые блоки информации, а когда этого делать не нужно. Это применимо не только к созданию моделей данных, но также функций, параметров, объектов или переменных. Например:

    4. Асинхронность

    Это очень важный аспект JavaScript. Вызываете ли вы данные из back-end или асинхронно выполняете запросы в сам back-end, в любом случае вы столкнетесь с асинхронностью и связанными с ней проблемами. Если вы не знаете, что такое асинхронность, вы столкнетесь со странной ошибкой, которую будете пытаться решить пару часов. Если вы знаете, что это, но не знаете, что с этим делать, вы попадете в ад обратных вызовов. Лучше в ваших приложениях использовать промисы и/или async await.

    5. Управление DOM

    Это интересная тема. Чаще всего, описывая обычную работу программиста, про это забывают. Может быть, вы изучили jQuery, и вам и не нужно было учиться навыкам управления DOM. Может, вы просто работаете с front-end фреймворком, где управление DOM используется редко. Однако я считаю, что это очень важный аспект для понимания JavaScript, как минимум во front-end. Понимание того, как работает DOM и как получать доступ к элементам, поможет вам лучше понять, как работают сайты. К тому же, обязательно наступит момент, когда вам придется работать с DOM, даже если вы используете современные front-end фреймворки, и вы точно не хотите вводить jQuery в ваш package.json , чтобы просто получить доступ к элементу.

    6. Node.js / Express

    Даже front-end разработчики должны знать азы node.js. Хорошо, если вы также будете знать, как запустить простой сервер Express, добавить новые маршруты или изменить существующие. JavaScript хорошо подходит для написания скриптов, которые помогут в автоматизации выполнения задач. Таким образом, зная, как читать файлы и работать с путями к файлу и буферами, вы получите набор инструментов для создания чего угодно.

    7. Функциональный подход

    Спорам между любителями функционального и объектно-ориентированного программирования нет конца. С помощью обоих подходов вы можете достичь одних и тех же целей. А JavaScript всё упрощает, так как объединяет оба этих подхода. Библиотеки вроде lodash предоставляют вам отличный набор средств для создания приложений при помощи функционального подхода. Сейчас вам даже не придется использовать какие-то внешние библиотеки. Многие наиболее важные функции были внедрены в официальных версиях JavaScript. Вам обязательно нужно научиться использовать map `reduce` filter `forEach` и `find`.

    8. Объектно-ориентированный подход

    Вам также стоит познакомиться и с объектно-ориентированным JavaScript, если вы хотите полностью освоить его. Долгое время в работе я пренебрегал этой частью, и всегда находил обходные пути. Но иногда действительно стоит применять объекты/классы и экземпляры, чтобы использовать определенные функции. Классы широко используются в React, MobX и пользовательских конструкторах.

    9. Front-end фреймворк

    React.js, Angular и Vue.js составляют “большое трио”. Если сейчас поискать вакансии, практически в каждой из них будет требоваться знания чего-то из этого. Несмотря на то, что они быстро изменяются, важно понимать основную суть этих библиотек и фреймворков, чтобы понимать, как работают приложения. К тому же, с их помощью легче писать приложения. Если вы ещё не выбрали, что изучать, я советую React.js. Последние пару лет я работаю с этой библиотекой, и ни разу не пожалел об этом.

    10. Объединение / транспиляция

    К сожалению, это большая часть разработки приложений. С одной стороны, мне не стоит говорить “к сожалению”, потому что здорово иметь возможность писать код, используя все новые функции. С другой стороны, я так говорю, потому что всегда нужно помнить о том, что существуют старые браузеры, которые эти функции не поддерживают. Поэтому нам приходится транспилировать наш код, чтобы он обрабатывался старыми браузерами. Если вы работает с node.js, то прибегаете к транспиляции реже. Для транспиляции обычно используют babel.js, изучите его. Для объединения кода и связи всех частей между собой существует пара способов. Раньше наиболее распространенным был Webpack. Но некоторое время назад откуда ни возьмись появился parcel, на данный момент мне он нравится больше. Пусть он и не идеален, но он эффективнее и проще в настройке, чем Webpack.

    Бонус: Регулярные выражения

    Это не относится конкретно к JavaScript, но всё же очень полезно, хоть и сложно. Изучение синтаксиса регулярных выражений, определённо, займет у вас некоторое время, а запомнить все варианты просто невозможно.

    Тестирование

    Тестирование — это действительно очень важная часть разработки приложений, в том числе и в JavaScript. При написание кода, прежде чем запустить функцию, вы (в идеале) должны провести тестирование, пусть даже и ручное. Лучше будет применять автоматическое тестирование. Существуют разные типы тестов: модульное, сквозное, нагрузочное тестирование, проверки безопасности и front-end (например, подключен компонент или нет). Также есть множество различных тестовых сред: enzyme, jasmine, mocha, chai, и т.д. Сейчас мне больше всего нравится ava.js, советую изучить её, если вы до этого не работали с автоматическим тестированием.

    Надеюсь, вы итак уже знаете всё, о чем я написал. Если нет, поработайте над этим и постарайтесь стать мастером JavaScript! Это действительно стоит того. Помните, что в программировании самое главное — это практика. Поэтому если вы не знакомы с какими-то из описанных тем, или знакомы только в теории, восполните пробелы. Это пригодится вам в будущем.

    5 лучших библиотек JavaScript для веб-разработки

    jQuery, React, Angular. Разработчики легко оперируют этими понятиями, в то время как для заказчика все эти названия могут оставаться загадкой.

    В этой статье мы предлагаем вместе разобраться со следующими вопросами:

    • что представляет собой язык JavaScript;
    • что такое библиотека?
    • для чего библиотека используется в веб-разработке?
    • какие библиотеки наиболее популярны среди разработчиков?

    Мы расскажем о пяти наиболее интересных и полезных библиотеках Java Script , которые активно используются веб разработчиками.

    JavaScript

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

    Чем объясняется высокая популярность JavaScript?

    На JavaScript пишут весь фронтенд (код, который отвечает за работу пользовательского интерфейса).

    Собственно, JavaScript — это язык сценариев, при помощи которого создаются интерактивные элементы на веб страницах. JavaScript можно использовать для любых действий с меню, изображениями, формами и другими элементами, которые можно совершить на веб-сайте: построение, проверка, перемещение и т.д.

    Бэкенд (код, который отвечает за работу сервера) может быть написан на множестве языков, но фронтенд будет написан с использованием CSS ( каскадных таблиц стиля) и языка JavaScript.

    Что такое библиотеки?

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

    Говоря простыми словами, библиотека предлагает разработчику комплект готовых решений для конкретной стоящей перед ним задачи .

    Библиотеки нужны разработчикам, когда нужно создать сайт с более сложным функционалом .

    Чтобы не тратить время на написание сложного кода на чистом языке ( vanilla JavaScript ), разумнее использовать уже готовые решения . В основном, такие решения имеют вполне достойное качество. А все, что не устраивает разработчика в плане качества или функциональности, можно переписать и подогнать под условия конкретного проекта.

    Так как язык JavaScript используется очень активно, расширяются и сферы его применения: сравнительно недавно его начали использовать и для написания бэкенда.

    Соответственно, этот язык собрал вокруг себя большое сообщество разработчиков, а число новых готовы решений и компонентов постоянно увеличивается.

    Полезные библиотеки

    jQuery

    Прочно сохраняет за собой пальму первенства, хотя и начала терять популярность в последнее время.

    Преимущества jQuery:

    • jQuery позволяет сократить время создания нового функционала за счет использования плагинов .
    • jQuery появилась более 10 лет назад, когда перед разработчиками стояла серьезная проблема совместимости кода с разными существующими браузерами. Кросс-браузерная jQuery существенно упростила жизнь разработчикам, так как позволяла писать один код для всех браузеров, а не для каждого браузера отдельно . Тем самым существенно сокращалось время разработки.

    В наши дни браузеры становятся “умнее”, и в некоторых случаях разработчики отказываются от использования jQuery. Зачастую сложные приложения пишут изначально только под современные последние версии браузеров.

    • у jQuery достаточно низкий порог вхождения , поэтому она используется для большого количества простых сайтов и веб-приложений.
    • версии jQuery, как правило, совместимы между собой . Соответственно, существует возможность использовать все готовые решения, которые уже созданы теми, кто когда-либо работал с этой библиотекой.
    • еще одним преимуществом является наличие подробной документации и развитое сообщество разработчиков вокруг jQuery.
    • jQuery обладает определенным весом, и ее использование замедлит загрузку веб сайта или приложения.
    • при отсутствии готового решения в библиотеке от разработчика потребуется дополнительное время и усилия на написание соответствующего кода.

    React

    Библиотека, которая появилась сравнительно недавно (представлена специалистами Facebook в 2013 г.), но уже нашла своих последователей и стала предметом многочисленных обсуждений и разговоров.

    По данным сайта SimilarTech React используется на 93 980 веб-сайтах.

    • React использует Shadow DOM (объектную модель документа): все изменения компонентов сайта или приложения производятся в ней (она используется в качестве промежуточного слоя между веб страницей и реальной DOM), при этом изменение одного компонента не затрагивает все остальные. Соответственно, обновление страниц происходит быстрее, и элементы интерфейса пользователя являются более динамичными. То есть взаимодействие пользователя с сайтом или приложением становится более активным.
    • React позволяет повторно использовать части уже написанного кода. Это существенно сокращает время разработки.
    • React имеет открытый исходный код: соответственно, библиотека открыта для любых усовершенствований и решений со стороны заинтересованных разработчиков. А это дает ей возможность постоянно развиваться и расширяться.
    • React рекомендуется использовать для SPA (одностраничное веб-приложение или веб-сайт).

    В таких приложениях и сайтах используется один HTML-документ для всех страниц и технология AJAX .

    Эта технология позволяет странице быть динамичной (то есть реагировать на действия пользователя, взаимодействовать с ним), но при этом страница не перезагружается, а обновляется посредством AJAX.

    В результате благодаря тому, что обновление происходит без задержки, у пользователя создается комфортное ощущение того, что он пользуется такими уже привычными для него мобильными приложениями в своем телефоне.

    Не рекомендуется использовать React только потому, что она сейчас на слуху. Следует взвесить, насколько она действительно необходима, потому что ее использование предполагает и определенные минусы:

    • React много весит (соответственно при загрузке веб-сайта или приложения будет возникать задержка, что явно не обрадует избалованного высокими скоростями современного пользователя);
    • библиотека достаточно сложная , и требуется много времени для ее изучения;
    • сайты, разработанные с ее использованием, не всегда идеально индексируются браузерами (конечно, всегда есть возможность внести определенные изменения и дополнения, но это потребует дополнительного времени и усилий).

    Именно поэтому React зачастую используется для сайтов, которым не нужна индексация (например, для страниц с закрытой внутренней информацией организации или личными данными).

    Говоря о наиболее эффективных библиотеках, было бы несправедливо не упомянуть Angular. Эта библиотека широко используется многими разработчиками и выполняет функции, аналогичные тем, для которых предназначена React. Поэтому мы не будем выделять ее отдельным пунктом, но не упомянуть о Angular, которая по данным того же сайта SimilarTech используется на 508 427 веб-сайтах , мы просто не имели права.

    Кроме двух вышеупомянутых библиотек здесь следовало бы упомянуть еще и достаточно удобный и популярный Vue.js, но он является фреймворком (набором библиотек), а это уже другая “весовая категория”.

    Lodash

    Lodash предназначена для того, чтобы облегчить работу с объектами, массивами данных, цифрами, строками : их создание, комбинирование, изменение, преобразование в разные форматы, сортировку, фильтрацию и т.д.

    • быстродействующая кросс-браузерная библиотека: исключает проблемы с совместимостью с разными браузерами независимо от версии. Благодаря этому Lodash используется практически во всех крупных проектах.
    • предоставляет возможность импортировать для использования только необходимую функцию (модуль), а не всю библиотеку.
    • Lodash достаточно много весит. Поэтому рекомендуем тщательно взвесить, что целесообразнее:
    • потратить определенное время на написание кода, но не утяжелять сайт библиотекой


    • сэкономить время и воспользоваться готовым решением, но согласиться на то, что загрузка страниц будет происходить чуть медленнее.

    Библиотека, которая ускоряет и облегчает визуализацию данных .

    • предлагает большой выбор вариантов визуализации в самых разнообразных формах и видах. Перейдя на примеры использования D3.js, можно посмотреть, как именно могут выглядеть готовые решения.
    • D3.js позволяет дополнить визуализацию интерактивностью самых различных уровней сложности.
    • Не обязательно быть разработчиком, чтобы понять, что использование готовых решений для визуализации значительно снижает время, необходимое для создания готового продукта .
    • основным недостатком D3.js является достаточно высокий порог вхождения. Не имеющему опыта разработчику понадобится определенное время, чтобы научиться создавать сложные интерактивные варианты визуализации.

    Chart.js

    Эта библиотека имеет узко специальную направленность и позволяет создавать различные диаграммы и графики : линейные диаграммы, гистограммы, диаграммы с областями и другие.

    • Chart.js проста в использовании , и на официальном сайте прилагается достаточно подробная документация. Так что освоение Chart.js не составит особого труда для разработчика.
    • библиотека дает возможность создавать только основные базовые типы диаграмм . Для более сложных форм нужно будет подбирать другие инструменты.
    • не обеспечивает интерактивность : все диаграммы выглядят как обычные статичные картинки.

    Как видите, диапазон использования библиотек варьируется от создания интерфейса пользователя в общем до специфических задач, которые свойственны далеко не всем приложениям.

    Количество js библиотек растет практически каждый день, параллельно растет и число последователей и противников тех или иных технологий.

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

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

    Как и обещали, мы рассказали о пяти самых интересных библиотеках, и в конце статьи предлагаем наш традиционный бонус : Umbrella всегда дает своим клиентам больше, чем обещает.

    Three.js

    В этой статье мы не будем много писать о бонусе.

    Просто перейдите на сайт Three.js , и вы сразу поймете, для чего предназначена эта библиотека.

    • Three.js поможет, если вам нужна 3D анимация для вашего веб сайта или приложения . Кроме того, на сайте представлено достаточно большое количество примеров, из которых можно почерпнуть вдохновение.
    • хорошо работает совместно с другими библиотеками javascript.
    • легко интегрируется в уже существующий код веб сайта или приложения .
    • основные недостатки связаны с недостаточно полной документацией, отсутствием поддержки развитого сообщества разработчиков. Все это затрудняет работу с библиотекой для разработчика, не имеющего соответствующего опыта.

    Наша команда ждет вас с вашими свежими идеями, которые мы поможем воплотить в жизнь! Свяжитесь с Umbrella прямо сейчас!

    12 вещей, которые нужно знать о классах и прототипах в JavaScript.

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

    1. В JavaScript всё ведёт себя, как объект.
    2. Абсолютно любая функция может вести себя как конструктор при помощи слова new. constr = new Func ();
    3. Абсолютно любой (даже пустой) объект может выступать в роли прототипа.
    4. Прототип имеется у каждого объекта. Например, для конструктора прототип по умолчанию — это пустой объект.
    5. Прототип — это не что-то особенное, как, например, «класс» в других языках. Это просто обычный объект, без каких-то дополнительных свойств или методов.
    6. Как ведет себя сущность в JavaScript делится между конструктором (любая функция, которая отвечает за создание и инициализацию сущности) и прототипом (задает поведение сущности)
    7. Любое разделяемое между объектами поведение определяется их прототипом. Например, если требуется иметь много объектов с одним и тем же методом, его лучше определить на прототипе.
    8. Ключевое слово this в методе, определенном на прототипе, но используемом на объекте с этим прототипом, ссылается на сам объект.
    9. Свойства и методы, уникальные для объекта, определяются в конструкторе.
    10. Любые свойства и методы прототипа доступны непосредственно в объектах, имеющих этот прототип.
    11. Свойства и методы прототипа могут переопределяться в конструкторе или непосредственно на объекте.
    12. Прототипная модель в JavaScript позволяет реализовать классическое наследование и поведение класс-объект в ООП, но также даёт делать более гибкие вещи.

    10 вещей, которые надо знать при использовании jQuery в SharePoint

    Для чего нужен jQuery в SharePoint? Обычно его используют для четырех целей:

    • Вызывать код JavaScript в момент загрузки страницы с помощью $(document).ready.
    • Использовать Ajax функции для доступа к данным на сервере.
    • Использовать готовые плагины,такие как tooltip или tabs, для того, чтобы расширить функционал сайта.
    • Проводить некоторые манипуляции с объектной модели документа (DOM).

    Если Вы собираетесь использовать jQuery на страницах SharePoint, то вам нужно знать следующие вещи:

    1. Используйте mQuery и RequestExecutor в простых случаях

    Если у вас простой случай, то Вы можете использовать библиотеку mQuery для манипуляции DOM и RequestExecutor для ajax запросов. Кроме того, вместо Ajax запросов гораздо выгоднее использовать JSOM и TypeScript для клиентской разработки. Об этом я писал ранее.

    Если Вы, все таки, решили использовать jQuery, то вам нужно помнить следующее:

    2. jQuery(document).ready срабатывает не вовремя

    Это происходит потому, что $(document).ready взрывается при событии DOMContentLoaded. А это события создано для тех случаев, когда весь контент страницы загружается с сервера. Оно происходит после того как браузер скачал всю страницу, связанные файлы и всё распарсил. SharePoint использует механизмы динамического формирования страницы, когда скрипты в теле страницы запускаются и формируют части страницы. В этом случае использовать DOMContentLoaded, отрабатывает до того как сформирована страница. Гораздо более надежный способ вызова после загрузки страницы – с помощью события body.onload. Для этого в SharePoint есть готовые функции.

    3. Используйте _spBodyOnLoadFunctions или _spBodyOnLoadFunctionNames

    Эти два массива (да-да, обычные JS массивы). _spBodyOnLoadFunctionNames содержит имена глобальных функций, которые необходимо вызвать на событие body.onload. _spBodyOnLoadFunctions содержит объекты-функции, что гораздо удобнее, но доступно только в SharePoint 2013. Кроме того есть переменная _spBodyOnLoadCalled, которая равна true, если функции уже были выполнены.

    4. Используйте RegisterModuleInit

    Если у вас на сайте используется Minimal Download Strategy (MDS), то вам необходимо написать дополнительный код, чтобы вызывать функцию при каждой асинхронной загрузке страницы. MDS был создан для того, чтобы загружать не полностью страницу сервера, а только изменившуюся часть. В этом случае не происходит полная загрузка страницы и не вызывается событие body.onload. Для того, чтобы ваш код работал, вам необходимо вызвать функцию RegisterModuleInit, в которую передать имя скрипта и функцию, которая будет вызвана при асинхронной загрузке.

    Пример кода загрузки с учетом

    5. Для подключения jQuery используйте CustomAction ScriptLink

    Не используйте другие способы, не трогайте masterpage, не создавайте ссылки в разметке. Чтобы поместить jQuery на все страницы сайта надо использовать следующий элемент в фиче:

    Этот код код добавляет ссылку на скрипт в тег head каждой страницы сайта. Он автоматически добавляет дополнительный параметр в url, который изменяется при изменении версии фичи.

    Параметр Sequence позволяет управлять в каком порядке добавляются ссылки на скрипты.

    Сам файл jQuery и скрипты размещайте в корне коллекции сайтов в папке с именем вашего приложения. И не забудьте включить BlobCache. Если Вы добавите такой элемент в фичу уровня Site, то jQuery будет добавлен также на все страницы всех подсайтов.

    Но нужно помнить, что при подключении jQuery возникают проблемы:

    6. jQuery ломает Asset Picker

    Переменная $, определяемая в jQuery, конфликтует с именем переменной в диалоге выбора актива сайта (Asset Picker). В результате Asset Picker не работает после подключения jQuery.

    7. jQuery в разных решениях будут конфликтовать друг с другом

    Другая проблема, которая не просто часто, а постоянно встречается, заключается в том, что разные компоненты разных вендоров ставят jQuery. Это приводит к тому, что последняя версия перетирает все предыдущие.

    Для этой и предыдущей проблемы есть решение:

    8. Используйте jQuery.noConflict(true)

    Эта функция делает две вещи:

    • Восстанавливает переменную $
    • При указании true в качестве параметра восстанавливает старое значение jQuery.

    Сама функция возвращает текущий объект jQuery, который Вы можете сохранить в переменной.

    9. Используйте IIFE

    Для того, чтобы было удобно писать и копипастить из интернета код с jQuery удобно использовать Immediately-Invoked Function Expression (IIFE). По сути это объявление анонимной функции, совмещенное с вызовом. Выше я уже приводил пример кода с IIFE, но при использовании параметров можно сделать еще более удобный код:

    Таким образом внутри вашего кода, Вы сможете использовать обычный jQuery код без извращений и конфликтов с другим решениями и частями SharePoint.

    10. Используйте SPCop или R# c spcafcontrib

    Последний совет — используйте инструменты SPCop\SPCAF и R# (ReSharper) с расширением SPCAFContrib.

    Для SPCop\SPCAF расширение доступно на сайте http://spcafcontrib.codeplex.com/

    Для R# плагин можно поставить из галереи расширений

    Расширение содержит правила, которые находят неправильное использование jQuery в SharePoint проектах. В R# также есть возможность чинить неверный код автоматически (эта функциональность сейчас в процессе разработки).

    Это расширение создается в основном Дмитрием Долотовских (страна должна знать своих героев), ему помогают Антон Вишняков, Алексей Большаков и я.

    12 вещей, которые нужно знать о классах и прототипах в JavaScript.

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

    1. В JavaScript всё ведёт себя, как объект.
    2. Абсолютно любая функция может вести себя как конструктор при помощи слова new. constr = new Func ();
    3. Абсолютно любой (даже пустой) объект может выступать в роли прототипа.
    4. Прототип имеется у каждого объекта. Например, для конструктора прототип по умолчанию — это пустой объект.
    5. Прототип — это не что-то особенное, как, например, «класс» в других языках. Это просто обычный объект, без каких-то дополнительных свойств или методов.
    6. Как ведет себя сущность в JavaScript делится между конструктором (любая функция, которая отвечает за создание и инициализацию сущности) и прототипом (задает поведение сущности)
    7. Любое разделяемое между объектами поведение определяется их прототипом. Например, если требуется иметь много объектов с одним и тем же методом, его лучше определить на прототипе.
    8. Ключевое слово this в методе, определенном на прототипе, но используемом на объекте с этим прототипом, ссылается на сам объект.
    9. Свойства и методы, уникальные для объекта, определяются в конструкторе.
    10. Любые свойства и методы прототипа доступны непосредственно в объектах, имеющих этот прототип.
    11. Свойства и методы прототипа могут переопределяться в конструкторе или непосредственно на объекте.
    12. Прототипная модель в JavaScript позволяет реализовать классическое наследование и поведение класс-объект в ООП, но также даёт делать более гибкие вещи.

    7 библиотек JavaScript для разработки информационных панелей

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

    Дашбоард (информационная панель) представляет собой визуальный индикатор целей или бизнес-процесса. Это бесценный инструмент для отсеивания ненужных данных и получения доступа к наиболее важным элементам. Она поможет оценить информацию и своевременно принять правильное решение. Интерактивные визуальные информационные панели состоят из диаграмм, карт, графических символов, таблиц данных и т. д.

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

    Gridster.js

    Gridster — это плагин из библиотеки jQuery, который позволяет создать интуитивное пространство, разбитое на столбцы, из элементов, поддерживающих функцию перетаскивания мышью.

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

    За дополнительной информацией обратитесь к документации.

    angular-gridster

    Это gridster-подобная реализация контейнера виджетов для фреймворка Angular JS. В его арсенале имеются те же функции, что и у плагина gridster из библиотеки jQuery, но с некоторыми дополнительными возможностями.

    Он полностью переписан с использованием команд Angular и позволяет использовать привязку данных этой библиотеки. Для получения дополнительной информации изучите документацию на плагин.

    gridstack.js

    Gridstack.js является улучшенной версией контейнера виджетов gridster.js из библиотеки jQuery. В нём также имеется поддержка нескольких колонок и функция drag-and-drop. Он позволяет создавать адаптивные панели для фреймворка bootstrap версии 3 с дружественным интерфейсом.
    Кроме того, он отлично работает вместе с библиотеками knockout.js, angular.js и сенсорными устройствами. Ознакомьтесь с документацией на gridstack.js.

    jQueryGridly

    Gridly– ещё один плагин jQuery с возможностью перетаскивания компонентов и изменения размера сетки. Посмотреть на него можно здесь.

    Packery

    Packery — это библиотека JavaScript и плагин jQuery, позволяющий создавать панели, на которых компоненты, поддерживающие перетаскивание, располагаются без зазора. В нём реализован алгоритм упаковки пакетов, позволяющий заполнить пустые промежутки.

    Код подходит для создания информационных панелей drag-and-drop и бесшовных галерей изображений в стиле «кирпичная кладка». Дополнительная информация о Packery доступна по ссылке.

    GridList

    Библиотека jQuery представляет собой надстройку поверх класса GridList, который преобразует координаты компонентов в интерактивные элементы DOM с возможностью перетаскивания.

    Посмотреть на демо-версию GridList можно здесь.

    Dazzle

    Dazzle — это библиотека для разработки панелей под фреймворк React JS. Она независима от других библиотек для создания интерфейса, но легко интегрируется с ними.

    Код позволяет создавать рабочее пространство, используя сетку, добавляя, удаляя или перетаскивая виджеты. С демонстрационной версией библиотеки можно ознакомиться здесь.

    Выводы

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

    Мастер Йода рекомендует:  12Go Asia
    Добавить комментарий