docs(root): 📝 Add lifecycle diagram to the readme

This close barbajs#443.
codegorrilla · Feb 12, 2020 · 145ce2c · 145ce2c
1 parent c708949
commit 145ce2c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -63,6 +63,13 @@ It helps reduce the delay between your pages, minimize browser HTTP requests and
     - receive the same [`data` argument](https://barba.js.org/docs/userguide/syntax/#data-argument)
 - [Sync mode](https://barba.js.org/docs/userguide/syntax/#Sync-mode) will start `leave` and `enter` transitions concurrently
 
+## How it works?
+BarbaJS make your site work like a *Single Page Application* (SPA), allowing you to create smooth transitions **without having to reload the whole site**, reducing load delay, browser requests and enhancing user's web experience. Here is a small lifecycle diagram that describe **Barba's main concept** when navigating between two pages.
+
+[![Barba lifecycle diagram](lifecycle-diagram.png "Barba lifecycle diagram")](lifecycle-diagram.png?raw=true)
+
+> Note that using the `sync` property will end in a different page lifecycle, see https://barba.js.org/docs/userguide/syntax/#Sync-mode
+
 ## How to contribute
 
 If you want to report a bug or if you just want to request for a new feature/improvement, please **follow [those instructions](CONTRIBUTING.md) before**.

diff --git a/lifecycle-diagram.png b/lifecycle-diagram.png