bemtvjs

Прежде чем играть с BEMTV, подумайте дважды, и если вам нравится слишком много, не удивляйтесь!

Переводы:

• Португаис делает Бразиль

---

Почему bemtv?

В настоящее время в экосистеме JavaScript есть отличные инструменты для разработки пользовательского интерфейса. Bemtv повторно использует многое из того, что принесли и приносят эти инструменты, однако это не копия, это нечто совершенно новое.

Ключевые функции

• Синтаксис очистителя, чем другие библиотеки пользовательского интерфейса и рамки.

• Нет «реквизита». Новый способ для родительского компонента передавать данные в детские компоненты.

• Вместо общей системы маршрутизации или на основе файлов BEMTV приносит новую инновационную систему маршрутизации, которая способна автоматически превращать компонент в маршрут в соответствии с его использованием в приложении.

• Разделение логики, связанной с событиями DOM от шаблона компонента.

• Полуавтоматическое распределение кода.

• CSS-In-JS и CSS-In Template.

• Конструкция компонентов позволяет экспортировать все принадлежащие ему методы, что позволяет использовать эти методы в любой части применения.

• Легкое двустороннее связывание между компонентными переменными и свойствами и атрибутами HTML.

• Крючки

• Функции преобразования, которые разделяют структуры данных, такие как массив, установка, карта и объект от их разметки для шаблона.

• Brackethtml Language Language: вместо <div>Hey!</div> сделать это: div[Hey!] .

• Декларативные синтаксические сахары через шаблон компонента.

• Это просто javascript, не требуется JSX или время сборки, просто добавьте его в свой index.html и повеселитесь!

Покажи мне код!

Все компонентные методы могут быть экспортированы и использованы в других частях применения:

 import { _ } from "bemtv" ;

export const { click$ , onMount , route , css , template } = _ `Home` ( ) ;

Это позволяет вам разделить логику компонентов на несколько функций, которые могут использовать жизненный цикл компонента, состояние, манипулировать элементами DOM, стиль, маршрутизацию, события DOM ...

Добавление событий CSS и DOM:

 import { _ } from "bemtv" ;

export const { click$ , css , template } = _ `Button` ( ) ;

click$ ( ( ) => console . log ( "Clicked!!!" ) ) ;

css `
  color: blue;
` ;

template `button[ I am a button! ]` ;

Свойство DOM привязкой элемента с компонентом:

 import { _ } from "bemtv" ;

const { $ , template } = _ `Input` ( {
  inputValue : 0 ,
} ) ;

template `input[type="number" $inputValue<value]` ;

Покажите отрывку, пока компонент импортируется:

 import { _ } from "bemtv" ;

const { template } = _ `App` ( ) ;

template `UserData[](Loading...)` ;

Создание ссылки маршрута:

 import { _ } from "bemtv" ;

const { template } = _ `App` ( ) ;

template `#AboutUs[ Link to about us ]` ;

BEMTV использует инновационную систему автоматического создания маршрутов, это возможно, потому что компоненты могут вести себя как маршруты/страницы.

Счетчик компонента:

 import { _ } from "bemtv" ;

const { click$ , $ , template } = _ `Counter` ( { count : 0 } ) ;

click$ ( ( ) => $ . count ++ ) ;

template `button[Clicked: $count ]` ;

Это только верхушка айсберга, многие из функций BEMTV действительно показывают свою силу с практикой и в сочетании с другими!

Что дальше

BEMTV-это недавний и малоизвестный проект, у меня есть несколько идей, чтобы продолжить развитие ИТ и других проектов вокруг него, таких как расширение синтаксиса.

В настоящее время я работаю полный рабочий день в BEMTV и не получаю никакой финансовой компенсации, если вам нравится BEMTV, пожалуйста, рассмотрите возможность поддержки проекта, ваша помощь определит, может ли проект продолжать достигать большей высоты.

Если у вас есть свободное время, приходите и станьте частью строительства BEMTV!

Вся помощь ценится!

Не забудьте отдать свою звезду проекту, так как это побуждает меня продолжать развиваться.