Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

React – примеры и эксперименты

React – это фреймворк для работы с UI в вашем приложении. Да, все точно, фреймворк работает только с одной буквой из аббривиатуры MVC, MVVM и другими MV* – только с “V” значит вендетта значит View (вьюха, UI или другое, удобное вам определение).

Разумеется на одной вьюхе приложение не сделать и нужно строить модель для работы с данными, логикой; плюс, разумеется, требуются контроллеры для связи с модулями и UI, а так же для запросов к серверу. Есть большое количество библиотек для реакта, которые позволяют все это осуществить – самые известные это flux, redux, но есть и другие. Они заслуживают отдельного внимания и я буду уделять им время (и место) в постах.

Подход фреймворка оказался настолько удачным, что многие программисты поверили в него и стали заниматься разработкой приложений на его основе. Ну еще бы – мало того что разрабатывается фейсбуком (“небольшой социальной сетью”), так еще и ими же и используется и тестируется на нагрузках, которые и не снились большинству компаний. Такой многообещающий подход подкупает 😉

react

Библиотека компонентов

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

Решение проблемы с анимацией preact, react

В продолжение предыдущего поста “Баг с анимацией в списке“. Проблема была с тем, что не были указаны ключи для элементов в списке. Preact на это не ругается, а просто перестает работать адекватно, react же начинает писать предупреждения в консоли и всячески привлекать внимание. Тут однозначно 1:0 в пользу старшего брата. Однако, только добавив ключи проблема

Вышел новый React 16 – что нового

Итак, наконец-то вышла 16-я версия библиотеки и хочется поговорить о некоторых обновленных и добавленных фичах. Пишу, конечно же о том, что мне в первую очередь бросилось в глаза, если хотите что добавить – велком в комментарии 🙂 Во-первых, ребята подошли массированно к улучшению библиотеки и полностью ее переписали. Вместе с тем API не поменялся, за что

Реакт убирает пункт о патентах!

Все, ReactJS отказывается от пункта про патенты в своей лицензии и выпускает React, Jest, Flow и Immutable.js под лицензией MIT. Стоит, однако, отметить что все это касается, только перечисленных библиотек и react-native, продолжит выходить под старой лицензией с патентами. Вполне возможно, что это будет отменено в будущем. Relicensing React, Jest, Flow, and Immutable.js

Делаем prop для проверки moment в React

Несколько специфическая тема, однако стоит взять на заметку, если пишите под React. Как известно в реакте вы можете определять типы данных, которые ожидает получить компонент. Обычно вы будете это делать с использованием prop-types, однако, если вам нужно что-то специфичное, то придется писать проверку самому. Например, тип данных moment. Можно, конечно в общем виде написать, что

React не будет использоваться в продуктах Apache

Apache Foundation – это серьезная организация, которая пишет немало программного обеспечения на благо общества. Все программные продукты распространяются бесплатно, с открытым исходным кодом. Основаная идея организации “быть универсальным донором” для других. Такой подход подразумевает как можно более широкое распространение кода, по-возможности не ограниченное ничем, только воображением. И основное препятствие в таком развитии, это конечно лицензии.

Обновил react-webpack-starter

Одна из особенностей разработки под веб (а особенно под фронт, чего уж говорить) – это постоянная необходимость обновлять используемые пакеты. А все потому что разработчикам не сидится и они все улучшают и улучшают) Итак, делаем апгрейд моего репозитория react-webpack-starter. В этот раз поменялось много чего: Упростил npm команды, теперь сборка продакшена будет зависеть от передаваемой

Мои eslint настройки

Я уже достаточно давно вынес свои eslint настройки в отдельный репозиторий и просто добавляю их в новый проект и не мучаюсь. При таком подходе не нужно обновлять файл настроек в каждом проекте, достаточно поднять версию пакета и продолжить использовать. Плюс все настройки хранятся в одном месте и это просто замечательно. Мой eslint базируется на airbnb

Office UI – Fabric JS

Реакт компоненты в стиле приложений офиса для создания интерфейсов. Майкрософт не устает радовать своими работами в open source community. Документацию для каждого из компонентов можно посмотреть вот здесь: http://dev.office.com/fabric#/components. Примеры включают в себя не только сами компоненты, но и рекомендации по использованию и дизайну.

Chrome extension – url-carousel

В порядке эксперимента написал плагин для хрома URL-carousel. Суть плагина достаточно простая – он в отдельном табе открывает поочередно сайты из списка. Дополнительные табы не открываются. Зачем именно так, когда есть решения, которые просто переключают открытые табы? Дело в том, что в моем случае нужно было транслировать экран через хромкаст на внешний телевизор. При этом