Рубрика «react.js» - 7

Выбор JavaScript-фреймворка для вашего веб-приложения может оказаться не простой задачей. Не так давно у таких популярных фреймворков, как Angular и React, появился завоевывающий сердца разработчиков конкурент – VueJS. И что самое главное: это далеко не полный список существующих фреймворков.

Тогда, спросите вы: «И как же нам быть, ведь большинство статей, в которых приводятся недостатки и преимущества фреймворков – это дело субъективное». В данной статье я постарался дать как можно более объективное мнение.

Наши участники: Angular, React и Vue

Сравниваем Angular, React и Vue в 2017 году - 1

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

Вот примерный список вопросов:

  • Насколько «зрелыми» являются данные фреймворки/библиотеки?
  • Насколько велика вероятность того, что они останутся на плаву в ближайшее время?
  • Насколько их комьюнити большие и будут ли они полезными?
  • Насколько просто найти разработчиков, использующих данные фреймворки/библиотеки?
  • Каковы принципы программирования для каждого из них?
  • Насколько просто применять данные фреймворки для разработки большихмаленьких приложений?
  • Сколько времени займет изучение каждого?
  • Какая производительность?
  • Насколько просто начать разрабатывать приложения с их помощью?

Готовы? Тогда начинаем!
Читать полностью »

Недостаток зависимостей в веб-приложении приводит к ошибкам в интерфейсе, избыток — снижает производительность. Руководитель отдела разработки интерфейсов Яндекса Азат razetdinov показывает, как библиотека MobX помогает отслеживать минимальный набор изменений и поддерживать консистентность состояния приложений, а также знакомит с инструментом mobx-state-tree, который позволяет совместить всё лучшее из MobX и Redux.

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

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

Это перевод поста Эндрю Кларка о выходе столь ожидаемой версии React. Оригинальный пост в блоге React.

Мы с удовольствием сообщаем о выходе React v16.0! Среди изменений некоторые давно ожидаемые нововведения, например фрагменты, обработка ошибок (error boundaries), порталы, поддержка произвольных DOM-атрибутов, улучшения в серверном рендере, и уменьшенный размер файла.

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

Dependency inception

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

DI как основа для построения фреймворка, применительно к вебу, довольно молодой подход. Что бы тут было понятней о чем идет речь, начну c привычных для react-разработчиков вещей.

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

Выбор JavaScript-фреймворка для вашего веб-приложения может быть невыносим. В настоящее время очень популярны Angular и React, и есть также выскочка, получающий много внимания в последнее время: VueJS. Кроме них, лишь эти несколько новичков.

Angular vs. React vs. Vue: Сравнение 2017 - 1

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

Pi-Sonos или DIY портативная акустика на Raspberry Pi - 1

Тот, кто сталкивался с продукцией Sonos, определенно согласится с тем, что Sonos — это Apple от мира портативной акустики (во всяком случае, пока еще официально не вышел HomePod). Акустика Sonos — это сочетание минимализма, качества и удобства, которая восхищает с первого прикосновения. Я не являюсь счастливым обладателем этой акустики, но знакомство с Sonos Play 1 настолько впечатлило меня, что я решил создать нечто подобное — портативную домашнюю акустику под управлением Raspberry Pi. Под катом я расскажу, как у меня это получилось.
Читать полностью »

Проблемы React UI Kit-а и единой дизайн-системы, о которых вы не знали - 1

2 сентября 2017 прошла конференция Moscow Frontend, где я на примере React UI Kit рассказывала о проблемах, которые встречаются при внедрении UI Kit в компании. Тема оказалась актуальнее, чем я могла предположить, поэтому решила опубликовать статью по этой же тематике, преследуя две цели: донести материал до людей, которые не смогли оказаться на конференции лично, и предоставить отличную возможность провести жаркую дискуссию на эту тему в комментариях.

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

Пару лет назад я увидел на хабре статью про LIVR и с тех пор использую библиотеку на всех проектах. С переходом на React я адаптировал для валидации ее же, т.к. существующие решения не предлагали гибкости которой мне хотелось. Свое решение я уже использую на двух проектах и решил выложить в npm — может кому-то еще оно покажетсяя удобным.
Пакет называется react-livr-validation.
Читать полностью »

image

Hetzel edition of 20000 Lieues Sous les Mers

Заметка о том, насколько мы “реаниматоры” по части тестов (кто знаком с творчеством Говарда Филлипса Лавкрафта, тот поймет).

В продолжение темы тестирования и тестов, хотелось бы немного написать о нашем подходе, как он выглядит на наших Single Page Applications (SPA), написанных на React.js, как нам помогал в этом Test-Driven Development (TDD) и почему мы пришли к тому, что редукторы и API-сервисы покрывать тестами тоже нужно.

Сразу скажу, что если вы ожидаете тут увидеть jest, snapshot testing или storyshots, то сразу закрывайте эту заметку. Если вы ожидаете найти тут что-то из свежих библиотек или подходов, то тоже немедленно закрывайте. Ничего из названного мы не использовали. Возможно, в новый проект мы войдем с этими инструментами, а пока получилось так, как получилось.

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

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

Привет! Хочу рассказать о моем опыте разработки карты с кластеризованными маркерами на google maps api и React.js. Кластеризация — это группировка близлежащих маркеров, меток, точек в один кластер. Это помогает улучшить UX и отобразить данные визуально понятнее, чем куча наехавших друг на друга точек. Читать полностью »


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