Новое API React: Suspense (ру субтитры, с выступления Дэна на JS Conf)

Original author: Dan Abramov
  • Translation

image


Дэн Абрамов рассказывает о "будущем" API — Suspense. По ходу презентации он описывает две проблемы:


  • проблема производительности устройства пользователя;
  • проблема его "коннекта" (скорости и стабильности соединения);

которые позволяет решить новое API.


P.S. Видео под катом, не забудьте включить субтитры.



Пулл-реквест намечающейся фичи.


Разработчики React обещают добавить новое API до конца года, но думаю у них получится сделать это быстрее.

Only registered users can participate in poll. Log in, please.

Хотели ли бы вы смотреть подобные видео с субтитрами?

  • 85.5%Да112
  • 14.5%Нет19
Support the author
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 19

    +1
    так о чем фича то? видео не смотрел.

    upd: кому интересно и текстом — medium.com/@baphemot/understanding-react-suspense-1c73b4b0b1e6
      –4

      Это аналог $mol_fiber, но в 10 раз большим кодом, ибо реакт :-)

        0

        Suspense это не Fiber


        Для того чтобы включить Fiber в реакте не надо переписывать приложение. И вообще разработчику не надо задумываться о том как там под капотом обновления происходят. Вы же предлагаете просто отдельное апи для этого: то есть про это апи надо думать на этапе разработки приложения.


        Согласитесь немного разные подходы.

          0

          Suspense — это именно Fiber, а вот то, что в Реакте называется Fiber — это не Fiber, а progressive rendering.

            0

            $mol_fiber по своему предназначению — тоже самое что и React Fiber (pausable synchronous execution, в реакте эти паузы как раз для того чтобы изменения в браузер доставить). Suspense вообще не про то. Вы либо путаете что-то, либо сознательно заблуждаетесь.

              0
              Про что же Suspense?
                0

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

                  0
                  In short: the new feature allows you to defer rendering part of your application tree until some condition is met (for example data from an endpoint or a resource is loaded).
    –2

    Технические подробности уже были? При просмотре видео у меня сложилось впечатление, что vintage устроился в facebook и продвинул там идею про throw-based программирование в React :)

      +6
      Суть примерно такая: в реакт добавили 2 спец компонента: Timeout и Loading.
      1. если код оборачиваешь в Timeout, то он во время асинхронной подгрузки любого дочернего — покажет крутилку
      2. если какой-нить дочерний тоже обернут в Timeout, то он будет иметь приоритет и верхний Timeout его проигнорирует
      3. если код обернуть в Loading, то он вытащит статус загрузки isLoading со всего поддерева дочерних компонент
      4. В рендере можно сделать throw new Promise и реакт перехватит исключение, проверит что пришел промис и перерендерит компонент при ресолве промиса. Если к этому прикрутить кэш, то код выглядит как синхронный.

      Печально, что это все сильно реакт усложняет. Команде реакта можно было, например, сделать свой аналог mobx-а, запихнуть туда файберы, обработку асинхронности на исключениях и работу со стейтом.
      Такое разделение ответственности позволило бы использовать эти фичи в клонах, вроде preact/inferno и других vdom и real dom библиотеках. Даже отдельного пакета можно не выкладывать, держать в проекте, а сейчас это все прибито к react-dom.

      Добавив эту функциональность, они вступили на путь из граблей, по которым уже прошел vintage со своими атомами за последние года 2, есть множество проблем такого подхода. Например:

      Что делать, если не promise, а observable?

      Как сделать в реакте параллельную загрузку, если бросание эксепшена в render приостанавливает выполнение, а за ним может быть еще один асинхронный запрос.

      Как делать retry в случае ошибки?

      Как автоматизировать инвалидацию кэша, который в демках скорее всего достаточно примитивный, на каком-нибудь simple-cache-provider?
        0
        ЕМНИП, в этом докладе говорилось, что будут предтавлены абстракции разных уровней, как высокого (типа createFetcher, ), так и низкого уровня.

        Возможно, что с их помощью можно будет решить и предложенные Вами сценарии =)
          0

          типа createFetcher и <Placeholder> я имел в виду
          (постоянно забываю, что тут комментарии поддерживают HTML :-))

            0
            Я пробовал обобщить, исходя из анализа доклада и доступных на текущий момент исходников: react-suspense-demo, бандла react-dom@16.4.0-alpha.0911da3, который собирался видимо из этого pr.

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

        redyif, толковый коммент. Пожалуй заслужил от меня подписку:)

        Only users with full accounts can post comments. Log in, please.