В этой статье, я хотел бы рассказать об альтернативном способе организации фронтенда для приложений на Ruby on Rails. В основном я работаю на бэкенде, но время от времени появляются задачи на фронтенде и то, что зачастую приходится там видеть, не внушает никакого оптимизма для дальнейшей работы.
Рубрика «bem»
Переиспользуемые UI компоненты в приложениях на Ruby on Rails
2018-04-05 в 20:10, admin, рубрики: bem, bemer, bemhtml, html, open source, reusable components, ruby, ruby on rails, ui components, БЭМ, бэм-методология, Разработка веб-сайтовНовости COMSOL: Анонс новой версии и объявление приглашенных докладчиков на день COMSOL 2017 в Москве
2017-10-12 в 7:42, admin, рубрики: bem, CAE, COMSOL, FEM, акустика, анонс, Блог компании COMSOL, итмо, моделирование, новинки, релизы, СофтВ рамках нашего блога, помимо пользовательских историй и рассказов о функционале пакета, мы планируем освещать наиболее интересные события, посвященные численному моделированию и использованию пакета COMSOL Multiphysics®.
Сегодня мы анонсируем основные нововведения предстоящего релиза COMSOL Multiphysics® версии 5.3a, а также темы презентаций приглашенных докладчиков, запланированных на день COMSOL в Москве 26 октября.
Практическое руководство по использованию CSS Modules в React приложениях
2017-08-09 в 10:15, admin, рубрики: bem, css, css modules, javascript, postcss, React, ReactJS, переводПубликация — свободный перевод статьи «Practical Guide to React and CSS Modules». Автор статьи Tatu Tamminen
В прошлом веб-разработчики тратили много времени и сил на создание повторно используемых компонентов. Оcобую проблему представлял собой CSS и природа его каскадов. Например, если разработчик создаёт компонент для отображения древовидной структуры, то как он может гарантировать, что CSS класс (например, .leaf), используемый в этом компоненте, не приведёт к побочным эффектам в других частях приложения? Были созданы различные методологии и соглашения, чтобы справиться с проблемами селекторов. БЭМ и SMACSS — широко используемые методологии, которые хорошо выполняют свои задачи, но в то же время далеко не идеальны. В этой статье рассказывается о недостатках таких методологий, основанных на соглашении об именах, о том, что представляют собой CSS Modules, и о том, как эти модули можно использовать в React приложении.
Читать полностью »
Унифицированный язык стилей
2017-08-04 в 9:16, admin, рубрики: bem, css, javascript, JS, ReactJS, Блог компании Mail.Ru Group, никто не читает теги, Разработка веб-сайтов
В последние годы мы наблюдали расцвет CSS-в-JS, в основном развивавшийся сообществом React. Конечно, процесс сопровождался спорами. Многие, особенно уже хорошо знакомые с CSS, смотрели на эту инициативу с недоумением.
«Зачем кому-то писать CSS в JS?
Конечно, это ужасная идея!
Им бы просто выучить CSS!»
Если такова была ваша реакция, читайте дальше. Мы поговорим о том, почему написание своих стилей в JavaScript в конце концов не является ужасной идеей, и почему целесообразно наблюдать за быстрым развитием этой технологии.
Организация адаптивной верстки в БЭМ с SCSS
2017-04-06 в 12:11, admin, рубрики: bem, css, scss, БЭМ, верстка, Разработка веб-сайтов, фронтендОдна из главных сложностей возникающая у многих фронтенд-разработчиков при использовании методологии БЭМ в CSS — это способ организации адаптивной вёрстки. Как известно блоки и элементы должны быть независимы друг от друга, а также от контекста в котором они находятся, значит и от устройства на котором выводятся. При этом в разных разрешениях экрана блок фактически может иметь разное отображение. Речь пойдет о том как организовать адаптивность таких представлений, при этом сохранив возможность использовать каждое из них независимо от каких либо внешних факторов и друг от друга.
Читать полностью »
Как я проект на БЭМ переводил… и перевел
2016-12-22 в 10:27, admin, рубрики: bem, css, html, БЭМ, версткаСвязка HTML и CSS (CSS в большей степени) всегда казалась мне несколько «туманной», хуже всего поддающейся контролю и тестированию. Я придумывал для себя различные правила и пытался так или иначе стандартизировать свой подход, но не было ощущения, что «вот, это оно». Я несколько раз мельком знакомился с БЭМ (и не только), читал статьи на эту тему, но дальше чтения дело не заходило. Но чем дальше, тем сильнее было ощущение необходимости в наличии определенной строгой методологии. В конце концов, я решил попробовать внедрить БЭМ на одном из своих проектов, где без этого, на мой взгляд, было не обойтись. Речь идет о CMS, упрощенную страничку бекенда которой я приведу в качестве примера верстки:
Сразу хочу заметить, что БЭМ — это далеко не методология на все случаи жизни, и вопрос о необходимости ее применения в том или ином проекте следует рассматривать в частном порядке (в том числе исходя из того, нравится она вам или нет). Также, в силу того, что я не использовал предлагаемую специфическую файловую структуру или генерацию HTML, о них говорить не будем (позднее я все-таки разделил CSS-файл на отдельные части, соответствующие блокам, но этим решил пока ограничиться). Также, уже достаточно много (например, вот и вот) написано о достоинствах и недостатках этого подхода в целом, поэтому говорить об этом тоже не будем, я просто поделюсь своим опытом и размышлениями на эту тему, предполагая, что с сутью вы уже знакомы.
Читать полностью »
$mol: reactive micromodular ui-framework
2016-10-31 в 5:10, admin, рубрики: $mol, angular.js, asynchronous, becycle, bem, benchmarks, build system, compositing, crossplatform, css, dependency, error proof, exception handling, FRP, inheritance, javascript, lazy execution, lazy initialization, lazy load, life cycle, localization, logging, mam, modules, namespaces, node.js, oorp, parallelism, polymer.js, postcss, proxy, react.js, reactive programming, reverse engineering, sourcemap, synchronization, TypeScript, vanilla.js, view.tree, Разработка веб-сайтов, разработка мобильных приложенийСколько нужно времени, чтобы просто вывести на экран большой список, используя современные фреймворки?
| Список на 2000 строк | ReactJS | AngularJS | Raw HTML | SAPUI5 | $mol |
|---|---|---|---|---|---|
| Появление списка | 170 ms | 420 ms | 260 ms | 1200 ms | 50 ms |
| Обновление всех его данных | 75 ms | 75 ms | 260 ms | 1200 ms | 10 ms |
Напишем нехитрое приложение — личный список задач. Какие у него будут характеристики?
| ToDoMVC | ReactJS | AngularJS | PolymerJS | VanillaJS | $mol |
|---|---|---|---|---|---|
| Размер ( html + js + css + templates ) * gzip | 322 KB | 326 KB | 56 KB | 20 KB | 23 KB |
| Время загрузки | 1.4 s | 1.5 s | 1.0 s | 1.7 s | 0.7 s |
| Время создания и удаления 100 задач | 1.3 s | 1.7 s | 1.4 s | 1.6 s | 0.5s |
Небольшая головоломка: перед вами синхронный код, загружающий и обрабатывающий содержимое 4 файлов, но с сервера они грузятся параллельно. Как такое может быть?
А теперь прошу за мной в кроличью нору, настало время удивительных историй...
БЭМ-методология: с чего всё начиналось и зачем это всё нужно
2016-02-04 в 8:14, admin, рубрики: bem, javascript, open source, Yandex, Блог компании Яндекс, БЭМ, Веб-разработка, разработка интерфейсов, фронтенд, Яндекс APIНа Хабре уже много писали о методологии БЭМ, выросшей в Яндексе. И мы решили, что пора системно рассказать о том, откуда она появилась и что сделало БЭМ таким, каким мы его знаем. Думаем, это будет интересно не только тем, кто уже использует БЭМ, но и тем, кто считает, что эта методология не подходит для их проектов. Возможно, они увидят, что мы решали проблемы, похожие на их собственные, и найдут что-то полезное для себя.
Конечно, все началось с собственных потребностей Яндекса. Вместе с тем, как он рос, росло и количество сотрудников, которые занимаются фронтендом. Постепенно команда увеличилась настолько, что стало очевидно — без единых стандартов работать будет сложно. К тому же, мы находимся в офисах Яндекса в разных городах. Возникла идея создать общую методологию, которая поможет организовать процессы в большой команде, работающей над разными проектами. А главное то, что мы хотели не только упорядочить и ускорить разработку, но и снизить порог входа в проект для нового разработчика.
Для чего нужна БЭМ-методология
Какие требования мы сформулировали:
- Разработчик должен понимать свой код (даже вернувшись к нему через год) и код любого программиста в команде БЭМ-проекта.
- Любой блок кода может быть использован повторно: необходимо создать общую базу знаний и не писать каждый раз всё с нуля, а использовать готовые наработки.
- Работая в одной команде, разработчики, менеджеры, дизайнеры и верстальщики должны называть одни и те же вещи одинаково. То есть говорить на одном языке.
- Команды могут обмениваться специалистами для реализации какой-то конкретной функциональности.
- Порог входа при переходе на новый проект должен быть снижен за счет одинаковой структуры организации всех БЭМ-проектов и одинаковых правил именования всех сущностей.
Мы стремились к тому, чтобы с увеличением числа разработчиков улучшалось и качество продукта. Это значит, что разработчики должны быть в курсе работы друг друга и не изобретать заново то, что уже реализовано. Мы хотели создать единую команду, которая работает над разными проектами.
How to ReactJS
2016-01-16 в 14:51, admin, рубрики: bem, ES6, falcor, flux, immutable.js, javascript, ReactJS, redux, relay, webpackЕсли вы новичок в React (или frontend-разработке в принципе), экосистема может показаться запутанной. В этом несколько причин.
* Исторически React был разработан для экспертов и ранних последователей
* Facebook открывает исходный код только тех продуктов, которые используются социальной сетью, т. е. изначально не нацеленные на проекты-меньше-чем-Facebook
* Огромное количество гайдов по React совершенно разной сложности
Здесь я буду считать, что вы уже знакомы с HTML, CSS и JavaScript.
Способы организации CSS-кода
2015-04-19 в 22:18, admin, рубрики: AMCSS, Atomic CSS, bem, css, fun, html, MCSS, OOCSS, SMACSS, БЭМ, Веб-разработка, Совершенный код, метки: BEM, CSS, HTMLРазработчик Бен Фрейн (Ben Frain) однажды заметил: «Писать CSS-код легко. Масшабировать и поддерживать его — нет».
К счастью, на просторах интернета можно найти множество решений этой проблемы. В данной статье рассмотрены основные киты структуры CSS-кода, а также интересные рыбы/млекопитающие поменьше.
Статья служит лишь памяткой или кратким справочником — для подробного ознакомления с методологиями настоятельно рекомендуется изучать оригинальную документацию.
Итак, начнем.
Читать полностью »