docs(website): add medium article and side effects guide

Author: christianalfoni

packages/overmind-website/examples/guide/runningsideeffects/axios.ts

@@ -0,0 +1,65 @@
+import tsAppIndex from '../../tsAppIndex'
+
+function createJsCode(view) {
+  return [
+    {
+      fileName: 'app/effects.js',
+      code: `
+export { default as http } from 'axios'
+    `,
+    },
+    {
+      fileName: 'app/index.js',
+      code: `
+import App from '${view}'
+import * as state from './state'
+import * as actions from './actions'
+import * as effects from './effects'
+
+const app = new App({
+  state,
+  actions,
+  effects
+})
+
+export default app
+      `,
+    },
+  ]
+}
+
+function createTsCode(view) {
+  return [
+    {
+      fileName: 'app/effects.ts',
+      code: `
+export { default as http } from 'axios'
+    `,
+    },
+    {
+      fileName: 'app/index.ts',
+      code: tsAppIndex(
+        view,
+        `
+import * as state from './state'
+import * as actions from './actions'
+import * as effects from './effects'
+
+const config = {
+  state,
+  actions,
+  effects
+}
+      `
+      ),
+    },
+  ]
+}
+
+export const react = createJsCode('react-overmind')
+
+export const reactTs = createTsCode('react-overmind')
+
+export const vue = createJsCode('vue-overmind')
+
+export const vueTs = createTsCode('vue-overmind')

packages/overmind-website/examples/guide/runningsideeffects/class.ts

@@ -0,0 +1,50 @@
+export const js = [
+  {
+    fileName: 'app/effects.js',
+    code: `
+import axios from 'axios'
+
+class Http {
+  constructor (baseUrl, request) {
+    this.baseUrl = baseUrl
+    this.request = request
+  }
+  getUser() {
+    return this.request.get(\`\${this.baseUrl}/user\`)
+  }
+}
+
+export const http =
+  new Http(IS_PRODUCTION ? '/api/v1' : 'http://localhost:4321', axios)
+  `,
+  },
+]
+
+export const ts = [
+  {
+    fileName: 'app/effects.ts',
+    code: `
+import axios from 'axios'
+import { User } from './state'
+
+interface IHttp {
+  get<T>(url: string): Promise<T>
+}
+
+class Http {
+  private baseUrl: string
+  private request: IHttp
+  constructor (baseUrl: string, request: IHttp) {
+    this.baseUrl = baseUrl
+    this.request = request
+  }
+  getUser(): Promise<User>  {
+    return this.request.get(\`\${this.baseUrl}/user\`)
+  }
+}
+
+export const http =
+  new Http(IS_PRODUCTION ? '/api/v1' : 'http://localhost:4321', axios)
+  `,
+  },
+]

packages/overmind-website/examples/guide/runningsideeffects/getuser.ts

@@ -0,0 +1,22 @@
+export const js = [
+  {
+    fileName: 'app/operations.js',
+    code: `
+export const getUser = ({ http }) =>
+    http.get('/user')
+  `,
+  },
+]
+
+export const ts = [
+  {
+    fileName: 'app/operations.ts',
+    code: `
+import { Map } from './'
+import { User } from './state'
+
+export const getUser: Map<any, Promise<User>> = ({ http }) =>
+    http.get<User>('/user')
+  `,
+  },
+]

packages/overmind-website/examples/guide/runningsideeffects/object.ts

@@ -0,0 +1,30 @@
+export const js = [
+  {
+    fileName: 'app/effects.js',
+    code: `
+import axios from 'axios'
+
+export const http = {
+  getUser() {
+    return axios.get('/user')
+  }
+}
+  `,
+  },
+]
+
+export const ts = [
+  {
+    fileName: 'app/effects.ts',
+    code: `
+import * as axios from 'axios'
+import { User } from './state'
+
+export const http = {
+  getUser() {
+    return axios.get<User>('/user')
+  }
+}
+  `,
+  },
+]

packages/overmind-website/guides/beginner/01_getstarted.md

@@ -1,6 +1,6 @@
 # Get started with Overmind
 
-Before you fire up your first Overmind application be sure to check out the [Why Overmind?]() guide.
+Before you fire up your first Overmind application you might want to read the release article [There is more to state management than state](https://medium.com/@christianalfoni/there-is-more-to-state-management-than-state-60ad75e24ea6).
 
 To get started with Overmind you have to set up a project. You can do this with [webpack](https://webpack.js.org/) or [parceljs](https://parceljs.org/) on your local machine, or go to [codesandbox.io](https://codesandbox.io/) to play around with Overmind directly in the browser.
 

packages/overmind-website/guides/beginner/04_runningsideeffects.md

@@ -0,0 +1,32 @@
+# Running side effects
+
+Developing applications is not only about managing state, but also managing side effects. A side effect is typically exampled with an http request or talking to local storage. In Overmind we just call this **effects**. Actually the state is also a type of effect. Unlike state all other effects has to be defined.
+
+Let us start with a simple example.
+
+```marksy
+<Example name="guide/runningsideeffects/axios" view />
+```
+
+We are just exporting an existing library from our effects file and include it in the application config. Now Overmind is aware of an **http** effect. It can track it for debugging and all operations will have it injected.
+
+Let us put it to use in an operation that grabs the user of the application.
+
+```marksy
+<Example name="guide/runningsideeffects/getuser" />
+```
+
+That was basically it. We can take this a step further though. Maybe you want to create a more explicit API effect.
+
+```marksy
+<Example name="guide/runningsideeffects/object" />
+```
+
+Or maybe you need it to be configurable. Improving testability and environment variables.
+
+```marksy
+<Example name="guide/runningsideeffects/class" />
+```
+
+## Summary
+Adding side effects is easy, but it is worth taking notice that you also get a chance to map an existing tool to something more domain specific. As we did here converting the general **get** method to a **getUser** method. If you think about it from an application standpoint it is kinda weird that it makes arbitrary requests to a string url. It is better to create an abstraction around it to keep things more maintainable and predictable.

packages/overmind-website/src/utils.tsx

@@ -146,4 +146,13 @@ export const compile = marksy({
       <img src={`/images/${src}`} style={{ width: '100%' }} />
     ),
   },
+  elements: {
+    a({ href, children }) {
+      return (
+        <a href={href} target={href.indexOf('http') === 0 ? '_blank' : null}>
+          {children}
+        </a>
+      )
+    },
+  },
 })