Ember.js и React.js: сравнение некоторых расширенных функций

Ember.js - один из старейших фреймворков для JavaScript в городе. Ember.js познакомил меня с миром фреймворка javascript. Поэтому, когда я изучал новые фреймворки, я изучал другие фреймворки, сравнивая их с уже знакомыми мне фреймворками. Я надеюсь, что эта статья поможет всем, кто переходит с Ember.js на React.js или с React.js на Ember.js.

Для начала мне нравится, как React.js перечисляет расширенные функции в руководстве; поэтому я структурирую эту статью на основе React Documents.

Разделение кода

Разделение кода позволяет приложению отложить загрузку какого-либо модуля в ваше приложение. Javascript Frameworks встраивает коды js в один пакет файла js. С помощью различных инструментов сборки (Babel, Webpack, Broccoli) все файлы конвертируются в оптимизированную версию (производительность, совместимость) js файла. Однако иногда большой проект может стать действительно большим, и неразумно строить и доставлять по сети сразу.

React и Ember по-разному обрабатывают разделение кода. React включает синтаксис импорта; webpack реализует функцию отложенной загрузки.

Пример из документации React,

import(“./math”).then(math => {
 console.log(math.add(16, 26));
 })

React также предоставляет компонент Lazyloading с использованием приостановки или ленивости React.

Ember не предлагает "из коробки" разбиение кода. Существует аддон под названием Ember Engine, который позволяет ленивую загрузку модуля. Однако вы пока не можете отложить загрузку компонента, он должен быть привязан к конкретному маршруту. Ember лениво загружает «движок» при вызове маршрута. Надеюсь, мы получим такое поведение, когда Ember.js реализует маршрутизируемые компоненты.

*** Вы можете проверить другой модуль динамического обновления ember под названием ember-auto-import
https://github.com/ef4/ember-auto-import

** Обновление, в Chrome добавлена ​​функция отложенной загрузки в браузер. Вы сможете отложить загрузку актива, такого как изображение.

<img src=”/cat.jpg” loading=”lazy” />

Контекст

React Docs описывает функциональность контекста как «Контекст предоставляет способ передавать данные через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне». Это позволяет передавать простую конфигурацию приложения, такую ​​как тема, каждому компоненту. Эта функция реализована

const ThemeContext = React.createContext('light');

Затем мы оборачиваем компонент в цель тегом ThemeContext.Provider. Дочерний компонент может получить контекст с помощью

static contextType = ThemeContext

В мире Ember я не мог найти прямого эквивалента контекста. Ближайшей особенностью, которую я обнаружил, был сервис Ember. Итак, основная идея функции ember - это внедрение зависимостей; вы вводите синглтон (один экземпляр объекта) в компонент, выполняя

authService: service()

Это создает единственный экземпляр authService за все время существования приложения. Однако он более «активен», чем React Context. Вы в основном передаете целый объект, в котором вы можете выполнять более сложные операции, чем просто значения. Использование тоже должно быть другим.

Границы ошибок

Я бы хотел иметь границу ошибок в Ember.js. По сути, граница ошибки - это блок «попробуй и поймай» для компонента. Предположим, мы лениво загружаем компонент. Многое может пойти не так. Поэтому, если мы не обернем компонент границей ошибки, все приложение выйдет из строя. Например

<ErrorBoundary>
<MyWidget />
</ErrorBoundary>

Граница ошибок - это специальный компонент с такими хуками, как componentDidCatch, getDerivedStateFromError. Эти хуки позволяют приложению корректно обрабатывать ошибку.

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

Фрагменты

Обычно при рендеринге компонент имеет корневой узел DOM верхнего уровня. JSX явно требует наличия такового; Ember автоматически добавляет единицу. Однако у вас может быть вариант использования, когда компонент не должен иметь узел DOM верхнего уровня. Например

<ul>
 <li>test</li>
 <li>test2</li>
 <li>test3</li>
</ul>

Что делать, если вы хотите создать компонент, инкапсулирующий test, test2 list. Компоненту потребуется узел верхнего уровня. React.Fragment сияет в этой ситуации, вы можете просто использовать

function ListComponent(){
 return(
   <React.Fragment>
      <li>test2</li>
      <li> test3 </li>
    </React.Fragment>
 )
}

Это особенно полезно в контейнере svg.

В Ember.js я не нашел официального объяснения этой ситуации. Самое близкое, что я смог найти, вы можете установить tagName (tagName - это внутренняя опора компонента) для управления на верхнем уровне узла DOM. Если вы установите его равным пустой строке, компонент станет без тегов. Это один из примеров того, почему у Ember.js плохая репутация. Я нигде не мог найти этого объяснения. Пришлось покопаться в чате RFC и найти кого-то, кто об этом говорит :).

export default Component.extend({
   tagName: ''
})

Очевидно, это решено в октане Ember, проверьте эту ссылку
https://blog.emberjs.com/2019/03/06/coming-soon-in-ember-octane-part-4.html

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