Разрабатываем React-компоненты многократного использования

В прошлом году мы рассказывали, как устроен фронтенд в Программе «Единая фронтальная система», о библиотеке элементов и нашем подходе к переиспользованию UI компонентов. Сегодня предлагаем сравнить несколько подходов к разработке React-компонентов, спасибо Cory House за отличный материал!
Читать дальше →

[Из песочницы] Как начать разрабатывать универсальные приложения с библиотекой Next.js

We don’t need no traffic building,
We don’t need no SEO,
No link exchanges in your network,
Spammers! leave us all alone.

Anna Filina

Немного истории


В далеком 2013 году Spike Brehm из Airbnb опубликовал программную статью, в которой проанализировал недостатки SPA-приложений (Single Page Application), и в качестве альтернативы предложил модель изоморфных веб-приложений. Сейчас чаще используется термин универсальные веб-приложение (см. дискуссию).

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

Книга «React и Redux: функциональная веб-разработка»

image Привет, Хаброжители! В декабре мы издали книгу Алекса Бэнкса и Евы Порселло, цель которой — научить писать эффективные пользовательские интерфейсы при помощи React и систематизация новых технологий, позволяющая сразу же приступить к работе с React. Чтение книги не предполагает никаких предварительных знаний React. Все основы библиотеки будут представлены с самого начала. Сейчас мы рассмотрим раздел «Управление состоянием React»

До сих пор свойства использовались только для обработки данных в компонентах React. Свойства имеют неизменяемый характер. После отображения свойства компонента не изменяются. Чтобы изменить пользовательский интерфейс, понадобится другой механизм, способный заново отобразить дерево компонента с новыми свойствами. Состояние React является его неотъемлемой частью, предназначенной для управления данными, которые будут изменяться внутри компонента. Когда состояние приложения меняется, пользовательский интерфейс отображается заново, чтобы отразить эти нововведения.
Читать дальше →

23 Шортика по ReactJS – короткие видео-уроки не только для новичков

image Весь прошлый год я проводил длинные уроки по часу, полтора, где мы изучали React на практике, делали маленькие и большие приложения, всегда делали это с нуля и в прямом эфире. Я всегда транслировал эти сессии парного программирования и основную пользу они приносили именно напарнику и тем, кто кодил с нами в прямом эфире и задавал вопросы. Всё же практика в изучении технологий, наиболее важна. Но выяснилось, что смотреть такие уроки невыносимо тяжело, час, полтора времени у экрана, постоянное повторение одного и того же, выискивание изюма знаний из длинных «нудных» реплик автора, а зачастую и с эхом в записи, по причине плохого микрофона или медленного интернета, это очень тяжело. Но тем не менее, большой процент разработчиков, опираясь на наши еженедельные сессии парного программирования, изучили новый для себя React и успешно выполняют сложные задачи больших проектов. Но смотреть их скучно. Что делать? Так появились шортики. Я собрал весь изюм из прошлых уроков, часто задаваемых вопросов на практике и дыр у новичков в собеседованиях и превратил их в 3х-4х минутные ролики. Принцип шортиков: пример кода, не больше 5 минут, заранее набранный код, не банальный контент, подтверждение вопроса практикой. Кто я такой? Вецель Евгений, создатель ...Далее...

[Из песочницы] Отзыв на трудоустройство в компанию Soshace

В декабре 2017 интервьюировался в компанию Soshace на позицию Full-Stack Web Developer (JavaScript, remote work). На тот момент, мне не удалось найти каких-то отзывов о прохождении собеседования в эту компанию, поэтому решил заполнить пробел.
Читать дальше →

Как сделать типовые задачи в web приложении на React JS

Как сделать простые типовые, часто встречающиеся задачи в web приложении на React JS

При написании web приложений, интерфейса часто приходится решать типовые задачи по управлению элементами на форме, скрывать, делать не доступными, фильтрации, поиски, сортировки и др. Изучая React JS я начал подготавливать библиотеку подобных решений, её и представлю ниже. Как это работает человеку, изучающему React будет понятно на примерах, которые выложены на GitHub.
Читать дальше →

[Из песочницы] Первый взгляд на react-native

Если вы фронтенд разработчик, да еще и с опытом работы react + redux, то вам определенно стоит обратить внимание на такой интересный инструмент как react-native. Он позволяет разрабатывать кроссплатформенные приложения под ios и android. React-native находится в стадии активного развития и выпускает обновления каждый месяц.
Читать дальше →

Горячая перезагрузка компонентов в React

У меня есть два любимых запроса в гугле:
— Что будет, если в унитаз поезда на полном ходу бросить лом?
— Что будет, если в реакту по полном ходу заменить компонент?

И если с первым вопросом все более менее понятно, то со вторым вопросом все не так просто — тут же вылезает Webpack-dev-server, Hot Module Replacement, и React-Hot-Loader.

И все бы хорошо, но эта гремечая просто не работает, спотыкаясь на первом же сложном коде, HOC, композиции, декораторе и нативных arrow функциях.

В общем признаем — третья версия Reac-hot-loader немного не удалась.


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

[Из песочницы] Упрощаем ReactJS компоненты с помощью RxJs

Введение


Скорее всего, многие люди, попробовав эти 2 библиотеки в достаточной степени, думали о том, как продуктивно использовать их вместе. RxJs сам по себе не блещет простотой — множество функций, определенно, отталкивают новичков. Однако, изучив и приняв его, мы получаем очень гибкий инструмент для работы с асинхронным кодом.

Я подразумеваю, что, читая эту публикацию, вы хорошо знаете ReactJS и, хотя бы, представляете суть RxJs. Я не буду использовать Redux в примерах, но все, что будет написано ниже, прекрасно проецируется и на связку React + Redux.
Читать дальше →

Restate — или как превратить бревно Redux в дерево

История развития IT намного интереснее любой мыльной оперы, но пересказывать ее мы не будем. Скажем только, что были свидетили принципа «data-driven», адреналинщики с two-way-binding и беспредельщики без принципов и понятий.
Бог создал людей сильными и слабыми. Сэмюэл Кольт сделал их равными.
Примерно тоже самое сделали Flux и Redux.

Была только одна проблема — Redux по сути своей крайне примитивная хреновина, и чтобы с ним хоть как-то работать надо было добавить парочку middleware — thunk, saga, observable и так далее.

Но эта статья заходит с другой стороны, серьезно так спрашивая про композицию, и, в частности, про компонентную модель. Которой в редакса — нет.


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


Последние посты