Введение в IMBA: совместимый JavaScript язык для обновлений на молнии

Автор оригинала: FreeCodeCamp Community Member.

IMBA – это язык программирования с открытым исходным кодом, который мы создали специально для создания веб-приложений. Он компилирует JavaScript и работает внутри существующей экосистемы JS, что означает, что вы можете использовать его с узлом, NPM и WebPack.

Большая выгода с IMBA заключается в том, что он приводит к гораздо более быстрым приложениям, чем если бы вы использовали библиотеки на основе виртуальных DOM, такие как React и Vue. Увеличенная скорость – это благодаря тому, как IMBA обрабатывает обновления DOM, которые мой COFOUNTER и IMBA Creator Sindre Osen Aarsaeter объясняет здесь Отказ

Последние несколько лет я использовал IMBA, и это действительно приятный язык для работы, так как синтаксис является очистителем, чем JavaScript, что улучшает читаемость кода.

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

Проекты с использованием IMBA

Но прежде чем перейти в код, я хочу указать, что это не просто неясный язык, используемый в проектах хобби. Imba Powers – критически важные приложения для крупных компаний.

Одним из примеров является Рыбный аукцион рынка на Исландию. Поскольку рыба имеет большое значение на Исландии, этот рынок составляет 1,6% экономики страны – примерно 390 миллионов долларов США.

Во-вторых, вся обучение платформы Scrimba.com построен с IMBA, как передней, так и в задней части. Это сложное приложение, которое сильно зависит от скоростного примирения DOM IMBA.

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

Давайте начнем!

Синтаксис

Синтаксис IMBA имеет много сходств с JavaScript, но он также под влиянием Ruby and Python. Легко подобрать по пути, поэтому давайте начнем с примера. Ниже вы увидите простую функцию JavaScript, которая возвращает наибольшее из двух чисел или ложь, если они равны:

Теперь давайте переведем это в IMBA:

Просто посмотрев на два примера, вы, вероятно, можете вычитать некоторые основные различия между IMBA и JavaScript:

1. Функция → Def. Во-первых, Функция Ключевое слово было переименовано в def Отказ
2. Нет скобок. Кроме того, параметры функции не завернуты в скобки. Вы действительно редко нуждаетесь в скобках в IMBA, но вы можете использовать его, если вы хотите.
3. Углубления. IMBA – основана на отступе. Это означает, что нам не нужно использовать вьющиеся кронштейны, которые экономит пространство.
4. Без возврата. В Imba возвращается неявна, то есть нам не нужно писать Возвращение Отказ IMBA автоматически возвращает последнее выражение функции.

Ни один из них не является наиболее важным аспектом IMBA, но вместе они делают код менее Verbose, чем JavaScript. Это преимущество станет яснее, поскольку мы прогрессируем через эту статью.

Строительные пользовательские интерфейсы

Давайте переместимся на создание пользовательских интерфейсов. Это на самом деле, для чего Imba создан. Это означает, что узлы DOM встраиваются в язык как так называемый Первый класс граждан.

Рассмотрим следующий код в реакции, который просто отображает кнопку и регистрирует что-то в консоль, когда она нажала:

Если мы переписываем этот пример к IMBA, мы получим следующее:

Найдите минутку, чтобы сравнить два. Есть три вещи, которые я хочу, чтобы вы заметили:

1. Теги родные. Классное приложение продлевает racte.component был переведен на гораздо более простые Приложение Tag Отказ Это потому, что Тег является родной частью языка IMBA. Это верно для тегов DOM, так и для пользовательских тегов.
2. Нет закрытия тегов. Как мы отступаем, нам не нужно закрывать наши метки (например on>). Это экономит нам много печати и пространства.
3. Простой синтаксис класса. Добавление классов прост в IMBA. Вместо громоздки ClassName = "Контейнер" Мы просто добавляем .Онтейнер на саму тег.

Вы также можете заметить, что обработчик событий отличается. Мы делаем : tap.logout в отличие от onclick = {this.logout} Отказ Это только один из нескольких способов обработки пользовательских входов в IMBA, который вы можете прочитать больше о В документах если тебе интересно.

Обработка данных

Теперь давайте посмотрим на то, как IMBA обрабатывает данные. В приведенном ниже примере я изменил наше приложение, чтобы включить Считать Переменная в Приложение Состояние компонента. Эта переменная будет увеличена или уменьшаться в зависимости от которой кнопка пользовательских щелчков.

Вот как переписать в IMBA:

Самая поразительная разница – это количество кода.

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

Неявно

Одна вещь, которую вы также можете заметить, это то, что мы получили доступ к нашей переменную экземпляра напрямую через Считать , в отличие от реакции, где мы используем this.state.count в порядке извлечь ценность.

В IMBA мы могли бы сделать Self.count Отказ Тем не менее, Я неявно, поэтому нам не нужно писать это. Imba проверяет, есть ли либо Считать переменная в области охвата, или если Считать существует как переменная экземпляра на Приложение сам.

Мультипликация

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

Это следует противоположной узор, чем реагировать, где Это следует относиться как к неизменному, и единственный способ изменить его через this.setState Отказ

Вы можете использовать неизменной библиотеку вместе с IMBA, если вы предпочитаете это. Это на самом деле агности в этом смысле. У Scrimba мы используем мультиваруемость, так как мы не думаем, что стоимость того, чтобы они не могли быть неизменной.

Настройка IMBA локально

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

git clone https://github.com/somebee/hello-world-imba.git

cd hello-world-imba

npm install

npm run dev

Перейдите к http://localhost: 8080/ И вы увидите ваш проект. Открыть SRC/Client.imba Чтобы начать изменение приложения.

В качестве альтернативы, если вы хотите начать, не устанавливая его локально, вы можете использовать Эта интерактивная спортивная площадка Scrimba.

Скорость IMBA

Прежде чем мы завернули, давайте также посмотрим на скорость Imba. Этой причины это так невероятно быстро на самом деле, потому что это не После реализации виртуального дома, которая реагирует на популярный. Это использует что-то, что он вызывает вместо этого воменой, который проще и прямой способ сделать это.

В ориентир Ниже мы считаем, сколько операций DOM мы можем сделать в секунду через выполнение Живой тест рядом с Vue и реагировать. Три библиотеки делают то же самое, что означает модифицировать TODO-списки тысяч раз.

Так что Imba быстро. Действительно быстро.

Округления

Есть много других вещей, чтобы узнать о IMBA, поэтому я рекомендую вам посетить Док. Например, его концепции Getter/Setters и неявных вызовов важны, чтобы получить понимание. Кривая обучения может быть немного крутой в начале, но это так же, как это так. Все стоит делать в жизни, требует немного боли и усилий;)

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

Удачи и счастливые кодировки!

Спасибо за прочтение! Меня зовут на Борген, я соучредитель Scrimba – Самый простой способ научиться кодировать. Вы должны проверить наш Отзывчивый веб-дизайн Bootcamp Если хотите научиться строить современный веб-сайт на профессиональном уровне.