В этой серии статей мы пройдем полный цикл создания клиентской части приложения и напишем небольшую библиотеку компонентов с использованием современного стека технологий.
Рубрика «ReactJS» - 12
Создаем современное веб приложение. Знакомство с проектом и подготовка к работе. Часть 1
2019-11-17 в 10:05, admin, рубрики: eslint, javascript, prettier, React, ReactJS, tutorial, для новичков, разработка веб приложения, Разработка веб-сайтовОпрос по инструментам фронтенда 2019 — результаты
2019-11-16 в 6:41, admin, рубрики: babel, Bootstrap, css, CSS-в-JS, eslint, flow, javascript, jquery, JS, lodash, npm, React, ReactJS, sass, TypeScript, vue.js, webpack, инструменты, методологии, Разработка веб-сайтов, Софт, схемы именования, таск-раннеры, транспиляторы, фреймворкиTL;DR. В большинстве категорий теперь выделяются явные лидеры — несколько лет назад такого не было. Это помогает накоплению знаний. Поэтому Навыки владения инструментами в среднем становятся глубже у разработчиков всех уровней.
В этом году 3005 разработчиков ответили на 27 вопросов, охватывающих широкий спектр инструментов и методологий фронтенд-разработки. Как всегда, огромная благодарность всем, кто нашёл время заполнить опросник. Со своей стороны, прошу прощения за задержку с публикацией результатов: в этом году работать было непросто из-за рождения малышки.
Как всегда, очень интересно посмотреть на изменения инструментов фронтенда за последние 12 месяцев и как меняются мнения разработчиков в отрасли. Эти результаты (надеюсь) помогут получить представление о текущих тенденциях и уровне освоения инструментов, а также об изменениях во времени, сравнив с цифрами из предыдущих опросов.
Результаты
Итак, к делу! Возьмите чай/кофе/напиток на свой выбор и посмотрим на результаты…
Читать полностью »
Пишем redux по SOLID
2019-11-10 в 9:33, admin, рубрики: javascript, React, ReactJS, redux, solid, ооп, полиморфизмВ данном посте мы коснемся написания action'ов и reducer'а. Для начала рассмотрим типичный 'flow', в котором мы выполняем следующие операции (далее переработаем все так, чтобы наш код отвечал принципам SOLID).
Читать полностью »
Проблемы основных паттернов создания data-driven apps на React.JS
2019-11-09 в 19:20, admin, рубрики: javascript, React, react.js, ReactJS, slots, SPA, TypeScriptДля создания интерфейсов React рекомендует использовать композицию и библиотеки по управлению состоянием (state management libraries) для построения иерархий компонентов. Однако при сложных паттернах композиции появляются проблемы:
- Нужно излишне структурировать дочерние элементы
- Или передавать их в качестве пропсов, что усложняет читабельность, семантичность и структуру кода
Для большинства разработчиков проблема может быть неочевидна, и они перекидывают ее на уровень управления состоянием. Это обсуждается и в документации React:
Типизация REST API для фронтенд разработчика
2019-11-08 в 15:14, admin, рубрики: javascript, nswag, ReactJS, TypeScriptСегодня широкое распространение имеют следующие подходы для описания взаимодействия браузера и сервера, такие как OpenApi & GraphQL.
В этой статье я расскажу о нашей попытке сделать статически типизированное REST API и избавить фронтенд команду от написания кода по написания запросов данных, упростить тестирование и уменьшить количество возможных ошибок.
ок.tech: Frontend Meetup #2
2019-11-08 в 8:32, admin, рубрики: meetup, ReactJS, Блог компании Одноклассники, интерфейсы, ок.tech, Разработка веб-сайтов, разработка интерфейсов
26 ноября в петербургском офисе Одноклассников пройдёт ок.tech: Frontend Meetup #2.
Вместе с коллегами из Одноклассников, ВКонтакте и Hazelcast поговорим про новый фронтенд OK.RU, сделанный на связке React + Graal, обсудим может ли “Lifting State Up” – один из двенадцати ключевых концепций в официальной документации React, приводить к плохой производительности, а также узнаем несколько историй про баги и технические решения, которые были предприняты, чтобы с ними справиться.
→ Зарегистрироваться на ок.tech Frontend Meetup #2
Под катом тезисы выступлений и расписание.
Читать полностью »
JavaScript Meetup SuperJob: видеоотчёт
2019-11-02 в 14:05, admin, рубрики: javascript, meetup, node.js, React, ReactJS, SuperJob, Блог компании Superjob.ru, Клиентская оптимизация10 октября мы провели JavaScript Meetup SuperJob. Рассказываем, что обсуждали участники, делимся видео и презентациями.
Делаем крутой sticky-эффект для слайдера на React
2019-11-01 в 22:12, admin, рубрики: javascript, React, ReactJS, slider, sticky, анимация, Компьютерная анимация, Разработка веб-сайтовЕсть много разных библиотек для реализации слайдера со всеми возможными эффектами. Для React одни из лучших это: ReactSlick и Swiper. Но когда для моего проекта потребовался горизонтальный sticky-эффект, то ничего подходящего не нашлось.
В этой статье мы попробуем поэтапно создать такой слайдер, возможно он вам тоже понадобится!
Шесть задачек для Front-End разработчика
2019-10-30 в 21:25, admin, рубрики: edisonsoftware, javascript, ReactJS, Блог компании Edison, Программирование, Учебный процесс в IT1. Форма кредитной карты
Клёвая форма кредитной карты с гладкими и приятными микровзаимодействиями. Включает форматирование чисел, проверку и автоматическое определение типа карты. Она построена на Vue.js, а также полностью адаптивная. (Посмотреть можно здесь.)
Чему научитесь:
- Обрабатывать и валидировать формы
- Обрабатывать события (например, при изменении полей)
- Разберетесь как отображать и размещать элементы на странице, особенно данные кредитной карты, которая поверх формы
Redux — Не нужен! Заменяем с помощью useContext и useReducer в React?
2019-10-25 в 10:18, admin, рубрики: front-end, javascript, React, ReactJS, redux
Доброго времени суток, Хабровчане!
Хочу рассказать о том, как я недавно узнал о неких "хуках" в React. Появились они относительно недавно, в версии [16.8.0] от 6 февраля 2019 года (что по скоростям развития FrontEnd — уже очень давно)
Прочитав документацию я заострил свое внимание на хуке useReducer и сразу же задал себе вопрос: "Эта штука способна полностью заменить Redux!?" потратил несколько вечеров на эксперименты и теперь хочу поделиться результатами и своими выводами.