Dima Novotochinov dmitryn

Liebnitzsee (Spazieren um den See, Strandbad, Fähre zur Insel mit Gasthof)
Bernsteinsee (See mit Karibikflair)
Chorin (Wandern, Seen, Kloster)
Buckow (Wandern)
Harz-Berlin-Express: Direktzug in 3h vom Alex nach Wernigerode

This document will be a part of the upcoming re-frame website.

On Derived Data

The UI is just derived data.

At each moment, the DOM displayed is a "materialised view" of what is in app-db.

Domino 3 modifies app-db and then boom, boom, boom go dominoes 4, 5 & 6, automatically producing this "materialised view", via a data flow.

Based on: https://reactjs.org/docs/error-boundaries.html

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.

Reagent gives us access to the error boundary features

Returning true from :component-did-catch stops the unmounting behaviour

ClojureScript REPL Workflow

Short write up on using REPL when developing UIs in ClojureScript.

Hot-reload on save or Eval in REPL?

Everyone's standard approach to hot-reloading is to use a tool (Figwheel or shadow-cljs) that reloads changed namespaces automatically. This works really well: you change the code, the tool picks up changed files, compiles namespaces and dependants, notifies REPL client which then pulls in compiled changes, and re-runs a function that re-renders UI.

The other approach is to use ClojureScript's REPL directly and rely only on eval from the editor. This more or less matches Clojure style workflow. This approach might be useful when you don't want tools overhead or hot-reloading becomes slow for you or you just used to this style of interactions. Also changing code doesn't always mean that you want to reload all the changes. On the other hand it is very easy to change a couple of top-level forms and forget to eval one of them.

Introductory resources

High level overview https://yogthos.github.io/ClojureDistilled.html
An Animated Introduction to Clojure https://markm208.github.io/cljbook/
Interactive tutorial in a browser https://tryclojure.org/
Interactive exercises http://clojurescriptkoans.com/
Clerk notebooks with introductory examples https://github.clerk.garden/anthonygalea/notes-on-clojure
More interactive exercises https://4clojure.oxal.org/
Lambda Island tutorials https://lambdaisland.com/
Functional Programming with Clojure resources https://practicalli.github.io/

The easiest way

1. Clone the repository

git clone https://github.com/status-im/status-react
cd status-react

	import React, {useImperativeHandle, useRef, forwardRef} from 'react';
	import Animated, {
	useSharedValue,
	useAnimatedStyle,
	withTiming,
	withSpring
	} from 'react-native-reanimated';

	function Box(props, ref) {
	const aRef = useRef();

	(ns user
	#?(:cljs (:require-macros [user])
	:clj (:require [cljs.source-map :as sm]
	[clojure.data.json :as json]
	[clojure.java.io :as io]
	[clojure.string :as str]
	[cljs.env :as env])))

	#?(:clj
	(defn map-location [env form & {:keys [offset]}]

	(ns rnstyles.core
	(:require [clojure.string :as cstr])
	(:import (cljs.tagged_literals JSValue)))

	;; Sablono's stuff
	;; Converting Clojure data into ClojureScript (JS)
	;; ====================================================
	(defprotocol IJSValue
	(to-js [x]))

	;; Rather then relying on macros, I propose to have `merge-fx` helper exposed as function
	;; taking variable number of arguments (where the first one is always cofx, second one could
	;; be initial effects map and then variable number of effects producing functions, with the
	;; all of them with the same form as now:
	(defn effects-fn [arg1 arg2 {:keys [db] :as cofx}]
	{:db (update db :some-key arg1)
	:http-call ...})

	(defn final-effects-fn [cofx]
	(merge-fx cofx