Обновить
64K+

ReactJS *

JavaScript-библиотека для создания интерфейсов

19,12
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Темы секции Frontend на DUMP Казань: ML для фронтенд-разработчика, пиксельная магия, SvelteJS, смех, пот и слезы

Время на прочтение3 мин
Охват и читатели1.7K
«Все об этом говорят, некоторые понимают, (как они думают), а занимаются, по-настоящему, лишь единицы» — цитата программного директора DUMP Казань. Если вы думаете, что вы тертый калач фронтенд, и ничего нового на конференциях не услышите, то загляните на frontend-секцию 8 ноября. Мы вспотели, пока слушали мат.часть некоторых докладов и истории взлетов-падений.


Читать дальше →

React + IndexDb + автообновление = почти AsyncRedux

Время на прочтение18 мин
Охват и читатели12K
В данной заметке по шагам расскажу как приготовить IndexDB (база данных, которая встроена в любой современный браузер) для использования в проектах, написанных на ReactJS. В результате Вы сможете использовать данные из IndexDB так же удобно, как если бы они находились в Redux Store вашего приложения.

IndexDB — это документоориентированная СУБД, удобное средство для временного хранения относительно небольшого объёма (единицы и десятки мегабайт) структуированных данных на стороне браузера. К стандартной задаче, для которых мне приходится использовать IndexDB относится кэширование данных бизнес-справочников на стороне клиента (названия стран, городов, валют по коду и прочее). Скопировав их на сторону клиента потом можно лишь изредка загружать с сервера обновления этих справочников (либо целиком — они же небольшие) и не делать это при каждом открытии окна браузера.
Читать дальше →

Создание мобильного приложения чата на React Native

Время на прочтение3 мин
Охват и читатели8.4K
Это вторая часть статьи (первая тут), посвященная созданию чата, используя apollo-server-koa и react-native. В ней будет рассмотрено создание мобильного приложения чата. В предыдущей части уже был создан бекенд для этого чата, подробнее с описанием этого процесса вы можете ознакомиться по ссылке.

Первым делом с помощью expo-cli создадим новый expo проект, для этого выполним в терминале команду:

expo init

И проследуем по всем шагам визарда для создания пустого приложения.

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

yarn add apollo/react-hooks apollo-cache-inmemory apollo-client apollo-link-http apollo-link-ws apollo-utilities graphql graphql-tag native-base react-router-native subscriptions-transport-ws
Читать дальше →

Как я выбрал технологический стек с заделом на будущее

Время на прочтение5 мин
Охват и читатели5.7K
Начинайте с простого, но не в ущерб дальнейшему росту.

image

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

Проблема заключалась в том, что эти компании требовали огромных вложений, для того чтобы создать сложные, мультитенантные программные системы, которыми они являлись, которые к тому же требовали, чтобы специалисты по продажам и внедрению постоянно продвигали и поддерживали их работу. Поэтому в 2017 году я основал 8base.
Читать дальше →

[в закладки] PDF- и ePUB-версия руководства по React

Время на прочтение3 мин
Охват и читатели53K
Привет Хабр! В этом году мы делали перевод огрооомного обучающего курса по React — в нашем блоге он был аж в 27 постах. В каждой части, от простого к сложному, выдавался концентрат знаний, которые тепло оценили читатели нашего блога. А сегодня мы поймали себя на мысли, что не выпустили все части одним большим куском — исправляемся!



Для новых читателей нашего блога — два бонуса внутри.
Читать дальше →

React + Mobx: в чём смысл?

Время на прочтение16 мин
Охват и читатели164K
Сегодня я хочу рассказать вам о том, как на нашем проекте состоялся переход на Mobx, какие преимущества это даёт. Также будет показан типовой проект и даны пояснения по основным вопросам. Но сначала вводные.

image
Читать дальше →

Диалоговые окна на Promise

Время на прочтение5 мин
Охват и читатели9.2K
Что такое диалоговое окно?

Википедия говорит следующее:
Диалоговое окно (англ. dialog box) в графическом пользовательском интерфейсе — специальный элемент интерфейса, окно, предназначенное для вывода информации и (или) получения ответа от пользователя. Получил своё название потому, что осуществляет двустороннее взаимодействие компьютер-пользователь («диалог»): сообщая пользователю что-то и ожидая от него ответа.

Нас интересует
ожидая от него ответа
Другими словами мы открываем модальное окно, чтобы получить обратную связь и что-то после этого выполнить. Ничего не напоминает? И я так подумал.
Читать дальше →

