Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Генератор гамм на Reactjs

JavaScript *ReactJS *
Из песочницы
Здравствуйте, хабражители!

Не так давно на просторах интернета появилась javascript библиотека для построения пользовательских интерфейсов от facebook — Reactjs. Данная библиотека идеально подходит для создания простых и сложных javascript приложений. Позволяет организовывать ваш клиент-сайд в виде независимых компонентов. Берет на себя всю заботу по модификации DOM структуры дерева. И делает это весьма эффективно и разумно.

В общем, в результате небольшого знакомства с reactjs появилось такое приложение — demo. Цель данного поста поделиться впечатлениями от работы с reactjs + gruntjs + browserify.

Ниже будет изложено:

  • Основные моменты создания приложения и личные впечатления (симбиоз reactjs + browserify + gruntjs + coffeescript).
  • Серверный пререндериг reactjs компонентов для статических страниц.
  • Подход к сборке reactjs приложения с помощью gruntjs и деплой на gh-pages одной командой.


Тех кого заинтересовал прошу под кат…
Читать дальше →
Всего голосов 27: ↑27 и ↓0 +27
Просмотры 11K
Комментарии 9

Экспрессивный ReactJS или тырим фичи Angular в наш фреймворк

JavaScript *ReactJS *
В последние время, AngularJS не критиковал только ленивый и я, за последние пару месяцев, перечитал немало статей с критикой. Одна такая статья завершалась фразой «Я, черт возьми, не понимаю, как Angular может быть настолько популярным, ведь он так плох!»
«А действительно» задумался я «если он такой плохой, то почему же так популярен?» И я, кажется, нашел ответ. Дело в том, что у Angular, как и у jQuery, низкий порог вхождения, он прост и нагляден. Да, несомненно, и в Angular и jQuery можно делать сложные вещи, но большинство людей не использует эти библиотеки таким образом. Что я имею в виду?
Читать дальше →
Всего голосов 4: ↑3 и ↓1 +2
Просмотры 9.5K
Комментарии 13

(псевдо)Наследование для компонентов ReactJS

JavaScript *ReactJS *
Я хочу написать коротенький пост, про то, как я решил проблему наследования в ReactJS. Обычно, на форумах, люди советуют использовать миксины для наследования функционала, но, по-моему, это не совсем правильно. Все-таки трэйты/миксины и классы это не одно и то же, да еще и из-за возможности множественного наследования могут возникать вот такие казусы:

var A = {
    doStuff (){}
}

var B = {
    doStuff (){}
}

var C = React.createClass({
    mixins: [A, B]
});
//упс... ошибка, потому что React не может решить какой из doStuff унаследовать

Читать дальше →
Всего голосов 21: ↑20 и ↓1 +19
Просмотры 15K
Комментарии 16

ReactJS для глупых людей

JavaScript *ReactJS *
Из песочницы
Пытаясь разобраться с библиотекой от Facebook ReactJS и продвигаемой той же компанией архитектурой «Flux», наткнулся на просторах интернета на две занимательные статьи: «ReactJS For Stupid People» и «Flux For Stupid People». Решил поделиться с хабравчанами переводом первой (а чуть позже и второй) статьи. Итак, поехали.

ReactJS для глупых людей


TL;DR В течении долгого времени я пытался понять, что такое React и как он вписывается в структуру приложения. Это статья, которой мне в свое время не хватало.

Что такое React?


Чем отличается React от Angular, Ember, Backbone и других? Как управлять данными? Как взаимодействовать с сервером? Что, черт возьми, такое JSX? Что такое «component»?

СТОП.

Остановитесь прямо сейчас.

React — это ТОЛЬКО УРОВЕНЬ ПРЕДСТАВЛЕНИЯ.
Читать дальше →
Всего голосов 47: ↑44 и ↓3 +41
Просмотры 459K
Комментарии 17

Flux для глупых людей

JavaScript *ReactJS *
Перевод
Tutorial
Пытаясь разобраться с библиотекой от Facebook ReactJS и продвигаемой той же компанией архитектурой «Flux», наткнулся на просторах интернета на две занимательные статьи: «ReactJS For Stupid People» и «Flux For Stupid People». Чуть раньше я поделился с хабравчанами переводом первой статьи, настала очередь второй. Итак, поехали.

Flux для глупых людей


TL;DR Мне, как глупому человеку, как раз не хватало этой статьи, когда я пытался разобраться с Flux. Это было не просто: хорошей документации нет и многие ее части перемещаются.

Это продолжение статьи «ReactJS For Stupid People».
Читать дальше →
Всего голосов 38: ↑35 и ↓3 +32
Просмотры 231K
Комментарии 35

Анонс React Native

JavaScript *Разработка мобильных приложений *ReactJS *


