Рубрика «javascript» - 286

React.js на русском языке. Часть седьмая - 1
Перевод официальной документации библиотеки React.js на русском языке.

Оглавление:

1 — Часть первая — Установка
2 — Часть вторая — Внедрение JSX
3 — Часть третья — Отрисовка элементов
4 — Часть четвертая — Компоненты и свойства
5 — Часть пятая — Состояние и жизненный цикл
6 — Часть шестая — Обработка событий
7 — Часть седьмая — Условный рендеринг
8 — Часть восьмая (скоро)

Условный рендеринг

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

Условный рендеринг в React работает точно так же, как и в JavaScript. Используйте операторы JavaScript, как "if" или условный оператор для создания элементов, которые отображают текущее состояние, и чтобы позволить React обновлять пользовательский интерфейс, чтобы им соответствовать.
Читать полностью »

У меня есть мечта, и она утопична: я хочу, чтобы мои веб-приложения работали идеально. JQuery, AngularJs, React, Vue.js — все обещают производительность. Но проблема совсем не во фреймворках и не в JavaScript. Проблема в том, как браузер рендерит страницу. А делает он это очень плохо.

Если бы браузер отлично справлялся с рендерингом, то не появился бы такой инструмент, как React Native. Под капотом React Native всё тот же JavaScript, а View нативное, и разница в производительности между нативным приложением и приложением на React Native не будет заметна для рядового пользователя. Другими словами, проблема не в JavaScript.

Если что-то оптимизировать, то как раз рендеринг. Инструментов, которые нам даёт JavaScript и API браузера, недостаточно. Два года я пытаюсь сделать работу своих продуктов плавной и быстрой, но тщетно. Я почти смирился с тем, что веб останется таким навсегда. В этой статье я собрал всё, что успел узнать об оптимизации рендеринга и применить на проектах, над которыми работал, и рассказываю о своих надеждах на ближайшее будущее. Это будущее, в котором я хочу опираться на устойчивый фундамент стандартов и API браузера, а не CSS-хаки и third-party репозитории для оптимизации производительности.

Про оптимизацию рендеринга — с оптимизмом - 1
Читать полностью »

— Хотел бы я иметь приложение, которое умеет что-то такое, что мне надо. Жаль такого нет.
— А почему бы тебе его самому не написать?
— Это сложно, мне потребуется куча времени, чтобы понять теорию, приступить к практике и, скорее всего, ничего хорошего не выйдет. А вообще я frontend-разработчик и привык к HTML, CSS и JS. Этот стек не позволяет писать десктопные приложения.
— Electron!

Читать полностью »

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

Хаос и гремлины: тестирование веб-интерфейсов - 1
Читать полностью »

Как аккуратно залезть в кишки WebRTC при передаче голоса и видео - 1WebRTC — технология интересная, но чуток запутанная. В первую очередь тем, что это не одна технология, а комбайн. Захват видео с камеры и звука с микрофона. Установка peer-to-peer подключения между двумя браузерами с протыканием NAT по мере возможности. Передача звука и видео по этому подключению, с пониманием, что передаются realtime данные: кодеки, пропускная способность, потеря кадров, вот это всё. Ну и, наконец, воспроизведение полученного в окне другого браузера. Или не браузера, это уже как зайдет. Ах да, еще — realtime передача пользовательских данных по той же схеме для игр, датчиков и всего того, где недопустимы лаги tcp websocket. Мы в Voximplant постоянно копаемся в кишках технологии, чтобы у клиентов были качественные звук и видео во всех случаях, а не только по локальной 100-мегабитке. И нам было очень приятно почитать на прошлой неделе интересную статью, которая рассказывает, как в этих кишках правильно копаться. Предлагаем вам тоже почитать адаптированный перевод, специально для !

Читать полностью »

Смотрим часть чужого избранного ВКонтакте - 1
Кадры из фильма «50 оттенков серого»

На этот раз с помощью незамысловатого куска кода на javascript заглянем в таинственные глубины человеческих предпочтений. А именно получим часть списка закладок («лайков» записей сообществ) аккаунта ВКонтакте.

По данным wordstat.yandex.ru, до 2000 раз в месяц у поискового робота спрашивают «как посмотреть кто что лайкает». Ответом в поисковой выдаче является вирусная программка LikeCheсker, которая на поставленный вопрос на самом деле не отвечает. А мы ответим.

Зачем это нужно? Если верить интернету (а ему лучше не верить) по, например, почерку человека можно определить его характер. Например

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

Есть у меня предположение, что по картинкам и постам, которые человек «лайкает» можно построить более точный портрет личности, чем по его почерку. Однако для получения этой информации нужно немного потрудиться.
Читать полностью »

Рецепт разработки бота под Telegram - 1

Добрый день, уважаемые читатели!

В этом топике я хочу поделиться с вами опытом разработки бота под Telegram за 4 дня. Этот бот переводит все голосовые сообщения, которые получает, в текст. Пытался сделать быстро, но качественно — подучил пару-тройку технологий. Постараюсь максимально подробно описать свой процесс преодоления ошибок и преград; доказать, что, даже не имея нужных навыков, запустить свой продукт не так-то и сложно.

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

Преамбула

И так, что же может сделать один программист за 4 дня?
Читать полностью »

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

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

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

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

Читать полностью »

image

Меньше чем за год Wallmart.com завершил миграцию на React/Node.js, и мы рады сообщить вам об этом! Цель миграции заключалась в создании новой платформы для повышения эффективности WalmartLabs и ее инженеров в будущем.
Мы рады сообщить о том, что мы выложили в open source Electrode — платформу, на которой построен Walmart.com.
Читать полностью »

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №239 (28 ноября — 4 декабря 2016) - 1

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js