Что лучше выбрать в 2020 году — React или Vue?

Время на прочтение6 мин
Охват и читатели98K
JavaScript-фреймворки стали неотъемлемой частью каждого современного веб-проекта. Существует множество подобных фреймворков, в результате разработчикам постоянно приходится задаваться вопросом о том, что выбрать. Искать ответ на этот вопрос придётся и в 2020 году.

image

Если вы это читаете — можно предположить, что вы заняты поиском фреймворка, который станет основой вашего следующего приложения. Вполне возможно, что вы ориентируетесь на ведущие технологии и размышляете о том, что вам лучше подойдёт — библиотека React или фреймворк Vue. Это — непростая дилемма, но решать её, всё равно, нужно. Вот некоторые распространённые вопросы, которыми задаются те, кто выбирает между React и Vue:

  • Что лучше подойдёт для моего следующего проекта?
  • Какой из фреймворков обладает более высокой производительностью?
  • Что популярнее среди разработчиков?
  • Что лучше подходит для небольших веб-приложений?
  • Какой из фреймворков надёжнее?
Читать дальше →

Новый пакет валидаций для React на Mobx @quantumart/mobx-form-validation-kit

Время на прочтение19 мин
Охват и читатели4.9K
Добрый день.
Сегодня я хочу рассказать о новом пакете для асинхронных валидаций в проектах использующих в своей основе React, Mobx и написанных на Typescript.
Современная Frontend разработка предполагает большое количество логики при заполнении страниц с документами, анкет и документов на кредит, платежных поручений, страниц регистраций на сайте. Основная логическая нагрузка приходиться на валидационные проверки. Разработчики Angular продумали этот момент и предлагают разработчикам для этих целей использовать встроенных механизм FormControl-ов, что, хоть имеет ряд своих недостатков, но всё же лучшем чем полное отсутствие подобного решения на React. Ситуация усложняется еще тем, что современный тренд React разработки предполагает использовать mobx для организации бизнес-логики.
Столкнувшись с этими проблемами мы решили всех их с помощью написания пакета: @quantumart/mobx-form-validation-kit

Плюсы пакета:
  • Полностью на TypeScript
  • Совместимость с Mobx (версии 4, который поддерживает, всеми любимый, IE10)
  • Рассчитан на работу в React (можно использовать в проектах и без react)
  • Рассчитан на асинхронные валидации
  • Легко встроить в существующий проект.

Инструкция по работы с пакетом под катом.
Читать дальше →

Уменьшение размеров бандлов с помощью Webpack Analyzer и React Lazy/Suspense

Время на прочтение9 мин
Охват и читатели23K
По мере того, как растёт сложность клиентских приложений, размеры их бандлов становятся всё больше и больше. В этой ситуации сильнее всего страдают люди, вынужденные, по разным причинам, пользоваться медленными интернет-соединениями. При этом с каждым днём всё становится только хуже.



Автор статьи, перевод которой мы сегодня публикуем, работает в Wix. Он хочет рассказать о том, как смог уменьшить размер одного бандла примерно на 80%, используя Webpack Analyzer и React Lazy/Suspense.
Читать дальше →

RE: Боль и слёзы в Svelte 3

Время на прочтение9 мин
Охват и читатели20K

Вместо предисловия


Данный пост является ответом на вчерашнюю статью «Боль и слёзы в Svelte 3» и появился как следствие сильно «располневшего» комментария к оригинальной статье, который я решил оформить в виде поста. Ниже я буду использовать слово автор для отсылки к автору оригинальной статьи и позволю себе сделать некоторые уточнения по всем пунктам. Поехали!


Читать дальше →

Описание подхода к организации и тестированию кода с использованием Redux Thunk

Время на прочтение23 мин
Охват и читатели5.4K

Всем привет!


В этой заметке я хотел бы поделиться своим подходом к организации и тестированию кода с использованием Redux Thunk в проекте на React.


Путь к нему был долог и тернист, поэтому постараюсь продемонстрировать ход мыслей и мотивацию, которые и привели к итоговому решению.

Читать дальше →

Боль и слёзы в Svelte 3

Время на прочтение7 мин
Охват и читатели43K

Вместо предисловия


