ryanflorence

Route Transition API

Definitions

The goal of the route transition API is to enable suspense-like transition in React Router without using Suspense (much like v1).

On location changes, React Router will continue to send down the old location, activating pending hooks for loading states and optimistic UI, and wait for your Route's preloading hooks to resolve before sending down the new location and updating your app.

This enables you to declare data dependencies on your routes, allowing your route elements to expect data and not need to manage their own loading states.

ryanflorence

Route Config

I think I just figured out two major things I wanted to work out:

1. Not sending the entire route config to the client, only the ones that matched and that are linked to on the page.

2. Defining routes manually in replace of, or in addition to, the conventional file-system routes

The reason I've been hesitant on (2) is because of (1). Take a highly interactive blog where each article is a full blown React component like our blog instead of just markdown you can lookup and parse on the server.

alexeyraspopov

Data Injection

Задача: компоненту необходимо получить сторонние данные, которые он не может получить через пропсы.

Проблема: разные источники данных могут иметь разные API, которые влекут за собой необходимость реализации дополнительных аспектов в рамках компонента: useState/useEffect, обработка loading state, доступ к асинхронным API, etc.

Решение: Каждый раз когда компоненту нужны сторонние данные, создавай

ryanflorence

Everything I Know About UI Routing

Definitions

1. Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
   1. pathname - The "file/directory" portion of the URL, like invoices/123
   2. search - The stuff after ? in a URL like /assignments?showGrades=1.
   3. query - A parsed version of search, usually an object but not a standard browser feature.
   4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
   5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

bruce

GraphQL document is parsed:

• Lexer: https://github.com/absinthe-graphql/absinthe/blob/master/lib/absinthe/lexer.ex
• Parser (Yecc): https://github.com/absinthe-graphql/absinthe/blob/master/src/absinthe_parser.yrl

This returns a tree of Absinthe.Language nodes (structs), effectively the AST:

• https://github.com/absinthe-graphql/absinthe/tree/master/lib/absinthe/language

This tree is converted to a tree of Absinthe.Blueprint nodes (structs):

• https://github.com/absinthe-graphql/absinthe/tree/master/lib/absinthe/blueprint

gcanti

import * as t from 'io-ts'
import * as React from 'react'
import { render } from 'react-dom'

type Field = t.StringType | t.NumberType | t.BooleanType
interface Form extends t.InterfaceType<{ [key: string]: Field }> {}

const toReactElement = (f: Form | Field): React.ReactElement<any> => {
  // f is a tagged union
  switch (f._tag) {

muan

Update: See https://github.com/muan/details-on-details instead.

---

I did a talk at Brooklyn JS called Details on <details> on 2018/07/19. I have way more details prepared than the ones that fit in the slides, so here's the real details on <details>. ❤️

– @muan

Spec

ceejbot

ESM modules in node: npm edition

The proposal you’re about to read is not just a proposal. We have a working implementation of almost everything we discussed here. We encourage you to checkout and build our branch: our fork, with the relevant branch selected. Building and using the implementation will give you a better understanding of what using it as a developer is like.

Our implementation ended up differing from the proposal on some minor points. As our last action item before making a PR, we’re writing documentation on what we did. While I loathe pointing to tests in lieu of documentation, they will be helpful until we complete writing docs: the unit tests.

This repo also contains a bundled version of npm that has a new command, asset. You can read the documentation for and goals of that comma

A-gambit

How do you make friends with React and FRP? 🤔 Start to develop your application using Focal.

This is a CFP for the ⚡️Lightning⚡️ talk at awesome ReactiveConf 2017. If you'd like to see this talk, please 🌟 star🌟 this summary and retweet my tweet 🙂 #ReactiveConf

Functional reactive programming (FRP) is very popular nowadays. The JavaScript community provides us with excellent tools like RxJS, Bacon, and Kefir. But, as we know, they have nothing to do with React. So how we can use the power of FRP in our React application? Using the correct state management, we can make friends with FRP and React and make our application truly reactive. In my lightning talk, I will talk about Focal

ALF-er

Disclaimer: Многие доклады смотрелись и отчёты писались в поезде, спать хотелось капец.

Disclaimer 2: Если что, простите за орфорграфию.

1. Tom Occhino - Keynote Part 1

Вступление, в основном - нудное бла, бла, бла. Из достижений - 547,138 ReactDevTools installed on Chrome. Тем кто териториально недалеко от San Francisco Bay Area может быть интересно, что FB проводит открытые митапы - ReactWednesday.

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