Pull to refresh
  • by relevance
  • by date
  • by rating

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

Developer Soft corporate blog JavaScript *Programming *HTML *ReactJS *
Tutorial

image
Эта статья о том, как написать универсальный JavaScript-компонент, который можно будет использовать


  • как React-компонент;
  • как Preact-компонент;
  • как Angular-компонент;
  • как Web Component;
  • как jQuery функцию для рендеринга в DOMElement;
  • как нативную функцию для рендеринга в DOMElement.

Зачем и кому это нужно


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

Total votes 57: ↑54 and ↓3 +51
Views 23K
Comments 53

Дели — сокращай, или как мы делали мобильный 2ГИС Онлайн

2ГИС corporate blog JavaScript *TypeScript *


Мобильный веб развивается семимильными шагами. На дворе 2017 год. Мобильный трафик превысил десктопный — больше половины всех страниц теперь открываются через телефоны или планшеты. В 2015 году Google объявил о предпочтении mobile-friendly сайтов при ранжировании выдачи, а в 2016 это сделал Яндекс. Юзеры проводят в интернете 60-70 часов в месяц с мобильных устройств и не готовы идти на компромисс и пользоваться неадаптивными сайтами. И 2ГИС — не исключение. За 2 года рост мобильного трафика 2ГИС Онлайн составил 74%, а месячная аудитория превысила 6 миллионов человек.


17 апреля мы зарелизили новый мобильный онлайн («Монлайн») — одностраничное приложение, доступное по адресу m.2gis.ru. Приложение запущено в двух городах: Уфе и Новосибирске, а в ближайшее время планируется релиз на всю Россию.

Читать дальше →
Total votes 29: ↑27 and ↓2 +25
Views 12K
Comments 31

FrontFest.JS: ClojureScript на продакшене, оптимизация рендеринга React и как (не) впасть в депрессию с Angular

2ГИС corporate blog CodeFest corporate blog Website development *JavaScript *


FrontFest — это улётная конференция для фронтенд-разработчиков, которая пройдет 18 ноября в Москве. В этой статье мы расскажем о том, что приготовили для вас в секции JS. Спикеры из Microsoft, Booking, 2ГИС, Wrike и Злых Марсиан поделятся опытом использования Preact, ClosureScript, React, JS для IoT и Angular.
Подробности
Total votes 22: ↑22 and ↓0 +22
Views 5.1K
Comments 0

«Я сам не верю в рекламу и использую AdBlock»: интервью с основателем Smashing Magazine

JUG Ru Group corporate blog Web design *Website development *JavaScript *


Многие здесь уже знакомы со Smashing Magazine — сайтом для веб-дизайнеров и веб-разработчиков. А ещё они издают книги и проводят конференции Smashing Conference.


С посещаемостью около 5 миллионов в месяц (раз в 10 раз меньше, чем у Хабра, но тем не менее), он является одним из ведущих интернет-изданий по веб-дизайну. Интересная особенность — если зайти на главную страницу сайта, он определяет включенный AdBlock, но не запрещает просматривать страницы — вместо этого скромно намекает, что неплохо бы купить какую-нибудь книгу. Все, кто пропагандировал идею, что популярному сайту не выжить без кучи рекламы, сейчас напряглись :-)



Мы взяли интервью у одного из основателей сайта (и спикера на HolyJS) — Виталия Фридмана. Мы поговорим о предыстории создания сайта, его технологическом стеке и процессе разработки, о чудесах с возможностью невозбранно использовать AdBlock, а также планах на будущее.

Читать дальше →
Total votes 26: ↑23 and ↓3 +20
Views 6.5K
Comments 3

Использование Fastify и Preact для быстрого прототипирования веб-приложений

RUVDS.com corporate blog Website development *Prototyping *
Translation
Автор материала, перевод которого мы сегодня публикуем, хочет поделиться рассказом о том, какими технологиями он пользуется для быстрой разработки прототипов веб-приложений. В число этих технологий входят библиотеки Fastify и Preact. Он, кроме того, пользуется библиотекой htm. Она легко интегрируется с Preact и используется для описания элементов DOM с использованием понятных конструкций, напоминающих JSX. При этом для работы с ней не нужен транспилятор вроде Babel. Продемонстрировав инструментарий разработки прототипов и методику работы с ним, автор материала покажет как упаковывать такие приложения в контейнеры Docker. Это позволяет легко демонстрировать приложения всем, кому они интересны.


Читать дальше →
Total votes 23: ↑22 and ↓1 +21
Views 14K
Comments 3

Малоизвестные, но популярные JS-фреймворки для фронтенда

RUVDS.com corporate blog Website development *JavaScript *SvelteJS *Ember.js *
Translation
Не так давно мы, создавая динамические веб-приложения, использовали для работы с DOM чистый JavaScript или jQuery. С тех пор появилось много замечательных JavaScript-фреймворков и библиотек. Они помогают разрабатывать проекты, которые, по привлекательности и удобству, превосходят то, что было раньше.



Автор статьи, перевод которой мы сегодня публикуем, хочет рассказать о нескольких мощных, но малоизвестных клиентских фреймворках и библиотеках, основанных на JavaScript. Конечно, «большая тройка», в лице Angular, React и Vue, никуда не делась, но в мире веб-разработки есть и другие инструменты, достойные внимания. Такие, например, как Svelte, Preact и Riot. Вопрос выбора подходящего средства зависит от многих факторов. Среди них — знания разработчика, особенности проекта, ситуация на рынке. Поэтому давайте рассмотрим малоизвестные фреймворки, расширив тем самым свободу выбора тех, кто ищет подходящий инструмент для своего очередного проекта.
Читать дальше →
Total votes 38: ↑33 and ↓5 +28
Views 13K
Comments 30

Мой стейт менеджер для React, Preact, Inferno

JavaScript *
Sandbox

Люблю изобретать велосипеды и прочие нужные предметы заново. Получается не всегда хорошо, но процесс интересный. Предлагаю вашему вниманию библиотеку управления стейтом для React, Preact (вес всего 4.8Кб). Библиотека еще находится разработке, но уже можно попробовать.

Начнем с примера всеми любимого TODO органайзера. Исходный код на гитхабе. Для начала создадим основной компонент main.js.

Читать далее
Total votes 9: ↑6 and ↓3 +3
Views 2.4K
Comments 3

Современный Frontend: проблемы и пути решения. Пишем React-like приложение со строгой типизацией без сборщиков

SuperJob corporate blog Website development *JavaScript *ReactJS *

Всем привет! Меня зовут Петр Солопов, я руководитель отдела фронтенд-разработки в SuperJob. Думаю, многие из вас видели популярную серию картинок в интернете про фронтенд и бэкенд: на бекенде всегда какой-то монстр, а на фронте — все мило, летают бабочки. На мой взгляд, это не соответствует действительности и все не так радужно и безоблачно: чего только стоят настройка Webpack, тона зависимостей, особенности фреймворков и многое другое. За подробностями под кат.

Читать далее
Total votes 33: ↑31 and ↓2 +29
Views 8.6K
Comments 55