Статья будет полезна тем, кто так-же как и Мы решил попробовать Svelte в живом проекте. В нашу небольшую компанию пришёл заказ на разработку веб-админки для сервиса с бекэндом на Mongodb Stitch. В последние пару лет frontend Мы пишем на React или Vue (в зависимости от размера проекта и нужен ли ReactNative), но наслышав о красотах Svelte мы решили попробовать его, чтобы понять для себя так ли он хорош. И может нам тоже стоит дальше использовать его вместо Vue или React?..

Кто такой Svelte?


image

Если в двух словах — это новый js фреймворк (но он таким себя не считает), который убийца React и Vue, и бла, бла, бла… В своей статье я хочу рассмотреть Svelte не какой он классный «под капотом», а с точки зрения удобства его использования в реальном проекте.
Мы не делаем машины, мы на них ездим и у нас есть злые заказчики с еще не менее злыми сроками.
Читать дальше →

Ближайшие события

React Native — применение и критика

Время на прочтение7 мин
Охват и читатели12K

Чаще всего при выборе этого языка ожидается, что разработка одного приложения под две платформы займёт в два раза меньше времени, чем разработка двух приложений. Но по итогу оказывается, что разработка занимает столько же, если не больше, из-за сложностей, скрытых под внешним блеском и маркетингом. Мы расскажем о некоторых подобных сложностях, с которыми нам пришлось столкнуться за последние несколько месяцев работы с React Native.

Читать дальше →

Реализация анимации в React Native

Время на прочтение4 мин
Охват и читатели17K
Перевод статьи подготовлен специально для студентов курса «ReactJS/React Native-разработчик».




Трудно себе представить мобильное приложение, в котором нет анимации. В вебе анимации обычно простые, если они есть вообще (максимум – одна страница сменяет другую). Анимации же в мобильных приложениях требуют к себе совсем другого внимания.
Читать дальше →

Антипаттерны в React или вредные советы новичкам

Время на прочтение7 мин
Охват и читатели14K
Привет, Хабр.

Ровно год прошел с момента, как я начал изучать React. За это время я успел выпустить несколько небольших мобильных приложений, написанных на React Native, и поучаствовать в разработке web-приложения с использованием ReactJS. Подводя итог и оглядываясь назад на все те грабли, на которые я успел наступить, у меня родилась идея выразить свой опыт в виде статьи. Оговорюсь, что до начала изучения реакта, у меня имелось 3 года опыта разработки на c++, python, а также мнение, что во фронтенд разработке нет ничего сложного и разобраться во всем мне не составит труда. Поэтому в первые месяцы я пренебрегал чтением обучающей литературы и в основном просто гуглил готовые примеры кода. Соответственно, примерный разработчик, который первым делом изучает документацию, скорее всего, не найдет для себя здесь ничего нового, но я все-таки считаю, что довольно много людей при изучении новой технологии предпочитают путь от практики к теории. Так что если данная статья убережет кого-то от граблей, то я старался не зря.
Читать дальше →

Опыт разработки тестового задания на React для Aviasales

Время на прочтение6 мин
Охват и читатели18K

Привет, я хотел поделиться опытом разработки тестового задания для Aviasales.


Я недавно наткнулся на вакансию React разработчика в компанию Aviasales. Отправил заявку, после чего на следующий день мне ответил HR и сообщил, что я должен буду сделать тестовое задание. Я крайне не люблю делать тестовые задания, так как я должен потратить довольно много времени на их выполнение, а в случае неудачи это станет впустую. Но я согласился...

Читать дальше →

История о V8, React и падении производительности. Часть 2

Время на прочтение9 мин
Охват и читатели8.4K
Сегодня мы публикуем вторую часть перевода материала, посвящённого внутренним механизмам V8 и расследованию проблемы с производительностью React.



Первая часть
Читать дальше →

Angulareact

Время на прочтение8 мин
Охват и читатели5.9K

У меня есть проблема. Приложение написано на Angular, а библиотека компонентов на React. Делать клон библиотеки слишком дорого. Значит, нужно использовать React-компоненты в Angular-приложении с минимальными затратами. Разбираемся как это делать.

Читать дальше →

Проблемы и нюансы при разработке под SmartTV с использованием React.js

Время на прочтение4 мин
Охват и читатели13K
Хочу поделиться опытом разработки приложения с просмотром видео контента для SmartTV (Tizen и WebOS) и с какими проблемами мы столкнулись.

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

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

Я не буду рассказывать о том, как именно нужно делать с примерами кода, я расскажу о нюансах и решениях, которые были приняты.
Читать дальше →