Свежие ресурсы для веб-дизайнеров и разработчиков (январь 2018 г.)

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

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

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

MaquetteJS

реализация VirtualDOM это позволяет вам создавать гибкий пользовательский интерфейс, который постоянно обновляется с данными вокруг него. Это чистый JavaScript и unopiniated библиотека, таким образом, можно используйте его вместе с синтетическим языком, таким как CoffeeScript, TypeScript и JSX. Отличная альтернативная библиотека для React.js; MaquetteJS намного меньше по размеру (только 3kb) сравнительно.

ReDOM

Это одна из моих любимых библиотек VirtualDOM, так как ее легко подобрать, просто взглянув на синтаксис. Всего 2Kb, Вы можете создать веб-страницу с быстрым рендерингом или пользовательский HTML-компонент. Библиотека состоит две основные функции эль, создавать или манипулировать элементом, а также крепление добавить его в выбранный элемент. Вы можете загрузить его в браузере и на стороне сервера с NodeJS.

ReactiveJS

Шаблонизатор Библиотека пользовательского интерфейса для создания интерактивного веб-приложения. Изначально созданный для TheGuardian, ReactiveJS предназначен для работы в браузерах и на мобильных устройствах; так что вы можете зависеть от его надежности. ReactiveJS также поставляется с много функций, необходимых для современного веб-приложения прямо из коробки, такие как Scoped CSS, пользовательские компоненты, SVG и анимация.

RiotJS

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

RiotJS совместим с окружением Node.js или в браузерах и может быть отличная альтернатива Vue.js, учитывая сходство.

HyperHTML

hyperHTML, как следует из названия, показывает производительность при рендеринге и манипулировании DOM. Вы можете использовать его для создания пользовательского элемента и веб-компонента. Он работает так же просто, как jQuery, в котором он может быть использован в браузере загрузка скрипта из CDN и доступ к hyperHTML. Нет необходимости сложного механическая обработка.

Mithril

Как бы круто это ни звучало, мифрил мощная библиотека JavaScript. Помимо VirutalDOM и компонентов, Mithril также оснащен Routing и XHR, с помощью которого Вы можете создать одностраничное веб-приложение, не полагаясь на другие библиотеки.. Бенчмарк показывает, что он превосходит некоторые популярные библиотеки, такие как Vue.js, React.js и Angular..

SlimJS

SlimJS - это библиотека JavaScript для создать собственный веб-компонент, используя собственный API веб-компонентов. Поскольку встроенный компонент браузера встроен, SlimJS оснащен Polyfill который скрывает API в браузере, который его пока не поддерживает. Это отличная основа, если вы предпочитаете принять нативный путь.

VSVG

Хотя он имеет синтаксис, похожий на HTML, SVG - это еще одна разновидность зверя со своими особенностями. Эта библиотека, как следует из названия, будет позволяют создавать и управлять SVG на лету.

EmotionSH

EmotionSH это Фреймворк CSS-in-JS, который может вам понадобиться при создании сайта с VirtualDOM. Это позволяет вам предоставлять только биты CSS, необходимые на вашем сайте, и вы можете динамически обновлять стиль без согласования с именами и спецификой класса, так как стиль ограничен только тем компонентом, к которому он применяется.

Реактивный стартовый комплект

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

элементы

Элементы это коллекция Компоненты iOS для создания прототипа приложения iOS в Sketch. Он создан людьми от Sketch и обновлен с помощью интерфейса iPhone X.

Modaal

Modaal - это библиотека JavaScript, созданная с учетом доступности. Это было подтверждено для “Поддержка WCAG 2.0 уровня AA” что (я думаю) наиболее доступной “модальный” библиотека сегодня. Это легкий, совместимый с jQuery, и может быть использован для изображений, видео и даже Instagram. Кроме того, этот краткий курс от Google поможет вам начать работу с Web Accessibility и почему это важно.

WordPressify

Пакет NPM, который позволяет вам запустить среду разработки WordPress за несколько минут. Все настроено с современные инструменты, такие как Gulp, LiveReload, PostCSS, Babel так что вы можете сосредоточиться на разработке своего проекта, а не на настройке конфигурации.

Ландо

Lando - это также удобный инструмент, позволяющий быстро и легко раскрутить среду разработки. WordPressify что мы только что упомянули выше. Но вместо Node.js требуется Преимущество Docker в легкой контейнеризации технология, и она предлагает больше гибкости с точки зрения стека, который вы хотели бы использовать в своей разработке.

Например, вы можете укажите версию PHP, включите XDebug и установите Composer.

WP-Docklines

WP-Docklines является коллекция изображений, которые вы можете использовать в качестве базовой для выполнения непрерывной интеграции и доставки для ваших тем WordPress и плагинов в таких сервисах, как Bitbucket, CircleCI и Gitlab. Каждое изображение в комплекте с инструменты, которые обычно нужны при разработке WordPress такие как PHP Code Sniffer, PHPUnit и WP-CLI.

WP-Locker

WP-Locker - это конфигурация Docker Compose, позволяющая вращать среду разработки WordPress за считанные минуты. это настроить с помощью Apache, MySQL и phpMyAdmin и поскольку он расширяет изображение WP-Docklines, он также выполняет дополнительные инструменты для изображения из коробки..

Просто тип бен / начало чтобы позволить это, настройте локальный и установить плагины и темы, которые вы настраиваете в файле конфигурации.

Docusaurus

Еще одна инициатива с открытым исходным кодом от Facebook, Docusaurus - это инструмент для создания документации сайта вашего проекта. Созданный с помощью React и Markdown, вы можете легко составлять документацию, вести ее и даже создавать блог для своего сайта, а также опубликуйте его на Github Pages.

VSCode Yo

Yeoman - это Node Package, который позволяет быстро запустить проект Выбор готовых лесов, которые подходят для ваших проектов. Если вы используете код Visual Studio, этот плагин еще больше упростит рабочий процесс запуска, так как позволяет запустить “Эй” команда прямо из окна кода Visual Studio.

BluebirdJS

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

Красивее

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