Не так давно в Калифронии прошла конференция по React.js (доклады с этой конференции уже размещены на канале facebook разработчиков в youtube). Доклады, как не сложно догадаться, были о различных возможностях React.js и применении их в реальной жизни, но два доклада презентовали исключительно новую технологию, бета-версия которой в данный момент доступна только для разработчиков, посетивших мероприятие. Если вы уже посмотрели доклады, то понимаете, что речь идет о React Native. В данной статье я хочу сделать краткий обзор того, что нас ждёт в будущем с этой технологией и как изменится наше представление о создании мобильных приложений с использованием JavaScript.
Читать дальше →
Всего голосов 38: ↑36 и ↓2 +34
Просмотры 76K
Комментарии 69

Нетрадиционный обзор React

Блог компании Хекслет Разработка веб-сайтов *JavaScript *Программирование *ReactJS *
Перевод
Привет, Хабр!

Мы в Хекслете любим свой стек технологий :) Когда рассказываем другим — многие завидуют: Rails, Docker, AWS, React JS. Реакт мы используем в первую очередь для создания веб-среды для разработки Hexlet-IDE, которая позволяет нашим пользователям выполнять упражнение по разработке приложений и взаимодействию с виртуальной машиной прямо в браузере.

Сегодня мы публикуем перевод статьи «An Unconventional Review of React» Джеймса Шора, ведущего проекта Let’s Code: Test-Driven JavaScript.



Он мне понравился. Я не ожидал такого.

Для специальных выпусков Let’s Code JavaScript в августе и сентябре я изучал Реакт.

На случай если вам не знаком Реакт: это библиотека для фронт-энд веб-разработки. С помощью него создаются компоненты: короткие, не-совсем-ХТМЛ теги, которые можно комбинировать для создания интерфейса.

Реакт знаменит своими нетрадиционными решениями: реализацией виртуального DOM’а, созданием элементов интерфейса в JavaScript вместо шаблонов, создание суперсета языка JavaScript — JSX, который позволяет вставлять не-совсем-ХТМЛ прямо в код JS.

С этими решениями разработка уходит от схемы манипуляции DOM’ом — добавить этот элемент, скрыть эффектом другой элемент, обновить это текстовое поле. Вместо этого вы описываете как сейчас должен выглядеть DOM. Реакт берет на себя сложную работу по определению необходимых действий чтобы DOM на самом деле стал выглядеть так, как вы сказали.
Читать дальше →
Всего голосов 50: ↑47 и ↓3 +44
Просмотры 50K
Комментарии 34

От React до Riot 2.0

JavaScript *
Перевод


Эта популярная запись в блоге была отправной точкой в наших исследованиях минимализма. Мы начали с того, что Muut не должен использовать популярные фреймворки: Backbone, Angular или Ember.

Наша мотивация:

1) малый размер клиентского приложения. Неприемлемо, когда фреймворк гораздо больше самого приложения;
2) небольшой фреймворк, работа которого полностью понятна и прозрачна. Все популярные фреймворки поставляются со очень большим количеством методов API, свойств и других плюшек. Полное понимание было особенно важно, так как у нас было встраиваемое на сторонние сайты приложение.

Мы задались вопросом, а нужен ли фреймворк вообще? Пока API отделен от UI, проблем нет никаких. С помощью системы событий можно построить автономные компоненты, а «нативный» pushState позволяет подружить приложение с кнопкой «Back» браузера.

С этимы мыслями мы начали работу над Riot 1.0.
Читать дальше →
Всего голосов 32: ↑28 и ↓4 +24
Просмотры 21K
Комментарии 28

Подкаст «Пятиминутка PHP»

Я пиарюсь
Пятиминутка PHP — еженедельный подкаст о новостях из мира PHP, интересных постах в блогах и современных подходах к разработке.

Послушайте первые два выпуска и вы узнаете про:
  • SPL структуры данных (стек, очередь, массив) против классического array и что нам принесёт PHP 7
  • эффективное пересечение массивов, поиск элемента или проверку вхождения в массив
  • проблему с хешами паролей, даже если вы используете новые функции хеширования из PHP 5.5
  • Russia Laravel Meetup и DevConf 2015
  • сравнение производительности Golang, Scala, Elixir, Ruby, Python 3 и PHP в сферических попугаях в вакууме
  • оптимизацию использования памяти и как написать свой сборщик мусора на PHP
  • почему Doctrine ORM не подходит для PHP
  • рендеринг ReactJS шаблонов на сервере с помощью PHP
  • пример использования генераторов (yield)
  • прошлое, настоящее и будущее Code Coverage от автора PHPUnit
  • проблемы Zephir с PHP 7
  • хорошие статьи о PHP 7, которые уже есть на хабре
  • написание и тестирование API на PHP, Rails и Go от Phil Sturgeon
  • TDD — Train Driven Development

