This document discusses Kiwi.com's new Margarita project for building multiplatform user interfaces. It will use React Native and React Native for Web to share code across platforms. It introduces some Kiwi-developed open source tools like a GraphQL fetch library and an ESLint configuration for setting up linting and formatting rules. The document provides links to learn more about the technologies and libraries being used to build the multiplatform UI.

1. MULTIPLATFORM UI
MICHAL SÄNGER
michal.sanger@kiwi.com

2. KIWI.COM WANTS TO
MAKE TRAVEL BETTER

7. 3 PLATFORMS
3 FE TEAMS
3 ISOLATED ISLANDS

8. NEW PROJECT
MARGARITA.KIWI.COM

10. OPENSOURCE
GITHUB.COM/KIWICOM/MARGARITA

11. WE HANDLE
> backend
> payments
> customer support

12. YOU ENJOY
> GraphQL
> Multiplatform UI components
> Profit

13. HOW TO
MULTIPLATFORM UI

14. REACT NATIVE FIRST

15. REACT NATIVE WEB
FOR BROWSER

17. REWORK HTTPS://ORBIT.KIWI

18. SHARED UI
SHARED KNOW-HOW

19. MULTIPLATFORM ORBIT
NPM PACKAGE SOON™

20. MARGARITA.KIWI.COM
GITHUB.COM/KIWICOM/MARGARITA

21. LEARN RELAY
GITHUB.COM/KIWICOM/RELAY-EXAMPLE

22. LEARN RELAY
> GraphQL fragments
> simple fetching
> Endless pagination
> bi-directional pagination

24. RELAY TALKS

25. BETTER FETCH LIBRARY
@KIWICOM/FETCH

26. KIWI FETCH
> Retries
> Timeouts
> Error handling

27. FETCH - TIMEOUT, RETRIES
import fetchWithRetries from '@kiwicom/fetch';
fetchWithRetries(
'https://example.api',
{
fetchTimeout: 15000,
retryDelays: [1000, 3000],
// ... standard Fetch options
},
);

28. FETCH - ERROR HANDLING
import fetchWithRetries, { TimeoutError, ResponseError } from '@kiwicom/fetch';
try {
const response = await fetchWithRetries('//localhost');
} catch (error) {
if (error instanceof TimeoutError) {
console.error('request timeouted');
} else if (error instanceof ResponseError) {
console.error('unsuccessful response', error.response);
} else {
console.error('unknown error');
}
}

29. OPINIONATED ESLINT RULES
@KIWICOM/ESLINT-CONFIG

30. KIWI ESLINT CONFIG
> React, RN, Hooks, Relay
> Prettier, Jest
> Flow, Node
> extendable

31. ESLINT - SETUP
//.eslintrc.js
module.exports = {
root: true,
extends: [
'@kiwicom/eslint-config',
],
};

32. ESLINT RUNNER
> Parallel execution
> Only changed files
> Auto fix

34. BABEL PRESET
@KIWICOM/BABEL-PRESET-KIWICOM

35. BABEL PRESET
> Flow, JSX
> Class properties
> Relay fragments
> Syntactic sugar

36. GITHUB.COM/KIWICOM/