Читать дальше →
Всего голосов 33: ↑21 и ↓12 +9
Просмотры 9.3K
Комментарии 2

Как я перестал беспокоиться и полюбил React

JavaScript *ReactJS *
Из песочницы
Предлагаю читателям «Хабрахабра» перевод статьи «How I learned to stop worrying and love React».

Если вы спросите меня, что я думал о React два месяца назад, я бы сказал…
Где мои шаблоны? Что этот сумасшедший HTML делает в моем JavaScript? JSX выглядит странно! Скорее! Сжечь это!



Это потому, что я его не понял.

Но я уверяю, React — это определенно правильный путь. Пожалуйста, выслушайте меня.
Читать дальше →
Всего голосов 30: ↑25 и ↓5 +20
Просмотры 36K
Комментарии 35

Так ли быстр ReactJS?

Angular *ReactJS *
Из песочницы
Предлагаю читателям «Хабрахабра» перевод публикации «Is ReactJS really fast?» из блога компании 500Tech.

tl;dr; Нет.

Большинство разработчиков считают само собой разумеющимся, что ReactJS — это супер быстрый движок по сравнению
с другими более тяжеловесными фреймворками, такими как AngularJS и EmberJS.

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

image
феноменально ускорить AngularJS...
Всего голосов 40: ↑33 и ↓7 +26
Просмотры 35K
Комментарии 43

RailsClub Ruby митап №2 в офисе Rambler&Co

Блог компании Rambler&Co Разработка веб-сайтов *Ruby *Ruby on Rails *
image

Друзья, у меня есть для вас отличная новость! 23 июля в 19:00 в офисе Rambler&Co случится RailsClub Ruby митап №2.

Намечается аж целых 5 спикеров и, соответственно, 5 интересных докладов.
Читать дальше →
Всего голосов 8: ↑7 и ↓1 +6
Просмотры 3.9K
Комментарии 6

Как у нас получился нативный модуль к React Native

Блог компании Voximplant Разработка веб-сайтов *Разработка под iOS *Разработка мобильных приложений *ReactJS *
Если вы еще не знакомы с ReactJS или React Native, то очень рекомендуем ознакомиться, эти фреймворки уже сейчас оказывают значительное влияние на то, куда движется мир разработки мобильных и веб-приложений. Наша же статья о том, как дать возможность веб-разработчику делать приложения для iOS с аудио/видео звонками и другими прелестями платформы voximplant. Создание нативных модулей для React Native — это настолько обширная тема, что про нее можно писать бесконечно и материалов про нее в сети пока еще катастрофически мало. Мы при создании модуля опирались на ряд готовых примеров с github, которые очень помогли не закопаться с этим на века.

Читать дальше →
Всего голосов 22: ↑21 и ↓1 +20
Просмотры 13K
Комментарии 3

Мир недокументированного React.js. Context

JavaScript *ReactJS *
Предлагаю читателям «Хабрахабра» перевод статьи «The land of undocumented react.js: The Context».

Если мы взглянем на React компонент то мы можем увидеть некоторые свойства.

State


Да, каждый React компонент имеет state. Это что-то внутри компонента. Только сам компонент может читать и писать в свой собственный state и как видно из названия — state используется для хранения состояния компонента (Привет, Кэп). Не интересно, давайте дальше.

Props


Или, скажем, properties. Props — это данные, которые оказывают влияние на отображение и поведение компонента. Props могут быть как опциональны так и обязательны и они обеспечиваются через родительский компонент. В идеале, если Вы передаете своему компоненту одинаковые Props — он отрендерит одно и тоже. Не интересно, давайте двигаться дальше.

Context


Встречайте context, причину, по которой я написал этот пост. Context — это недокументированная особенность React и похожа на props, но разница в том, что props передается исключительно от родительского компонента к дочернему и они не распространяются вниз по иерархии, в то время как context просто может быть запрошен в дочернем элементе.
Читать дальше →
Всего голосов 26: ↑24 и ↓2 +22
Просмотры 35K
Комментарии 28

Умные и глупые компоненты React

Разработка веб-сайтов *JavaScript *ReactJS *
Делал перевод статьи The land of undocumented react.js: The Context, где сослался на статью Dan Abramov про умные и глупые компоненты, но почему-то думал что она есть на habrahabr. Думаю эта небольшая статья ни для кого лишней не будет.
Перевод статьи Smart and Dumb Components


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

Вы найдете, что Ваши компоненты намного проще в реиспользовании и обсуждении, если Вы поделите их на две категории. Я называю их Умные (Smart) и Глупые (Dumb), но я так же слышал Fat и Skinny, Stateful и Pure, Screens и Components и так далее. Все это не абсолютно тоже самое но идея похожа.

Мои глупые компоненты:

  1. не зависят от остальной части приложения, например Flux actions или stores
  2. часто содержатся в this.props.children
  3. получают данные и колбэки исключительно через props
  4. имеют свой css файл
  5. изредка имеют свой state
  6. могут использовать другие глупые компоненты
  7. примеры: Page, Sidebar, Story, UserInfo, List


Мои умные компоненты:

  1. оборачивает один или несколько глупых или умных компонентов
  2. хранит состояние стора и пробрасывает его как объекты в глупые компоненты
  3. вызывает Flux actions и обеспечивает ими глупые компоненты в виде колбэков
  4. никогда не имеют собственных стилей
  5. редко сами выдают DOM, используйте глупые компоненты для макета
  6. примеры: UserPage, FollowersSidebar, StoryContainer, FollowedUserList

Я кладу их в разные папки, чтобы сделать их различие явным.
Читать дальше →
Всего голосов 12: ↑10 и ↓2 +8
Просмотры 26K
Комментарии 9

Изучение React — для чего, откуда, как?

Разработка веб-сайтов *JavaScript *Программирование *ReactJS *
Tutorial
С чего начать изучение новой библиотеки или фрейморка? Сразу же найти статью на Хабре и с головой погрузиться в пучину практических примеров? Или сначала тщательно изучить официальную и неофициальную документацию, прежде чем перейти к практике? Именно между этими вопросами будет метаться ваше сознание, когда вы решите узнать, что же такое ReactJS. Чтобы желание учиться не умерло, как знаменитый ослик, обязательно загляните под капот.
Читать дальше →
Всего голосов 27: ↑17 и ↓10 +7
Просмотры 82K
Комментарии 59

CSS-модули

CSS *JavaScript *HTML *
Какими CSS обладает особенностями, которые приносят боль на больших проектах?

  • глобальное пространство имен
  • разрешение зависимостей
  • поиск «мертвого» кода
  • отсутствие констант
  • неоднозначный результат (каскад)

Давайте разберемся с тем, как мы сейчас пишем CSS на больших проекта и как хотелось бы его писать в идеальном мире.

Возьмем простой пример: кнопка и ее состояния.
Читать дальше →
Всего голосов 12: ↑10 и ↓2 +8
Просмотры 61K
Комментарии 39

Haskell для ВКонтакте, JavaScript и ReactJS, Или «Чужой против Симпсонов»

JavaScript *Haskell *ReactJS *
Из песочницы
Данный пост является попыткой добавить пару капель топлива в машину пропаганды Haskell, демонстрируя его использование в повседневных задачах.



В качестве таковых рассмотрим следующие:

  • Реализуем пакет доступа к API ВКонтакте.
    Код будет работать как в «native» приложениях, так и в приложениях JavaScript через GHCJS, компилятор Haskell в JavaScript
  • Напишем одностраничное браузерное приложение, используя наше API
Читать дальше →
Всего голосов 26: ↑23 и ↓3 +20
Просмотры 19K
Комментарии 1

Итоги 2015: веб-разработка

Блог компании GeekBrains Разработка веб-сайтов *JavaScript *Node.JS *
Представители КРОК, Traffic Inspector, WebMoney Transfer и Softline рассказали, что принес 2015-й год в сферу веб-разработки. Эксперты перечислили важнейшие события индустрии и отметили основные тренды уходящего года.



Ключевые события и тренды


2015-й – это год утверждения стандарта HTTP/2 (предыдущая версия протокола была принята в 1999). Это год массового перехода на стандарт HTML-5 с устаревшего Flash, который уже не поддерживается большинством современных браузеров. Это год появления WebAssembly, который в дальнейшем позволит перенести требовательные к производительности приложения в Web, что по мнению Сергея Дорогина, ведущего инженера-разработчика Департамента информационных технологий компании КРОК, означает “начало нового мира”.

Большинство тенденций уходящего года в сфере веб-дизайна, связаны с ростом популярности гаджетов и распространением мобильного интернета. Среди них такие как использование адаптивной верстки вместо создания отдельной мобильной версии сайта. Один из основных трендов – минималистичный дизайн, заданный Apple, помимо этого эксперты пророчат долгоиграющую популярность материальному дизайну от Google.
Читать дальше →
Всего голосов 10: ↑7 и ↓3 +4
Просмотры 17K
Комментарии 4

Тонкие места в React.js

Блог компании Acronis Программирование *ReactJS *
React — это, безусловно, прорывная технология, которая упрощает создание сложных интерфейсов, но, как у любой абстракции, у неё есть свои мелкие проблемки и особенности. Я в своей практике столкнулся с четырьмя не очень очевидными вещами. Багами это назвать сложно — это просто особенности работы библиотеки. О них сегодня и поговорим.

Читать дальше →
Всего голосов 31: ↑27 и ↓4 +23
Просмотры 28K
Комментарии 9